/*-----------------------------------------------------------------------------------

  Theme Name: Gramen - Roofing Services HTML5 Template
  Author: Gramentheme
  Support: https://gramentheme.com/contact-us/
  Description: Gramen - Roofing Services HTML5 Template
  Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

1	THEME DEFAULT CSS START
2	TYPOGRAPHY CSS START 
3	BOOTSTRAP CUSTOMIZE
4	COMMON CLASSES CSS START 
5	MFP CUSTOMIZE
6	BODY OVERLAY 
7	OFFCANVAS CSS START
8	SECTION TITLE CSS START
9	SECTION SUB TITLE CSS START
10	SPACE CSS START
11	BACKTOTOP CSS START
12	PRELOADER CSS START
13	MEAN MENU CSS START
14	SEARCH CSS START
15	MENU CSS START
16	HEADER CSS START
17	BUTTON CSS START
18	FOOTER CSS START
19	BANNER CSS START
20	ABOUT US CSS START
21	SERVICE SLIDER CSS START
22	CTA 1 CSS START
23	PROJECT SLIDER CSS START
24	TEAM CSS START
25	CHOOSE CSS START
26	TESTIMONIALS CSS START
27	BLOG STYLE ONE CSS START
28	BRAND CSS START
29	BANNER TWO CSS START
30	FEATURES CSS START
31	ABOUT US 2 CSS START
32	SERVICE TAB CSS START
33	WORK PROCESS CSS START
34	TEXT SLIDER CSS START
35	PROJECT SLIDER CSS START
36	TESTIMONIALS TWO CSS START
37	ICON BOX COUNTER CSS START
38	HELP FORM CSS START
39	BLOG STYLE TWO CSS START
40	FOOTER STYLE TWO CSS START
41	BANNER STYLE THREE CSS START
42	ABOUT THREE CSS START
43	HELP FORM THREE CSS START
44	SERVICE THREE CSS START
45	CHOOSE THREE CSS START
46	FAQ CSS START
47	DARK VERSION CSS START
48	PAGE TITLE CSS START
49	MAP CSS START
50	SERVICE PAGE CSS START
51	PROJECTS PAGE CSS START
52	TEAM DETAILS CSS START
53	PAGINATION CSS START
54	BLOG DETAILS CSS START
55	CONTACT PAGE CSS START
56	ANIMATION CSS START


**********************************************/

/*----------------------------------------*/
/*  01. THEME DEFAULT CSS START
/*----------------------------------------*/


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


.main-menu ul li.has-dropdown > a::after, .main-menu ul li .submenu, .main-menu ul li .mega-menu, .main-menu ul li .mega-menu li ul li a::before, .df-search-area, .mean-container .mean-nav ul li > a > i, .mean-container .mean-nav ul li a.mean-expand.mean-clicked i, .offcanvas__contact-icon i, .offcanvas__overlay, .fill-btn.has-border i, a,
.btn,
button,
span,
svg,
p,
input,
select,
textarea,
li,
img,
.transition-3,
h1,
h2,
h3,
h4,
h5,
h6, i[class^=flaticon-], .body__overlay {
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}

/* variables */

:root { 
  --primary-font: 'Inter', sans-serif;
  --secondary-font: 'Roboto', sans-serif;
 
  --theme-color: #EA1826;
  --theme-color-1: #102039;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
}

/*---------------------------------
    Typography css start 
---------------------------------*/
body {
  font-family: var(--secondary-font);
  font-size: 16px;
  font-weight: normal;
  color: var(--theme-color-1);
  line-height: 26px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--primary-font);
  color: var(--theme-color-1);
  margin-top: 0px;
  line-height: 1.3;
  margin-bottom: 0;
  font-weight: 600;
}

h1 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.12;
}

h2 {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.18;
}

h1 span {
  font-weight: 500;
}

h2 span {
  display: inline;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

h2 .section-title-small,
h2 .section-title-secondary {
  display: block;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  padding-top: 10px;
}

h3 {
  font-size: 36px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 22px;
}

h6 {
  font-size: 18px;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

p {
  color: #787878;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 15px;
  line-height: 26px;
}

a {
  text-decoration: none;
}

a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}

a:focus,
a:hover {
  color: inherit;
  text-decoration: none;
}

a,
button {
  color: inherit;
  outline: none;
  border: none;
  background: transparent;
}

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

button:hover {
  cursor: pointer;
}

button:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

hr:not([size]) {
  margin: 0;
  border-color: rgba(22, 22, 22, 0.1);
  opacity: 1;
  border-width: 1px;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
textarea {
  outline: none;
  background-color: #fff;
  height: 65px;
  width: 100%;
  line-height: 65px;
  font-size: 16px;
  color: var(--theme-color);
  padding-left: 21px;
  padding-right: 21px;
  border-radius: 5px;
  border: 1px solid var(--theme-color-1);
}

*::-moz-selection {
  background: #151515;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: #151515;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #151515;
  color: #fff;
  text-shadow: none;
}

*::-moz-placeholder {
  color: #787878;
  opacity: 1;
  font-size: 14px;
}

*::placeholder {
  color: #787878;
  opacity: 1;
  font-size: 14px;
}

/*----------------------------------------
   Bootstrap customize
-----------------------------------------*/
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 3rem;
}

.row {
  --bs-gutter-x: 3rem;
}

figure{
  margin: 0 !important;
}

@media (min-width: 1441px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1350px;
  }
}
.large-container {
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 15px;
}

.large-container-1 {
  max-width: 1740px;
  margin: 0 0 0 auto;
  padding: 0 15px;
}
.medium-container {
  max-width: 1400px;
  margin: 0  auto;
  padding: 0 15px;
}
.medium-container-2 {
  max-width: 1480px;
  margin: 0  auto;
  padding: 0 15px;
}

.small-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}


.g-40,
.gx-40 {
  --bs-gutter-x: 40px;
}

.g-40,
.gy-40 {
  --bs-gutter-y: 40px;
}

.g-50,
.gx-50 {
  --bs-gutter-x: 50px;
}

.g-50,
.gy-50 {
  --bs-gutter-y: 50px;
}

.g-60,
.gy-60 {
  --bs-gutter-y: 60px;
}

.g-0, .gy-0 {
  --bs-gutter-y: 0;
}

.g-0, .gx-0 {
  --bs-gutter-x: 0;
}

.g-15 {
  --bs-gutter-y: 15px;
  --bs-gutter-x: 15px;
}

/*---------------------------------
    common classes css start 
---------------------------------*/
.w-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-img img {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.fix {
  overflow: hidden;
}

.clear {
  clear: both;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.z-index-1 {
  z-index: 1;
}

.z-index-11 {
  z-index: 11;
}

.overflow-y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

.p-relative {
  position: relative;
}

.p-absolute {
  position: absolute;
}

.include-bg {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hr-1 {
  border-top: 1px solid rgb(232, 232, 232);
}

.x-clip {
  overflow-x: clip;
}

.bg-color-1{
  background: var(--theme-color-1);
}

.bg-color-2{
  background: #F1F7FD;
}

.bg-color-3{
  background: #0F1D34 !important;
}
.bg-color-4{
  background: var(--theme-color);
}

.bg-color-5{
  background: #030B19 !important;
}
.bg-color-5-blues{
  background: linear-gradient(270deg, #02102D, #000716, #0E162B, #012546);
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    animation: AnimationName 20s ease infinite;
}

/*----------------------------------------
   Mfp customize
-----------------------------------------*/
.mfp-iframe-holder .mfp-content {
  line-height: 0;
  width: 100%;
  max-width: 1280px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 1000px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 850px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .mfp-iframe-holder .mfp-content {
    max-width: 820px;
  }
}

.mfp-close {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
}
.mfp-close:hover {
  color: #fff;
}
.mfp-close::after {
  position: absolute;
  content: "\f00d";
  height: 100%;
  width: 100%;
  font-family: "Font Awesome 6 Pro";
  font-size: 31px;
  font-weight: 200;
  right: -20px;
  margin-top: -25px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .mfp-close::after {
    right: 15px;
    margin-top: -30px;
  }
}

.body__overlay {
  background-color: #151515;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

.body__overlay {
  background-color: #151515;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
  left: 0;
  opacity: 0;
  visibility: hidden;
}

.body__overlay.opened {
  opacity: 0.7;
  visibility: visible;
}

.bd-sticky {
  position: sticky;
  top: 120px;
}

/*----------------------------------------
    Body Overlay 
-----------------------------------------*/
.body-overlay {
  background-color: #151515;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s 0s ease-out;
  -moz-transition: all 0.3s 0s ease-out;
  -ms-transition: all 0.3s 0s ease-out;
  -o-transition: all 0.3s 0s ease-out;
  transition: all 0.3s 0s ease-out;
}

.body-overlay.opened {
  opacity: 0.7;
  visibility: visible;
}


/*----------------------------------------*/
/* OFFCANVAS CSS START
/*----------------------------------------*/
.offcanvas__close button {
  height: 45px;
  width: 45px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  background-color: var(--theme-color-1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
.offcanvas__close button i {
  color: #fff;
}
.offcanvas__info {
  background: #191919 none repeat scroll 0 0;
  border-left: 2px solid var(--theme-color);
  position: fixed;
  right: 0;
  top: 0;
  width: 400px;
  height: 100%;
  -webkit-transform: translateX(calc(100% + 80px));
  -moz-transform: translateX(calc(100% + 80px));
  -ms-transform: translateX(calc(100% + 80px));
  -o-transform: translateX(calc(100% + 80px));
  transform: translateX(calc(100% + 80px));
  -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.offcanvas__info ::-webkit-scrollbar {
  display: none;
}
@media (max-width:450px) {
  .offcanvas__info {
    width: 300px;
  }
}
.offcanvas__info.info-open {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}
.offcanvas__logo a img {
  width: 150px;
}
.offcanvas__wrapper {
  position: relative;
  height: 100%;
  padding: 30px 30px;
}
@media (max-width: 575px) {
  .offcanvas__wrapper {
    padding: 20px;
  }
}
.offcanvas__top {
  padding-bottom: 20px;
}
.offcanvas__search {
  position: relative;
}
.offcanvas__search input {
  width: 100%;
  height: 50px;
  line-height: 40px;
  padding-right: 20px;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid #CECECE;
  font-size: 14px;
  color: #fff;
  padding-left: 0;
}
.offcanvas__search input::placeholder {
  color: #fff;
}
.offcanvas__search input:focus {
  border-color: #fff;
}
.offcanvas__search button {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px;
  color: #fff;
}
.offcanvas__search button:hover {
  color: var(--theme-color);
}
.offcanvas__text p {
  margin-bottom: 25px;
}
.offcanvas__contact h4 {
  font-size: 22px;
  margin-bottom: 20px;
  font-weight: var(--bd-fw-bold);
  color: #fff;
}
.offcanvas__contact ul li:not(:last-child) {
  margin-bottom: 20px;
}
.offcanvas__contact ul li {
  transition: transform 0.25s ease;
}
.offcanvas__contact ul li:hover {
  transform: translateX(4px);
}
.offcanvas__contact ul li:hover i {
  color: #fff;
  border-color: #1f5f99;
  background-color: #1f5f99;
}
.offcanvas__contact-icon i {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  border: 1px solid var(--clr-border-1);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  position: relative;
  z-index: 5;
}
.offcanvas__contact-text a {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.offcanvas__contact-text a:hover {
  color: #61a8ee;
}
.offcanvas__quote {
  margin: 22px 0 10px;
}
.offcanvas__quote .primary-btn-1 {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.offcanvas__social {
  margin-top: 26px;
  margin-bottom: 30px;
  text-align: center;
}
.offcanvas__social ul {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-left: 0;
}
.offcanvas__social ul li {
  display: inline-block;
}
.offcanvas__social ul li:not(:last-child) {
  margin-right: 0;
}
.offcanvas__social ul li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #fff;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  z-index: 5;
  background-color: transparent;
}
.offcanvas__social ul li a:hover {
  color: #fff;
  border: 1px solid var(--theme-color-1);
  background-color: var(--theme-color-1);
}
.offcanvas__notification-icon a {
  font-size: 14px;
  color: #fff;
  position: relative;
}
.offcanvas__notification-icon a .notification-count {
  position: absolute;
  top: -4px;
  right: -13px;
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 22px;
  font-size: 12px;
  font-weight: 600;
  background-color: var(--theme-color);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}
.offcanvas__notification-text p {
  margin-bottom: 0;
  font-weight: 500;
  color: #fff;
  font-size: 14px;
}
.offcanvas__notification-text p .notification-number {
  color: var(--theme-color);
}
.offcanvas__notification-text p a {
  color: var(--theme-color);
}
.offcanvas__overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #151515;
  z-index: 900;
  top: 0;
  opacity: 0;
  visibility: hidden;
  right: 0;
}
.offcanvas__overlay.overlay-open {
  opacity: 0.8;
  visibility: visible;
}

.sidebar__toggle {
  cursor: pointer;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 500ms ease-in-out;
}

.sidebar__toggle:hover {
  color: var(--theme-color);
}

.sidebar__toggle:hover .bar-icon span,
.sidebar__toggle:hover .bar-icon span small {
  background: #fff;
}

@media (max-width: 992px) {
  .app__offcanvas-overlay.overlay-open {
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 10;
  }
}

.offcanvas__contact-icon {
  margin-inline-end: 15px;
}



/*----------------------------------------*/
/*  SECTION TITLE CSS START
/*----------------------------------------*/


.section-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 46px;
}

h2.section-title {
  font-size: 44px;
  font-weight: 800;
  line-height: 1.18;
}

h2.section-title span {
  display: inline;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
}

h2.section-title .section-title-small,
h2.section-title .section-title-secondary {
  display: block;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.25;
  padding-top: 10px;	
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .section-title {
    font-size: 48px !important;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .section-title {
    font-size: 42px !important;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-title {
    font-size: 36px !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title {
    font-size: 45px !important;
  }
  .section-title br {
    display: none;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .section-title {
    font-size: 32px !important;
  }
  .section-title br {
    display: none;
  }
}
@media (max-width:450px) {
  .section-title {
    font-size: 28px !important;
  }
}

@media only screen and (min-width: 992px) {
  h2.section-title {
    font-size: 44px !important;
    font-weight: 800;
    line-height: 1.18;
  }
}

/*----------------------------------------*/
/*  SECTION SUB TITLE CSS START
/*----------------------------------------*/

.section-sub-title{
  position: relative;
  color: var(--theme-color);
  font-family: var(--primary-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  text-transform: uppercase;
  margin-left: 45px;
}

.section-sub-title:before {
  content: "\e92c";
  font-family: 'icomoon';
  color: var(--theme-color);
  border: 1px solid var(--theme-color);
  position: absolute;
  top: 2px;
  left: -45px;
  height: 16px;
  width: 36px;
  padding: 2px 1px;
  display: flex;
  justify-content: start;
  align-items: center;
  border-radius: 50px;
}

.section-sub-title.no-border:before {
  border: none;
}

/*----------------------------------------*/
/*  SPACE CSS START
/*----------------------------------------*/


.section-space-40-60 {
  padding-top: 40px;
  padding-bottom: 60px;
}
.section-space-40-80 {
  padding-top: 40px;
  padding-bottom: 80px;
}

.section-space-40-100 {
  padding-top: 40px;
  padding-bottom: 100px;
}
.section-space-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}


.section-space-60 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.section-space-60-20 {
  padding-top: 60px;
  padding-bottom: 20px;
}
.section-space-60-40 {
  padding-top: 60px;
  padding-bottom: 40px;
}

.section-space-60-80 {
  padding-top: 60px;
  padding-bottom: 80px;
}
.section-space-60-100 {
  padding-top: 60px;
  padding-bottom: 100px;
}

.section-space-80 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.section-space-80-20 {
  padding-top: 80px;
  padding-bottom: 20px;
}
.section-space-80-40 {
  padding-top: 80px;
  padding-bottom: 40px;
}

.section-space-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.section-space {
  padding-top: 120px;
  padding-bottom: 120px;
}
.section-space-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}
.section-space-v2 {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space {
    padding-top: 100px;
    padding-bottom: 100px;
  }
	 .section-space-v2 {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.section-space-top {
  padding-top: 120px;
}
.section-space-top-80 {
  padding-top: 80px;
}
.section-space-top-60 {
  padding-top: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space-top {
    padding-top: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-top {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space-top {
    padding-top: 70px;
  }
}

.section-space-bottom {
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space-bottom {
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-bottom {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space-bottom {
    padding-bottom: 70px;
  }
}

.section-space-medium {
  padding: 100px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space-medium {
    padding: 80px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-medium {
    padding: 60px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space-medium {
    padding: 60px 0;
  }
}

.section-space-medium-top {
  padding-top: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space-medium-top {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-medium-top {
    padding-top: 60px;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .section-space-medium-top {
    padding-top: 60px;
  }
}

.section-space-medium-bottom {
  padding-bottom: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space-medium-bottom {
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-medium-bottom {
    padding-bottom: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space-medium-bottom {
    padding-bottom: 60px;
  }
}

.section-space-small {
  padding: 80px 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .section-space-small {
    padding: 80px 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-small {
    padding: 60px 0;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space-small {
    padding: 60px 0;
  }
}

.section-space-small-top {
  padding-top: 80px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-space-small-top {
    padding-top: 60px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .section-space-small-top {
    padding-top: 60px;
  }
}


/*----------------------------------------*/
/*  BACKTOTOP CSS START
/*----------------------------------------*/
.backtotop-wrap {
  position: fixed;
  bottom: 35px;
  right: 30px;
  height: 44px;
  width: 44px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
  color: #151515;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.backtotop-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.2);
}
.backtotop-wrap.active-progress {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}
.backtotop-wrap::after {
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  content: "\f062";
  text-align: center;
  line-height: 44px;
  font-size: 16px;
  font-weight: 900;
  left: 0;
  top: 0;
  height: 44px;
  width: 44px;
  cursor: pointer;
  display: block;
  z-index: 1;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}
.backtotop-wrap svg path {
  fill: none;
}
.backtotop-wrap svg.backtotop-circle path {
  stroke: #ccc;
  stroke-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 400ms linear;
  -o-transition: all 400ms linear;
  transition: all 400ms linear;
}


/*----------------------------------------*/
/*  PRELOADER CSS START
/*----------------------------------------*/
#preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: #121212;
  z-index: 999;
}

.bd-loader-wrap {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  width: 100%;
}

.bd-loader-inner {
  position: fixed;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.bd-loader {
  margin-left: 92px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .bd-loader {
    transform: scale(0.8);
    margin-left: 66px;
  }
}

.bd-loader-item {
  position: absolute;
  width: 6px;
  height: 80px;
  margin-top: -45px;
  border-radius: 0px;
  background-color: var(--theme-color);
  animation: bd-loader-aim 0.8s infinite;
  animation-direction: alternate-reverse;
}

.bd-loader .bd-loader-item:nth-child(1) {
  margin-left: 0px;
}
.bd-loader .bd-loader-item:nth-child(2) {
  margin-left: -14px;
  animation-delay: 0.1s;
}
.bd-loader .bd-loader-item:nth-child(3) {
  margin-left: -28px;
  animation-delay: 0.2s;
}
.bd-loader .bd-loader-item:nth-child(4) {
  margin-left: -42px;
  animation-delay: 0.3s;
}
.bd-loader .bd-loader-item:nth-child(5) {
  margin-left: -56px;
  animation-delay: 0.4s;
}
.bd-loader .bd-loader-item:nth-child(6) {
  margin-left: -70px;
  animation-delay: 0.5s;
}
.bd-loader .bd-loader-item:nth-child(7) {
  margin-left: -84px;
  animation-delay: 0.6s;
}
.bd-loader .bd-loader-item:nth-child(8) {
  margin-left: -98px;
  animation-delay: 0.7s;
}

@keyframes bd-loader-aim {
  0% {
    height: 2px;
    margin-top: 0;
    transform: rotate(0deg);
  }
  100% {
    height: 80px;
    transform: rotate(0deg);
  }
}
/*----------------------------------------*/
/*  MEAN MENU CSS START
/*----------------------------------------*/

.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  text-transform: capitalize;
  border-top: 1px solid #CECECE;
}
.mean-container .mean-nav ul li a:last-child {
  border-bottom: 0;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--theme-color);
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 5px;
  padding: 0 !important;
  height: 30px;
  width: 30px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 30px;
  top: 0;
  font-weight: 400;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

.mean-container .mean-nav ul li > a > i {
  display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
  display: inline-block;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.mean-container .mean-nav ul li .mega-menu li a {
  height: 200px;
  width: 100%;
  padding: 0;
  border-top: 0;
  margin-bottom: 20px;
}

/*----------------------------------------*/
/*  SEARCH CSS START
/*----------------------------------------*/
.df-search-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background-color: #fff;
  padding: 40px 15px;
  visibility: visible;
  opacity: 0;
  transform: translateY(-120%);
}
.df-search-area.opened {
  transform: translateY(0%);
  visibility: visible;
  opacity: 1;
}
.df-search-input {
  position: relative;
}
.df-search-input button {
  position: absolute;
  top: 54%;
  right: 20px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 24px;
}
.df-search-input button:hover {
  color: var(--tp-theme-primary);
}
.df-search-category span {
  color: var(--clr-common-black);
}
.df-search-category a {
  font-size: 14px;
  margin-left: 5px;
  color: #787878;
}
.df-search-category a:hover {
  color: var(--theme-color-1);
}

.df-search-input input[type="text"] {
  border: 1px solid #e5e5e5;
}

.df-search-category a:hover {
  color: #151515;
}

.df-search-close {
  display: none;
}
.df-search-close-btn {
  border-radius: 50%;
  background: #ECECEC;
  border: 9px solid transparent;
  color: var(--clr-common-black);
  width: 36px;
  height: 36px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.df-search-close-btn::after, .df-search-close-btn::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 90%;
  top: 46%;
  left: 1px;
  transform-origin: 50% 50%;
  background-color: var(--clr-common-black);
  opacity: 1;
  -moz-transition: -moz-transform ease 0.25s;
  -webkit-transition: -webkit-transform ease 0.25s;
  -o-transition: -o-transform ease 0.25s;
  -ms-transition: -ms-transform ease 0.25s;
  transition: transform ease 0.25s;
}
.df-search-close-btn::before {
  transform: rotate(45deg);
}
.df-search-close-btn::after {
  transform: rotate(-45deg);
}
.df-search-close-btn:hover::before {
  transform: rotate(-45deg);
}
.df-search-close-btn:hover::after {
  transform: rotate(45deg);
}

/*----------------------------------------*/
/*  MENU CSS START
/*----------------------------------------*/
.main-menu ul {
  margin-bottom: 0;
}
.main-menu ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  margin-inline-end: 22px;
}

/* Testimonials page */
.fcc-section-intro {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  color: #6f7785;
}

.fcc-testimonials-two-section {
  overflow: hidden;
  background: #102039;
}

.fcc-testimonials-two-section > .small-container {
  width: min(1480px, calc(100% - 120px));
  max-width: none;
}

.fcc-testimonials-two-section .section-title {
  color: #fff;
}

.fcc-testimonials-two-section .fcc-section-intro {
  margin-left: 0;
  color: rgba(255, 255, 255, 0.74);
}

.fcc-testimonial-shape {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.18;
  pointer-events: none;
}

.fcc-testimonials-two-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px;
  padding-left: 0;
}

.fcc-testimonials-two-grid--partial {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 990px;
  margin-left: auto;
  margin-right: auto;
}

.fcc-testimonials-slider {
  position: relative;
  overflow: hidden;
  padding: 0 58px 26px;
}

.fcc-testimonials-slider .swiper-slide {
  overflow: visible;
}

.fcc-testimonial-swiper-dot .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.65);
  opacity: 1;
  position: relative;
}

.fcc-testimonial-swiper-dot .swiper-pagination-bullet-active {
  background: var(--theme-color);
}

.fcc-testimonial-swiper-dot .swiper-pagination-bullet-active::before {
  content: "";
  position: absolute;
  top: -11px;
  left: -11px;
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
  border-radius: 50%;
}

.fcc-testimonials-two-card {
  margin-left: 0;
  min-height: 242px;
  aspect-ratio: 2.05 / 1;
  padding: 34px 34px 42px 70px;
  border-radius: 12px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
}

.fcc-testimonials-two-card .author-image img {
  object-fit: contain;
  background: #eef2f7;
  padding: 8px;
  box-shadow: 0 12px 30px rgba(16, 32, 57, 0.16);
}

.fcc-testimonials-two-card p {
  margin-bottom: 0;
  line-height: 1.58;
  font-size: 15px;
}

.fcc-testimonials-two-card .icon-1 {
  top: 28px;
  right: 28px;
}

.fcc-testimonials-two-card .author-image {
  top: 50%;
  transform: translateY(-50%);
}

.fcc-testimonials-two-card h4 {
  margin-bottom: 2px;
}

.fcc-testimonial-cta {
  padding: 70px 0;
  background: linear-gradient(120deg, #102039 0%, #164b89 100%);
}

.fcc-testimonial-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: #fff;
}

.fcc-testimonial-cta-inner h3 {
  color: #fff;
  margin: 10px 0 12px;
  font-size: 36px;
}

.fcc-testimonial-cta-inner p {
  max-width: 740px;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

.fcc-testimonial-faq {
  background: #f5f7fa;
}

.fcc-faq-modern {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 44px;
  align-items: stretch;
}

.fcc-faq-modern-intro {
  padding: 44px;
  background: linear-gradient(135deg, #102039 0%, #153f75 100%);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(16, 32, 57, 0.16);
}

.fcc-faq-modern-intro .section-title {
  color: #fff;
}

.fcc-faq-modern-intro p {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.78);
}

.fcc-faq-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.fcc-faq-highlights span {
  display: block;
  padding: 16px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

.fcc-faq-highlights strong {
  display: block;
  color: var(--theme-color);
  font-size: 24px;
  line-height: 1;
}

.fcc-rounded-card,
.fcc-trust-grid article {
  border-radius: 12px;
  overflow: hidden;
}

.fcc-faq-accordion .accordion-item {
  margin-bottom: 16px;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(16, 32, 57, 0.08);
  overflow: hidden;
}

.fcc-faq-accordion .accordion-button {
  gap: 16px;
  padding: 24px 28px;
  font-weight: 800;
  color: var(--primary-color);
  box-shadow: none;
  background: #fff;
}

.fcc-faq-accordion .accordion-button span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--theme-color);
  font-size: 14px;
}

.fcc-faq-accordion .accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background: #f8fbff;
}

.fcc-faq-accordion .accordion-body {
  padding: 0 28px 26px 86px;
  color: #6f7785;
}

.fcc-trust-choice-section {
  background: #fff;
}

.fcc-trust-choice-section.section-space {
  padding-top: 80px;
  padding-bottom: 70px;
}

.fcc-trust-choice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 28%);
  gap: 44px;
  align-items: start;
}

.fcc-trust-choice-content p {
  max-width: 820px;
  margin-top: 15px;
  color: #6f7785;
  line-height: 1.68;
}

.fcc-trust-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.fcc-trust-inline-logos {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  max-width: 820px;
  margin-top: 34px;
}

.fcc-trust-inline-logos span {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #f7f9fc;
  border: 1px solid #e7edf5;
  border-radius: 12px;
}

.fcc-trust-inline-logos img {
  max-height: 48px;
  width: auto;
}

.fcc-trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.fcc-trust-grid article {
  min-height: 132px;
  padding: 18px 20px;
  background: #f7f9fc;
  border: 1px solid #e7edf5;
}

.fcc-trust-card-heading {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.fcc-trust-grid i {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
  font-size: 17px;
}

.fcc-trust-grid h5 {
  margin-bottom: 0;
  font-size: 19px;
  line-height: 1.22;
}

.fcc-trust-grid p {
  margin-bottom: 0;
  line-height: 1.55;
}

.fcc-client-logo-section {
  background: #f7f9fc;
}

.fcc-client-logo-section .swiper-slide span {
  display: flex;
  min-height: 110px;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(16, 32, 57, 0.06);
}

.fcc-testimonial-blog {
  background: #fff;
}

.fcc-news-cta-section {
  padding: 0 0 20px;
  background: #fff;
}

.fcc-news-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.45fr);
  gap: 28px;
  align-items: center;
  padding: 34px;
  background: linear-gradient(120deg, #102039 0%, #164b89 100%);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(16, 32, 57, 0.16);
}

.fcc-news-cta h3 {
  margin: 10px 0 8px;
  color: #fff;
  font-size: 30px;
}

.fcc-news-cta p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.fcc-news-cta form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
}

.fcc-news-cta input {
  min-height: 54px;
  padding: 0 18px;
  border: 0;
  outline: 0;
}

.fcc-news-cta button {
  min-height: 54px;
  border-radius: 0;
}

.fcc-rounded-card {
  box-shadow: 0 18px 45px rgba(16, 32, 57, 0.08);
}

@media only screen and (max-width: 991px) {
  .fcc-testimonials-two-section > .small-container {
    width: min(720px, calc(100% - 40px));
  }

  .fcc-testimonials-slider {
    padding-left: 56px;
    padding-right: 20px;
  }

  .fcc-testimonials-two-grid,
  .fcc-testimonials-two-grid--partial,
  .fcc-faq-modern,
  .fcc-trust-choice-layout,
  .fcc-trust-grid {
    grid-template-columns: 1fr;
  }

  .fcc-testimonials-two-grid {
    gap: 28px;
  }

  .fcc-testimonial-cta-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .fcc-news-cta {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .fcc-trust-grid {
    grid-template-columns: 1fr;
  }

  .fcc-trust-inline-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fcc-news-cta {
    padding: 26px;
  }

  .fcc-news-cta form {
    grid-template-columns: 1fr;
  }

  .fcc-news-cta button {
    width: 100%;
  }

  .fcc-testimonials-two-grid {
    padding-left: 0;
    gap: 24px;
  }

  .fcc-testimonials-slider {
    padding-left: 0;
    padding-right: 0;
  }

  .fcc-testimonials-two-card {
    aspect-ratio: auto;
    padding-left: 30px;
    margin-top: 52px;
  }

  .fcc-testimonials-two-card .author-image {
    left: 26px;
    top: -50px;
  }

  .fcc-faq-modern-intro {
    padding: 30px;
  }

  .fcc-faq-highlights {
    grid-template-columns: 1fr;
  }

  .fcc-faq-accordion .accordion-button {
    padding: 20px;
  }

  .fcc-faq-accordion .accordion-body {
    padding: 0 20px 22px 78px;
  }

  .fcc-testimonial-cta-inner h3 {
    font-size: 30px;
  }
}

/* Modern get quote form */
.quote-modern-section {
  padding: 90px 0 70px;
  background:
    linear-gradient(120deg, rgba(9, 25, 48, 0.97), rgba(13, 58, 111, 0.9)),
    url("../imgs/bg/choose-bg-commercial-02.webp");
  background-size: cover;
  background-position: center;
}

.quote-modern-shell {
  display: block;
}

.quote-modern-intro {
  max-width: 980px;
  margin: 0 auto 38px;
  color: #fff;
  text-align: center;
}

.quote-modern-intro h1 {
  margin: 14px 0 18px;
  color: #fff;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.12;
}

.quote-modern-intro p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1.65;
}

.quote-modern-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 30px 0;
}

.quote-modern-highlights div {
  padding: 18px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
}

.quote-modern-highlights strong {
  display: block;
  color: #fff;
  font-size: 30px;
  line-height: 1;
}

.quote-modern-highlights span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.quote-modern-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.quote-modern-trust li {
  position: relative;
  padding-left: 28px;
  text-align: left;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 700;
}

.quote-modern-trust li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--theme-color);
}

.quote-modern-card {
  width: 100%;
  padding: 34px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 18px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
}

.quote-modern-card-header {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #e6ebf2;
}

.quote-modern-card-header span {
  color: var(--theme-color);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
}

.quote-modern-card-header h2 {
  margin: 8px 0;
  color: var(--primary-color);
  font-size: 34px;
}

.quote-modern-card-header p {
  margin: 0;
  color: #657081;
}

.quote-modern-group {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid #edf1f6;
}

.quote-modern-group-title {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.quote-modern-group-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}

.quote-modern-group-title h3 {
  margin: 0;
  color: var(--primary-color);
  font-size: 21px;
}

.quote-modern-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.quote-modern-card input,
.quote-modern-card select,
.quote-modern-card textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #dce3ed;
  border-radius: 10px;
  background: #f7f9fc;
  color: var(--primary-color);
}

.quote-modern-card textarea {
  grid-column: 1 / -1;
  min-height: 92px;
  margin-top: 12px;
  resize: vertical;
}

.quote-modern-submit {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-top: 22px;
}

.quote-modern-submit button {
  min-width: 260px;
}

.quote-modern-submit p {
  margin: 0;
  color: #657081;
}

.quote-modern-submit a {
  color: var(--theme-color);
  font-weight: 800;
}

@media only screen and (max-width: 1199px) {
  .quote-modern-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 767px) {
  .quote-modern-section {
    padding: 60px 0;
  }

  .quote-modern-intro h1 {
    font-size: 38px;
  }

  .quote-modern-card {
    padding: 22px;
  }

  .quote-modern-grid,
  .quote-modern-highlights {
    grid-template-columns: 1fr;
  }

  .quote-modern-group {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .quote-modern-submit button {
    width: 100%;
    min-width: 0;
  }
}
.main-menu ul li:last-child {
  margin-inline-end: 0;
}
.main-menu ul li a {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #151515;
  padding: 40px 0;
  text-align: left;
  position: relative;
}
.main-menu ul li.has-dropdown > a {
  position: relative;
}
/* .main-menu ul li.has-dropdown > a::after {
  content: "\e122";
  -webkit-transform: translateY(1px);
  -moz-transform: translateY(1px);
  -ms-transform: translateY(1px);
  -o-transform: translateY(1px);
  transform: translateY(1px);
  font-size: 5px;
  font-family: "Font Awesome 6 Pro";
  font-weight: 600;
  margin-inline-start: 5px;
  display: inline-block;
} */
.main-menu ul li.has-mega-menu {
  position: static;
}
.main-menu ul li .submenu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 240px;
  background: #fff;
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transform-origin: top center;
  color: var(--theme-color);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}
.main-menu ul li .submenu li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.main-menu ul li .submenu li.has-dropdown > a::after {
  content: "+";
  position: absolute;
  top: 50%;
  inset-inline-end: 14px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #151515;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}
.main-menu ul li .submenu li a {
  position: relative;
  z-index: 11;
  color: #151515;
  font-weight: 600;
  font-size: 14px;
  padding: 0 42px 0 20px;
  padding-bottom: 11px;
  padding-top: 11px;
  width: 100%;
  border-left: 5px solid transparent;
  border-bottom: 1px solid #eeeeee;
}

.main-menu ul li .submenu li:last-child a {
  border-bottom: none;
}

.main-menu ul li .submenu li .submenu {
  inset-inline-start: 100%;
  top: 0;
  visibility: hidden;
  opacity: 0;
}
.main-menu ul li .submenu li:hover > a {
  background: #ECECEC;
  border-left-color: #1f5f99;
}

.main-menu > nav > ul > li > a[href="residential-services.html"] + .submenu li:hover > a {
  border-left-color: var(--theme-color);
}

.main-menu ul li .submenu li:not(.menu-featured-city):hover > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #1f5f99;
  transform: translateY(-50%);
  z-index: 12;
}

.main-menu > nav > ul > li > a[href="residential-services.html"] + .submenu li:not(.menu-featured-city):hover > a::before {
  border-left-color: var(--theme-color);
}
.main-menu ul li .submenu li.has-dropdown:hover > a::after {
  color: #1f5f99;
  content: "\2192";
}

.main-menu > nav > ul > li > a[href="residential-services.html"] + .submenu li.has-dropdown:hover > a::after {
  color: var(--theme-color);
}
.main-menu ul li .submenu li:hover > .submenu {
  -webkit-transform: translateY(1);
  -moz-transform: translateY(1);
  -ms-transform: translateY(1);
  -o-transform: translateY(1);
  transform: translateY(1);
  visibility: visible;
  opacity: 1;
}
.main-menu ul li .mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 40px 225px;
  background: #fff;
  box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1);
  visibility: hidden;
  opacity: 0;
  transform-origin: top center;
  border: 1px solid #d9d9d9;
  border-bottom: 0;
  z-index: 99;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .main-menu ul li .mega-menu {
    padding: 40px 150px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .main-menu ul li .mega-menu {
    padding: 25px 25px;
    padding-inline-start: 80px;
  }
}
.main-menu ul li .mega-menu li {
  float: left;
  width: 25%;
  margin-inline-end: 0;
  text-align: left;
}
[dir=rtl] .main-menu ul li .mega-menu li {
  float: right;
  margin-left: 0;
  text-align: right;
}
.main-menu ul li .mega-menu li .mega-menu-title {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #151515;
  cursor: text;
  padding: 0;
  display: inline-block;
  margin-bottom: 15px;
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 5px;
}
.main-menu ul li .mega-menu li .mega-menu-title::before {
  display: none;
}
.main-menu ul li .mega-menu li ul li {
  width: 100%;
  float: none;
  margin-bottom: 5px;
}
.main-menu ul li .mega-menu li ul li:last-child {
  margin-bottom: 0;
}
.main-menu ul li .mega-menu li ul li a {
  font-weight: 500;
  font-size: 15px;
  color: #5D636A;
  padding: 0;
  position: relative;
}
.main-menu ul li .mega-menu li ul li a::before {
  position: absolute;
  content: "";
  left: 0;
  right: auto;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0;
  height: 1.2px;
  background-color: var(--theme-color-1);
}
[dir=rtl] .main-menu ul li .mega-menu li ul li a::before {
  right: 0;
  left: auto;
}
.main-menu ul li .mega-menu li ul li:hover > a {
  color: var(--theme-color-1);
}
.main-menu ul li .mega-menu li ul li:hover > a::before {
  background-color: var(--theme-color-1);
}
.main-menu ul li .mega-menu li:hover > .mega-menu-title {
  color: var(--theme-color-1);
  padding-inline-start: 0;
}
.main-menu ul li .mega-menu li:hover > a {
  color: var(--theme-color-1);
}
.main-menu ul li .mega-menu li a:hover {
  padding-inline-start: 18px;
}
[dir=rtl] .main-menu ul li .mega-menu li a:hover {
  padding-inline-start: 18px;
  padding-inline-end: 0px;
}
.main-menu ul li .mega-menu li a:hover::before {
  width: 12px;
}
.main-menu ul li:hover > a {
  color: var(--theme-color);
}

.main-menu ul li.active > a {
  color: var(--theme-color);
}

.main-menu ul li:hover > a::after {
  color: var(--theme-color-1);
}
/* .main-menu ul li:hover.has-dropdown > a::after {
  content: "\e122";
} */
.main-menu ul li:hover > .submenu {
  visibility: visible;
  opacity: 1;
}
.main-menu ul li:hover .mega-menu {
  visibility: visible;
  opacity: 1;
}
.main-menu-2 ul li a {
  color: #fff;
  position: relative;
}
.main-menu-2 ul li:hover > a {
  color: #fff;
}
.main-menu-2 ul li:hover > a::after {
  color: #fff;
}



/*----------------------------------------*/
/*  HEADER CSS START
/*----------------------------------------*/

/* ══════════════════════════════════════════════
   MOBILE MENU Z-INDEX & OVERFLOW FIX
   Add to bottom of main.css
   ══════════════════════════════════════════════ */

/* 1. Hero overflow:hidden is clipping the offcanvas */
.vh-banner {
  overflow: visible !important;
}

/* 2. Offcanvas panel above everything */
.offcanvas__info {
  z-index: 999999 !important;
}

/* 3. Offcanvas overlay above hero */
.offcanvas__overlay {
  z-index: 999998 !important;
}

/* 4. Body overlay above hero */
.body__overlay,
.body-overlay {
  z-index: 999997 !important;
}

/* 5. Header above hero always */
#header-sticky,
.header-area {
  z-index: 999996 !important;
  overflow: visible !important;
}

/* 6. Mean nav mobile menu */
.mean-container,
.mean-container .mean-nav {
  z-index: 999995 !important;
}

/* Keep the desktop links from wrapping while the hamburger navigation is active. */
@media (max-width: 1199px) {
  .mean__menu-wrapper.d-none.d-xl-block {
    display: none !important;
  }
}

.header-transparent {
  position: absolute;
  inset-inline-start: 0;
  margin: auto;
  width: 100%;
  z-index: 99;
}

.bar-icon {
  /* width: 22px;
  height: 15px; */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  font-size: 40px;
  transform: scaleX(-1);
}
.bar-icon span {
  width: 100%;
  height: 2px;
  background: var(--theme-color-1);
  display: inline-block;
}
.bar-icon span:nth-child(2) {
  position: relative;
  width: 6.56px;
}
.bar-icon span:nth-child(2) small {
  position: absolute;
  height: 100%;
  background: var(--theme-color-1);
  left: 12.56px;
  width: 18.06px;
  z-index: 555;
}
.bar-icon.is-white span {
  background: #fff;
}
.bar-icon.is-white span:nth-child(2) small {
  background: #fff;
}

.bar-icon span:nth-child(3) {
  position: relative;
  width: 10px;
  margin: 0 0 0 auto;
}

.header-top-notice > p {
  margin-bottom: 0;
  color: #fff;
  font-weight: var(--bd-fw-medium);
  font-size: 14px;
}

.header-area {
  position: relative;
  z-index: 2;
  padding: 0 50px;
  overflow-x: clip;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .header-area {
    padding: 20px 15px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-area {
    padding: 0 15px;
  }
}
.header-area .fill-btn {
  height: 50px;
}

.header-logo {
  max-width: 200px;
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-logo {
    max-width: 160px;
  }
}
@media (max-width:450px) {
  .header-logo {
    max-width: 145px;
  }
}
.header-logo img {
  width: 100%;
}

.header-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 80px;
}

.header-right {
  gap: 40px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-area {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-area .large-container {
    padding-left: 8px;
    padding-right: 8px;
  }

  .header-logo {
    max-width: 145px;
  }

  .header-right {
    gap: 18px;
  }

  .main-menu ul li {
    margin-inline-end: 14px;
  }

  .main-menu ul li a {
    font-size: 14px;
  }

  .header-link .primary-btn-1 {
    padding-left: 22px;
    padding-right: 22px;
  }
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 150px;
  background: var(--theme-color-1);
}

.header-top-contact-info span {
  color: #fff;
  display: flex;
  justify-content: center;
  font-size: 14px;
}

.header-top-contact-info span a:hover {
  color: var(--theme-color);
}

.header-top-contact-info {
  display: inline-flex;
  gap: 50px;
}

.header-top-contact-info span.email:before {
  content: "\e90a";
  font-family: 'icomoon';
  position: absolute;
  top: 0;
  left: -25px;
}

.header-top-contact-info span.time:before {
  content: "\e92b";
  font-family: 'icomoon';
  position: absolute;
  top: 0;
  left: -25px;
}

.header-top-socials {
  color: #fff;
  display: inline-flex;
  gap: 20px;
  font-size: 14px;
}

.header-top-socials span:hover > a{
  color: var(--theme-color);
}

.header-top-socials .fcc-header-panel-toggle {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

.header-top-socials .fcc-header-panel-toggle:hover {
  color: #ffffff;
  background: var(--theme-color);
  border-color: var(--theme-color);
}

.header-style-two {
  background: transparent;
  position: absolute;
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}


.header-style-two .sidebar__toggle .bar-icon {
  color: #fff;
}

/* .header-style-two .sidebar__toggle,
.header-style-two .bar-icon span,
.header-style-two .bar-icon span:nth-child(2) small
 {
  border: 1px solid #fff;
} */

.header-style-two .main-menu ul li a,
.header-style-two .search-toggle-open.header-search .search-icon,
.header-style-two .header-shopping-cart .cart-icon,
.header-style-two .header-link-1 .content span,
.header-style-two .header-link-1 .content h6
{
  color: #fff;
}

.header-style-two .main-menu ul li a{
  padding: 45px 0;
}

.header-style-two .main-menu ul li.active > a{
  color: var(--theme-color);
}

.header-style-two .main-menu ul li:hover > a{
  color: var(--theme-color);
}

.header-style-two.sticky {
  background: #151515;
}

/* gramen css */
@media only screen and (max-width: 1399px){  

  .header-action .header-link-1 {
    display: none;
}
        
}
/* gramen css */
@media only screen and (max-width: 991px){ 
  .header-top,
  .header-shopping-cart.my-auto,
  .search-toggle-open.header-search {
    display: none;
    } 
     
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-left {
    gap: 45px;
  }
}

.header-action {
  display: flex;
  align-items: center;
}

@media only screen and (min-width: 1200px) {
  .header-main {
    position: relative;
  }

  .header-left,
  .header-action {
    position: relative;
    z-index: 2;
  }

  .header-action {
    margin-left: auto;
  }

  .header-action .header-link-1 .icon {
    width: 43px;
    height: 43px;
    font-size: 18px;
  }

  .header-action .header-link-1 .icon:before {
    width: 53px;
    height: 53px;
  }
}

/* Mid-width desktop header fit */
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .header-area {
    padding-left: 0;
    padding-right: 0;
  }

  .header-area .large-container {
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .header-main,
  .header-right,
  .main-menu > nav > ul {
    flex-wrap: nowrap;
  }

  .header-main {
    gap: 14px;
  }

  .header-left {
    flex: 0 0 auto;
    gap: 18px;
  }

  .header-right {
    flex: 1 1 auto;
    min-width: 0;
    gap: 14px;
    align-items: center;
  }

  .mean__menu-wrapper,
  .main-menu,
  .main-menu > nav {
    flex: 0 1 auto;
    min-width: 0;
  }

  .mean__menu-wrapper {
    margin-left: auto;
  }

  .header-logo {
    max-width: 165px;
  }

  .main-menu > nav > ul {
    display: flex;
    align-items: center;
  }

  .main-menu ul li {
    flex: 0 0 auto;
    margin-inline-end: 14px;
  }

  .main-menu ul li a {
    font-size: 13px;
    white-space: nowrap;
  }

  .header-action .header-link-1 {
    display: none;
  }

  .header-link .primary-btn-1 {
    padding: 15px 24px;
    font-size: 12px;
    white-space: nowrap;
  }
}

@media only screen and (min-width: 1500px) and (max-width: 1599px) {
  .header-area .large-container {
    max-width: 100%;
    padding-left: 28px;
    padding-right: 28px;
  }

  .header-left {
    gap: 32px;
  }

  .header-right {
    gap: 22px;
    flex-wrap: nowrap;
  }

  .mean__menu-wrapper {
    margin-left: max(220px, calc((100vw - 1200px) / 2 - 9px));
  }

  .header-main,
  .main-menu > nav > ul {
    flex-wrap: nowrap;
  }

  .main-menu > nav > ul {
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  .main-menu ul li {
    margin-inline-end: 16px;
  }

  .main-menu ul li a {
    font-size: 14px;
    white-space: nowrap;
  }

  .header-logo {
    max-width: 180px;
  }

  .header-link .primary-btn-1 {
    padding-left: 28px;
    padding-right: 28px;
    white-space: nowrap;
  }

  .header-link-1 .content h6 {
    font-size: 18px;
    white-space: nowrap;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1999px) {
  .header-area .large-container {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }

  .header-main {
    gap: 14px;
    flex-wrap: nowrap;
  }

  .header-left {
    flex: 0 0 auto;
    gap: 20px;
  }

  .header-logo {
    max-width: 172px;
  }

  .header-right {
    flex: 1 1 auto;
    min-width: 0;
    gap: 18px;
    align-items: center;
    flex-wrap: nowrap;
  }

  .mean__menu-wrapper,
  .main-menu,
  .main-menu > nav {
    flex: 0 1 auto;
    min-width: 0;
  }

  .mean__menu-wrapper {
    margin-left: auto;
  }

  .main-menu > nav > ul {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .main-menu ul li {
    flex: 0 0 auto;
    margin-inline-end: 15px;
  }

  .main-menu ul li a {
    font-size: 14px;
    white-space: nowrap;
  }

  .header-action {
    flex: 0 0 auto;
    gap: 15px;
  }

  .header-link .primary-btn-1 {
    min-height: 44px;
    padding: 13px 22px;
    font-size: 13px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .header-link-1 {
    gap: 9px;
  }

  .header-link-1 .icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .header-link-1 .icon:before {
    width: 48px;
    height: 48px;
  }

  .header-link-1 .content span {
    font-size: 12px;
    line-height: 18px;
  }

  .header-link-1 .content h6,
  .header-link-1 .content h6 a {
    font-size: 18px;
    line-height: 1.15;
    white-space: nowrap;
  }
}

@media only screen and (min-width: 1200px) {
  .header-main {
    overflow: visible;
  }
}

.header-2 {
  padding: 0 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-2 {
    padding: 0 30px;
  }
}

@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) {
  .header-2 {
    padding: 20px 0;
  }
}

.bar-icon-2 {
  width: 35px;
  height: 20px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.bar-icon-2 span {
  width: 100%;
  height: 2px;
  background: var(--clr-text-secondary);
  display: inline-block;
}
.bar-icon-2 span:nth-child(1) {
  margin-inline-start: -10px;
}
.bar-icon-2:hover span:nth-child(2) {
  margin-inline-start: 0;
}
.bar-icon-2.is-white span {
  background: #fff;
}

.header-main-3 {
  display: grid;
  grid-template-columns: 40% auto 40%;
  align-items: center;
  justify-content: space-between;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .header-main-3 {
    grid-template-columns: 50% auto 35%;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-main-3 {
    grid-template-columns: 50% auto 38%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-main-3 {
    grid-template-columns: auto auto;
  }
}
@media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) {
  .header-main-3 {
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
  }
}

.header-contact-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-contact-text span {
  font-size: 13px;
  color: var(--clr-text-body);
}
.header-contact-text h6 a:hover {
  color: var(--theme-color-1);
}

.sticky {
  position: fixed !important;
  top: 0;
  z-index: 111;
  inset-inline-end: 0;
  inset-inline-start: 0;
  width: 100%;
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  background: #fff;
  -webkit-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  -moz-box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
  box-shadow: 0px 10px 20px 0px rgba(8, 0, 42, 0.08);
}

.header-area.sticky .main-menu-2 ul li a {
  color: #151515;
}
.header-area.sticky .main-menu-2 ul li:hover > a::after {
  color: #151515;
}
.header-area.sticky .bar-icon-2.is-white span {
  background: #151515;
}


.search-toggle-open.header-search .search-icon,
.header-shopping-cart .cart-icon {
  color: var(--theme-color-1);
  cursor: pointer;
}

.search-toggle-open.header-search .search-icon:hover,
.header-shopping-cart .cart-icon:hover {
  color: var(--theme-color);
}

.header-link-1{
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-link-1 .icon {
  position: relative;
  height: 47px;
  width: 47px;
  border-radius: 50%;
  background: red;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  transform: rotate(-45deg);
}

.header-link-1 .icon:before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  height: 57px;
  width: 57px;
  border: 1px solid red;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-link-1 .content span {
  color: var(--theme-color-1);
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}

.header-link-1 .content h6 {
  color: var(--theme-color-1);
}

.header-link-1:hover .content h6 {
  color: var(--theme-color);
}

/*----------------------------------------*/
/*  BUTTON CSS START
/*----------------------------------------*/

.primary-btn-1{
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--theme-color);
  border: 1px solid var(--theme-color);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 12px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s
}

.primary-btn-1 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color-1);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-1:hover {
  color: #fff;
  border: 1px solid var(--theme-color-1);
}

.primary-btn-1:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-1:active {
  background-color: #fff
}


/* button style 1 BLUE */
.primary-btn-1-blue{
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  background-color: #1857b8;
  border: 1px solid #1857b8;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 12px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s
}

.primary-btn-1-blue span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #0b3f99;
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-1-blue:hover {
  color: #fff;
  border: 1px solid #2f6fca;
}

.primary-btn-1-blue:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-1-blue:active {
  background-color: #fff;
}

/* button style 1 BLUE WHITE*/
.primary-btn-1-blue-white{
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  background-color: #1857b8;
  border: 1px solid #1857b8;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 12px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s
}

.primary-btn-1-blue-white span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #0b3f99;
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-1-blue-white:hover {
  color: #fff;
  border: 1px solid #2f6fca;
}

.primary-btn-1-blue-white:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-1-blue-white:active {
  background-color: #fff;
}

/* button style 1 RED to WHITE*/
.primary-btn-1-red{
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--theme-color);
  border: 1px solid var(--theme-color);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 12px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s
}

.primary-btn-1-red span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color-1);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-1-red:hover {
  color: #fff;
  border: 1px solid var(--theme-color-1);
}

.primary-btn-1-red:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-1-red:active {
  background-color: #fff;
}

/* button style 1 RED to BLUE*/
.primary-btn-1-red-blue {
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--theme-color);
  border: 1px solid var(--theme-color);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 12px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s
}

.primary-btn-1-red-blue span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color-1);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-1-red-blue:hover {
  color: #fff;
  border: 1px solid var(--theme-color);
}

.primary-btn-1-red-blue:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-1-red-blue:active {
  background-color: #fff;
}


/* button style 1 WHITE to RED */
.primary-btn-1-white-red{
  color: var(--theme-color);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  background-color: #fff;
  border: 1px solid var(--theme-color-1);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 12px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s
}

.primary-btn-1-white-red span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-1-white-red:hover {
  color: #fff;
  border: 1px solid #fff;
}

.primary-btn-1-white-red:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-1-white-red:active {
  background-color: #fff;
}


/* button style 1 WHITE to BLUE */

.primary-btn-1-white-blue{
  color: var(--theme-color-1);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  background-color: #fff;
  border: 1px solid var(--theme-color-1);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 12px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s
}

.primary-btn-1-white-blue span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color-1);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-1-white-blue:hover {
  color: #fff;
  border: 1px solid #fff;
}

.primary-btn-1-white-blue:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-1-white-blue:active {
  background-color: var(--theme-color-1);
}


/* button style two */

.primary-btn-2{
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--theme-color);
  border: 1px solid var(--theme-color);
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 15px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s
}

.primary-btn-2 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color-1);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-2:hover {
  color: #fff;
  border: 1px solid var(--theme-color-1);
}

.primary-btn-2:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-2:active {
  background-color: #fff
}

/* button style 3 */

.primary-btn-3 {
  color: var(--theme-color);
  font-family: var(--secondary-font);
  font-size: 14px;
  font-weight: 600;
  background-color: var(--theme-color-1);
  border: 1px solid var(--theme-color-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: normal;
  white-space: nowrap;
  padding: 20px 10px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s;
  border-radius: 6px 6px;
  flex-direction: column;
  height: 45px;
  width: 205px;
}

.primary-btn-3 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color-1);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-3:hover {
  color: #fff;
  border: 1px solid var(--theme-color-1);
}

.primary-btn-3:hover span {
  width: 255%;
  height: 1000.5px
}

.primary-btn-3:active {
  background-color: #fff
}

.primary-btn-3 i {
  margin-top: 10px;
}

.primary-btn-3:hover i {
  animation: wobble-vertical 1s ease-in-out 1;
}

/* Sitewide primary button hover readability */
.primary-btn-1:hover,
.primary-btn-1-blue:hover,
.primary-btn-1-blue-white:hover,
.primary-btn-1-red:hover,
.primary-btn-1-red-blue:hover,
.primary-btn-2:hover,
.primary-btn-3:hover,
.primary-btn-4:hover {
  color: #fff !important;
}

.primary-btn-1:hover i,
.primary-btn-1-blue:hover i,
.primary-btn-1-blue-white:hover i,
.primary-btn-1-red:hover i,
.primary-btn-1-red-blue:hover i,
.primary-btn-2:hover i,
.primary-btn-3:hover i,
.primary-btn-4:hover i {
  color: #fff !important;
}

.primary-btn-1-white-red:hover,
.primary-btn-1-white-red:hover i {
  color: #fff !important;
}

.primary-btn-1-white-blue:hover,
.primary-btn-1-white-blue:hover i {
  color: #fff !important;
}

.primary-btn-1-white-blue span,
.primary-btn-1-blue-white span {
  background-color: #1857b8;
}

.header-link-1:hover .content h6,
.header-link-1:hover .content h6 a {
  color: #1857b8;
}


/* button style Four */

.primary-btn-4{
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  background-color: var(--theme-color-1);
  border: 1px solid var(--theme-color-1);
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 15px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: all .6s
}

.primary-btn-4 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-4:hover {
  color: #fff;
  border: 1px solid var(--theme-color);
}

.primary-btn-4:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-4:active {
  background-color: #fff
}


/* button style five */

.primary-btn-5{
  color: var(--theme-color-1);
  font-size: 14px;
  font-weight: 500;
  background-color: #fff;
  border: 1px solid #ECECEC;
  display: inline-flex;
  align-items: center;
  line-height: normal;
  white-space: nowrap;
  padding: 15px 20px;
  gap: 10px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  text-transform: uppercase;
  transition: all .6s
}

.primary-btn-5 span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color);
  transition: all .6s;
  transform: translate(-50%,-50%);
  z-index: -1
}

.primary-btn-5:hover {
  color: #fff;
  border: 1px solid var(--theme-color);
}

.primary-btn-5:hover span {
  width: 225%;
  height: 1000.5px
}

.primary-btn-5:active {
  background-color: #fff
}

/*----------------------------------------*/
/*  FOOTER CSS START
/*----------------------------------------*/

.footer-top{
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-main {
  border-top: 0px solid var(--theme-color);
}

.footer-main .footer-top {
  padding-top: 0;
  padding-bottom: 10px;
}
.footer-widget-1 p {
  color: #fff;
}

.footer-widget-1 .footer-socials span {
  color: #fff;
  height: 36px;
  width: 36px;
  border: 1px solid #fff;
  font-size: 13px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 500ms ease;
}

.footer-widget-1 .footer-socials {
  display: inline-flex;
  gap: 10px;
}

.footer-widget-1 .footer-socials span:hover {
  background: var(--theme-color);
  color: #fff;
  border: 1px solid var(--theme-color);
}

.footer-title{
  color: #fff;
}

.footer-widget-2 ul.service-list li {
  position: relative;
  color: #fff;
  margin-bottom: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
  margin-left: 30px;
}

.footer-widget-2 ul.service-list li::before {
  content: "\e902";
  font-family: 'icomoon';
  position: absolute;
  top: 0;
  left: -30px;
  transition: all 500ms ease;
}

.footer-widget-2 ul.service-list li:hover {
 color: var(--theme-color);
}

.footer-widget-3 .content .date {
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  margin-left: 20px;
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 9px;
}

.footer-widget-3 .content h6 {
  color: #fff;
  font-size: 16px;
  line-height: 26px;
}

.footer-widget-3 .content h6:hover {
  color: var(--theme-color);
}

.footer-widget-3 .content .date:before {
  content: "\e905";
  font-family: 'icomoon';
  color: var(--theme-color);
  position: absolute;
  top: 0;
  left: -20px;
}

.footer-widget-3 .footer-blog-post-box {
  display: flex;
  gap: 16px;
}

.footer-widget-3 .footer-blog-post-box img {
  width: 78px;
  height: 78px;
}

.footer-widget-4 p{
  color: #fff;
}

.footer-subscribe input[type=email] {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  height: inherit;
  border-radius: 0;
  margin-bottom: 10px;
  height: 60px;
}
.footer-subscribe button {
  width: 100%;
  justify-content: center;
}
.footer-subscribe-news input[type=email] {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  height: inherit;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 20px 20px;
  max-height: 40px;
}

.footer-subscribe-news button {
  width: 100%;
  justify-content: center;
}

.footer-bottom span {
  color: #fff;
}

.footer-bottom span {
  color: #fff;
}

.footer-bottom span:hover a {
  color: var(--theme-color);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom .right-area {
  display: inline-flex;
  gap: 30px;
}


ul.footer-contact-info-widget h6 {
  color: #fff;
  font-size: 16px;
}
ul.footer-contact-info-widget p {
  color: #fff;
}

ul.footer-contact-info-widget li {
  display: flex;
  align-items: self-start;
  gap: 20px;
  color: #fff;
  margin-bottom: 20px;
}

ul.footer-contact-info-widget .icon {
  font-size: 24px;
  color: #fff;
}

.footer-contact-news-row {
  padding: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-contact-news-wide {
  width: 100%;
  padding: 38px 0 10px;
  background: linear-gradient(120deg, rgba(16, 48, 89, 0.42), rgba(20, 82, 145, 0.26) 48%, rgba(9, 24, 47, 0.08));
  border: 0;
  border-radius: 0;
  margin-top: 40px;
  margin-bottom: 2px !important;
}

.footer-main .footer-bottom {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.footer-wide-container {
  width: 90%;
  max-width: 1580px;
}

.footer-contact-news-layout {
  display: flex;
  align-items: center;
  gap: 5%;
  width: 100%;
}

.footer-contact-area {
  flex: 0 1 58%;
}

.footer-newsletter-area {
  flex: 0 1 37%;
}

.footer-brand-contact figure.image img {
  max-width: 220px;
}

.footer-contact-inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

ul.footer-contact-info-widget.footer-contact-inline li {
  margin-bottom: 0;
}

.footer-contact-inline a,
.footer-contact-inline p {
  color: rgba(255, 255, 255, 0.82);
}

.footer-contact-strip a,
.footer-contact-strip p {
  font-size: 15px;
}

.footer-contact-strip a {
  transition: color 250ms ease;
}

.footer-contact-strip li {
  transition: transform 250ms ease;
}

.footer-contact-strip li:hover {
  transform: translateY(-2px);
}

.footer-contact-strip li:hover .icon {
  color: #fff;
  background: var(--theme-color);
  box-shadow: 0 10px 24px rgba(239, 22, 39, 0.24);
}

.footer-contact-strip a:hover {
  color: #fff;
}

.footer-contact-strip {
  height: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 26px;
}

.footer-contact-strip li {
  padding: 0;
  border-radius: 0;
  background: transparent;
  gap: 14px;
  align-items: flex-start;
}

.footer-contact-strip .icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: all 250ms ease;
}

.footer-contact-strip .icon i {
  font-size: 18px;
}

.footer-contact-strip h6 {
  white-space: nowrap;
}

.footer-newsletter-panel {
  padding: 12px 14px;
  border-radius: 14px;
  background: #153e73;
  border: 0;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);
  height: 100%;
}

.footer-newsletter-panel p {
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 22px;
}

.footer-newsletter-copy {
  max-width: 520px;
  margin-top: -6px;
  margin-bottom: 10px !important;
  font-size: 13px;
  line-height: 1.45;
}

.footer-newsletter-panel .footer-subscribe-news form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.footer-contact-news-wide .footer-newsletter-panel .footer-subscribe-news form {
  grid-template-columns: 1fr 1fr;
}

.footer-newsletter-email-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 0;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07), 0 8px 18px rgba(0, 0, 0, 0.12);
}

.footer-newsletter-panel .footer-subscribe-news input[type=text],
.footer-newsletter-panel .footer-subscribe-news input[type=tel],
.footer-newsletter-panel .footer-subscribe-news input[type=email] {
  margin-bottom: 0;
  width: 100%;
  min-width: 0;
  border-radius: 12px;
  padding: 8px 12px;
  max-height: 32px;
  min-height: 32px;
}

.footer-newsletter-panel .footer-subscribe-news button {
  width: auto;
  white-space: nowrap;
  padding-left: 24px;
  padding-right: 24px;
}

.footer-newsletter-email-row input[type=email] {
  border-radius: 12px 0 0 12px;
  background: transparent;
  border: 0;
  color: var(--primary-color);
  padding-left: 22px;
  text-align: left;
}

.footer-newsletter-email-row input[type=email]::placeholder {
  text-align: left;
}

.footer-newsletter-email-row button {
  margin: 3px;
  border-radius: 9px;
  min-height: 26px;
  padding-top: 6px;
  padding-bottom: 6px;
  box-shadow: 0 6px 14px rgba(239, 22, 39, 0.22);
}

.footer-link-row {
  padding-top: 28px;
}

.footer-main-links-grid {
  display: grid;
  grid-template-columns: 23% 15% 27% 25%;
  gap: 3.33%;
  align-items: flex-start;
}

.footer-link-col {
  min-width: 0;
}

.footer-link-row .footer-widget-2 {
  height: 100%;
}

.footer-title-small {
  font-size: 22px;
}

/* ==============================
   Index Footer Newsletter Redesign
   ============================== */
.index-footer-redesign {
  overflow: visible;
}

.index-footer-newsletter-cta {
  position: relative;
  isolation: isolate;
  min-height: 236px;
  margin-top: 44px;
  background: linear-gradient(90deg, #ee1b2a 0%, #ee1b2a 68%, #d90e1e 100%);
  overflow: visible;
}

.index-footer-newsletter-cta::before {
  content: "";
  position: absolute;
  top: -44px;
  left: calc(30% - 5px);
  width: 50px;
  height: 46px;
  background: #06162a;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 3;
}

.index-footer-newsletter-cta::after {
  content: "";
  position: absolute;
  top: -44px;
  left: 31%;
  right: 0;
  height: 44px;
  background: #ffffff;
  pointer-events: none;
  z-index: 0;
}

.index-footer-newsletter-image {
  position: absolute;
  top: -44px;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 31%;
  height: calc(100% + 44px);
  background-size: cover;
  background-position: center; 
  opacity: 1.0;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
}

.index-footer-newsletter-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 17, 34, 0.);
}

.index-footer-newsletter-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 500px);
  gap: 42px;
  align-items: center;
  margin-left: 33%;
  padding: 46px 0;
}

.index-footer-newsletter-content span {
  display: inline-block;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.index-footer-newsletter-content h3 {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 32px;
  line-height: 1.12;
  font-weight: 900;
}

.index-footer-newsletter-content p {
  max-width: 620px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  line-height: 1.65;
}

.index-footer-newsletter-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  background: rgba(4, 17, 34, 0.0);
  backdrop-filter: blur(12px);
}

.index-footer-newsletter-form input {
  width: 100%;
  height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-color);
  font-size: 14px;
}

.index-footer-newsletter-form input::placeholder {
  color: #697386;
}

.index-footer-email-action {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 158px;
  gap: 0;
  overflow: hidden;
  border-radius: 8px;
}

.index-footer-email-action input {
  border-radius: 8px 0 0 8px;
  border-right: 0;
}

.index-footer-email-action .primary-btn-1 {
  min-height: 42px;
  height: 42px;
  padding: 0 22px;
  border-radius: 4px 8px 8px 4px;
  justify-content: center;
  background: var(--theme-color);
  border-color: var(--theme-color);
  color: #ffffff;
}

.index-footer-email-action .primary-btn-1:hover,
.index-footer-email-action .primary-btn-1:focus {
  background: #cf101f;
  border-color: #cf101f;
}

.index-footer-contact-cta {
  background: linear-gradient(90deg, #102d50 0%, #174676 100%);
  padding: 13px 0;
}

/* Homepage footer color swap: blue newsletter panel, red contact strip. */
.index-footer-color-swap .index-footer-newsletter-cta {
  background: linear-gradient(90deg, #102d50 0%, #102d50 68%, #174676 100%);
}

.index-footer-color-swap .index-footer-contact-cta {
  background: linear-gradient(90deg, #ee1b2a 0%, #d90e1e 100%);
}

.index-footer-color-swap .index-footer-contact-strip .index-footer-quote-btn,
.index-footer-color-swap .index-footer-contact-strip .index-footer-quote-btn:hover,
.index-footer-color-swap .index-footer-contact-strip .index-footer-quote-btn:focus {
  top: 2px;
  border: 1px solid #ffffff !important;
  box-shadow: none;
}

.index-footer-contact-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  color: #ffffff;
  text-align: center;
}

.index-footer-contact-strip a,
.index-footer-contact-strip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.index-footer-contact-strip a:hover {
  color: var(--theme-color);
}

.index-footer-contact-strip i {
  color: #ffffff;
}

.index-footer-contact-strip .index-footer-quote-btn {
  min-height: 40px;
  padding: 12px 30px;
  background: var(--theme-color);
  color: #ffffff;
}

.index-footer-link-area {
  padding-top: 52px !important;
  padding-bottom: 32px !important;
}

.index-footer-redesign .footer-link-row {
  padding-top: 0;
}

.index-footer-redesign .footer-bottom {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.commercial-building-types-section {
  padding-top: 30px;
}

.commercial-building-type-card {
  display: block;
  height: 100%;
  padding: 32px;
  background: #fff;
  border-left: 4px solid var(--theme-color);
  box-shadow: 0 18px 45px rgba(7, 25, 50, 0.08);
  transition: all 300ms ease;
}

.commercial-building-type-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
  font-weight: 700;
}

.commercial-building-type-card h4 {
  margin-bottom: 12px;
  color: var(--primary-color);
}

.commercial-building-type-card p {
  margin-bottom: 0;
  color: #6b6b6b;
}

.commercial-building-type-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 55px rgba(7, 25, 50, 0.13);
}

.linkedin-roof-hero {
  overflow: hidden;
  padding: 90px 0;
  background: #102039;
}

.linkedin-roof-hero-bg,
.linkedin-roof-hero-overlay {
  position: absolute;
  inset: 0;
}

.linkedin-roof-hero-bg {
  background-size: cover;
  background-position: center;
  opacity: 0.38;
}

.linkedin-roof-hero-overlay {
  background: linear-gradient(115deg, rgba(8, 22, 42, 0.98) 0%, rgba(16, 48, 89, 0.9) 50%, rgba(239, 22, 39, 0.32) 100%);
}

.linkedin-roof-container {
  position: relative;
  z-index: 2;
}

.linkedin-roof-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.78fr);
  gap: 56px;
  align-items: center;
}

.linkedin-roof-copy h1 {
  max-width: 780px;
  margin-bottom: 24px;
  color: #fff;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.12;
}

.linkedin-roof-lead {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 20px;
  line-height: 1.7;
}

.linkedin-roof-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-top: 30px;
}

.linkedin-roof-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
}

.linkedin-roof-phone i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--theme-color);
}

.linkedin-roof-proof-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 620px;
  margin-top: 42px;
}

.linkedin-roof-proof-row div {
  padding: 18px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.linkedin-roof-proof-row strong {
  display: block;
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

.linkedin-roof-proof-row span {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
}

.linkedin-roof-form-card {
  padding: 34px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
}

.linkedin-roof-form-heading span {
  color: var(--theme-color);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.linkedin-roof-form-heading h2 {
  margin: 8px 0 10px;
  color: var(--primary-color);
  font-size: 34px;
}

.linkedin-roof-form-heading p {
  margin-bottom: 22px;
  color: #646b75;
}

.linkedin-roof-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.linkedin-roof-form-grid input,
.linkedin-roof-form-grid select,
.linkedin-roof-form-grid textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #d9dee8;
  background: #f7f9fc;
  color: var(--primary-color);
}

.linkedin-roof-form-grid textarea,
.linkedin-roof-form-grid button {
  grid-column: 1 / -1;
}

.linkedin-roof-form-grid textarea {
  min-height: 96px;
  resize: vertical;
}

.linkedin-roof-band {
  padding: 58px 0;
  background: #f4f7fb;
}

.linkedin-roof-band-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 54px;
  align-items: center;
}

.linkedin-roof-band h2,
.linkedin-roof-property-content h2,
.linkedin-roof-final-card h2 {
  color: var(--primary-color);
}

.linkedin-roof-services {
  background: #fff;
}

.linkedin-roof-service-card {
  height: 100%;
  padding: 30px;
  background: #fff;
  border-top: 4px solid var(--theme-color);
  box-shadow: 0 16px 42px rgba(7, 25, 50, 0.08);
}

.linkedin-roof-service-card i {
  display: inline-flex;
  margin-bottom: 20px;
  color: var(--theme-color);
  font-size: 44px;
}

.linkedin-roof-service-card h3 {
  margin-bottom: 12px;
  color: var(--primary-color);
  font-size: 24px;
}

.linkedin-roof-property-grid {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: 58px;
  align-items: center;
}

.linkedin-roof-property-image img {
  width: 100%;
  min-height: 440px;
  object-fit: cover;
}

.linkedin-roof-check-list {
  display: grid;
  gap: 12px;
  margin: 24px 0 30px;
}

.linkedin-roof-check-list li {
  position: relative;
  padding-left: 28px;
  color: var(--primary-color);
  font-weight: 700;
}

.linkedin-roof-check-list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--theme-color);
}

.linkedin-roof-final-cta {
  padding: 60px 0 90px;
}

.linkedin-roof-final-card {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  padding: 42px;
  background: linear-gradient(120deg, #102039, #174d8a);
}

.linkedin-roof-final-card h2,
.linkedin-roof-final-card p {
  color: #fff;
}

.legal-hero {
  overflow: hidden;
  padding: 105px 0 95px;
  background: #102039;
}

.legal-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.22;
}

.legal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(16, 32, 57, 0.96), rgba(16, 48, 89, 0.82), rgba(239, 22, 39, 0.22));
}

.legal-hero .small-container {
  position: relative;
  z-index: 2;
}

.legal-hero h1 {
  max-width: 860px;
  margin: 14px 0 18px;
  color: #fff;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.12;
}

.legal-hero p {
  max-width: 780px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1.7;
}

.legal-breadcrumb {
  margin-top: 24px;
}

.legal-content-section {
  background: #f4f7fb;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.34fr) minmax(0, 1fr);
  gap: 34px;
  align-items: flex-start;
}

.legal-summary-card,
.legal-card {
  background: #fff;
  box-shadow: 0 18px 48px rgba(7, 25, 50, 0.08);
}

.legal-summary-card {
  position: sticky;
  top: 120px;
  padding: 28px;
  border-left: 4px solid var(--theme-color);
}

.legal-summary-card h3,
.legal-card h2 {
  color: var(--primary-color);
}

.legal-summary-card p,
.legal-card p {
  color: #66707d;
}

.legal-summary-card ul {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.legal-summary-card li {
  padding-bottom: 12px;
  border-bottom: 1px solid #e7ebf1;
  color: var(--primary-color);
  font-weight: 700;
}

.legal-card {
  padding: 44px;
}

.legal-card h2 {
  margin: 30px 0 12px;
  font-size: 28px;
}

.legal-card h2:first-child {
  margin-top: 0;
}

.legal-card a,
.legal-summary-card a {
  color: var(--theme-color);
  font-weight: 700;
}

@media only screen and (max-width: 1199px) {
  .linkedin-roof-grid,
  .linkedin-roof-band-grid,
  .linkedin-roof-property-grid {
    grid-template-columns: 1fr;
  }

  .linkedin-roof-copy h1 {
    font-size: 52px;
  }
}

@media only screen and (max-width: 767px) {
  .linkedin-roof-hero {
    padding: 60px 0;
  }

  .linkedin-roof-copy h1 {
    font-size: 40px;
  }

  .linkedin-roof-lead {
    font-size: 17px;
  }

  .linkedin-roof-form-card,
  .linkedin-roof-final-card {
    padding: 24px;
  }

  .linkedin-roof-form-grid,
  .linkedin-roof-proof-row {
    grid-template-columns: 1fr;
  }

  .linkedin-roof-final-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .legal-hero {
    padding: 70px 0;
  }

  .legal-hero h1 {
    font-size: 40px;
  }

  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-summary-card {
    position: relative;
    top: auto;
  }

  .legal-card {
    padding: 28px;
  }
}

.footer-main .footer-shape-3 {
  position: absolute;
  top: -25px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
}



@media only screen and (max-width: 991px){ 
  .footer-widget-2,
  .footer-widget-4{
    padding: 0;
  }

  .footer-contact-news-row,
  .footer-newsletter-panel {
    padding: 18px;
  }

  .footer-contact-news-wide,
  .footer-contact-news-wide .footer-newsletter-panel {
    padding: 18px;
  }

  .footer-contact-news-wide {
    padding-top: 30px;
  }

  .footer-contact-news-wide .footer-newsletter-panel {
    padding: 12px 14px;
  }

  .footer-newsletter-panel .footer-subscribe-news form {
    grid-template-columns: 1fr;
  }

  .footer-contact-news-wide .footer-newsletter-panel .footer-subscribe-news form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-newsletter-panel .footer-subscribe-news button {
    width: 100%;
  }

  .footer-contact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-contact-news-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .footer-contact-area,
  .footer-newsletter-area {
    flex-basis: auto;
    width: 100%;
  }

  .footer-newsletter-area {
    order: 1;
    margin-top: 8px;
  }

  .footer-contact-area {
    order: 2;
  }

  .footer-main-links-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 40px;
  }
     
}

@media only screen and (max-width: 768px){ 

  .footer-bottom {
    flex-direction: column;
    gap: 20px;
}
     
}

@media only screen and (max-width: 575px){
  .footer-contact-inline,
  .footer-contact-strip,
  .footer-newsletter-panel .footer-subscribe-news form {
    grid-template-columns: 1fr;
  }

  .footer-wide-container {
    width: 92%;
  }

  .footer-main-links-grid {
    grid-template-columns: 1fr;
  }
}

/*----------------------------------------*/
/*  BANNER CSS START
/*----------------------------------------*/

.banner-main {
padding: 210px 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.banner-main:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(16, 32, 57, 0.90) 0%, rgba(11, 21, 38, 0.60) 56.25%, rgba(0, 0, 0, 0.00) 97.81%);
}

.banner-area {
  max-width: 720px;
  padding-left: 70px;
}

.banner-sub-title {
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 9px;
  text-transform: uppercase;
  margin-left: 56px;
}

.banner-sub-title:before {
  content: "\e92c";
  font-family: 'icomoon';
  color: var(--theme-color);
  border: 1px solid var(--theme-color);
  position: absolute;
  top: 0px;
  left: -56px;
  height: 20px;
  width: 40px;
  padding: 2px 1px;
  display: flex;
  justify-content: start;
  align-items: center;
  border-radius: 50px;
}

.banner-sub-title.no-border:before {
  border: none;
}

h1.banner-title {
  color: #FFF;
  font-size: 52px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.12;
  padding: 20px 0;
}

p.banner-text {
  color: #FFF;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  padding-bottom: 40px;
  padding-right: 29px;
}

.banner-btn-area {
  display: flex;
  justify-content: start;
  gap: 30px;
}

.banner-btn-area .icon-1 {
  position: relative;
  height: 56px;
  width: 56px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-btn-area .play-btn {
  display: flex;
  justify-content: start;
  align-items: center;
  color: #fff;
  gap: 22px;
}

.banner-btn-area .icon-1:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  transform: scale(0);
  transition: all 500ms ease;
}

.banner-btn-area .icon-1:hover:before {
  transform: scale(1,1);
}

.banner-btn-area .icon-1 i {
  position: relative;
  z-index: 1;
}

.banner-shape-area .shape-1 {
  position: absolute;
  top: 87px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  z-index: 2;
  animation: slide-right-sm 5000ms ease 1;
}

.banner-shape-area .shape-2 {
  position: absolute;
  z-index: 1;
  top: 90px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation: slide-right-sm 5000ms ease 1;
}

.banner-shape-area .shape-3 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 60px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.banner-shape-area .shape-4 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 97px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.banner-shape-area .shape-5 {
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
  animation: slide-left-sm 5000ms ease 1;
}

.banner-dot {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.banner-dot-inner {
  position: absolute;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  z-index: 1;
}

.banner-dot-inner span.swiper-pagination-bullet {
  background: #fff;
  position: relative;
}

.banner-dot-inner span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--theme-color);
  position: relative;  
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner-dot-inner span.swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  content: "";
  position: absolute;    
  height: 30px;
  width: 30px;
  border: 1px solid #fff;
  border-radius: 50%;
}

.banner-three-section .banner-btn-area-2,
.banner-three-section .banner-text,
.banner-three-section .banner-sub-title,
.banner-three-section .banner-title{
  opacity: 1;
  transform: inherit;
}

.banner-btn-area-2,
.banner-btn-area,
.banner-sub-title{
  position: relative;
  opacity: 0;
  -webkit-transform: translateX(50px);
  -moz-transform: translateX(50px);
  -ms-transform: translateX(50px);
  -o-transform: translateX(50px);
  transform: translateX(50px);
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.swiper-slide-active .banner-btn-area-2,
.swiper-slide-active .banner-btn-area,
.swiper-slide-active .banner-sub-title{
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-delay: 1000ms;
  -moz-transition-delay: 1000ms;
  -ms-transition-delay: 1000ms;
  -o-transition-delay: 1000ms;
  transition-delay: 1000ms;
}


.banner-title,
.banner-text {
  opacity: 0;
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -ms-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.swiper-slide-active .banner-title,
.swiper-slide-active .banner-text{
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition-delay: 1000ms;
  -moz-transition-delay: 1000ms;
  -ms-transition-delay: 1000ms;
  -o-transition-delay: 1000ms;
  transition-delay: 1000ms;
}


@media only screen and (max-width: 1650px){ 
 
  .banner-dot-inner {
    left: 20px;
  }
     
}

@media only screen and (max-width: 991px){
  
.banner-dot-inner {
  display: none;
}
  .banner-shape-area .shape-5{
    display: none;
  }
     
}

@media only screen and (max-width: 767px){ 

.banner-main {
  padding: 120px 0px;
}
 
.banner-area {
  padding-left: 0;
}

h1.banner-title {
  font-size: 42px;
  line-height: 62px;
  padding: 15px 0;
}

.banner-shape-area .shape-1 {
  top: 30px;
}

.banner-shape-area .shape-2 {
  top: 35px;
}

     
}

@media only screen and (max-width: 425px){ 
 
.banner-btn-area {
  display: inline-flex;
  gap: 20px;
  flex-direction: column;
}

h1.banner-title {
  font-size: 32px;
  line-height: 52px;
}
     
}

/*----------------------------------------*/
/*  ABOUT US CSS START
/*----------------------------------------*/

.about-us-content-area .icon-box {
  display: flex;
  align-items: self-start;
  gap: 35px;
}

.about-us-content-area .content h5 {
  font-size: 18px;
  margin-bottom: 8px;
}

.about-us-content-area .content h5:hover a {
  color: var(--theme-color);
}

.about-us-section.is-dark .about-us-content-area .content h5 a {
  color: #ffffff;
}

.about-us-section.is-dark .about-us-content-area .content h5:hover a {
  color: var(--theme-color);
}

.about-us-content-area .content p {
  font-family: 'Roboto';
}

.about-us-content-area .icon {
  position: relative;
  font-size: 50px;
  padding: 15px;
  background: rgba(234, 24, 38, 0.06);
  color: var(--theme-color);
}

.about-us-content-area .icon:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  color: #fff;
  transform: scale(0);
  transition: all 500ms ease;
}

.about-us-content-area .icon-box:hover .icon:before {
  transform: scale(1,1);
}

.about-us-content-area .icon-box:hover .icon i {
  position: relative;
  z-index: 1;
  color: #fff;
}

.about-us-image-area .image-2 {
  display: inline-block;
  border: 10px solid #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
}

.about-us-image-area .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.about-us-image-area .play-btn a {
  border-radius: 50%;
  color: #fff;
  z-index: 2;
  position: relative;
  font-size: 17px;
}

.video_player_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 57px;
  width: 57px;
  border-radius: 50%;
  transition: all 500ms ease;
}

.about-us-image-area .video_player_btn:before,
.about-us-image-area .video_player_btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--theme-color);
  opacity: 1;
  border-radius: 50%;
}
.video_player_btn:before {
  z-index: 0;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
          animation: pulse-border 1500ms ease-out infinite;
}
.video_player_btn:after {
  z-index: 1;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.about-us-image-area .image-2-area {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 71px;
}

.about-us-image-area .border-shape {
  position: absolute;
  top: -11px;
  right: 60px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
  z-index: -1;
}

.about-us-image-area .working-area {
  background: var(--theme-color);
  display: inline-block;
  padding: 25px 16px 10px;
  text-align: center;
  position: absolute;
  top: 86px;
  left: -50px;
}

.about-us-image-area .icon-box i {
  color: #fff;
  font-size: 50px;
}

.about-us-image-area .icon-box h4 {
  color: #fff;
  margin-top: 14px;
  margin-bottom: 1px;
}

.about-us-image-area .icon-box p {
  font-family: var(--secondary-font);
  color: #fff;
  position: relative;
}

.about-us-image-area .inner:before {
  content: "";
  position: absolute;
  bottom: -54px;
  left: -16px;
  width: 50px;
  height: 30px;
  background: #c3141f;
  clip-path: polygon(50% 0%, 100% 0, 100% 100%, 48% 47%, 0 0);
}

.about-us-section .shape-1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.about-us-section .shape-2 {
  position: absolute;
  top: 236px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
  z-index: 1;
}

.about-us-section .shape-3 {
  position: absolute;
  top: 352px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

/* shine start */
.about-us-image-area figure.image-1 {
  position: relative;
  display: block;
  overflow: hidden;
}

.about-us-image-area figure.image-1:before {
position: absolute;
top: 0;
left: -75%;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}

.about-us-section:hover figure.image-1:before {
  animation: shine 1.5s;
}
/* shine end */

@media only screen and (max-width: 1400px){ 
 
  .about-us-section .shape-2,
  .about-us-section .shape-3 {
    display: none;
  }

}

@media only screen and (max-width: 1280px){ 
 
  .about-us-image-area .working-area {
    left: 0;
    top: 0;
}

}

@media only screen and (max-width: 991px){ 

.about-us-image-area figure.image-1 img {
  width: 100%;
}

.about-us-image-area .image-2-area{
  bottom: 0;
}
.about-us-section .shape-1,
.about-us-image-area .border-shape{
  display: none;
}
}

@media only screen and (max-width: 425px){ 

.about-us-content-area{
  padding-left: 0;
}

.about-us-content-area .icon-box{
  gap: 20px;
}
}


/*----------------------------------------*/
/*  SERVICE SLIDER CSS START
/*----------------------------------------*/

.service-slider-section h3.section-title {
  color: #fff;
}

.service-slider-area {
  background: #fff;
}

.service-slider-area figure {
  overflow: hidden;
	
border-radius: 20px 20px 4px 4px;
}

.service-slider-area:hover figure img {
  transform: scale(1.1);
}

.service-slider-area .content {
  position: relative;
  padding: 24px 22px 30px;
}

.service-slider-area .content h4:hover{
  color: var(--theme-color);
  transition: inherit;
}
.content h4 {
  font-size: 26px;
  font-weight: 800;
  padding-top: 8px;
  line-height: 1.2;
}

.service-slider-area .icon-box {
  padding: 15px;
  font-size: 50px;
  border: 1px dashed var(--theme-color);
  display: inline-block;
  color: var(--theme-color);
  position: absolute;
  right: 30px;
  top: -55px;
  background: #fff;
  border-radius: 99px;
}

.service-slider-area .icon-box:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 0;
  background: var(--theme-color);
  transition: all 500ms ease;
  border-radius: 99px;
}

.service-slider-area:hover .icon-box:before {
  width: 100%;
  left: 0;
}

.service-slider-area:hover .icon-box i {
  color: #fff;
  position: relative;
  transition: all 500ms ease;
}

.service-slider-area:hover .icon-box {
  border: 1px solid var(--theme-color);
}

.service-slider-area .service-btn {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 6px;
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}

.service-slider-area .service-btn:hover {
  color: var(--theme-color);
}

.service_1_navigation__wrapprer button {
  color: #fff;
  height: 50px;
  width: 50px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  font-size: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}

.service_1_navigation__wrapprer button:hover {
  border: 1px solid #fff;
}

.service-slider-section .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: left;
}

.service-slider-section .shape-2 {
  position: absolute;
  bottom: 120px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.service-slider-section .shape-3 {
  position: absolute;
  bottom: -80px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
}

@media only screen and (max-width: 1400px){ 
.service_1_navigation__wrapprer {
  text-align: left !important;
  margin-top: 0;
  margin-bottom: 30px;
}
.service_1_navigation__wrapprer button{
  margin: 0 20px 0 0;
}

}

/*----------------------------------------*/
/*  CTA 1 CSS START
/*----------------------------------------*/

.cta-1-section:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 50%;
  width: 60%;
  background: #102039;
  padding-top: 10px; 
}

.cta-1-section figure.image {
  clip-path: polygon(0% 0%, 100% 0, 100% 0, 100% 100%, 0% 100%);
  background-color: #fff;
  height: 232px;
}

.cta-1-section .icon-box {
  width: 58px;
  height: 58px;
  background: var(--theme-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transform: rotate(-45deg);
  position: absolute;
  left: -60px;
  top: 80px;
  z-index: 1;
  transition: all 700ms ease;
}

.cta-1-section:hover .icon-box {
  transform: rotate(360deg);
}

.cta-1-section .content {
  padding: 52px 30px;
  background: #fff;
}

.cta-1-section .content:before {
  content: "";
  position: absolute;
  top: -7px;
  left: -33px;
  width: 10px;
  height: 256px;
  background: var(--theme-color);
  transform: rotate(11deg);
}

.cta-1-section .content h5{
  position: relative;
  z-index: 1;
}

.cta-1-section .content h5:hover{
  color: var(--theme-color);
}

.cta-1-section .shape-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 0.1;
}

.box-shadow-1{
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
}

@media only screen and (max-width: 1199px){ 

  .cta-1-section .content {
    padding: 36px 30px;
  }
    
  }

@media only screen and (max-width: 991px){ 

  .cta-1-section figure.image {
    clip-path: content-box;
}
.cta-1-section .content:before{
  background: none;
}
    
}

/*----------------------------------------*/
/*  CTA 1 QUOTE CSS START
/*----------------------------------------*/

.cta-1-section-quote:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 50%;
  width: 60%;
    background: linear-gradient(270deg, #02102D, #000716, #0E162B, #012546);
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    animation: AnimationName 20s ease infinite;
  padding-top: 10px; 
}

.cta-1-section-quote figure.image {
  clip-path: polygon(0% 0%, 100% 0, 100% 0, 100% 100%, 0% 100%);
  background-color: #fff;
  height: 242px;
}

.cta-1-section-quote .icon-box {
  width: 58px;
  height: 58px;
  background: var(--theme-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transform: rotate(-45deg);
  position: absolute;
  left: -60px;
  top: 80px;
  z-index: 1;
  transition: all 700ms ease;
}

.cta-1-section-quote:hover .icon-box {
  transform: rotate(360deg);
}

.cta-1-section-quote .content {
  padding: 52px 30px;
  background: #fff;
}

.cta-1-section-quote .content:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -33px;
  width: 10px;
  height: 280px;
  background: var(--theme-color);
  transform: rotate(8deg);
}

.cta-1-section-quote .content h5{
  position: relative;
  z-index: 1;
}

.cta-1-section-quote .content h5:hover{
  color: var(--theme-color);
}

.cta-1-section-quote .shape-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 0.1;
}

.box-shadow-1{
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
}

@media only screen and (max-width: 1199px){ 

  .cta-1-section-quote .content {
    padding: 36px 30px;
  }
    
  }

@media only screen and (max-width: 991px){ 

  .cta-1-section-quote figure.image {
    clip-path: content-box;
}
.cta-1-section-quote .content:before{
  background: none;
}
    
}


/*----------------------------------------*/
/*  CTA 1 CITIES CSS START
/*----------------------------------------*/

.cta-1-section-cities:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
    background: linear-gradient(270deg, #02102D, #000716, #0E162B, #012546);
    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 10s ease infinite;
    animation: AnimationName 20s ease infinite;
  padding-top: 10px; 
}

.cta-1-section-cities figure.image { 
  height: 270px;
}

.cta-1-section-cities .icon-box {
  width: 58px;
  height: 58px;
  background: var(--theme-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  transform: rotate(-45deg);
  position: absolute;
  left: -35px;
  top: 150px;
  z-index: 1;
  transition: all 700ms ease;
}

.cta-1-section-cities:hover .icon-box {
  transform: rotate(360deg);
}

.cta-1-section-cities .content {
  padding: 52px 30px;
  background: #fff;
}

.cta-1-section-cities .content:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -33px;
  width: 0px;
  height: 280px; 
  transform: rotate(8deg);
}

.cta-1-section-cities .content h5{
  position: relative;
  z-index: 1;
}

.cta-1-section-cities .content h5:hover{
  color: var(--theme-color);
}

.cta-1-section-cities .shape-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 0.1;
}

.box-shadow-1{
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
}

@media only screen and (max-width: 1199px){ 

  .cta-1-section-cities .content {
    padding: 36px 30px;
  }
    
  }

@media only screen and (max-width: 991px){ 

  .cta-1-section-cities figure.image {
    clip-path: content-box;
}
.cta-1-section-cities .content:before{
  background: none;
}
    
}




/*----------------------------------------*/
/*  Project Slider CSS START
/*----------------------------------------*/

.project-slider-area .title-area {
  background: #fff;
  padding: 17px 24px;
  width: calc(100% - 110px);
  clip-path: polygon(0% 0%, 0 0, 94% 0, 100% 100%, 0% 100%);
}

.project-slider-area .icon-area {
  background: var(--theme-color);
  color: #fff;
  padding: 30px;
  font-size: 31px;
  width: 110px;
  text-align: right;
  clip-path: polygon(0% 0%, 0 0, 100% 0, 100% 100%, 20% 100%);
}

.project-slider-area .content-area {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
}

.project-slider-area .title-area {
  background: #fff;
  padding: 17px 24px;
  width: 413px;
  clip-path: polygon(0% 0%, 0 0, 94% 0, 100% 100%, 0% 100%);
}

.project-slider-area .title-area h5:hover{
  color: var(--theme-color);
}

.project-slider-area .icon-area {
  background: var(--theme-color);
  color: #fff;
  padding: 30px;
  font-size: 31px;
  width: 113px;
  text-align: right;
  clip-path: polygon(0% 0%, 0 0, 100% 0, 100% 100%, 20% 100%);
}

.project-slider-area .content-area {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  opacity: 0;
  transition: all 800ms ease;
}

.project-slider-area:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(16, 32, 57, 0.00) -19.59%, rgba(16, 32, 57, 0.80) 92.89%);
  transform: scale(0);
  transition: all 700ms ease;
}

.project-slider-area:hover:before {
  transform: scale(1,1);
}

.project-slider-area:hover .content-area {
  opacity: 1;
}

.project-slider-section .project-active-1 {
  margin-left: -250px;
  margin-right: -250px
}

.project_1_navigation__wrapprer button {
  color: var(--theme-color);
  height: 50px;
  width: 50px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  font-size: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;
}

.project_1_navigation__wrapprer button:hover {
  background: var(--theme-color);
  color: #fff;
}


@media only screen and (max-width: 1440px){ 

  .project-slider-section .project-active-1 {
    margin-left: inherit;
    margin-right: inherit
  }
    
}

@media only screen and (max-width: 1400px){ 

  .project_1_navigation__wrapprer {
    margin-top: 0;
    margin-bottom: 30px;
    text-align: left !important;
}

.project_1_navigation__wrapprer button {
    margin-left: 0;
    margin-right: 20px;
}
    
}

/*----------------------------------------*/
/*  Team CSS START
/*----------------------------------------*/

.team-area-box figure.image:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 0;
  width: 100%;
  background: linear-gradient(3deg, #222328 3.05%, rgba(34, 35, 40, 0.00) 67.67%);
  transition: all 800ms ease;
}

.team-area-box:hover figure.image:before {
  height: 100%;
  top: 0;
}

.team-area-box .content {
  background: #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: -58px;
  left: 24px;
  right: 24px;
}

.team-area-box .content .author-info h5:hover{
  color: var(--theme-color);
}

.team-area-box .content .author-info span{
  font-family: var(--secondary-font);
  color: #787878;
}

.team-area-box .social-links span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: var(--theme-color);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: all 700ms ease;
}

.team-area-box .social-links:hover span {
  background: var(--theme-color-1);
}

.team-area-box .social-links ul {
  position: absolute;
  top: -150px;
  right: 0;
  opacity: 0;
  transition: all 700ms ease;
}

.team-area-box .social-links:hover ul {
  opacity: 1;
}

.team-area-box .social-links ul li {
  width: 40px;
  height: 40px;
  background: var(--theme-color);
  color: #fff;
  font-size: 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.team-area-box .social-links ul li:hover {
  background: var(--theme-color-1);
}

.team-section .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.team-section .shape-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: right bottom;
}


/*----------------------------------------*/
/*  Choose CSS START
/*----------------------------------------*/

.choose-section hr {
  background: rgb(255 255 255 / 20%);
  margin-bottom: 15px;
}

.choose-section hr:nth-last-child(1) {
  display: none;
}

.choose-section .bg-image {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.choose-section .shape-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
}

.choose-section figure.image {
  position: relative;
  padding-top: 60px;
}

.choose-section .section-title {
  color: #fff;
}

.choose-area-icon-box {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 20px;
}

.choose-area-icon-box .icon-box {
  color: var(--theme-color);
  background: #fff;
  padding: 20px;
  font-size: 50px;
  display: inline-block;
}

.choose-area-icon-box h5 {
  color: #fff;
  margin-bottom: 15px;
  font-size: 18px;
}

.choose-area-icon-box h5:hover {
  color: var(--theme-color);
}

.choose-area-icon-box p {
  color: #fff;
  margin: 0;
}

.choose-area-icon-box .icon-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  background: var(--theme-color);
  transition: all 700ms ease;
}

.choose-area-icon-box:hover .icon-box:before {
  transform: scale(1,1);
}

.choose-area-icon-box:hover .icon-box i {
  color: #fff;
  position: relative;
  z-index: 1;
}


@media only screen and (max-width: 1400px){ 

  .choose-section .bg-image{
    display: none;
  }

.choose-section figure.image {
    padding-right: 120px;
}
    
}

@media only screen and (max-width: 1199px){ 

.choose-section figure.image {
    display: none;
    padding: 0;
}

    
}

/*----------------------------------------*/
/*  TESTIMONIALS CSS START
/*----------------------------------------*/

.contact-from {
  padding: 60px;
  background: var(--theme-color);
}

.contact-from .section-sub-title:before{
  color:#fff;
  border: 1px solid #fff;
}
.contact-from label {
  color: #fff;
  margin-bottom: 10px;
}

.contact-from .section-title{
  font-size: 30px;
}

.contact__from-input input {
  width: 100%;
  height: 60px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px;
  font-size: 15px;
  border: none;
  border-radius: 0;
  outline: none;
}

.contact__select{
  position: relative;
}

.contact__select select {
  height: 60px;
  padding: 0 23px;
  line-height: 60px;
  width: 100%;
  border: 0 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow: "";
  text-indent: 0.01px;
  text-overflow: "";
  color: rgba(120, 120, 120, 1);
}

.contact__select:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid rgba(120, 120, 120, 1);
  right: 15px;
  cursor: pointer;
}

.testimonials_btn .primary-btn-4{
  width: 100%;
  justify-content: center;
}

.testimonials-area{
  padding: 30px;
}

.testimonials-box {
  padding: 25px 40px;
  background: #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
}

.testimonials-box figure.image img {
  border-radius: 50%;
}

.testimonials-box .image {
  width: 118px;
  height: 118px;
}

.testimonials-box .autor-upper {
  display: flex;
  justify-content: start;
  gap: 10px;
  align-items: center;
}

.testimonials-box .icon-1 {
  position: absolute;
  top: 10px;
  right: 0;
  font-size: 50px;
  color: var(--theme-color);
}

.testimonials-box h5 {
  font-size: 20px;
}

.testimonials-box span {
  color: #787878;
}

.testimonials-box ul.rating-list {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  color: var(--theme-color);
}

.testimonials_1_navigation__wrapprer button {
  color: var(--theme-color);
  height: 50px;
  width: 50px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  font-size: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
  margin-right: 10px;
}

.testimonials_1_navigation__wrapprer button:hover {
  background: var(--theme-color);
  color: #fff;
}

.testimonial-1-button-prev:before {
  content: "";
  position: absolute;
  top: 23px;
  left: -190px;
  background: #787878;
  width: 168px;
  height: 1px;
}

.testimonial-1-button-next:before {
  content: "";
  position: absolute;
  top: 23px;
  left: 73px;
  background: #787878;
  width: 168px;
  height: 1px;
}

.testimonials-section .bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

.testimonials-section .bg-shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
}

.testimonials-section .bg-shape-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.testimonials-section .bg-shape-3 {
  position: absolute;
  bottom: 92px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}

@media only screen and (max-width: 1300px){ 

  .testimonials-section .bg-shape,
  .testimonials-section .bg-shape-1{
    display: none;
  }
      
  }

  @media only screen and (max-width: 768px){ 

  .testimonial-1-button-prev:before,
  .testimonial-1-button-next:before,
  .testimonials-box .icon-1,
  .testimonials-section .bg-shape-3{
    display: none;
  }

  .testimonials-box{
    padding: 20px;
  }
  .contact-from{
    padding: 35px;
  }
      
  }


/*----------------------------------------*/
/*  BLOG STYLE ONE CSS START
/*----------------------------------------*/

.blog-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-style-one .blog-content {
  background: #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  padding: 30px;
}

.blog-style-one .post-meta span {
  font-size: 14px;
}

.blog-style-one .post-meta span:hover {
 color: var(--theme-color);
}

.blog-style-one .post-meta span i {
  color: var(--theme-color);
  margin-right: 8px;
}

.blog-style-one .post-meta {
  display: inline-flex;
  gap: 26px;
}

.blog-style-one hr {
  margin: 15px 0;
}

.blog-style-one .blog-content .blog-title:hover{
 color: var(--theme-color);
}

/* shine start */
.blog-style-one .blog-image {
  position: relative;
  display: block;
  overflow: hidden;
}

.blog-style-one .blog-image:before {
position: absolute;
top: 0;
left: -75%;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}

.blog-style-one:hover .blog-image:before {
  animation: shine 1.5s;
}
/* shine end */


@media only screen and (max-width: 991px){ 

.blog-title-box {
  align-items: self-start;
  flex-direction: column;
  gap: 20px;
}
    
}

/*----------------------------------------*/
/*  BRAND CSS START
/*----------------------------------------*/

.brand-section img{  
}

.brand-section img:hover{
  filter: grayscale(0);
  opacity: 0.75;
}

.brand-section .brand-active {
  padding-bottom: 34px;
}

.brand-section .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-pagination {
  display: none;
  text-align: center;
  line-height: 1;
}

.brand-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0 5px;
  background: #b8c6d6;
  opacity: 1;
  transition: width 0.25s ease, background 0.25s ease;
}

.brand-pagination .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: 999px;
  background: var(--theme-color);
}

@media (max-width: 575px) {
  .brand-section .small-container {
    max-width: 92%;
    margin-left: auto;
    margin-right: auto;
  }

  .brand-section .brand-active {
    padding-bottom: 30px;
  }

  .brand-section .swiper-wrapper {
    align-items: center;
  }

  .brand-section .swiper-slide span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 82px;
    width: 100%;
    border: 1px solid #e7edf3;
    border-radius: 8px;
    background: #ffffff;
  }

  .brand-section img {
    max-width: 135px;
    max-height: 62px;
    object-fit: contain;
  }

  .brand-pagination {
    display: block;
    position: static;
    margin-top: 12px;
  }
}

/*----------------------------------------*/
/*  BANNER TWO CSS START
/*----------------------------------------*/

.banner-main-2 {
  padding-top: 112px;
  padding-bottom: 125px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.banner-main-2:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 32, 57, 0.7);
}

.banner-area-2 {
  max-width: 775px;
  padding-left: 70px;
}

.banner-btn-area-2{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 30px;
}

.banner-btn-area-2 h6{
  font-weight: 400;
  color: #fff;
  text-transform: capitalize;
}

.banner-main-2 .socials-area {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.banner-main-2 .socials-area li {
  width: 36px;
  height: 36px;
  border: 1px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  color: #fff;
  transition: all 500ms ease;
}

.banner-main-2 .socials-area li:hover {
  background: var(--theme-color);
  border: 1px solid  var(--theme-color);
}

.banner-main-2 .socials-area span {
  color: #fff;
  transform: rotate(-90deg);
  display: block;
  margin-top: 24px;
  position: relative;
  top: 24px;
  right: 20px;
}

.banner-section-2 .shape-1 {
  position: absolute;
  top: 117px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  animation: slide-right-sm 5s ease 1;
}

.banner-section-2 .shape-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
  z-index: 1;
  animation: slide-right-sm 5s ease 1;
}

.banner-section-2 .shape-3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
  animation: slide-right-sm 5s ease 1;
}

.banner-section-2 .shape-4 {
  position: absolute;
  top: 4px;
  right: 175px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
  animation: slide-left-sm 5s ease 1;
}

.banner-section-2 .shape-5 {
  position: absolute;
  top: 4px;
  right: 360px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
  animation: slide-left-sm 5s ease 1;
}

.banner-section-2 .shape-6 {
  position: absolute;
  top: 4px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
  animation: slide-left-sm 5s ease 1;
}

@media only screen and (max-width: 991px){ 

  .banner-main-2 {
  padding-top: 200px;
  padding-bottom: 150px;
}
      
}

@media only screen and (max-width: 768px){ 

.banner-btn-area-2 {
  flex-direction: column;
}

.banner-area-2 {
  padding-left: 0;
}
.banner-main-2 .socials-area,
.banner-section-2 .shape-1,
.banner-section-2 .shape-4,
.banner-section-2 .shape-6{
  display: none;
}
      
}

/*----------------------------------------*/
/* FEATURES CSS START
/*----------------------------------------*/

.features-section .bg-shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.features-section .bg-shape-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.features-box-area {
  padding: 30px 30px 25px 30px;
  background: #fff;
  border-radius: 50px 60px 50px 60px; 
}


.features-box-area  h5 {
  color: #071026;
  position: relative;
  font-weight: 800; 
}

.features-box-area p {
  color: #7A7A7A;
  position: relative;
}

.features-box-area .icon-box {
  font-size: 50px;
  color: var(--theme-color);
}

.features-box-area .shape-1 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.features-box-area .shape-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.features-box-area .shape-3 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-repeat: no-repeat;
  background-position: top right;
}

.features-box-area:hover .shape-3 {
  opacity: 1;
}

.features-box-area:hover .shape-2 {
  opacity: 0;
}

.features-box-area:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: var(--theme-color);
  transition: all 700ms ease;
	border-radius: 50px 60px 50px 60px; 
}

.features-box-area:hover h5 {
  color: #011247;
  position: relative;
  font-weight: 800;
}

.features-box-area:hover p {
  color: #fff;
  position: relative;
}

.features-box-area:hover .icon-box {
  color: #fff;
  position: relative;
}

.features-box-area:hover:before {
  width: 100%;
  left: 0;
}

/*----------------------------------------*/
/* ABOUT US 2 CSS START
/*----------------------------------------*/

.about-2-image-area .main-image{
  text-align: center;
  padding-left: 20px;
}

.about-2-image-area .main-image img {
  border-radius: 0 100px 0 0;
}

.about-2-image-area .main-image,
.about-2-image-area .small-image,
.about-us-image-area figure.image-1,
.about-us-image-area .image-2 {
  position: relative;
  overflow: hidden;
}

.about-2-image-area .main-image::after,
.about-2-image-area .small-image::after,
.about-us-image-area figure.image-1::after,
.about-us-image-area .image-2::after {
  content: "";
  position: absolute;
  top: -35%;
  left: -85%;
  z-index: 8;
  width: 46%;
  height: 170%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .16) 34%, rgba(255, 255, 255, .66) 50%, rgba(255, 255, 255, .16) 66%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-24deg);
  opacity: 0;
  pointer-events: none;
}

.about-2-image-area .main-image:hover::after,
.about-2-image-area .small-image:hover::after,
.about-us-image-area figure.image-1:hover::after,
.about-us-image-area .image-2:hover::after {
  animation: full-circle-glass-shine 1.15s ease;
}

.about-2-image-area .small-image {
  position: absolute;
  display: inline-block;
  bottom: 40px;
  right: -10px;
  border: 12px solid #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
}

.about-2-image-area .icon-box {
  background: var(--theme-color);
  display: flex;
  padding: 20px 10px;
  justify-content: flex-start;
  align-items: center;
  gap: 26px;
  position: absolute;
  transform: rotate(270deg);
  top: 50%;
  left: -87px;
  max-width: 322px;
}

.about-2-image-area .icon-box .icon {
  color: var(--theme-color);
  font-size: 60px;
  padding: 25px 30px;
  background: #fff;
  display: inline-block;
  transform: rotate(90deg);
}

.about-2-image-area .icon-box h3 {
  color: #fff;
}

.about-2-image-area .icon-box p {
  color: #fff;
  font-family: 'Roboto';
  margin: 0;
}

.about-2-image-area .shape-1 {
  position: absolute;
  top: 55px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.about-2-content-area ul.list-area li {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  margin-left: 10px;
}

.about-2-content-area .about-specialty-list {
  row-gap: 0;
}

.about-2-content-area .about-specialty-list ul.list-area {
  margin: 0;
}

.about-2-content-area .about-specialty-list ul.list-area li {
  margin-bottom: 12px !important;
}

.about-2-content-area ul.list-area li:before {
  content: "\e921";
  font-family: 'icomoon';
  color: var(--theme-color);
  position: relative;
  top: 2px;
  left: -10px;
  font-size: 16px;
}

.about-2-content-area .call-us {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 12px;
}

.about-2-content-area .icon-1 {
  position: relative;
  width: 50px;
  height: 50px;
  background: var(--theme-color);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 24px;
  transform: rotate(-45deg);
  transition: all 700ms ease;
}

.about-2-btn-area:hover .icon-1 {
  transform: rotate(0deg);
}

.about-2-content-area .content span {
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
}

.about-2-content-area .content h5 {
  font-size: 18px;
}

.about-2-content-area .content:hover h5 {
  color: var(--theme-color);
}

.about-2-content-area .icon-1:before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  height: 58px;
  width: 58px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
}

.about-2-content-area .about-2-btn-area {
  display: flex;
  justify-content: flex-start;
  gap: 30px;
}

.about-2-section .bg-shape-1 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.about-2-section .bg-shape-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
}

@media only screen and (max-width: 1600px){ 

  .about-2-section .bg-shape-2,
  .about-2-section .bg-shape-1{
    display: none;
  }
        
}

@media only screen and (max-width: 1350px){ 

  .about-2-image-area .small-image{
    right: 0;    
  }
  .about-2-image-area .icon-box{
    left: -87px;
  }
      
}

@media only screen and (max-width: 991px){ 

  .about-2-image-area .main-image img{
    width: 100%;
    margin-bottom: 50px;
  }
  .about-2-content-area{
    padding-left: 0;
  }
        
}

  @media only screen and (max-width: 470px){ 
  .about-2-image-area .shape-1,
  .about-2-image-area .small-image{
    display: none;
  }

  .about-2-content-area .about-2-btn-area{
    display: inline;
  }
  .about-2-content-area .about-2-btn-area .primary-btn-1{
    margin-bottom: 20px;
  }

  .about-2-image-area .icon-box{
    top: 40%;
  }
          
  }


/*----------------------------------------*/
/* SERVICE TAB CSS START
/*----------------------------------------*/

.service-tab-btn-area ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border: none;
  overflow: visible;
}

.service-tab-btn-area {
  overflow: visible;
}

.service-tab-btn-area ul .nav-link {
  position: relative;
  font-family: var(--primary-font);
  color: var(--theme-color-1);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 20px;
  padding: 18px;
  background: #fff;
  width: 298px;
  border-radius: 5px !important;
  border: none !important;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.service-tab-btn-area ul .nav-item {
  opacity: 0;
  transform: translateX(-18px);
  animation: serviceTabReveal 0.55s ease forwards;
}

.service-tab-btn-area ul .nav-item:nth-child(1) { animation-delay: 0.05s; }
.service-tab-btn-area ul .nav-item:nth-child(2) { animation-delay: 0.14s; }
.service-tab-btn-area ul .nav-item:nth-child(3) { animation-delay: 0.23s; }
.service-tab-btn-area ul .nav-item:nth-child(4) { animation-delay: 0.32s; }
.service-tab-btn-area ul .nav-item:nth-child(5) { animation-delay: 0.41s; }
.service-tab-btn-area ul .nav-item:nth-child(6) { animation-delay: 0.50s; }

@keyframes serviceTabReveal {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.service-tab-btn-area ul .nav-link:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -35px;
  width: 35px;
  height: 60px;
  background: #fff;
  clip-path: polygon(100% 49%, 0 0, 0 100%);
  border-radius: 0 5px 5px 0;
}


.service-tab-btn-area ul .nav-link .icon-box {
  font-size: 44px;
  color: var(--theme-color);
  transition: color 0.25s ease, transform 0.25s ease;
}

.service-tab-btn-area ul .nav-link:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -176px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--theme-color), #ffffff, rgba(234, 24, 38, 0));
  background-size: 220% 100%;
  transform: translateY(-50%);
  opacity: 0;
  transition: width 0.35s ease, opacity 0.25s ease;
  pointer-events: none;
}

.service-tab-btn-area ul .nav-link:not(.active):hover {
  background: #f4f8fc;
  color: var(--theme-color);
  transform: translateX(6px);
  box-shadow: 0 12px 28px rgba(16, 32, 57, 0.12);
}

.service-tab-btn-area ul .nav-link:not(.active):hover:before {
  background: #f4f8fc;
}

.service-tab-btn-area ul .nav-link:not(.active):hover .icon-box {
  color: #1f5f99;
  transform: scale(1.05);
}

.service-tab-btn-area ul .nav-link.active {
    background: var(--theme-color);
    color: #fff;
}

.service-tab-btn-area ul .nav-link.active:before {
  background: var(--theme-color);
}

.service-tab-btn-area ul .nav-link.active .icon-box {
    color: #fff;
}

.service-tab-btn-area ul .nav-link.active:after {
  width: 146px;
  opacity: 1;
  animation: serviceTabConnectorFlow 5.5s ease-in-out infinite;
}

@keyframes serviceTabConnectorFlow {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: -120% 50%;
  }
}

.service-tab-content {
  background: #fff;
  padding: 28px;
  display: grid;
  gap: 50px;
  grid-template-columns: 330px auto;
  margin-top: 10px;
  height: 560px;
  min-height: 560px;
  align-items: stretch;
}

.tab-pane.show .service-tab-content {
  animation: serviceTabContentSlide 0.48s ease both;
}

@keyframes serviceTabContentSlide {
  from {
    opacity: 0;
    transform: translateX(34px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.service-tab-details-area .tab-content {
  height: 570px;
  min-height: 570px;
}

.service-tab-details-area .tab-pane.active {
  height: 100%;
}

.service-tab-content figure.image {
  height: 100%;
  margin-bottom: 0;
  overflow: hidden;
}

.service-tab-content figure.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-tab-content .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-tab-content .content .primary-btn-1 {
  align-self: flex-start;
}

.service-tab-content .content h4 {
  font-weight: 800;
  line-height: 46px;
}

.service-tab-content ul.tab-list-content li {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  margin-bottom: 15px;
  margin-left: 10px;
}

.service-tab-content ul.tab-list-content li:before {
  content: "\e921";
  font-family: 'icomoon';
  color: var(--theme-color);
  position: relative;
  top: 2px;
  left: -10px;
  font-size: 16px;
}

.service-tab-content .tab-bg-shape {
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

.service-tab-title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-tab-title-area .primary-btn-4 {
  text-transform: uppercase;
  border: 1px solid #fff;
  background: transparent;
}

.service-tab-mobile-control {
  display: none;
}

.service-tab-section .bg-shape-1 {
  position: absolute;
  bottom: -120px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.service-tab-section .bg-shape-2 {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
}

.service-tab-section .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@media only screen and (max-width: 1199px){ 

.service-tab-title-area {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.service-tab-btn-area ul .nav-link {
  width: 270px;
  gap: 14px;
  padding: 16px;
  font-size: 15px;
}

.service-tab-btn-area ul .nav-link .icon-box {
  font-size: 38px;
}

.service-tab-btn-area ul .nav-link:after,
.service-tab-btn-area ul .nav-link.active:after {
  display: none;
}

.service-tab-content {
  grid-template-columns: minmax(240px, 42%) minmax(0, 1fr);
  gap: 28px;
  height: 500px;
  min-height: 500px;
  padding: 24px;
}

.service-tab-details-area .tab-content {
  height: 510px;
  min-height: 510px;
}

.service-tab-content .content h4 {
  line-height: 1.2;
}
            
  }

@media only screen and (max-width: 767px){ 

.service-tab-mobile-control {
  display: block;
  margin-bottom: 18px;
}

.service-tab-mobile-control label {
  display: block;
  color: #ffffff;
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.service-tab-mobile-select-wrap {
  position: relative;
  background: #ffffff;
  border-left: 5px solid var(--theme-color);
  border-radius: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.18);
  overflow: visible;
}

.service-tab-mobile-trigger {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
}

.service-tab-mobile-trigger .service-tab-mobile-icon {
  width: 62px;
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color);
  font-size: 32px;
  background: #f7f9fc;
  border-right: 1px solid rgba(16, 32, 57, 0.08);
}

.service-tab-mobile-current {
  flex: 1;
  color: var(--theme-color-1);
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 800;
  padding: 0 18px;
}

.service-tab-mobile-chevron {
  width: 46px;
  color: var(--theme-color);
  text-align: center;
  transition: transform 0.25s ease;
}

.service-tab-mobile-select-wrap.is-open .service-tab-mobile-chevron {
  transform: rotate(180deg);
}

.service-tab-mobile-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: -5px;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.service-tab-mobile-select-wrap.is-open .service-tab-mobile-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.service-tab-mobile-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 50px;
  padding: 10px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--theme-color-1);
  font-family: var(--primary-font);
  font-size: 15px;
  font-weight: 800;
  text-align: left;
}

.service-tab-mobile-menu button i {
  width: 34px;
  color: var(--theme-color);
  font-size: 27px;
  text-align: center;
}

.service-tab-mobile-menu button:hover,
.service-tab-mobile-menu button.active {
  background: #102039;
  color: #ffffff;
}

.service-tab-mobile-menu button:hover i,
.service-tab-mobile-menu button.active i {
  color: #ffffff;
}

.service-tab-btn-area {
  display: none;
}

.service-tab-content{
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: auto;
  padding: 28px 28px 58px;
  gap: 24px;
}

.service-tab-details-area .tab-content {
  height: auto;
  min-height: auto;
}

.service-tab-details-area .tab-pane.active {
  height: auto;
}

.service-tab-btn-area {
  margin-bottom: 50px;
}

.service-tab-content figure.image img {
width: 100%;
height: 360px;
object-fit: cover;
object-position: center;
}
          
}

@media only screen and (max-width: 575px){
  .service-tab-content {
    padding: 22px;
    gap: 20px;
    overflow: visible;
  }

  .service-tab-content figure.image {
    height: auto;
    max-height: none;
  }

  .service-tab-content figure.image img {
    height: 300px;
  }

  .service-tab-content .content {
    justify-content: flex-start;
  }
}

/*----------------------------------------*/
/* WORK PROCESS CSS START
/*----------------------------------------*/

.work-process-section {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.work-process-box .icon-box {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 40px;
  background: #fff;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.08);
  color: var(--theme-color);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.work-process-box .icon-box span {
  position: absolute;
  top: -3px;
  left: -5px;
  width: 34px;
  height: 34px;
  background: #fff;
  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  font-size: 16px;
  font-family: var(--primary-font);
  display: flex;
  justify-content: center;
  align-items: center;
}

.work-process-box {
  padding: 20px;
  position: relative;
}

.work-process-box .icon-box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  border-radius: 50%;
  transform: scale(0);
  transition: all 500ms ease;
}

.work-process-box:hover .icon-box:before {
  transform: scale(1,1);
}

.work-process-box:hover .icon-box i {
  color: #fff;
  position: relative;
}

.work-process-section .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/*----------------------------------------*/
/* TEXT SLIDER CSS START
/*----------------------------------------*/

.text-slider-box {
  display: flex;
  position: relative;
  animation: aspro-scroller 27s linear infinite;
  will-change: transform;
  white-space: nowrap;
  gap: 10px;
}

.text-slider-box .slide-box {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
}

.text-slider-box .slide-box h1 {
  font-size: 80px;
  font-style: normal;
  font-weight: 700;
  line-height: 46px; /* 57.5% */
  text-transform: uppercase;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--theme-color-1);
  color: transparent;
}


@keyframes aspro-scroller {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}

@keyframes aspro-scroller-reverse {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(100%, 0);
  }
}


/*----------------------------------------*/
/* PROJECT SLIDER CSS START
/*----------------------------------------*/

.project-slider-two-section .bg-shape {
  position: absolute;
  top: 65px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.project-two-title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.project-slider-two-box .content {
  padding: 16px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  opacity: 0;
  transform: scale(0);
  transform-origin: left;
  transition: all 700ms ease;
}

.project-slider-two-box:hover .content {
  opacity: 1;
  transform: scale(1,1);
}

.project-slider-two-box .inner-box span {
  color: var(--theme-color);
  text-transform: capitalize;
  font-weight: 500;
}

.project-slider-two-box .inner-box h5 {
  margin-top: 5px;
}

.project-slider-two-box .icon-1 {
  background: var(--theme-color);
  font-size: 30px;
  color: #fff;
  padding: 15px;
}

.project-slider-two-box figure.image:before {
  position: absolute;
  top: 0;
  right: 0;
  content: '';
  width: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(16, 32, 57, 0.00) -19.59%, rgba(16, 32, 57, 0.80) 92.89%);
  transition: all 500ms ease;
}

.project-slider-two-box:hover figure.image:before {
  width: 100%;
  left: 0;
}

@media only screen and (max-width: 768px){ 

.project-two-title-area {
  align-items: start;
  flex-direction: column;
  gap: 20px;
}
              
  }

/*----------------------------------------*/
/* TESTIMONIALS TWO CSS START
/*----------------------------------------*/

.testimonials-two-section .testimonials-video-area .play-btn a {
  color: #fff;
}

.testimonials-video-area {
  margin-right: -209px;
}

.testimonials-video-area .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.testimonials-video-area .play-btn a {
  border-radius: 50%;
  color: var(--theme-color);
  z-index: 2;
  position: relative;
  font-size: 17px;
}

.testimonials-video-area .video_player_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 57px;
  width: 57px;
  border-radius: 50%;
  transition: all 500ms ease;
}

.testimonials-video-area .video_player_btn:before, .video_player_btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 1;
  border-radius: 50%;
}

.testimonials-video-area .video_player_btn:before {
  z-index: 0;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
  animation: pulse-border 1500ms ease-out infinite;
}

.testimonials-video-area .video_player_btn:after {
  z-index: 1;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.testimonials-two-area .section-title {
  color: #fff;
}

.testimonials-two-area {
  padding-left: 100px;
  padding-right: 60px;
  margin-left: 70px;
  margin-top: 66px;
}

.testimonials-two-box {
  background: #fff;
  padding: 40px 30px 40px 67px;
  border-left: 4px solid var(--theme-color);
  position: relative;
  margin-left: 45px;
}

.testimonials-two-box h4 {
  font-size: 20px;
}

.testimonials-two-box span {
  color: #787878;
}

.testimonials-two-box ul.ratings {
  display: flex;
  gap: 5px;
  margin-top: 5px;
  margin-bottom: 17px;
  color: var(--theme-color);
}

.testimonials-two-box .author-image img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

.testimonials-two-box .author-image {
  position: absolute;
  left: -50px;
  top: 75px;
  bottom: 75px;
}

.testimonials-two-box .icon-1 {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 50px;
  color: var(--theme-color);
}

.testimonials-two-area .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.testimonial-dot-inner span.swiper-pagination-bullet {
  background: #fff;
  position: relative;
}

.testimonial-dot-inner span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--theme-color);
  position: relative;  
}

.testimonial-dot-inner span.swiper-pagination-bullet.swiper-pagination-bullet-active:before {
  content: "";
  position: absolute;    
  top: -11px;
  left: -11px;
  height: 30px;
  width: 30px;
  border: 1px solid #fff;
  border-radius: 50%;
}

.testimonial-dot-inner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 10px;
}

@media only screen and (max-width: 1440px){ 

  .testimonials-video-area {
    margin-right: 0;
}
.testimonials-two-area {
  margin-left: 0;
  margin-top: 0;
}
            
}

@media only screen and (max-width: 768px){ 

.testimonials-two-area {
  padding-left: 25px;
  padding-right: 25px;
}
            
}

@media only screen and (max-width: 425px){ 

.testimonials-two-box .icon-1{
  display: none;
}
            
}

/*----------------------------------------*/
/* Icon box counter CSS START
/*----------------------------------------*/

.icon-box-counter-area .icon-box {
  font-size: 70px;
  color: var(--theme-color);
}

.icon-box-counter-area h3 {
  font-weight: 700;
}

.icon-box-counter-area {
  display: flex;
  justify-content: start;
  gap: 20px;
  align-items: center;
}

.icon-box-counter-area .text-1 {
  color: #787878;
  font-family: var(--secondary-font);
}

/*----------------------------------------*/
/* HELP FORM CSS START
/*----------------------------------------*/

.help-form-section .image-area {
  position: absolute;
  bottom: 0;
  left: 0;
}

.help-form-section {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.help-form-area input[type="text"],
.help-form-area input[type="tel"]{
  background: transparent;
  border: 1px solid #fff;
  border-radius: 50px;
  color: #fff;
  padding-left: 30px
}

.help-form-area .primary-btn-1 {
  border-radius: 50px;
  font-size: 16px;
  padding: 22px 50px;
}

.help-form-section .bg-shape {
  position: absolute;
  top: 0;
  right: 0;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-position: top right;
  background-size: contain;
}

@media only screen and (max-width: 1830px){ 

.help-form-section .image-area {
  left: -270px;
}
              
}

@media only screen and (max-width: 1300px){ 

  .help-form-section .image-area {
    left: -370px;
  }
  .help-form-area .primary-btn-1{
    padding: 22px;
  }
                
}

@media only screen and (max-width: 991px){ 

  .help-form-section .image-area {
    display: none;
  }
  .help-form-area .primary-btn-1{
    width: 100%;
    justify-content: center;
  }
                
}

/*----------------------------------------*/
/* BLOG STYLE TWO CSS START
/*----------------------------------------*/

.blog-two-title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-style-two {
  display: grid;
  grid-template-columns: auto 370px;
}

.blog-style-two .blog-content-area {
  background: #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  padding: 30px 25px 30px 30px;
}

.blog-style-two .blog-title{
  padding-top: 20px;
}

.blog-style-two .blog-title:hover{
  color: var(--theme-color);
}

.blog-style-two .post-meta {
  display: inline-flex;
  gap: 26px;
  color: #787878;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  padding-bottom: 20px;
}

.blog-style-two .post-meta span i {
  margin-right: 10px;
  font-size: 16px;
  color: var(--theme-color);
}

.blog-style-two .blog-text {
  padding: 25px 0;
  margin: 0;
}

@media only screen and (max-width: 768px){ 

.blog-two-title-area {
  align-items: self-start;
  flex-direction: column;
  gap: 20px;
}

.blog-style-two {
  display: flex;
  flex-direction: column;
}
                
}

/*----------------------------------------*/
/* FOOTER STYLE TWO CSS START
/*----------------------------------------*/

.footer-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.footer-bottom .footer-socials span {
  color: #fff;
  height: 36px;
  width: 36px;
  border: 1px solid #fff;
  font-size: 13px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  transition: all 500ms ease;
}

.footer-bottom .footer-socials {
  display: inline-flex;
  gap: 10px;
}

.footer-bottom .footer-socials span > a{
  color: #fff;
}

.footer-bottom .footer-socials span:hover {
  background: var(--theme-color);
  color: #fff;
  border: 1px solid var(--theme-color);
}

.footer-main .footer-shape-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.footer-main .footer-shape-1 {
  position: absolute;
  bottom: 96px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

/*----------------------------------------*/
/* BANNER STYLE THREE CSS START
/*----------------------------------------*/

.banner-3-content .banner-area-2 {
  padding: 235px 150px;
  max-width: inherit;
}

.banner-3-content .shape-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  background-repeat: repeat-y;
  background-position: right;
  background-size: contain;
  animation: slide_up 50s linear infinite;
}

.banner-3-content .shape-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
}

.banner-3-content .shape-3 {
  position: absolute;
  top: 180px;
  left: -160px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.banner-3-image-area {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.banner-3-experience {
  max-width: 288px;
  background: var(--theme-color);
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 16px;
  gap: 25px;
  position: absolute;
  bottom: 30px;
  left: 30px;
}

.banner-3-experience .icon-box {
  font-size: 80px;
  background: #fff;
  height: 108px;
  width: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--theme-color);
}

.banner-3-popup {
  cursor: pointer;
}

.banner-3-popup .icon-1 {
  border-radius: 50%;
  color: #fff;
  z-index: 2;
  position: relative;
  font-size: 10px;
  cursor: pointer;
}

.banner_popup_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  transition: all 500ms ease;
}

.banner_popup_btn:before, .banner_popup_btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--theme-color);
  opacity: 1;
  border-radius: 50%;
}
.banner_popup_btn:before {
  z-index: 0;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
          animation: pulse-border 1500ms ease-out infinite;
}
.banner_popup_btn:after {
  z-index: 1;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.banner-3-image-area .content-1 {
  position: absolute;
  top: 74px;
  left: 39%;
}

.banner-3-image-area .content-2 {
  position: absolute;
  top: 433px;
  left: 82px;
}

.banner-3-image-area .content-3 {
  position: absolute;
  top: 306px;
  left: 85%;
}

.banner-3-popup:hover .best-quality {
  transform: scale(1,1);
  opacity: 1;
  visibility: visible;
}

.best-quality {
  background: var(--theme-color);
  color: #fff;
  padding: 5px 8px;
  border: 5px;
  font-size: 14px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  height: 50px;
  position: absolute;
  width: 92px;
  top: -55px;
  left: -60px;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
  transform-origin: right;
  transition: all 500ms ease;
}


@media only screen and (max-width: 1399px){ 

.banner-3-experience,
.banner-3-image-area .content-1,
.banner-3-image-area .content-2,
.banner-3-image-area .content-3,
.banner-3-content .shape-3{
  display: none;
}

.banner-3-content .banner-area-2 {
  padding: 150px 150px;
}
                  
}

@media only screen and (max-width: 991px){ 

.banner-3-content .banner-area-2{
  padding: 100px 20px;
}

.banner-3-content .banner-btn-area-2{
  align-items: self-start;
}
                    
}

/*----------------------------------------*/
/* ABOUT THREE CSS START
/*----------------------------------------*/

.about-three-section{
  padding-bottom: 240px;
}
.about-three-section-100{
  padding-bottom: 100px;
}
.about-three-section-120{
  padding-bottom: 120px;
      background: linear-gradient(270deg, #ffffff, #f4f5f7, #dddddd, #e8eff3);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

.about-three-section-60{
  padding-bottom: 60px; 
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
}
.about-three-section-140{
  padding-bottom: 140px;
}

.about-three-section .bg-shape {
  position: absolute;
  top: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: right bottom;
  width: 100%;
  height: 100%;
}

ul.about-3-list {
  margin-left: 10px;
  font-family: var(--secondary-font);
  font-size: 14px;
  font-weight: 500;
}

ul.about-3-list li {
  margin-bottom: 10px;
}

ul.about-3-list li:before {
  content: "\e921";
  font-family: 'icomoon';
  position: relative;
  top: 1px;
  left: -10px;
  color: var(--theme-color);
}

.about-3-content-area .progress {
  max-width: 527px;
  height: 12px;
  border-radius: 0;
}

.about-3-content-area .progress-bar {
  background-color: var(--theme-color);
}

.about-3-progress-bar h6 {
  font-size: 14px;
  margin-bottom: 15px;
}

.about-3-content-area .progress-count {
  font-size: 14px;
  font-weight: 500;
  position: absolute;
  top: 0;
  right: 15px;
}

.about-3-image-area .shape-1 {
  position: absolute;
  top: 0;
  right: 20px;
  background-repeat: repeat-y;
  background-position: right;
  width: 30px;
  height: 100%;
  animation: slide_up 50s linear infinite;
}


/* shine start */
.about-3-image-area figure.image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 90px 10px 10px 90px;
}


.about-3-image-area figure.image:before {
position: absolute;
top: 0;
left: -75%;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}
 

.about-3-image-area:hover figure.image:before {
  animation: shine 1.5s;
}
/* shine end */

@media only screen and (max-width: 991px){ 

.about-3-content-area .progress {
  max-width: 100%;
}
                      
}


ul.about-3-list-cities {
  margin-left: 10px;
  font-family: var(--secondary-font);
  font-size: 14px;
  font-weight: 500;
}

ul.about-3-list-cities li {
  margin-bottom: 10px;
}

ul.about-3-list-cities li:before {
  content: "\e921";
  font-family: 'icomoon';
  position: relative;
  top: 1px;
  left: -10px;
  color: var(--theme-color);
}

.about-3-content-area-cities .progress {
  max-width: 527px;
  height: 12px;
  border-radius: 0;
}

.about-3-content-area-cities .progress-bar {
  background-color: var(--theme-color);
}

.about-3-progress-bar-cities h6 {
  font-size: 14px;
  margin-bottom: 15px;
}

.about-3-content-area-cities .progress-count {
  font-size: 14px;
  font-weight: 500;
  position: absolute;
  top: 0;
  right: 15px;
}

.about-3-image-area-cities .shape-1 {
  position: absolute;
  top: 0;
  right: 20px;
  background-repeat: repeat-y;
  background-position: right;
  width: 30px;
  height: 100%;
  animation: slide_up 50s linear infinite;
}


/* shine start */
.about-3-image-area-cities figure.image {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px 2px 2px 2px;
}


.about-3-image-area-cities figure.image:before {
position: absolute;
top: 0;
left: -75%;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}
 

.about-3-image-area-cities:hover figure.image:before {
  animation: shine 1.5s;
}
/* shine end */
 

@media only screen and (max-width: 991px){ 

.about-3-content-area-cities .progress {
  max-width: 100%;
}
                      
}
/*----------------------------------------*/
/* APPOINTMENT HELP FORM THREE CSS START
/*----------------------------------------*/

.help-3-form-section {
  margin-top: -120px;
}

.help-3-form-area {
  background: var(--theme-color);
  padding: 60px 80px;
  text-align: center;
}

.help-3-form-area h3,
.help-3-form-area p {
  color: #fff;
  position: relative;
  z-index: 2;
}

/* MATCH ALL FORM FIELDS */
.help-3-form-area input[type="text"],
.help-3-form-area input[type="email"],
.help-3-form-area input[type="date"],
.help-3-form-area input[type="tel"],
.help-3-form-area select,
.help-3-form-area textarea {
  width: 100%;
  background: transparent;
  border: 1px solid #ECECEC;
  border-radius: 20px;
  padding: 0px 20px;
  color: #fff;
  position: relative;
  z-index: 2;
  font-size: 15px;
}

/* SINGLE-LINE HEIGHTS */
.help-3-form-area input[type="text"],
.help-3-form-area input[type="email"],
.help-3-form-area input[type="date"],
.help-3-form-area input[type="tel"],
.help-3-form-area select {
  height: 42px;
  line-height: 42px;
}

/* TEXTAREA */
.help-3-form-area textarea {
  min-height: 90px;
  resize: vertical;
  line-height: 1.5;
  padding-top: 12px;
}

/* PLACEHOLDERS */
.help-3-form-area ::placeholder {
  color: #ECECEC;
  opacity: 1;
  font-size: 14px;
}

/* SELECT PLACEHOLDER-STYLE TEXT */
.help-3-form-area select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  color: #fff;
  padding-right: 45px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #ffffff 50%),
    linear-gradient(135deg, #ffffff 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 17px,
    calc(100% - 12px) 17px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* OPTION COLORS INSIDE DROPDOWN */
.help-3-form-area select option {
  color: #102039;
  background: #ffffff;
}

/* DATE ICON / NATIVE PICKER */
.help-3-form-area input[type="date"] {
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
}

.help-3-form-area input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1);
  cursor: pointer;
}

/* BUTTON */
.help-3-form-area button.primary-btn-1 {
  width: 100%;
  background: #fff;
  color: var(--theme-color-1);
  justify-content: center;
  border-radius: 20px;
  font-size: 16px;
  padding: 10px 20px;
  min-height: 42px;
  position: relative;
  z-index: 2;
}

.help-3-form-area button.primary-btn-1:hover {
  color: #fff;
}

/* SHAPES */
.help-3-form-area .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: left bottom;
  width: 100%;
  height: 100%;
}

.help-3-form-area .shape-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

/* Shared mini-quote form decoration */
.help-3-form-area .shape-1 {
  background-image: url("../imgs/icons/design-1.png") !important;
  background-size: 160px auto;
  filter: brightness(0) saturate(100%) invert(24%) sepia(38%) saturate(1523%) hue-rotate(174deg) brightness(91%) contrast(94%);
  opacity: .5;
}

.help-3-form-area .shape-2 {
  background-image: url("../imgs/icons/HOA-1.png") !important;
  background-size: 160px auto;
  filter: brightness(0) saturate(100%) invert(24%) sepia(38%) saturate(1523%) hue-rotate(174deg) brightness(91%) contrast(94%);
  opacity: .5;
}

/* MOBILE */
@media only screen and (max-width: 991px) {
  .help-3-form-area {
    padding: 60px 40px;
  }

  .help-3-form-area h3 {
    font-size: 24px;
  }
}


/*----------------------------------------*/
/* SERVICE THREE CSS START
/*----------------------------------------*/

.service-section-three {
  padding-top: 240px;
  margin-top: -120px;
}

.service-section-three .shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.service-section-three .shape-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.service-section-three .shape-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.service-3-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-section-three .service-active-2 {
  margin-right: -366px;
}

.service-section-three .section-title {
  color: #fff;
}

.service-3-box-area .inner {
  background: #fff;
}

.service-3-box-area .content-box {
  padding: 70px 20px 0 20px;
}

.service-3-box-area .icon-box {
  width: 80px;
  height: 80px;
  font-size: 50px;
  color: var(--theme-color);
  border: 1px dashed var(--theme-color);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: -110px;
  background: #fff;
  position: relative;
  z-index: 1;
  border-radius: 99px;
}

.service-3-box-area .content-box h4 {
  margin-top: 30px;
  margin-bottom: 15px;
}

.service-3-box-area .btn-area {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  text-transform: uppercase;
  font-family: var(--primary-font);
  background:#F8F8F8;
  padding: 12px 0;
  position: relative;
}

.service-3-box-area .btn-area:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--theme-color);
  transition: all 700ms ease;
}

.service-3-box-area:hover .btn-area:before {
  width: 100%;
  right: 0;
}

.service-3-box-area:hover .btn-area a {
  position: relative;
  color: #fff;
}

.service-3-box-area .icon-box:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 100%;
  background: var(--theme-color);
  transition: all 500ms ease;
	
	border-radius: 99px;
}

.service-3-box-area:hover .icon-box:before {
  left: 0;
  width: 100%;    
}

.service-3-box-area:hover .icon-box i {
 color: #fff;
  position: relative
}

@media only screen and (max-width: 1024px){ 

.service-section-three .service-active-2 {
  margin-right: inherit;
}
                        
}

@media only screen and (max-width: 991px){ 

.service-3-title-box {
  align-items: start;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 20px;
}
                        
}


/*----------------------------------------*/
/* CHOOSE THREE CSS START
/*----------------------------------------*/

.choose-3-image-area .image-3-area {
  position: absolute;
  bottom: 30px;
  right: -25px;
  border: 10px solid #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
}

.choose-3-image-area .image-3-area .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.choose-3-image-area .play-btn a {
  border-radius: 50%;
  color: #fff;
  z-index: 2;
  position: relative;
  font-size: 17px;
}

.video_player_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 57px;
  width: 57px;
  border-radius: 50%;
  transition: all 500ms ease;
}

.video_player_btn:before,
.video_player_btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--theme-color);
  opacity: 1;
  border-radius: 50%;
}
.video_player_btn:before {
  z-index: 0;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
          animation: pulse-border 1500ms ease-out infinite;
}
.video_player_btn:after {
  z-index: 1;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

.choose-3-image-area .shape-1 {
  position: absolute;
  top: 40px;
  right: 30px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.choose-3-image-area h1 {
  font-size: 100px;
  text-transform: capitalize;
  opacity: 0.08;
  position: absolute;
  top: 36%;
  left: -280px;
  transform: rotate(270deg);
}

.choose-3-content-area .icon-box-area {
  background: #fff;
  border-bottom: 2px solid #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  padding: 20px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
  transition: all 500ms ease;
}

.choose-3-content-area .icon-box-area.active {
  border-bottom: 2px solid var(--theme-color);
}

.choose-3-content-area .icon-box {
  font-size: 40px;
  color: var(--theme-color);
}

.choose-3-content-area .icon-box-area h5 {
  font-size: 16px;
}

.cornering-image-area {
  padding-right: 70px;
}

.cornering-image-area figure.image {
  background: #f1f1f1;
  border-radius: 12px;
  min-height: 526px;
}

.cornering-image-area figure.image img {
  border-radius: 12px;
  height: 526px;
  object-fit: cover;
  width: 100%;
}

.cornering-image-area .image-3-area {
  position: absolute;
  bottom: -18px;
  left: -38px;
  border: 10px solid #fff;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  width: 245px;
  height: 270px;
}

.cornering-image-area .image-3-area .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cornering-image-area .shape-1 {
  position: absolute;
  top: 40px;
  right: 30px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

.cornering-experience-box {
  align-items: center;
  background: var(--theme-color);
  border-radius: 7px;
  bottom: 0;
  color: #fff;
  display: flex;
  gap: 18px;
  padding: 24px 30px;
  position: absolute;
  right: 0;
  width: 345px;
}

.cornering-experience-box span {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
}

.cornering-experience-box p {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  margin: 0;
}

.cornering-image-support {
  background: #fff;
  border-radius: 7px;
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  margin-top: 32px;
  padding: 24px 24px 20px;
  transition: transform 350ms ease, box-shadow 350ms ease;
}

.cornering-image-support:hover {
  box-shadow: 0px 18px 38px 0px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.cornering-content-area .section-title {
  color: #00173c;
}

.cornering-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 22px;
}

.cornering-proof-grid div {
  align-items: center;
  display: flex;
  gap: 16px;
}

.cornering-proof-grid strong {
  align-items: center;
  border: 4px solid var(--theme-color);
  border-radius: 50%;
  color: #00173c;
  display: inline-flex;
  flex: 0 0 82px;
  font-size: 23px;
  height: 82px;
  justify-content: center;
}

.cornering-proof-grid span {
  color: #00173c;
  font-weight: 700;
  line-height: 22px;
}

.cornering-check-list {
  margin-bottom: 0;
}

.cornering-check-list li {
  color: #6a6a6a;
  margin-bottom: 10px;
  padding-left: 28px;
  position: relative;
}

.cornering-check-list li:before {
  background: var(--theme-color);
  border-radius: 50%;
  color: #fff;
  content: "\f00c";
  font-family: "Font Awesome 6 Pro";
  font-size: 12px;
  font-weight: 900;
  height: 18px;
  left: 0;
  line-height: 18px;
  position: absolute;
  text-align: center;
  top: 4px;
  width: 18px;
}

.cornering-detail-support {
  background:
    linear-gradient(135deg, rgba(237, 28, 36, 0.14) 0 18%, transparent 18% 100%),
    linear-gradient(145deg, #0f2748 0%, #132f55 54%, #0b1d38 100%);
  border-radius: 10px;
  margin-top: 30px;
  overflow: hidden;
  padding: 26px;
  position: relative;
}

.cornering-detail-support:hover {
  box-shadow: 0px 20px 45px 0px rgba(8, 27, 52, 0.24);
}

.cornering-detail-head {
  align-items: flex-start;
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.cornering-detail-head span {
  color: #ff1b2b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  line-height: 1;
  text-transform: uppercase;
}

.cornering-detail-head strong {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.cornering-detail-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cornering-detail-grid-single {
  grid-template-columns: 1fr;
}

.cornering-detail-grid article {
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: 46px 1fr;
  min-height: 132px;
  padding: 16px;
  transition: background-color 280ms ease, transform 280ms ease;
}

.cornering-detail-grid-single article {
  grid-template-columns: 54px 1fr;
  min-height: 116px;
  padding: 20px;
}

.cornering-detail-grid article:hover {
  background: #fff;
  transform: translateY(-4px);
}

.cornering-detail-grid i {
  align-items: center;
  background: #fff;
  border-radius: 50%;
  color: var(--theme-color);
  display: inline-flex;
  font-size: 18px;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.cornering-detail-grid h3 {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 6px;
}

.cornering-detail-grid p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
}

.cornering-detail-grid article:hover h3,
.cornering-detail-grid article:hover p {
  color: #00173c;
}

.cornering-detail-grid article:hover i {
  background: var(--theme-color);
  color: #fff;
}

.cornering-detail-list {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-top: 18px;
  padding-top: 16px;
}

.cornering-detail-list li {
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
  line-height: 1.5;
}

.cornering-content-check-list {
  margin: 22px 0 18px;
}

.cornering-content-check-list li {
  color: #44546a;
  font-size: 16px;
  line-height: 1.55;
}

.cornering-info-section {
  position: relative;
  overflow: hidden;
  background: #102039;
}

.cornering-info-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../imgs/service/service-1-commercial-roof-cornering-01.webp");
  background-size: cover;
  background-position: center;
  opacity: .10;
  pointer-events: none;
}

.cornering-info-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16, 32, 57, .96), rgba(24, 71, 123, .9));
  pointer-events: none;
}

.cornering-info-section .small-container {
  position: relative;
  z-index: 1;
}

.cornering-info-copy p:last-child {
  margin-bottom: 0;
}

.cornering-info-section .section-title {
  color: #fff;
}

.cornering-info-section .cornering-heading-copy,
.cornering-info-section .cornering-info-copy p {
  color: rgba(255, 255, 255, 0.78);
}

.cornering-info-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.cornering-info-actions .primary-btn-1,
.cornering-info-actions .primary-btn-1-blue-white {
  min-height: 52px;
  padding: 16px 24px;
}

.cornering-heading-copy {
  margin-top: 18px;
}

.cornering-benefits-section .section-title {
  color: #00173c;
}

.cornering-benefits-section .title-box p {
  color: #6a6a6a;
  max-width: 820px;
  margin: 12px auto 0;
}

.cornering-benefits-section + .features-section + .cornering-counties-section + .help-3-form-section {
  padding-bottom: 80px;
}

.cornering-counties-section {
  position: relative;
}

.cornering-counties-heading {
  max-width: 86%;
}

.cornering-counties-heading .section-title {
  max-width: 100%;
}

.cornering-counties-intro {
  margin: 18px 0 0;
  max-width: 100%;
}

.cornering-counties-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}

.cornering-county-card {
  background: #f7f7f7;
  border-bottom: 3px solid #e8e8e8;
  border-radius: 7px;
  padding: 24px 22px;
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

.cornering-county-card:hover {
  border-color: var(--theme-color);
  box-shadow: 0px 16px 34px 0px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}

.cornering-county-card span {
  color: var(--theme-color);
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.cornering-county-card h4 {
  color: #00173c;
  font-size: 22px;
  margin-bottom: 12px;
}

.cornering-county-card p {
  margin: 0;
}

.cornering-county-card.primary,
.cornering-county-card.secondary {
  background: #fff;
  border-bottom-color: var(--theme-color);
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.06);
}

.cornering-why-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.35fr);
  gap: 36px;
  align-items: stretch;
}

.cornering-risk-panel {
  background:
    linear-gradient(0deg, rgba(237, 24, 39, 0.92), rgba(237, 24, 39, 0.92)),
    url("../imgs/service/service-1-commercial-roof-cornering-01.webp");
  background-position: center;
  background-size: cover;
  border-radius: 7px;
  color: #fff;
  overflow: hidden;
  padding: 42px 38px;
  position: relative;
  transition: transform 350ms ease, box-shadow 350ms ease;
}

.cornering-risk-panel:hover {
  box-shadow: 0px 20px 42px 0px rgba(237, 24, 39, 0.22);
  transform: translateY(-6px);
}

.cornering-risk-panel:before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  pointer-events: none;
}

.cornering-risk-panel span {
  color: #fff;
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.cornering-risk-panel h4 {
  color: #fff;
  font-size: 30px;
  line-height: 38px;
  margin-bottom: 18px;
}

.cornering-risk-panel p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

.cornering-protection-list {
  display: grid;
  gap: 16px;
}

.cornering-protection-item {
  align-items: flex-start;
  background: #f7f7f7;
  border-left: 3px solid var(--theme-color);
  border-radius: 7px;
  display: grid;
  gap: 20px;
  grid-template-columns: 62px 1fr;
  padding: 22px 24px;
  transition: background-color 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.cornering-protection-item:hover {
  background: #fff;
  border-left-color: var(--theme-color);
  box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.08);
  transform: translateX(8px);
}

.cornering-protection-item span {
  align-items: center;
  background: #fff;
  border-radius: 7px;
  color: var(--theme-color);
  display: inline-flex;
  font-size: 18px;
  font-weight: 800;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.cornering-protection-item h5 {
  color: #00173c;
  font-size: 20px;
  margin-bottom: 8px;
}

.cornering-protection-item p {
  color: #6a6a6a;
  margin: 0;
}

.cornering-bottom-callout {
  align-items: center;
  background: #f7f7f7;
  border-radius: 7px;
  display: grid;
  gap: 18px;
  grid-template-columns: auto 1fr;
  margin-top: 34px;
  padding: 24px 30px;
}

.cornering-bottom-callout strong {
  color: var(--theme-color);
  font-size: 18px;
  white-space: nowrap;
}

.cornering-bottom-callout p {
  margin: 0;
}

.roof-repair-image-area {
  transform: translateX(-92px);
}

.roof-repair-section-heading {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.roof-repair-section-heading .section-title {
  max-width: 920px;
}

.roof-repair-content-area {
  padding-left: 0;
  max-width: 760px;
}

.roof-repair-intro-title {
  color: #00173c;
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 22px;
}

.roof-repair-content-area .section-title {
  max-width: 760px;
}

.roof-repair-content-area p {
  max-width: 710px;
}

.roof-repair-counter-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
  transform: translateX(-92px);
}

.roof-repair-counter {
  background: #fff;
  border-bottom: 3px solid var(--theme-color);
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  padding: 16px 14px;
  text-align: center;
}

.roof-repair-counter strong {
  color: #00173c;
  display: block;
  font-size: 28px;
  line-height: 30px;
}

.roof-repair-counter span {
  color: #6a6a6a;
  display: block;
  font-size: 13px;
  line-height: 18px;
  margin-top: 5px;
}

.roof-repair-service-note {
  background: #fff;
  border-left: 5px solid var(--theme-color);
  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
  padding: 28px 32px;
}

.roof-repair-service-note h3 {
  color: #00173c;
  font-size: 28px;
  line-height: 36px;
  margin: 10px 0 0;
}

.roof-repair-service-note p {
  margin: 0;
}

.roof-repair-planning-section {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.roof-repair-planning-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(239, 22, 39, .06), transparent 36%), radial-gradient(circle at 86% 20%, rgba(47, 111, 202, .12), transparent 30%);
  pointer-events: none;
}

.roof-repair-planning-section .small-container {
  position: relative;
  z-index: 1;
}

.roof-repair-planning-content {
  max-width: 560px;
}

.roof-repair-planning-content p {
  color: #626a76;
  font-size: 17px;
  line-height: 1.76;
}

.roof-repair-planning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.repair-planning-card {
  position: relative;
  overflow: hidden;
  min-height: 218px;
  padding: 30px 28px;
  border-radius: 8px;
  background: #f6f8fb;
  border: 1px solid rgba(16, 32, 57, .08);
  box-shadow: 0 18px 38px rgba(16, 32, 57, .08);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.repair-planning-card::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 4px;
  background: var(--theme-color);
}

.repair-planning-card:hover {
  transform: translateY(-6px);
  background: #fff;
  box-shadow: 0 24px 52px rgba(16, 32, 57, .14);
}

.repair-planning-card span {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
  font-weight: 900;
}

.repair-planning-card h4 {
  margin-bottom: 12px;
  color: var(--theme-color-1);
}

.repair-planning-card p {
  margin: 0;
  color: #626a76;
  line-height: 1.68;
}

.roof-repair-pain-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #f4f8fc 100%);
}

.roof-repair-pain-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(239, 22, 39, .08), transparent 25%),
    linear-gradient(135deg, rgba(16, 32, 57, .04), transparent 48%);
  pointer-events: none;
}

.roof-repair-pain-section .small-container,
.roof-repair-decision-section .small-container {
  position: relative;
  z-index: 1;
}

.roof-repair-pain-content {
  max-width: 610px;
}

.roof-repair-pain-content p {
  color: #566275;
  font-size: 16px;
  line-height: 1.76;
}

.roof-repair-pain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.roof-repair-pain-card {
  position: relative;
  min-height: 236px;
  padding: 30px 28px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(16, 32, 57, .08);
  box-shadow: 0 18px 44px rgba(16, 32, 57, .08);
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.roof-repair-pain-card span {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border-radius: 50%;
  color: var(--theme-color);
  background: rgba(239, 22, 39, .08);
  font-size: 30px;
  transition: background-color .3s ease, color .3s ease;
}

.roof-repair-pain-card h4 {
  margin-bottom: 12px;
  color: var(--theme-color-1);
}

.roof-repair-pain-card p {
  margin: 0;
  color: #626a76;
  line-height: 1.68;
}

.roof-repair-pain-card:hover {
  transform: translateY(-6px);
  background: var(--theme-color-1);
  box-shadow: 0 24px 55px rgba(16, 32, 57, .18);
}

.roof-repair-pain-card:hover span {
  color: #fff;
  background: var(--theme-color);
}

.roof-repair-pain-card:hover h4,
.roof-repair-pain-card:hover p {
  color: #fff;
}

.roof-repair-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

.roof-repair-call i,
.roof-repair-call span {
  position: relative;
  z-index: 1;
}

.roof-repair-decision-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(16, 32, 57, .98), rgba(24, 71, 123, .96)),
    var(--theme-color-1);
}

.roof-repair-decision-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(239, 22, 39, .16), transparent 28%),
    linear-gradient(120deg, transparent 0 58%, rgba(255, 255, 255, .06) 58% 72%, transparent 72%);
  pointer-events: none;
}

.roof-repair-decision-content .section-sub-title {
  color: var(--theme-color);
}

.roof-repair-decision-content .section-title {
  color: #fff;
}

.roof-repair-decision-content p {
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  line-height: 1.76;
}

.roof-repair-decision-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.roof-repair-decision-card {
  position: relative;
  min-height: 390px;
  padding: 34px 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 62px rgba(0, 0, 0, .2);
}

.roof-repair-decision-card::before {
  content: "";
  position: absolute;
  top: 24px;
  right: 24px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(239, 22, 39, .08);
}

.roof-repair-decision-card.repair {
  border-bottom: 5px solid var(--fcc-call-blue);
}

.roof-repair-decision-card.replace {
  border-bottom: 5px solid var(--theme-color);
}

.roof-repair-decision-card h4 {
  max-width: 260px;
  margin-bottom: 22px;
  color: var(--theme-color-1);
}

.roof-repair-decision-card ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roof-repair-decision-card li {
  position: relative;
  padding-left: 28px;
  color: #556174;
  line-height: 1.62;
}

.roof-repair-decision-card li::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 1px;
  font-family: "Font Awesome 5 Pro";
  font-weight: 700;
  color: var(--theme-color);
}

@media (max-width: 991px) {
  .roof-repair-pain-grid,
  .roof-repair-decision-grid {
    grid-template-columns: 1fr;
  }

  .roof-repair-decision-card {
    min-height: auto;
  }
}

@media (max-width: 575px) {
  .roof-repair-pain-card,
  .roof-repair-decision-card {
    padding: 26px 22px;
  }

  .roof-repair-call {
    width: 100%;
  }
}

.cta-1-section .content h3.cta-compact-title {
  font-size: 30px;
  line-height: 38px;
}

.cta-1-section .content p.cta-compact-copy {
  font-size: 15px;
  line-height: 26px;
  margin-bottom: 14px;
}

.roof-maintenance-hero {
  overflow: hidden;
  background: #fff;
}

.roof-maintenance-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(239, 22, 39, .06), transparent 34%);
  opacity: .65;
}

.roof-maintenance-content {
  position: relative;
  z-index: 1;
  max-width: 690px;
  margin-left: 0;
  padding-left: 6px;
}

.roof-maintenance-content .section-sub-title {
  color: var(--theme-color);
}

.roof-maintenance-content .section-sub-title::before {
  background: var(--theme-color);
}

.roof-maintenance-content h1 {
  margin: 24px 0 24px;
  color: var(--theme-color-1);
  font-size: 52px;
  font-weight: 900;
  line-height: 1.12;
}

.roof-maintenance-content p {
  color: #626a76;
  font-size: 17px;
  line-height: 1.75;
}

.roof-maintenance-lead {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(16, 32, 57, .12);
}

.roof-maintenance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  margin-top: 34px;
}

.maintenance-phone-link {
  display: inline-grid;
  grid-template-columns: 42px auto;
  column-gap: 14px;
  align-items: center;
  color: var(--theme-color-1);
  transition: all 0.3s ease;
}

.maintenance-phone-link i {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color);
  border: 1px solid var(--theme-color);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.maintenance-phone-link span {
  color: var(--theme-color);
  font-size: 14px;
  font-weight: 800;
}

.maintenance-phone-link strong {
  color: var(--theme-color-1);
  font-size: 22px;
  transition: all 0.3s ease;
}

.maintenance-phone-link:hover,
.maintenance-phone-link:hover strong {
  color: #1857b8;
}

.maintenance-phone-link:hover i {
  color: #fff;
  background: #1857b8;
  border-color: #1857b8;
}

.roof-maintenance-visual {
  min-height: 650px;
  padding: 0 0 20px 0;
  transform: translateX(36px);
}

.roof-maintenance-visual::before,
.roof-maintenance-visual::after {
  content: "";
  position: absolute;
  left: -22px;
  z-index: 0;
  width: 18px;
  border-radius: 999px;
  background: var(--theme-color);
  box-shadow: 0 18px 40px rgba(239, 22, 39, .2);
}

.roof-maintenance-visual::before {
  top: 76px;
  height: 230px;
}

.roof-maintenance-visual::after {
  top: 178px;
  left: -52px;
  height: 150px;
}

.roof-maintenance-visual figure.image {
  position: relative;
  z-index: 1;
  width: 480px;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
  border-radius: 50%;
  clip-path: none;
  box-shadow: 0 24px 58px rgba(16, 32, 57, .14);
}

.roof-maintenance-visual figure.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roof-maintenance-experience-badge {
  position: absolute;
  right: 54px;
  top: 306px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 250px;
  padding: 14px 18px;
  color: #fff;
  background: var(--theme-color);
  border-radius: 0 16px 16px 0;
  box-shadow: 0 20px 42px rgba(239, 22, 39, .25);
}

.roof-maintenance-experience-badge::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px -28px;
  width: 56px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 12px rgba(255, 255, 255, .2);
}

.roof-maintenance-experience-badge strong,
.roof-maintenance-experience-badge span {
  position: relative;
  z-index: 1;
}

.roof-maintenance-experience-badge strong {
  font-size: 34px;
  line-height: 1;
  font-weight: 900;
}

.roof-maintenance-experience-badge span {
  max-width: 130px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.roof-maintenance-skill-card {
  position: absolute;
  left: 0;
  top: 374px;
  bottom: auto;
  z-index: 4;
  transform: none;
  width: min(465px, 100%);
  padding: 30px;
  background: #102039;
  box-shadow: 0 24px 55px rgba(16, 32, 57, .28);
}

.roof-maintenance-skill-card h4 {
  margin-bottom: 24px;
  color: #fff;
  text-transform: uppercase;
}

.roof-maintenance-badge-row {
  position: absolute;
  left: 0;
  right: 86px;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: auto;
}

.roof-maintenance-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  min-height: 64px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 14px 30px rgba(12, 31, 58, .16);
}

.roof-maintenance-badge i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  color: #fff;
  background: var(--theme-color);
  border-radius: 6px;
  font-size: 15px;
}

.roof-maintenance-badge span {
  display: block;
  color: #5e6673;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}

.roof-maintenance-badge strong {
  display: block;
  margin-top: 3px;
  color: var(--theme-color-1);
  font-size: 15px;
  line-height: 1.15;
}

.commercial-maintenance-hero .roof-maintenance-visual {
  min-height: auto;
  padding: 0;
}

.commercial-maintenance-hero .roof-maintenance-visual figure.image {
  height: 440px;
}

.commercial-maintenance-progress-band {
  margin-top: 20px;
  padding: 26px;
  border-radius: 10px;
  background: linear-gradient(135deg, #071d3d 0%, #123d7c 54%, #1857b8 100%);
  box-shadow: 0 26px 58px rgba(16, 32, 57, .18);
}

.commercial-maintenance-progress-heading {
  margin-bottom: 22px;
}

.commercial-maintenance-progress-heading .section-sub-title {
  color: var(--theme-color);
}

.commercial-maintenance-progress-heading h3 {
  margin: 10px 0 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.2;
}

.commercial-maintenance-progress-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.commercial-maintenance-progress {
  padding: 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
}

.commercial-maintenance-progress div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
  color: #fff;
  font-weight: 900;
}

.commercial-maintenance-progress i {
  display: block;
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
}

.commercial-maintenance-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--theme-color), #ffffff);
}

.commercial-maintenance-counter-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.commercial-maintenance-counter-row div {
  padding: 14px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
}

.commercial-maintenance-counter-row strong {
  display: block;
  color: var(--theme-color);
  font-size: 24px;
  line-height: 1;
}

.commercial-maintenance-counter-row span {
  display: block;
  margin-top: 8px;
  color: var(--theme-color-1);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}

.maintenance-skill + .maintenance-skill {
  margin-top: 18px;
}

.maintenance-skill div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #fff;
  font-weight: 800;
}

.maintenance-skill i {
  display: block;
  height: 10px;
  background: #2f6fca;
  box-shadow: 32px 0 0 rgba(47, 111, 202, .22);
}

.maintenance-support-section {
  position: relative;
  overflow: hidden;
  padding: 88px 0;
  background: linear-gradient(135deg, #07172b 0%, #102039 55%, #162a48 100%);
}

.maintenance-support-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
  background-size: 34px 34px;
}

.maintenance-support-section .small-container {
  position: relative;
  z-index: 1;
}

.maintenance-support-content {
  max-width: 560px;
}

.maintenance-support-content .section-sub-title {
  color: var(--theme-color);
}

.maintenance-support-content h3 {
  margin: 18px 0 24px;
  color: #fff;
  font-size: 42px;
  line-height: 1.16;
}

.maintenance-support-content p {
  color: rgba(255, 255, 255, .82);
  font-size: 17px;
  line-height: 1.75;
}

.maintenance-support-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 30px;
}

.maintenance-support-actions .text-link {
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
}

.maintenance-support-actions .text-link i {
  margin-left: 8px;
  color: var(--theme-color);
}

.maintenance-support-list {
  display: grid;
  gap: 18px;
}

.maintenance-support-item {
  padding: 26px 30px;
  border-left: 4px solid var(--theme-color);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.maintenance-support-item h4 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 24px;
}

.maintenance-support-item p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  line-height: 1.65;
}

.maintenance-overview-section {
  position: relative;
  overflow: hidden;
  margin-bottom: -1px;
  background:
    linear-gradient(180deg, #174a7f 0%, #143f72 38%, #12335f 72%, #102039 100%);
}

.maintenance-overview-section .title-box .section-title,
.maintenance-overview-section > .small-container > .row p {
  color: #fff;
}

.maintenance-overview-section .section-sub-title {
  color: var(--theme-color);
}

.maintenance-overview-section::before {
  content: "";
  position: absolute;
  right: -120px;
  bottom: 8%;
  width: 420px;
  height: 300px;
  background: url("../imgs/shapes/shape-12-crane.png") center / contain no-repeat;
  opacity: .08;
  pointer-events: none;
}

.maintenance-overview-section::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(16, 32, 57, 0) 0%, #102039 100%);
  pointer-events: none;
}

.maintenance-overview-section .small-container {
  position: relative;
  z-index: 1;
}

.maintenance-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.maintenance-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 32px 30px 30px;
  border: 1px solid #dfe6ef;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(18, 103, 200, .05), transparent 48%),
    #fff;
  box-shadow: 0 14px 34px rgba(16, 32, 57, .07);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

.maintenance-card::before {
  content: "";
  position: absolute;
  right: -34px;
  top: -34px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(239, 22, 39, .18) 0 38%, rgba(239, 22, 39, .08) 39% 62%, transparent 63%);
  opacity: .85;
  transition: transform .3s ease, opacity .3s ease;
}

.maintenance-card::after {
  display: none;
}

.maintenance-card:hover {
  transform: translateY(-7px);
  border-color: rgba(18, 103, 200, .36);
  background-color: #f9fbff;
  box-shadow: 0 22px 46px rgba(16, 32, 57, .13);
}

.maintenance-card:hover::before {
  transform: scale(1.12) rotate(12deg);
  opacity: 1;
}

.roof-maintenance-child-links {
  position: relative;
  z-index: 0;
  overflow: hidden;
  margin-top: -92px;
  padding-top: 152px;
  background:
    linear-gradient(135deg, #143f72 0%, #102039 100%);
}

.roof-maintenance-child-links::before {
  content: "";
  position: absolute;
  right: -40px;
  top: 46px;
  width: 340px;
  height: 260px;
  background: url("../imgs/shapes/shape-12-crane.png") center / contain no-repeat;
  opacity: .12;
  pointer-events: none;
}

.roof-maintenance-child-links .small-container {
  position: relative;
  z-index: 1;
}

.roof-maintenance-child-links .section-title,
.roof-maintenance-child-links .section-title span {
  color: #fff;
}

.roof-maintenance-child-intro {
  margin-bottom: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  line-height: 1.7;
}

.roof-maintenance-child-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .14);
}

.roof-maintenance-child-grid::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 34px;
  left: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(18, 103, 200, .18) 16%, rgba(18, 103, 200, .18) 84%, transparent 100%);
  transform: translateY(-50%);
}

.roof-maintenance-child-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 156px;
  align-items: start;
  column-gap: 16px;
  row-gap: 12px;
  overflow: hidden;
  padding: 22px 18px;
  border-radius: 14px;
  color: var(--theme-color-dark);
  background: linear-gradient(135deg, #f5f8fc 0%, #fff 72%);
  box-shadow: inset 0 0 0 1px rgba(221, 230, 242, .85);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.roof-maintenance-child-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--theme-color);
  transform: scaleY(.32);
  transform-origin: center;
  transition: transform .28s ease, background .28s ease;
}

.roof-maintenance-child-card::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(239, 22, 39, .08);
  transition: transform .25s ease, background .25s ease;
}

.roof-maintenance-child-card:hover {
  transform: translateY(-5px);
  background: #102039;
  box-shadow: 0 18px 42px rgba(16, 32, 57, .18);
}

.roof-maintenance-child-card:hover::before {
  transform: scaleY(1);
  background: var(--theme-color);
}

.roof-maintenance-child-card:hover::after {
  transform: scale(1.22);
  background: rgba(255, 255, 255, .08);
}

.roof-maintenance-child-card > i {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 2;
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--theme-color);
  background: #fff;
  font-size: 25px;
  box-shadow: 0 10px 24px rgba(16, 32, 57, .08);
  transition: color .25s ease, transform .25s ease;
}

.roof-maintenance-child-card h3 {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  margin-bottom: 0;
  color: var(--theme-color-dark);
  font-size: 19px;
  line-height: 1.18;
  transition: color .25s ease;
}

.roof-maintenance-child-card p {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 2;
  padding-left: 0;
  margin-bottom: 0;
  color: #5b6e86;
  font-size: 14px;
  line-height: 1.55;
  transition: color .25s ease;
}

.roof-maintenance-child-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  grid-column: 2;
  grid-row: 3;
  padding-left: 0;
  align-items: center;
  gap: 9px;
  margin-top: 0;
  color: var(--theme-color);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: color .25s ease;
}

.roof-maintenance-child-card:hover h3,
.roof-maintenance-child-card:hover p,
.roof-maintenance-child-card:hover .roof-maintenance-child-link {
  color: #fff;
}

.roof-maintenance-child-card:hover > i {
  color: #102039;
  transform: translateX(3px);
}

.roof-maintenance-child-card:hover .roof-maintenance-child-link i {
  transform: translateX(4px);
}

/* Roof Installation intro */
.roof-installation-intro {
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 22%, rgba(18, 103, 200, .08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  color: var(--theme-color-dark);
}

.roof-installation-bg-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(16, 32, 57, .035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(16, 32, 57, .025) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .45;
  pointer-events: none;
}

.roof-installation-media {
  min-height: 620px;
  padding-left: 52px;
}

.roof-installation-media::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 4px;
  top: 28px;
  width: 530px;
  height: 530px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .72) 34%, rgba(18, 103, 200, .14) 68%, rgba(239, 22, 39, .10) 100%);
  box-shadow: inset 0 0 0 1px rgba(18, 103, 200, .08), 0 30px 80px rgba(16, 32, 57, .12);
}

.roof-installation-main-img {
  position: relative;
  z-index: 1;
  width: min(480px, 86%);
  height: 490px;
  margin: 0 0 0 54px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .34);
}

.roof-installation-main-img img,
.roof-installation-small-img img,
.roof-installation-small-img video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roof-installation-small-img {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 72px;
  width: 250px;
  height: 278px;
  overflow: hidden;
  border: 10px solid rgba(255, 255, 255, .95);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.roof-installation-small-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(16, 32, 57, .18);
}

.roof-installation-video-badge {
  position: absolute;
  z-index: 4;
  left: 248px;
  bottom: 72px;
  min-width: 245px;
  min-height: 96px;
  display: grid;
  grid-template-columns: auto;
  align-items: center;
  padding: 18px 24px;
  border-radius: 0 10px 10px 0;
  background: var(--theme-color);
  box-shadow: 0 24px 60px rgba(239, 22, 39, .34);
}

.roof-installation-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--theme-color);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 15px rgba(255, 255, 255, .24);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
}

.roof-installation-play:hover {
  color: #1267c8;
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 0 0 18px rgba(255, 255, 255, .28), 0 14px 28px rgba(16, 32, 57, .18);
}

.roof-installation-play i {
  transform: translateX(2px);
}

.roof-installation-video-modal {
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 13, 28, .84);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

body.roof-installation-video-open {
  overflow: hidden;
}

.roof-installation-video-modal.is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.roof-installation-video-modal-inner {
  position: relative;
  width: min(960px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: #071629;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .42);
  transform: translateY(18px) scale(.98);
  transition: transform .25s ease;
}

.roof-installation-video-modal.is-open .roof-installation-video-modal-inner {
  transform: translateY(0) scale(1);
}

.roof-installation-video-modal-inner video {
  display: block;
  width: 100%;
  max-height: 78vh;
  background: #071629;
}

.roof-installation-video-close {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}

.roof-installation-video-close:hover {
  background: #1267c8;
  transform: translateY(-2px);
}

.roof-installation-video-badge strong {
  color: #fff;
  font-size: 42px;
  line-height: 1;
}

.roof-installation-video-badge small {
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}

.roof-installation-content {
  padding-left: 24px;
}

.roof-installation-content .section-sub-title {
  color: var(--theme-color);
  letter-spacing: .24em;
}

.roof-installation-content .section-title,
.roof-installation-content .section-title span {
  color: var(--theme-color-dark);
}

.roof-installation-content p {
  max-width: 690px;
  color: #5f6d7d;
}

.roof-installation-feature-list {
  display: grid;
  gap: 24px;
  margin-top: 34px;
}

.roof-installation-feature-list article {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.roof-installation-feature-list i {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(239, 22, 39, .18);
  border-radius: 50%;
  background: rgba(239, 22, 39, .95);
  font-size: 30px;
  box-shadow: 0 16px 34px rgba(239, 22, 39, .2);
}

.roof-installation-feature-list h3 {
  margin-bottom: 8px;
  color: var(--theme-color-dark);
  font-size: 25px;
  line-height: 1.2;
}

.roof-installation-feature-list p {
  margin-bottom: 0;
  font-size: 16px;
}

.roof-installation-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}

.roof-installation-actions .primary-btn-1,
.roof-installation-call {
  min-height: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  line-height: 1;
}

.roof-installation-call {
  gap: 10px;
  color: #fff;
  background: #1267c8;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 18px 40px rgba(18, 103, 200, .25);
  transition: transform .25s ease, background .25s ease;
}

.roof-installation-call:hover {
  color: #fff;
  background: #0b4f9d;
  transform: translateY(-2px);
}

.roof-installation-planning-section {
  position: relative;
  overflow: hidden;
  margin-top: -120px;
  padding: 235px 0 100px;
  background:
    linear-gradient(135deg, #102039 0%, #132f53 56%, #1c1c35 100%);
}

.roof-installation-planning-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(18, 103, 200, .22), transparent 32%),
    radial-gradient(circle at 90% 24%, rgba(239, 22, 39, .13), transparent 30%),
    linear-gradient(115deg, transparent 0%, transparent 68%, rgba(239, 22, 39, .08) 68%, transparent 88%);
  pointer-events: none;
}

.roof-installation-planning-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 54px;
  align-items: center;
}

.roof-installation-planning-content .section-sub-title {
  color: var(--theme-color);
}

.roof-installation-planning-content .section-title {
  max-width: 620px;
  margin-bottom: 22px;
  color: #fff;
}

.roof-installation-planning-content .section-title span {
  color: rgba(255, 255, 255, .82);
}

.roof-installation-planning-content p {
  max-width: 650px;
  color: rgba(255, 255, 255, .74);
  font-size: 16px;
  line-height: 1.75;
}

.roof-installation-planning-content p + p {
  margin-top: 16px;
}

.roof-installation-planning-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.roof-installation-planning-grid article {
  min-height: auto;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 24px 26px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.roof-installation-planning-grid article span {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--theme-color);
  font-size: 14px;
  font-weight: 800;
}

.roof-installation-planning-grid article h3 {
  grid-column: 2;
  margin-bottom: 8px;
  color: var(--theme-color-dark);
  font-size: 22px;
  line-height: 1.18;
}

.roof-installation-planning-grid article p {
  grid-column: 2;
  margin-bottom: 0;
  color: #5f6d7d;
  font-size: 15px;
  line-height: 1.65;
}

.roof-installation-planning-grid article:hover {
  transform: translateX(8px);
  background: #102039;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
}

.roof-installation-planning-grid article:hover h3,
.roof-installation-planning-grid article:hover p {
  color: #fff;
}

.roof-replacement-cornering-layout {
  margin-top: 0;
}

.roof-replacement-cornering-layout .title-box p {
  max-width: 900px;
  margin: 14px auto 0;
  color: #5f6d7d;
  font-size: 16px;
  line-height: 1.7;
}

.roof-replacement-risk-panel {
  background-image:
    linear-gradient(135deg, rgba(16, 32, 57, .96), rgba(18, 103, 200, .82) 72%, rgba(239, 22, 39, .62)),
    url("../imgs/service/choose-1-commercial-new-roof-01.webp");
  background-blend-mode: multiply, normal;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.roof-replacement-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.roof-replacement-panel-actions .primary-btn-1,
.roof-replacement-panel-actions .roof-installation-call {
  min-height: 52px;
  height: 52px;
  padding: 0 20px;
  font-size: 13px;
}

.roof-replacement-panel-actions .roof-installation-call {
  background: #1267c8;
}

.roof-replacement-protection-list .cornering-protection-item:hover {
  background: #102039;
}

.roof-replacement-protection-list .cornering-protection-item:hover h5,
.roof-replacement-protection-list .cornering-protection-item:hover p {
  color: #fff;
}

.service-section-three.roof-installation-services-section {
  margin-top: 0;
  padding-top: 125px;
}

@media only screen and (max-width: 1199px) {
  .roof-installation-media {
    min-height: 560px;
    max-width: 620px;
    margin: 0 auto;
  }

  .roof-installation-content {
    padding-left: 0;
  }

  .roof-installation-planning-wrap {
    grid-template-columns: 1fr;
  }

  .roof-installation-planning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .roof-replacement-reasons-wrap {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .roof-installation-intro {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .roof-installation-media {
    min-height: auto;
    padding-left: 26px;
    padding-bottom: 160px;
  }

  .roof-installation-main-img {
    width: calc(100% - 18px);
    height: 340px;
    margin-left: 28px;
  }

  .roof-installation-small-img {
    left: 0;
    bottom: 72px;
    width: 190px;
    height: 205px;
    border-width: 8px;
  }

  .roof-installation-video-badge {
    left: 150px;
    bottom: 72px;
    min-width: 0;
    width: calc(100% - 150px);
    grid-template-columns: 58px auto;
    min-height: 86px;
    padding: 14px 16px;
  }

  .roof-installation-play {
    width: 54px;
    height: 54px;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, .22);
  }

  .roof-installation-video-badge strong {
    font-size: 32px;
  }

  .roof-installation-video-badge small {
    font-size: 12px;
  }

  .roof-installation-feature-list article {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
  }

  .roof-installation-feature-list i {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .roof-installation-feature-list h3 {
    font-size: 21px;
  }

  .roof-installation-planning-section {
    margin-top: -80px;
    padding: 175px 0 70px;
  }

  .roof-installation-planning-grid {
    grid-template-columns: 1fr;
  }

  .roof-installation-planning-grid article {
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 22px;
  }

  .service-section-three.roof-installation-services-section {
    padding-top: 80px;
  }

}

@media only screen and (max-width: 480px) {
  .roof-installation-media {
    padding-bottom: 178px;
  }

  .roof-installation-main-img {
    height: 285px;
  }

  .roof-installation-small-img {
    width: 162px;
    height: 178px;
  }

  .roof-installation-video-badge {
    left: 124px;
    width: calc(100% - 124px);
  }

  .roof-installation-actions {
    align-items: stretch;
  }

  .roof-installation-actions .primary-btn-1,
  .roof-installation-call {
    width: 100%;
    justify-content: center;
  }

  .roof-installation-planning-content .section-title {
    font-size: 34px;
  }
}

.maintenance-secondary-cta {
  position: relative;
  overflow: hidden;
  margin-top: -1px;
  padding: 74px 0 86px;
  background:
    linear-gradient(180deg, #102039 0%, #102039 24%, var(--theme-color) 24%, var(--theme-color) 68%, #ffffff 68%, #ffffff 100%);
}

.maintenance-secondary-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  background:
    radial-gradient(circle at 15% 62%, rgba(255, 255, 255, .16), transparent 25%),
    radial-gradient(circle at 82% 33%, rgba(255, 255, 255, .12), transparent 28%);
  pointer-events: none;
}

.maintenance-secondary-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, .86fr);
  overflow: hidden;
  border-radius: 24px;
  background: #102039;
  box-shadow: 0 28px 70px rgba(6, 18, 37, .26);
}

.maintenance-secondary-media {
  position: relative;
  min-height: 310px;
  margin: 0;
  overflow: hidden;
  background: #102039;
}

.maintenance-secondary-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16, 32, 57, .28), rgba(16, 32, 57, .04)),
    linear-gradient(180deg, transparent 64%, rgba(16, 32, 57, .18));
}

.maintenance-secondary-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.maintenance-secondary-content {
  position: relative;
  display: flex;
  min-height: 310px;
  flex-direction: column;
  justify-content: center;
  padding: 48px 54px;
  background:
    linear-gradient(135deg, rgba(23, 74, 127, .55), rgba(16, 32, 57, .98)),
    #102039;
}

.maintenance-secondary-content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 38px;
  bottom: 38px;
  width: 5px;
  border-radius: 999px;
  background: var(--theme-color);
}

.maintenance-secondary-content::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: 24px;
  width: 178px;
  height: 150px;
  background: url("../imgs/shapes/shape-12-crane.png") center / contain no-repeat;
  opacity: .08;
  pointer-events: none;
}

.maintenance-secondary-eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-bottom: 10px;
  color: #ff6672;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.maintenance-secondary-content h4 {
  position: relative;
  z-index: 1;
  margin-bottom: 14px;
  color: #fff;
  font-size: 32px;
  line-height: 1.15;
}

.maintenance-secondary-content p {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, .78);
  font-size: 16px;
  line-height: 1.65;
}

.maintenance-secondary-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.maintenance-secondary-quote,
.maintenance-secondary-phone {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}

.maintenance-secondary-quote {
  color: #fff;
  background: var(--theme-color);
}

.maintenance-secondary-phone {
  color: #fff;
  background: #1267c8;
  box-shadow: 0 14px 26px rgba(18, 103, 200, .22);
}

.maintenance-secondary-phone:hover,
.maintenance-secondary-quote:hover {
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 1199px) {
  .roof-maintenance-child-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roof-maintenance-child-grid::before {
    display: none;
  }
}

@media (max-width: 991px) {
  .maintenance-secondary-panel {
    grid-template-columns: 1fr;
  }

  .maintenance-secondary-media {
    min-height: 260px;
  }

  .maintenance-secondary-content {
    min-height: auto;
  }
}

@media (max-width: 767px) {
  .roof-maintenance-child-grid {
    grid-template-columns: 1fr;
  }

  .roof-maintenance-child-card {
    min-height: auto;
    padding: 26px 22px 24px;
  }

  .maintenance-secondary-cta {
    padding: 50px 0 60px;
  }

  .maintenance-secondary-panel {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }

  .maintenance-secondary-media {
    min-height: 220px;
  }

  .maintenance-secondary-content {
    min-height: auto;
    padding: 34px 26px;
  }

  .maintenance-secondary-content::before {
    top: 24px;
    bottom: 24px;
  }

  .maintenance-secondary-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.maintenance-card i {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 18px;
  color: var(--theme-color);
  font-size: 42px;
}

.maintenance-card h4 {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;
  color: var(--theme-color-dark);
}

.maintenance-card p {
  position: relative;
  z-index: 1;
  color: #5b6e86;
}

.maintenance-details-section {
  position: relative;
  overflow: hidden;
  background: var(--theme-color-1);
}

.maintenance-details-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 14% 18%, rgba(255, 255, 255, .12), transparent 28%);
}

.maintenance-details-section .small-container {
  position: relative;
  z-index: 1;
}

.maintenance-details-section .title-box p {
  max-width: 720px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, .78);
}

.maintenance-detail-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.maintenance-detail-list div {
  position: relative;
  overflow: hidden;
  padding: 28px 24px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(28, 52, 86, .82), rgba(16, 32, 57, .64));
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 34px rgba(0, 0, 0, .18);
  backdrop-filter: blur(12px);
  transition: transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.maintenance-detail-list div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(239, 21, 35, .96), rgba(180, 14, 26, .92));
  opacity: 0;
  transition: opacity .28s ease;
  z-index: 0;
}

.maintenance-detail-list div:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 24px 50px rgba(239, 21, 35, .28);
}

.maintenance-detail-list div:hover::before {
  opacity: 1;
}

.main-menu ul li .submenu.service-areas-submenu > li.menu-featured-city > a {
  color: #102039;
  background: #ffffff;
  border-left-color: transparent;
  border-bottom-color: #eeeeee;
  font-weight: 700;
}

.main-menu ul li .submenu.service-areas-submenu > li.menu-featured-city > a::before {
  content: "\f3c5";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  margin-right: 8px;
}

.main-menu ul li .submenu.service-areas-submenu > li.menu-featured-city:hover > a {
  background: #f6f9fc;
  color: var(--theme-color);
  border-left-color: #1f5f99;
}

.main-menu ul li .submenu.service-areas-submenu > li.service-area-featured-strip span,
.main-menu ul li .submenu.service-areas-submenu > li.service-area-menu-strip span {
  display: block;
  padding: 4px 20px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-left: 5px solid #102039;
}

.main-menu ul li .submenu.service-areas-submenu > li.service-area-featured-strip span {
  background: #f1f4f7;
  color: #102039;
  border-left: none;
}

.main-menu ul li .submenu.service-areas-submenu > li.service-area-menu-strip span {
  background: #1f5f99;
  border-left: none;
}

.main-menu ul li .submenu.service-areas-submenu > li.menu-county-group > a {
  color: #ffffff;
  background: #102039;
  border-left-color: transparent;
  font-weight: 800;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.main-menu ul li .submenu.service-areas-submenu > li.menu-county-group > a::after {
  color: #d7dee8;
  content: "+";
}

.main-menu ul li .submenu.service-areas-submenu > li.menu-county-group:hover > a::after {
  color: #d7dee8;
  content: "\2192";
}

.main-menu ul li .submenu.service-areas-submenu > li.menu-county-group:hover > a {
  color: #ffffff;
  background: #153e73;
  border-left-color: #61a8ee;
}

.main-menu ul li .submenu.service-areas-submenu > li.menu-county-group > .submenu {
  width: 520px;
  top: -235px;
  max-height: calc(100vh - 205px);
  overflow-y: auto;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 8px;
}

.main-menu ul li .submenu.service-areas-submenu > li.menu-county-group > .submenu li a {
  white-space: normal;
}

.maintenance-detail-list div > * {
  position: relative;
  z-index: 1;
}

.maintenance-detail-list span {
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.maintenance-detail-list h4 {
  margin: 10px 0 12px;
  color: #fff;
  font-size: 22px;
  line-height: 1.25;
}

.maintenance-detail-list p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
}

.roof-maintenance-page .help-3-form-section {
  margin-top: 0;
}

.siding-hero-section {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.siding-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, #fff 60%, var(--theme-color-1) 60%, var(--theme-color-1) 100%);
}

.siding-hero-content,
.siding-hero-visual {
  position: relative;
  z-index: 1;
}

.siding-hero-content h1 {
  margin: 20px 0 22px;
  color: var(--theme-color-1);
  font-size: 52px;
  font-weight: 900;
  line-height: 1.12;
}

.siding-hero-content p {
  font-size: 17px;
  line-height: 1.75;
}

.siding-hero-lead {
  color: #4f5968;
}

.siding-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  margin-top: 34px;
}

.siding-phone-link {
  display: inline-grid;
  grid-template-columns: 44px auto;
  column-gap: 14px;
  align-items: center;
  color: var(--theme-color-1);
}

.siding-phone-link i {
  grid-row: span 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--theme-color);
  border-radius: 50%;
}

.siding-phone-link span {
  color: #666f7d;
  font-size: 14px;
  font-weight: 700;
}

.siding-phone-link strong {
  color: var(--theme-color-1);
  font-size: 22px;
}

.siding-hero-visual {
  padding: 28px 0 38px 42px;
}

.commercial-siding-page .siding-hero-visual::before,
.commercial-siding-page .siding-hero-visual::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.commercial-siding-page .siding-hero-visual::before {
  right: -74px;
  top: -8px;
  z-index: 0;
  width: 500px;
  height: 500px;
  border: 24px solid rgba(237, 23, 36, .92);
  box-shadow: 0 28px 70px rgba(237, 23, 36, .16);
}

.commercial-siding-page .siding-hero-visual::after {
  right: -10px;
  top: 58px;
  z-index: 0;
  width: 360px;
  height: 360px;
  border: 18px solid rgba(255, 255, 255, .9);
}

.siding-hero-visual figure.image {
  position: relative;
  z-index: 1;
  height: 560px;
  overflow: hidden;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(12, 31, 58, .18);
}

.siding-hero-visual figure.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.siding-hero-layered-image {
  position: absolute;
  left: -38px;
  top: 82px;
  z-index: 2;
  width: 230px;
  height: 164px;
  margin: 0;
  overflow: hidden;
  border: 10px solid #fff;
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(12, 31, 58, .22);
}

.siding-hero-layered-image img,
.siding-hero-layered-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.siding-hero-card {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  max-width: 320px;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 24px;
  color: #fff;
  background: var(--theme-color);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(239, 22, 39, .22);
}

.siding-hero-card strong {
  font-size: 46px;
  line-height: 1;
}

.siding-hero-card span {
  font-weight: 800;
  line-height: 1.35;
}

.commercial-siding-page .siding-hero-visual {
  padding-bottom: 92px;
}

.commercial-siding-page .siding-hero-layered-image {
  left: -72px;
  top: 104px;
  z-index: 4;
}

.commercial-siding-page .siding-hero-card {
  left: -40px;
  bottom: 54px;
  z-index: 5;
}

.commercial-parking-structure-page .parking-structure-hero::before {
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .16) 0 18%, transparent 34%),
    linear-gradient(90deg, rgba(237, 23, 36, .98) 0%, rgba(142, 7, 16, .98) 42%, #fff 42%, #fff 100%);
}

/* Commercial surface hero variations */
.parking-resurfacing-page .parking-structure-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -32px;
  left: -74px;
  width: 470px;
  height: 470px;
  background: transparent;
  border: 4px solid rgba(18, 103, 200, .92);
  border-radius: 50%;
  box-shadow: inset 0 0 0 16px #fff, 0 22px 54px rgba(18, 103, 200, .22);
  pointer-events: none;
}

.parking-resurfacing-page .parking-structure-visual figure.image {
  position: relative;
  z-index: 1;
}

.parking-structure-top-card {
  position: absolute;
  z-index: 3;
  top: 56px;
  left: -42px;
  display: grid;
  grid-template-columns: 1fr;
  min-width: 220px;
  min-height: 178px;
  color: #102441;
  background: #fff;
  border: 2px solid var(--theme-color);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(16, 36, 65, .20);
}

.parking-structure-top-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  text-align: center;
}

.parking-structure-top-stat + .parking-structure-top-stat {
  border-top: 1px solid rgba(16, 36, 65, .18);
}

.parking-structure-top-stat strong {
  display: block;
  font-size: 28px;
  line-height: 1;
}

.parking-structure-top-stat span {
  display: block;
  margin-top: 6px;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1.3;
}

@media (max-width: 991px) {
  .parking-structure-top-card {
    top: 34px;
    left: 18px;
  }
}

@media (min-width: 992px) {
  .commercial-asphalt-page .parking-structure-hero .row > .col-xxl-7,
  .commercial-hardscaping-page .parking-structure-hero .row > .col-xxl-7 {
    order: 2;
  }

  .commercial-asphalt-page .parking-structure-hero .row > .col-xxl-5,
  .commercial-hardscaping-page .parking-structure-hero .row > .col-xxl-5 {
    order: 1;
  }
}

.commercial-parking-structure-page .parking-structure-content h1 {
  color: var(--theme-color-1);
}

.commercial-parking-structure-page .parking-structure-content p {
  color: #666f7d;
}

.commercial-parking-structure-page .parking-structure-content .siding-hero-lead {
  color: #4f5968;
}

.commercial-parking-structure-page .parking-structure-content .section-sub-title {
  color: var(--theme-color);
}

.parking-structure-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.parking-structure-badges span {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 12px 16px;
  color: var(--theme-color-1);
  background: #f6f8fb;
  border: 1px solid #e7edf5;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.commercial-parking-structure-page .parking-phone-link {
  color: var(--theme-color-1);
}

.commercial-parking-structure-page .parking-phone-link span,
.commercial-parking-structure-page .parking-phone-link strong {
  color: var(--theme-color-1);
}

.commercial-parking-structure-page .parking-phone-link i {
  background: #1267c8;
}

.parking-structure-visual figure.image {
  border: 6px solid rgba(255, 255, 255, .22);
}

.parking-structure-card {
  background: #102441;
  box-shadow: 0 18px 38px rgba(16, 36, 65, .28);
}

.parking-structure-seo-section {
  background: #f6f8fb;
}

.parking-structure-seo-section .parking-reveal {
  opacity: 0;
  transition: opacity 850ms ease, transform 850ms cubic-bezier(.2, .75, .25, 1);
  will-change: opacity, transform;
}

.parking-structure-seo-section .parking-reveal-left {
  transform: translateX(-48px);
}

.parking-structure-seo-section .parking-reveal-right {
  transform: translateX(48px);
}

.parking-structure-seo-section .parking-reveal-up {
  transform: translateY(36px);
}

.parking-structure-seo-section .parking-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

.parking-structure-seo-grid .parking-reveal:nth-child(2) {
  transition-delay: 120ms;
}

.parking-structure-seo-grid .parking-reveal:nth-child(3) {
  transition-delay: 240ms;
}

.parking-structure-seo-grid .parking-reveal:nth-child(4) {
  transition-delay: 360ms;
}

.parking-structure-seo-top {
  --bs-gutter-x: 4.5rem;
}

.parking-structure-seo-section .section-title {
  color: var(--theme-color-1);
  font-size: 42px;
  line-height: 1.18;
}

.parking-structure-seo-content {
  padding-left: 0;
}

.parking-structure-seo-content p {
  color: #5f6d7d;
  font-size: 16px;
  line-height: 1.75;
}

.parking-structure-seo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 42px;
}

.parking-structure-seo-card {
  position: relative;
  min-height: 205px;
  padding: 24px 22px 26px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(18, 103, 200, .22) 0%, rgba(18, 103, 200, 0) 42%),
    linear-gradient(135deg, #102039 0%, #142b4d 100%);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 18px 42px rgba(16, 32, 57, .18);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.parking-structure-seo-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--theme-color);
}

.parking-structure-seo-card::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -38px;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}

.parking-structure-seo-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: 0 24px 54px rgba(16, 32, 57, .26);
}

.parking-structure-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.parking-structure-card-top span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #fff;
  background: var(--theme-color);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
}

.parking-structure-card-top i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: #ffffff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  font-size: 20px;
}

.parking-structure-seo-grid h3 {
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  color: #fff;
  font-size: 20px;
  line-height: 1.25;
}

.parking-structure-seo-grid p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255, 255, 255, .74);
  font-size: 15px;
  line-height: 1.6;
}

.parking-structure-seo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-top: 28px;
}

.parking-structure-seo-actions .primary-btn-1-red,
.parking-seo-call {
  min-height: 54px;
}

.parking-seo-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 20px;
  color: #fff;
  background: #1267c8;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 900;
}

.parking-seo-call:hover {
  color: #fff;
  background: #0d4f9f;
  transform: translateY(-2px);
}

.parking-structure-seo-image-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 0;
}

.parking-structure-seo-image {
  flex: 0 0 min(430px, 100%);
  width: min(430px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0;
  overflow: hidden;
  border-radius: 50%;
  border: 8px solid #fff;
  box-shadow: 0 22px 48px rgba(16, 32, 57, .18);
}

.parking-structure-seo-video {
  position: relative;
}

.parking-structure-seo-video::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .36);
  pointer-events: none;
  animation: parkingCirclePulse 4.8s ease-in-out infinite;
}

.parking-structure-seo-image img,
.parking-structure-seo-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.parking-structure-seo-note {
  width: min(360px, 92%);
  max-width: 360px;
  margin: -34px auto 0;
  padding: 18px 20px;
  background: #fff;
  border-left: 4px solid var(--theme-color);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(16, 32, 57, .08);
}

.parking-structure-seo-note strong,
.parking-structure-seo-note span {
  display: block;
}

.parking-structure-seo-note strong {
  margin-bottom: 7px;
  color: var(--theme-color-1);
  font-size: 16px;
  font-weight: 900;
}

.parking-structure-seo-note span {
  color: #5f6d7d;
  font-size: 14px;
  line-height: 1.45;
}

@keyframes parkingCirclePulse {
  0%, 100% {
    transform: scale(.96);
    opacity: .28;
  }
  50% {
    transform: scale(1.02);
    opacity: .72;
  }
}

@media only screen and (max-width: 991px) {
  .parking-structure-seo-top {
    --bs-gutter-x: 1.5rem;
  }

  .parking-structure-seo-section .section-title {
    font-size: 34px;
  }

  .parking-structure-seo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .parking-structure-seo-card {
    min-height: auto;
  }

  .parking-structure-seo-image-wrap {
    margin-top: 0;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parking-structure-seo-section .parking-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .parking-structure-seo-video::after {
    animation: none;
  }
}

/* Warehouse roof services page */
.warehouse-roof-services-page .warehouse-circle-video-area,
.warehouse-roof-services-page .warehouse-circle-video {
  overflow: hidden;
  border-radius: 50%;
}

.warehouse-roof-services-page .warehouse-circle-video-area {
  box-shadow: 0 18px 42px rgba(16, 32, 57, .18);
}

.warehouse-roof-services-page .warehouse-circle-video {
  border: 7px solid #fff;
}

.warehouse-hero-actions {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 30px;
}

.warehouse-hero-actions .primary-btn-1-red,
.warehouse-hero-actions .primary-btn-1-blue-white {
  min-height: 54px;
}

.warehouse-capability-wrap {
  width: 100%;
}

.warehouse-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding-top: 42px;
}

.warehouse-capability-card {
  position: relative;
  min-height: 245px;
  padding: 30px 28px;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(239, 22, 39, .38);
  box-shadow: 0 16px 42px rgba(16, 32, 57, .08);
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease, background 300ms ease;
}

.warehouse-capability-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(239, 22, 39, .16);
  border-radius: 9px;
  pointer-events: none;
}

.warehouse-capability-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 18px;
  color: #fff;
  background: var(--theme-color);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}

.warehouse-capability-card i {
  position: absolute;
  top: 24px;
  right: 22px;
  color: rgba(18, 103, 200, .24);
  font-size: 46px;
}

.warehouse-capability-card h5 {
  margin-bottom: 10px;
  color: var(--theme-color-1);
  font-size: 20px;
  line-height: 1.22;
}

.warehouse-capability-card p {
  margin: 0;
  color: #5f6d7d;
  font-size: 15px;
  line-height: 1.6;
}

.warehouse-capability-card:hover {
  transform: translateY(-8px);
  background: #102039;
  border-color: #1267c8;
  box-shadow: 0 28px 62px rgba(16, 32, 57, .2);
}

.warehouse-capability-card:hover::before {
  border-color: rgba(255, 255, 255, .22);
}

.warehouse-capability-card:hover span {
  color: #102039;
  background: #fff;
}

.warehouse-capability-card:hover i {
  color: rgba(255, 255, 255, .22);
}

.warehouse-capability-card:hover h5,
.warehouse-capability-card:hover p {
  color: #fff;
}

.warehouse-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 760ms ease, transform 760ms cubic-bezier(.2, .75, .25, 1);
}

.warehouse-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.warehouse-capability-grid .warehouse-reveal:nth-child(2) {
  transition-delay: 120ms;
}

.warehouse-capability-grid .warehouse-reveal:nth-child(3) {
  transition-delay: 240ms;
}

.warehouse-secondary-content {
  background: linear-gradient(180deg, #f6f8fb 0%, #fff 100%);
}

.warehouse-secondary-copy p {
  color: #5f6d7d;
  font-size: 16px;
  line-height: 1.75;
}

.warehouse-secondary-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 26px;
}

.warehouse-secondary-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  color: #fff;
  background: #1267c8;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(18, 103, 200, .18);
}

.warehouse-secondary-phone:hover {
  color: #fff;
  background: #0d4f9f;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(18, 103, 200, .26);
}

.warehouse-secondary-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.warehouse-secondary-image {
  height: 250px;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #102039;
  box-shadow: 0 20px 46px rgba(16, 32, 57, .12);
}

.warehouse-secondary-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 78% center;
  display: block;
  transform: scale(1.18);
  transform-origin: 78% center;
}

.warehouse-secondary-item {
  min-height: 158px;
  overflow: hidden;
  color: var(--theme-color-1);
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e6edf5;
  box-shadow: 0 14px 34px rgba(16, 32, 57, .07);
  transition: transform 260ms ease, box-shadow 260ms ease;
}

.warehouse-secondary-panel strong,
.warehouse-secondary-panel span {
  display: block;
}

.warehouse-secondary-panel strong {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  padding: 15px 18px;
  color: #fff;
  background: var(--theme-color);
  font-size: 17px;
  line-height: 1.25;
}

.warehouse-secondary-panel strong i {
  color: #fff;
  font-size: 18px;
}

.warehouse-secondary-panel span {
  padding: 18px;
  color: #5f6d7d;
  line-height: 1.55;
}

.warehouse-secondary-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(16, 32, 57, .12);
}

.warehouse-material-section {
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 255, 255, .08), transparent 28%),
    linear-gradient(135deg, #081b35 0%, #102039 48%, #17345e 100%);
}

.warehouse-material-section .title-box p {
  max-width: 720px;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, .74);
}

.warehouse-material-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.warehouse-material-card {
  position: relative;
  min-height: 335px;
  padding: 26px 24px;
  overflow: hidden;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 260ms ease, background 260ms ease, border-color 260ms ease;
}

.warehouse-material-card::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -44px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(239, 22, 39, .14);
}

.warehouse-material-card:hover {
  transform: translateY(-7px);
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .22);
}

.warehouse-material-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.warehouse-material-header span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 8px 12px;
  color: #fff;
  background: var(--theme-color);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.warehouse-material-header i {
  color: rgba(255, 255, 255, .8);
  font-size: 30px;
}

.warehouse-material-card h5,
.warehouse-material-card p,
.warehouse-material-card ul {
  position: relative;
  z-index: 1;
}

.warehouse-material-card h5 {
  margin-bottom: 13px;
  color: #fff;
  font-size: 22px;
  line-height: 1.22;
}

.warehouse-material-card p {
  color: rgba(255, 255, 255, .74);
  font-size: 15px;
  line-height: 1.62;
}

.warehouse-material-card ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.warehouse-material-card li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 20px;
  color: rgba(255, 255, 255, .86);
  font-size: 14px;
  font-weight: 700;
}

.warehouse-material-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--theme-color);
  border-radius: 50%;
}

@media only screen and (max-width: 1199px) {
  .warehouse-material-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .warehouse-capability-grid {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 767px) {
  .warehouse-capability-grid,
  .warehouse-secondary-panel,
  .warehouse-material-grid {
    grid-template-columns: 1fr;
  }

  .warehouse-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .warehouse-secondary-actions {
    justify-content: flex-start;
  }

  .warehouse-secondary-image {
    height: 210px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .warehouse-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.siding-overview-section {
  background: #f6f8fb;
}

.siding-scope-panel {
  display: grid;
  grid-template-columns: minmax(260px, 34%) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 10px;
  background: #f6f8fb;
  box-shadow: 0 18px 42px rgba(12, 31, 58, .08);
}

.siding-scope-lead {
  padding: 38px;
  color: #fff;
  background: var(--theme-color-1);
}

.siding-scope-lead span {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 8px 12px;
  color: #fff;
  background: var(--theme-color);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.siding-scope-lead h4 {
  color: #fff;
  font-size: 28px;
  line-height: 1.35;
}

.siding-scope-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.siding-scope-list div {
  min-height: 220px;
  padding: 34px;
  background: #fff;
  border-left: 1px solid #e7ebf0;
  border-bottom: 1px solid #e7ebf0;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.siding-scope-list div:hover {
  position: relative;
  z-index: 1;
  transform: translateY(-4px);
  background: #f9fbff;
  box-shadow: 0 16px 34px rgba(12, 31, 58, .1);
}

.siding-scope-list span {
  color: var(--theme-color);
  font-size: 14px;
  font-weight: 900;
}

.siding-scope-list h5 {
  margin: 10px 0 12px;
}

.siding-scope-list p {
  margin: 0;
}

.siding-advantage-section {
  overflow: hidden;
}

.siding-advantage-section .bg-image {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
}

.siding-advantage-section .small-container {
  position: relative;
  z-index: 1;
}

.siding-advantage-section .title-box p {
  max-width: 650px;
  margin-top: 18px;
  color: rgba(255,255,255,.78);
}

.siding-advantage-item {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
}

.siding-advantage-item .icon-box {
  width: 90px;
  height: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color);
  background: #fff;
  border-radius: 8px;
  font-size: 42px;
}

.siding-advantage-item h5 {
  color: #fff;
  margin-bottom: 10px;
}

.siding-advantage-item p {
  margin: 0;
  color: rgba(255,255,255,.82);
}

.siding-before-after {
  padding-left: 28px;
}

.siding-before-after-image {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 28px 70px rgba(0,0,0,.28);
}

.siding-before-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(0 calc(100% - var(--position)) 0 0);
  z-index: 1;
}

.siding-before-after-image::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 4px;
  background: #fff;
  z-index: 2;
  transform: translateX(-50%);
}

.siding-before-after-image img,
.siding-before-img img {
  width: 100%;
  height: 540px;
  object-fit: cover;
}

.siding-before-img img {
  filter: grayscale(1) contrast(.82) brightness(.76);
  max-width: none;
}

.siding-before-after-image button {
  position: absolute;
  left: var(--position);
  top: 50%;
  z-index: 3;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--theme-color);
  pointer-events: none;
}

.siding-before-after-image input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}

.before-label,
.after-label {
  position: absolute;
  bottom: 22px;
  z-index: 3;
  padding: 10px 18px;
  color: #fff;
  background: var(--theme-color);
  border-radius: 6px;
  font-weight: 800;
}

.before-label {
  left: 22px;
}

.after-label {
  right: 22px;
}

.commercial-siding-page .help-3-form-section {
  margin-top: 0;
}

.commercial-siding-page .cta-1-section .row {
  align-items: stretch;
}

.commercial-siding-page .cta-1-section .row > [class*="col-"] {
  display: flex;
}

.commercial-siding-page .cta-1-section figure.image {
  width: 100%;
  height: 100%;
  min-height: 334px;
  margin-bottom: 0;
}

.commercial-siding-page .cta-1-section figure.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commercial-siding-page .cta-1-section .content {
  width: 100%;
  min-height: 334px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.commercial-siding-page .cta-1-section .content:before {
  top: 0;
  left: -38px;
  height: 100%;
  transform: rotate(10deg);
  transform-origin: center;
}

.choose-3-section .shape-1 {
  position: absolute;
  top: 71px;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}


/* shine start */
.choose-3-section figure.image {
  position: relative;
  display: block;
  overflow: hidden;
}

.choose-3-section figure.image:before {
position: absolute;
top: 0;
left: -75%;
display: block;
content: '';
width: 50%;
height: 100%;
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, .3)));
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
-webkit-transform: skewX(-25deg);
-ms-transform: skewX(-25deg);
transform: skewX(-25deg);
}

.choose-3-section:hover figure.image:before {
  animation: shine 1.5s;
}
/* shine end */


@media only screen and (max-width: 991px){ 

  .choose-3-content-area{
    padding-left: 0;
    padding-top: 50px;
  }

  .cornering-image-area {
    padding-right: 0;
  }

  .cornering-image-area .image-3-area,
  .cornering-experience-box {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: 20px;
    width: 100%;
  }

  .cornering-image-support {
    margin-top: 24px;
  }

  .cornering-content-area {
    padding-left: 0;
    padding-top: 50px;
  }

  .cornering-proof-grid {
    grid-template-columns: 1fr;
  }

  .cornering-detail-grid {
    grid-template-columns: 1fr;
  }

  .cornering-detail-grid article {
    min-height: auto;
  }

  .cornering-why-layout {
    grid-template-columns: 1fr;
  }

  .cornering-counties-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cornering-counties-heading {
    max-width: 100%;
  }

  .cornering-bottom-callout {
    grid-template-columns: 1fr;
  }

  .roof-repair-image-area {
    transform: none;
  }

  .roof-repair-counter-row {
    transform: none;
  }

  .roof-repair-content-area {
    max-width: none;
    padding-left: 0;
  }

  .roof-repair-planning-content {
    max-width: none;
  }

  .roof-maintenance-content {
    max-width: none;
    padding-left: 0;
  }

  .roof-maintenance-content h1 {
    font-size: 42px;
  }

  .roof-maintenance-visual {
    min-height: auto;
    margin-top: 44px;
    padding: 0;
    transform: none;
  }

  .roof-maintenance-skill-card {
    position: relative;
    top: auto;
    width: 100%;
    margin-top: 18px;
    transform: none;
  }

  .roof-maintenance-badge-row {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 14px;
  }

  .maintenance-support-content {
    max-width: none;
    margin-bottom: 36px;
  }

  .maintenance-support-content h3 {
    font-size: 36px;
  }

  .maintenance-card-grid,
  .maintenance-detail-list,
  .roof-repair-planning-grid {
    grid-template-columns: 1fr 1fr;
  }

  .siding-hero-section::before {
    background: #fff;
  }

  .siding-hero-content h1 {
    font-size: 42px;
  }

  .siding-hero-visual {
    padding-left: 0;
  }

  .commercial-siding-page .siding-hero-visual {
    padding-bottom: 76px;
  }

  .commercial-siding-page .siding-hero-visual::before {
    right: -20px;
    top: 18px;
    width: 330px;
    height: 330px;
    border-width: 16px;
  }

  .commercial-siding-page .siding-hero-visual::after {
    right: 28px;
    top: 66px;
    width: 236px;
    height: 236px;
    border-width: 12px;
  }

  .siding-hero-layered-image {
    left: 18px;
    top: 32px;
    width: 190px;
    height: 132px;
    border-width: 8px;
  }

  .commercial-siding-page .siding-hero-layered-image {
    left: 18px;
    top: 32px;
  }

  .commercial-siding-page .siding-hero-card {
    left: 0;
    bottom: 28px;
  }

  .siding-scope-panel {
    grid-template-columns: 1fr;
  }

  .siding-before-after {
    padding-left: 0;
  }
                        
  }

@media only screen and (max-width: 425px){ 

  .choose-3-image-area .image-3-area{
    display: none;
  }

  .cornering-counties-grid {
    grid-template-columns: 1fr;
  }
                        
}


/*----------------------------------------*/
/* FAQ CSS START
/*----------------------------------------*/

.faq-container .section-title {
  color: #fff;
}

.faq-section .shape-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.faq-section .shape-2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center left;
}

.faq-section .shape-3 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
}

/* faq start */

.accordion-button {
  padding: 20px 30px;
  text-align: left;
  background: #fff;
  gap: 15px;
  color: var(--theme-color-1);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
 }

  .accordion-button::after {
  content: "\f101";
  background-image: none;
  font-family: "Font Awesome 6 Pro";
  font-size: 20px;
  font-weight: 400;
  height: 30px;
  width: 30px;
  border: 1px solid #fff;
  line-height: 30px;
  border-radius: 50%;
  margin-inline-start: 0;
  text-align: center;
  position: absolute;
  right: 19px;
 }

.accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
  color: var(--theme-color);
}

.accordion-button:not(.collapsed)::after {
  background: #fff;
  color: var(--primary-color);
  content: "\f102";
}
  .accordion-button:focus {
    box-shadow: none;
 }
  .accordion-body {
  font-size: 16px;
  line-height: 28px;
  padding: 0 30px 20px 30px;
  color: #787878;
 }
  .accordion-collapse {
    border: none;
    transition: all 0.5s;
 }

 .accordion-item {
  border: none;
  background: #fff;
  box-shadow: 0px 4px 60px 0px rgba(0, 0, 0, 0.10);
}

.accordion-item:first-of-type .accordion-button {
  border-radius: 0px;
  
}
.accordion-item:last-of-type .accordion-button.collapsed {
  border-width: 1px;
  border-radius: 0px;
}

 .bd-faq-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media only screen and (max-width: 991px){ 

  .faq-wrapper {
    padding-right: 0;
}
                        
}


/*----------------------------------------*/
/* DARK VERSION CSS START
/*----------------------------------------*/

.is-dark .features-box-area h5,
.is-dark .features-box-area p{
  color: #fff;
}

.is-dark .about-2-content-area .section-title {
  color: #fff;
}

.is-dark .about-2-content-area p {
  color: #fff;
}

.is-dark .about-2-content-area ul.list-area li {
  color: #fff;
}

.is-dark .about-2-content-area .content span {
  color: #fff;
}

.is-dark .about-2-content-area .content h5 {
  color: #fff;
}


.is-dark .service-tab-btn-area ul button,
.is-dark .service-tab-btn-area ul button::before {
  background: #0F1D34;
  color: #fff;
}
.is-dark .service-tab-content{
  background: #0F1D34;
}

.is-dark .service-tab-content *{
 color: #fff;
}

.work-process-section.is-dark .section-title{
  color: #fff;
}

.is-dark .work-process-box h4,
.is-dark .work-process-box p{
  color: #fff;
}

.is-dark .work-process-box .icon-box span,
.is-dark .work-process-box .icon-box{
  background: #0F1D34;
}

.text-slider-section.is-dark h1{
  -webkit-text-stroke-color: #fff;
}

.project-slider-two-section.is-dark .section-title{
  color: #fff;
}

.project-slider-two-section.is-dark .project-slider-two-box .content{
  background: #0F1D34;
}

.project-slider-two-section.is-dark .project-slider-two-box .inner-box h5{
  color: #fff;
}

.testimonials-two-section.is-dark .testimonials-two-box {
  background: #0F1D34;
}

.testimonials-two-section.is-dark .testimonials-two-box h4,
.testimonials-two-section.is-dark .testimonials-two-box span,
.testimonials-two-section.is-dark .testimonials-two-box p
{
  color: #fff;
}

.is-dark .icon-box-counter-area h3,
.is-dark .icon-box-counter-area span
 {
  color: #fff;
}

.blog-two-section.is-dark .section-title{
  color: #fff;
}

.blog-two-section.is-dark .blog-style-two .blog-content-area{
  background: #102039;
}


.blog-two-section.is-dark h5.blog-title,
.blog-two-section.is-dark p.blog-text,
.blog-two-section.is-dark .blog-style-two .post-meta{
  color: #fff;
}

.blog-two-section.is-dark a.primary-btn-5.btn-hover {
    background: transparent;
    color: #fff;
}


/*----------------------------------------*/
/* PAGE TITLE CSS START
/*----------------------------------------*/

.breadcrumb__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.breadcrumb__thumb_2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
}

.breadcrumb__thumb_3 {
  position: absolute;
  top: 0;
  right: 415px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center right;
}

.breadcrumb__wrapper .breadcrumb__title {
  color: #fff;
}

.breadcrumb__wrapper ul {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}


.breadcrumb__wrapper ul span:before {
  content: "\e902";
  font-family: 'icomoon';
  color: #fff;
  position: relative;
  top: 1px;
  left: -6px;
}

.breadcrumb__wrapper ul li:first-child span:before{
  display: none;
}

.breadcrumb__wrapper ul li:last-child span{
  color: var(--theme-color);
}



@media only screen and (max-width: 1024px){ 

.breadcrumb__thumb_2,
.breadcrumb__thumb_3{
  display: none;
}

.breadcrumb__wrapper {
  text-align: center;
}

.breadcrumb__wrapper ul {
justify-content: center;
}

.breadcrumb__area {
  padding: 60px 0;
}

.breadcrumb__wrapper .breadcrumb__title {
  font-size: 36px;
}

}


/*----------------------------------------*/
/* MAP CSS START
/*----------------------------------------*/
.contact-map iframe {
  width: 100%;
  height: 600px;
  mix-blend-mode: luminosity;
  margin-bottom: -8px;
}

/*----------------------------------------*/
/* SERVICE PAGE CSS START
/*----------------------------------------*/

.service-page-section .service-slider-area .content {
  background: #FFF;
  box-shadow: 0px 4px 60px 0px rgba(0, 0, 0, 0.10);
}

ul.service-details-page-list li:before {
  content: "\e921";
  font-family: 'icomoon';
  color: var(--theme-color);
  font-weight: 600;
  position: relative;
  top: 0;
  left: -10px;
}

ul.service-details-page-list li {
  margin-left: 10px;
  font-weight: 500;
  margin-bottom: 10px;
}

.service-widget-1 {
  background: #F8F8F8;
  padding: 40px 30px;
}

.service-widget-1 h5 {
  font-size: 22px;
  margin-bottom: 25px;
}

.service-widget-1 li a{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #fff;
}

.service-widget-1 li .active{
  background: var(--theme-color);
  color: #fff;
}

.service-widget-1 li {
  margin-bottom: 16px;
}

.service-widget-1 li:last-child {
  margin-bottom: 0px;
}

.service-widget-2 .icon-box {
  width: 50px;
  height: 50px;
  background: var(--theme-color);
  color: #fff;
  font-size: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: -30px;
}

.service-widget-2 .icon-box:before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 56px;
  height: 56px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  z-index: 1;
}

.service-widget-2 .icon-box:after {
  content: "";
  position: absolute;
  top: -11px;
  left: -11px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 11px solid var(--theme-color-1);
}

.service-widget-2 .content h5 {
  color: #fff;
  margin: 24px 0;
}

.service-widget-2 .content .phone {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.service-widget-2 .btn-box {
  padding: 30px 0;
}

.service-widget-3 .company-file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--theme-color);
  padding: 20px;
  color: #fff;
}

.service-widget-3 .company-file h6 {
  color: #fff;
}

.service-widget-3 .file-size a {
  margin-left: 10px;
}


/*----------------------------------------*/
/* PROJECTS PAGE CSS START
/*----------------------------------------*/

.project-details-page-content .project-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.project-details-page-content .project-info h6 {
  background: #F8F8F8;
  padding: 30px 65px 30px 80px;
  border-bottom: 1px solid #BABBBD;
  border-right: 1px solid #BABBBD;
}

.project-details-page-content .project-info h6 span{
  color: var(--theme-color);
}

.project-details-page-content .project-info h6:last-child {
  border: none;
}

.project-details-page-content .project-info h6:nth-child(2) {
  border-bottom: 1px solid #BABBBD;
  border-right: 0;
}

.project-details-page-content .project-info h6:nth-child(3) {
  border-bottom: 0;
  border-right: 1px solid #BABBBD;
}


.project-details-video .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.project-details-video .play-btn a {
  border-radius: 50%;
  color: #fff;
  z-index: 2;
  position: relative;
  font-size: 17px;
}

.project-details-video .video_player_btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 57px;
  width: 57px;
  border-radius: 50%;
  transition: all 500ms ease;
}

.project-details-video .video_player_btn:before,
.project-details-video .video_player_btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--theme-color);
  opacity: 1;
  border-radius: 50%;
}

.project-details-video .video_player_btn:before {
  z-index: 0;
  -webkit-animation: pulse-border 1500ms ease-out infinite;
          animation: pulse-border 1500ms ease-out infinite;
}

.project-details-video .video_player_btn:after {
  z-index: 1;
  -webkit-transition: all 200ms;
  transition: all 200ms;
}

@media only screen and (max-width: 991px){ 

.service-widget-1 {
  margin-top: 30px;
}
  
}

@media only screen and (max-width: 425px){ 

  .project-details-page-content .project-info h6 {
    padding: 10px 15px;
    font-size: 14px;
}
  
}

/*----------------------------------------*/
/* TEAM DETAILS CSS START
/*----------------------------------------*/

.team-member-info-image-area figure:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(3deg, #222328 3.05%, rgba(34, 35, 40, 0.00) 67.67%);
}

ul.team-member-socials-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
}

ul.team-member-socials-icon li {
  width: 40px;
  height: 40px;
  background: var(--theme-color);
  color: #fff;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul.team-member-socials-icon li:hover{
  background: var(--theme-color-1);
}

.team-member-info .designation {
  font-weight: 400;
  font-size: 16px;
}

.team-details-progress-bar h6 {
  font-size: 16px;
  margin-bottom: 15px;
}

.team-details-progress-bar .progress-count {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
}

.team-details-progress-bar .progress {
  height: 8px;
  border-radius: 0;
}

.team-details-progress-bar .progress-bar {
  background: var(--theme-color);
}

/* Anthony Paduano founder biography panel */
.anthony-founder-bio {
  background: linear-gradient(135deg, #102441 0%, #174676 100%);
}

.anthony-founder-bio h5,
.anthony-founder-bio h6,
.anthony-founder-bio p,
.anthony-founder-bio strong,
.anthony-founder-bio .progress-count {
  color: #fff;
}

.anthony-founder-bio a:not(.primary-btn-1) {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .5);
}

.anthony-founder-bio a:not(.primary-btn-1):hover {
  color: #fff;
  text-decoration-color: #fff;
}

.anthony-founder-bio hr {
  border-color: rgba(255, 255, 255, .28);
  opacity: 1;
}

.anthony-founder-bio .team-member-info-details {
  padding-right: 36px;
  padding-left: 36px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
}

.anthony-founder-bio .team-details-progress-bar .progress {
  background: rgba(255, 255, 255, .22);
}

.anthony-testimonials-section {
  background: #fff;
}

.anthony-testimonials-heading .section-title {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.anthony-testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 25px 30px 30px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 4px 25px rgba(0, 0, 0, .08);
}

.anthony-testimonial-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.anthony-testimonial-logo {
  flex: 0 0 82px;
  width: 82px;
  height: 82px;
  margin: 0;
}

.anthony-testimonial-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.anthony-testimonial-header strong,
.anthony-testimonial-header span {
  display: block;
}

.anthony-testimonial-header strong {
  color: #102441;
  font-size: 19px;
}

.anthony-testimonial-header span {
  margin-top: 2px;
  color: #787878;
  font-size: 14px;
}

.anthony-testimonial-stars {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  color: var(--theme-color);
  font-size: 14px;
}

.anthony-testimonial-quote {
  position: absolute;
  top: 4px;
  right: 0;
  color: var(--theme-color);
  font-size: 42px;
}

.anthony-testimonial-card p {
  margin: 24px 0 0;
  color: #787878;
  font-size: 16px;
  line-height: 1.7;
}

/* Projects page carousel, feature, and testimonials */
.projects-carousel-section {
  background: #f6f8fb;
}

.projects-page-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 64px;
  background: #102441 url("../imgs/project/hoag-hospital-newport-beach-parking.webp") center / cover no-repeat;
}

.projects-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 31, 58, .96) 0%, rgba(16, 36, 65, .88) 52%, rgba(16, 36, 65, .52) 100%);
}

.projects-page-hero-content {
  position: relative;
  z-index: 1;
  max-width: 830px;
}

.projects-page-hero h1 {
  margin: 18px 0 14px;
  color: #fff;
  font-size: clamp(36px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.12;
}

.projects-page-hero p {
  max-width: 690px;
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.projects-page-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.projects-page-hero-breadcrumb a {
  color: #fff;
}

.projects-page-hero-breadcrumb a:hover {
  color: var(--theme-color);
}

.projects-carousel-heading .section-title,
.projects-testimonials-heading .section-title {
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
}

.projects-carousel-shell {
  position: relative;
  margin: 0 68px;
}

.projects-page-carousel {
  padding: 8px 0 54px;
}

.projects-page-carousel .project-slider-area {
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(16, 36, 65, .10);
}

.projects-page-carousel .project-slider-area .image {
  height: 390px;
  margin: 0;
}

.projects-page-carousel .project-slider-area .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projects-carousel-prev,
.projects-carousel-next {
  position: absolute;
  z-index: 5;
  top: calc(50% - 25px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  color: var(--theme-color-1);
  background: transparent;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  font-size: 20px;
  transform: translateY(-50%);
  transition: all .25s ease;
}

.projects-carousel-prev {
  left: -88px;
}

.projects-carousel-next {
  right: -88px;
}

.projects-carousel-prev:hover,
.projects-carousel-next:hover {
  color: #fff;
  background: var(--theme-color);
}

.projects-carousel-pagination {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 7px;
}

.projects-carousel-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  background: #b9c5d3;
  opacity: 1;
}

.projects-carousel-pagination .swiper-pagination-bullet-active {
  width: 24px;
  border-radius: 99px;
  background: var(--theme-color);
}

.projects-feature-section {
  background: #fff;
}

.projects-feature-copy .section-title {
  max-width: 510px;
}

.projects-feature-copy p {
  color: #596577;
  font-size: 16px;
  line-height: 1.75;
}

.projects-feature-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 465px;
  margin: 30px 0;
}

.projects-feature-stats div {
  padding: 16px 18px;
  background: #f6f8fb;
  border-left: 4px solid var(--theme-color);
}

.projects-feature-stats strong,
.projects-feature-stats span {
  display: block;
}

.projects-feature-stats strong {
  color: #102441;
  font-size: 28px;
  line-height: 1;
}

.projects-feature-stats span {
  margin-top: 7px;
  color: #596577;
  font-size: 13px;
  font-weight: 700;
}

.projects-feature-media {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(190px, .85fr);
  gap: 18px;
  align-items: end;
}

.projects-feature-photo,
.projects-feature-video {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(16, 36, 65, .16);
}

.projects-feature-photo {
  height: 465px;
}

.projects-feature-video {
  height: 290px;
  border: 5px solid #fff;
}

.projects-feature-photo img,
.projects-feature-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projects-feature-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(16, 36, 65, .76) 100%);
  pointer-events: none;
}

.projects-feature-video figcaption {
  position: absolute;
  z-index: 1;
  right: 18px;
  bottom: 16px;
  left: 18px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.projects-feature-video figcaption i {
  margin-right: 7px;
  color: var(--theme-color);
}

.projects-testimonials-section {
  background: #f6f8fb;
}

.projects-testimonial-card {
  display: flex;
  flex-direction: column;
  padding: 25px 30px 30px;
  background: #fff;
  box-shadow: 0 4px 25px rgba(0, 0, 0, .08);
}

.projects-testimonial-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.projects-testimonial-logo {
  flex: 0 0 82px;
  width: 82px;
  height: 82px;
  margin: 0;
}

.projects-testimonial-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.projects-testimonial-header strong,
.projects-testimonial-header span {
  display: block;
}

.projects-testimonial-header strong {
  color: #102441;
  font-size: 19px;
}

.projects-testimonial-header span {
  margin-top: 2px;
  color: #787878;
  font-size: 14px;
}

.projects-testimonial-stars {
  display: flex;
  gap: 5px;
  margin-top: 10px;
  color: var(--theme-color);
  font-size: 14px;
}

.projects-testimonial-quote {
  position: absolute;
  top: 4px;
  right: 0;
  color: var(--theme-color);
  font-size: 42px;
}

.projects-testimonial-card p {
  margin: 24px 0 0;
  color: #787878;
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 767px) {
  .projects-carousel-shell {
    margin: 0 42px;
  }

  .projects-carousel-prev {
    left: -54px;
  }

  .projects-carousel-next {
    right: -54px;
  }

  .projects-page-carousel .project-slider-area .image {
    height: 330px;
  }

  .projects-feature-media {
    grid-template-columns: 1fr;
  }

  .projects-feature-photo,
  .projects-feature-video {
    height: 330px;
  }
}

/* Projects page image-tab gallery overrides */
.projects-feature-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}

.projects-feature-gallery .projects-feature-photo {
  height: 410px;
}

.projects-feature-gallery .projects-feature-photo img,
.projects-feature-gallery .projects-feature-photo video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projects-gallery-main-image {
  display: none;
}

.projects-gallery-main-image.is-visible {
  display: block;
}

.projects-gallery-main-video.is-hidden {
  display: none;
}

.projects-feature-thumbnails {
  display: flex;
  height: 84px;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-snap-type: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.projects-feature-thumbnails::-webkit-scrollbar {
  display: none;
}

.projects-feature-thumb {
  position: relative;
  flex: 0 0 88px;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 8px;
  box-shadow: 0 7px 18px rgba(16, 36, 65, .10);
  transition: border-color .2s ease, transform .2s ease;
  scroll-snap-align: start;
}

.projects-feature-thumb:hover,
.projects-feature-thumb.is-active {
  border-color: var(--theme-color);
  transform: translateY(-3px);
}

.projects-feature-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projects-feature-video-thumb span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 5px 4px;
  color: #fff;
  background: rgba(16, 36, 65, .82);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.projects-feature-video-thumb span i {
  margin-right: 3px;
  color: var(--theme-color);
}

.projects-feature-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: none;
  margin: 30px 0;
}

.projects-feature-details div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: #f6f8fb;
  border-left: 4px solid var(--theme-color);
}

.projects-feature-details strong,
.projects-feature-details span {
  display: block;
}

.projects-feature-details span {
  margin: 0;
  color: #596577;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.projects-feature-details strong {
  color: #102441;
  font-size: 15px;
  line-height: 1.35;
}

.projects-secondary-feature {
  overflow: hidden;
  background: linear-gradient(120deg, #102441 0%, #174676 100%);
}

.projects-secondary-copy h2 {
  max-width: 640px;
  margin: 18px 0 20px;
  color: #fff;
  font-size: 42px;
  line-height: 1.18;
}

.projects-secondary-copy p {
  color: rgba(255, 255, 255, .84);
  font-size: 16px;
  line-height: 1.75;
}

.projects-secondary-media {
  position: relative;
  padding: 0 42px 58px 0;
}

.projects-secondary-main-image,
.projects-secondary-detail-image {
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .24);
}

.projects-secondary-main-image {
  height: 410px;
}

.projects-secondary-main-image img,
.projects-secondary-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.projects-secondary-detail-image {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 48%;
  height: 205px;
  border: 5px solid #174676;
}

.projects-secondary-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 30px 0;
}

.projects-secondary-details div {
  padding: 14px 12px;
  border-left: 3px solid var(--theme-color);
  background: rgba(255, 255, 255, .08);
}

.projects-secondary-details span,
.projects-secondary-details strong {
  display: block;
}

.projects-secondary-details span {
  color: rgba(255, 255, 255, .66);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.projects-secondary-details strong {
  margin-top: 6px;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
}

@media (max-width: 767px) {
  .projects-feature-gallery .projects-feature-photo {
    height: 370px;
  }

  .projects-feature-thumbnails {
    height: 84px;
  }

  .projects-feature-details div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .projects-secondary-copy h2 {
    font-size: 34px;
  }

  .projects-secondary-details {
    grid-template-columns: 1fr;
  }

  .projects-secondary-main-image {
    height: 360px;
  }
}

.team-member-info-details .edu-info {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 16px;
}

.team-member-info-details .edu-info span {
  font-size: 14px;
  color: var(--theme-color);
  border: 1px solid var(--theme-color);
  padding: 5px 15px;
  border-radius: 50px;
}

/*----------------------------------------*/
/* Pagination CSS START
/*----------------------------------------*/

.bd-basic__pagination ul {
  display: flex;
  gap: 10px;
}

.bd-basic__pagination ul li {
  width: 53px;
  height: 50px;
  background: #F8F8F8;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
}

.bd-basic__pagination ul li.current {
  background: var(--theme-color);
  color: #fff;
}

@media only screen and (max-width: 991px){ 

.pagination__wrapper {
  margin-bottom: 50px;
}
  
}

/*----------------------------------------*/
/* BLOG DETAILS CSS START
/*----------------------------------------*/

.blog-widget-1,
.blog-widget-2,
.blog-widget-3,
.blog-widget-4 {
  background: #F8F8F8;
  padding: 40px 30px;
}

.blog-widget-title:before {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 50px;
  height: 2px;
  background: var(--theme-color);
}

.blog-widget-1 button {
  position: absolute;
  top: 50%;
  right: 20px;
  font-size: 20px;
  transform: translateY(-50%);
}

.blog-widget-1 input[type="text"] {
  width: 100%;
  height: 60px;
  border: none;
  padding: 15px 20px;
  outline: none;
}

.blog-widget-2 ul.blog-categories-list li a {
  padding: 20px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.blog-widget-2 ul.blog-categories-list li:hover a {
  background: var(--theme-color);
  color: #fff;
}

.blog-widget-2 ul.blog-categories-list li {
  margin-bottom: 16px;
}

.blog-widget-2 ul.blog-categories-list li:last-child {
  margin-bottom: 0;
}

.blog-widget-3 .blog-post-sidebar {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 80px auto;
  gap: 15px;
}

.blog-widget-3 .blog-post-sidebar:last-child {
  margin-bottom: 0px;
}

.blog-widget-3 .content span {
  font-size: 14px;
  color: #787878;
}

.blog-widget-3 .content span i {
  color: var(--theme-color);
  margin-right: 5px;
}

.blog-widget-3 .content h6 {
  font-size: 16px;
}

.blog-widget-4 .tagcloud a {
  display: inline-block;
  font-size: 14px;
  padding: 12px;
  background: #fff;
  margin-right: 8px;
  margin-bottom: 6px;
  line-height: 1;
}

.blog-widget-4 .tagcloud a:hover {
  color: #fff;
  background: var(--theme-color);
}

.blog-widget-4 .tagcloud a:nth-last-child(1),
.blog-widget-4 .tagcloud a:nth-last-child(2),
.blog-widget-4 .tagcloud a:nth-last-child(3)
{
  margin: 0;
}


.blog-details-page ul.blog-post-meta {
  display: flex;
  justify-content: flex-start;
  gap: 26px;
  font-size: 14px;
  color: #787878;
}

.blog-details-page ul.blog-post-meta li i {
  font-size: 16px;
  margin-right: 10px;
  color: var(--theme-color);
}

blockquote {
  border-left: 4px solid var(--theme-color);
  background: var(--Bg_Color, #F8F8F8);
  padding: 32px 70px 32px 40px;
}

blockquote p {
  font-weight: 600;
  font-style: italic;
  color: #102039;
  text-transform: capitalize;
}

blockquote i {
  font-size: 36px;
  color: var(--theme-color);
  position: absolute;
  bottom: -20px;
  right: -10px;
}

.tagcloud.tagcloud-sm span {
  font-weight: 600;
}

.tagcloud.tagcloud-sm a {
  font-size: 14px;
  padding: 12px 16px;
  background: #F8F8F8;
  margin-left: 10px;
}

.tagcloud.tagcloud-sm a:hover {
 background: var(--theme-color);
 color: #fff;
}

.postbox__share span {
  font-weight: 600;
}

.postbox__share a {
  font-size: 16px;
  color: #787878;
  margin-left: 10px;
}

.postbox__share a:hover {
  color: var(--theme-color);
}

.postbox__share-wrapper {
  padding: 25px 0;
  border-top: 1px solid #ECECEC;
  border-bottom: 1px solid #ECECEC;
}

.postbox__comment-avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.post-box-comments-box {
  display: grid;
  grid-template-columns: 100px auto;
  gap: 20px;
}

.postbox__comment-name h5 {
  font-size: 20px;
  margin-bottom: 15px;
  margin-top: 20px;
}

.postbox__comment-name span {
  color: #787878;
}

.postbox__comment-reply a {
  border-radius: 20px;
  background: rgba(234, 24, 38, 0.06);
  padding: 10px 16px;
  color: var(--theme-color);
  font-size: 14px;
}

ul.postbox__comment_ratings {
  display: flex;
  gap: 5px;
  position: absolute;
  top: 35px;
  right: 0;
  color: var(--theme-color);
}

.postbox__comment-form label {
  font-weight: 500;
  font-family: var(--primary-font);
  margin-bottom: 15px;
}

.postbox__comment-form input[type="text"],
.postbox__comment-form input[type="email"]{
  border-radius: 4px;
  border: 1px solid #ECECEC;
  padding: 18px 20px;
  height: 55px;
  margin-bottom: 30px;
}

.postbox__comment-form textarea{
  border-radius: 4px;
  border: 1px solid #ECECEC;
  height: 200px;
  resize: none;
  margin-bottom: 30px;
}


@media only screen and (max-width: 991px){ 

  .postbox__comment-form{
    margin-bottom: 30px;
  }
    
  }

@media only screen and (max-width: 425px){ 

.post-box-comments-box {
  display: flex;
  gap: 0;
  flex-direction: column;
}

ul.postbox__comment_ratings {
  right: 100px;
}
    
}

/*----------------------------------------*/
/* CONTACT PAGE CSS START
/*----------------------------------------*/

.contact-page-section-white  {
  padding: 50px 40px 40px 40px;
    background: linear-gradient(270deg, #ffffff, #f4f5f7, #dddddd, #e8eff3);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
  display: flex;
  align-items: center;
 
}

.contact-page-section-blue  {
  padding: 50px 40px 40px 40px;
    background: linear-gradient(270deg, #02102D, #000716, #0E162B, #012546);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
  display: flex;
  align-items: center;
}

.contact-page-section-dark-blue  {
  padding: 80px 40px 40px 40px;
  background: #02154A;
}

.contact-p-info-area .contact-box {
  padding: 30px 24px 30px 24px;
  background: #F8F8F8;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 20px;
	border: thin solid #EF3133;
	border-radius: 20px;
}

.contact-p-info-area .contact-box .icon-1 {
  font-size: 40px;
  color: var(--theme-color);
}

.contact-p-info-area .info span {
  color: var(--theme-color);
}

.contact-p-info-area .info h4 {
  margin-top: 10px;
}


.contact-page-form-area {
  padding: 60px;
  background: #F8F8F8;
	  border-radius: 6px;
  box-shadow: 0 18px 45px rgba(16, 32, 57, 0.12);
}

.contact-page-form-area-red {
  padding: 60px;
  background: #AB0002;
	  border-radius: 6px;
  box-shadow: 0 18px 45px rgba(16, 32, 57, 0.12);
}

.contact-page-form label {
  font-weight: 500;
  margin-bottom: 15px;
}

.contact-page-form input {
  height: 55px;
  margin-bottom: 30px;
  border-radius: 4px;
  border: 1px solid #ECECEC;
}

.contact-page-form textarea {
  height: 136px;
  margin-bottom: 30px;
  resize: none;
  border-radius: 4px;
  border: 1px solid #ECECEC;
}

@media only screen and (max-width: 991px){ 

.contact-page-form-area{
  margin-top: 30px;
  padding: 30px;
}

.error-page h2 {
  font-size: 32px;
}
  
}





/*----------------------------------------*/
/* ANIMATION CSS START
/*----------------------------------------*/
@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 45px rgba(255, 255, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
/*======================================
Animate slide-left 
========================================*/
@keyframes slide-left {
  from {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes slide-left-sm {
  from {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

@keyframes slide-right-sm {
  from {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  to {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}

/*======================================
Animate card-bounce
========================================*/
@keyframes card-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}
@keyframes hero-circle-1 {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.quote-animation {
  animation-duration: 10s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-name: card-bounce;
}

/*======================================
Animate wobble-vertical
========================================*/
@-webkit-keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }
  33.3% {
    transform: translateY(-6px);
  }
  49.95% {
    transform: translateY(4px);
  }
  66.6% {
    transform: translateY(-2px);
  }
  83.25% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }
  33.3% {
    transform: translateY(-6px);
  }
  49.95% {
    transform: translateY(4px);
  }
  66.6% {
    transform: translateY(-2px);
  }
  83.25% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}
/*======================================
Animate wobble-vertical
========================================*/
@keyframes shape-rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotateCircle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotateCircle {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotate-circle {
  -webkit-animation-name: rotateCircle;
  animation-name: rotateCircle;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes circle {
0% {
  opacity: 1;
}
40% {
  opacity: 1;
}
100% {
  width: 200%;
  height: 200%;
  opacity: 0;
}
}
@keyframes circle {
0% {
  opacity: 1;
}
40% {
  opacity: 1;
}
100% {
  width: 200%;
  height: 200%;
  opacity: 0;
}
}


@-webkit-keyframes shine {
100% {
  left: 125%;
}
}
@keyframes shine {
100% {
  left: 125%;
}
}

@keyframes slide{
  from { background-position: 0 0; }
    to { background-position: 1920px 0; }
}

@-webkit-keyframes slide{
  from { background-position: 0 0; }
    to { background-position: 1920px 100px; }
}

@keyframes slide_up{
  from { background-position: 0 0; }
    to { background-position: 0 1000px; }
}

@-webkit-keyframes slide_up{
  from { background-position: 0 0; }
    to { background-position: 0 1000px; }
}


@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  }
  @keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  }


  @-webkit-keyframes pulse-border {
    0% {
      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }
  
  @keyframes pulse-border {
    0% {
      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
              transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }

  @keyframes morphing {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%
    }

    25% {
        border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%
    }

    50% {
        border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
    }

    75% {
        border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
    }
}


@-webkit-keyframes float-bob-x {
  0% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-30px);
  }
}
@keyframes float-bob-x {
  0% {
    transform: translateX(-30px);
  }
  50% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-30px);
  }
}
.float-bob-x {
  -webkit-animation-name: float-bob-x;
  animation-name: float-bob-x;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes float-bob-y {
  0% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-30px);
  }
}
@keyframes float-bob-y {
  0% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-30px);
  }
}
.float-bob-y {
  -webkit-animation-name: float-bob-y;
  animation-name: float-bob-y;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@keyframes ring-animation {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  20%, 32%, 44%, 56%, 68% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  23%, 35%, 47%, 59%, 71% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  26%, 38%, 50%, 62%, 74% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  29%, 41%, 53%, 65%, 77% {
    transform: rotate3d(0, 0, 1, -15deg);
  }
  80% {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.ring-animation {
  animation: ring-animation 1.5s ease-in-out infinite;
}

@keyframes scale-animation {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}
.scale-animation {
  animation: scale-animation 2s alternate infinite;
}



/* new */

.ripple-animation {
  animation-duration: var(--ripple-ani-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: ripple;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

.movingX {
  animation: movingX 8s linear infinite;
}
@keyframes movingX {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}

.moving {
  animation: moving 8s linear infinite;
}
@keyframes moving {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}

.jump {
  animation: jumpAni 7s linear infinite;
}
.jump1 {
  animation: jumpAni 6s linear infinite;
}
.jump2 {
  animation: jumpAni 5s linear infinite;
}
.jump3 {
  animation: jumpAni 4s linear infinite;
}
@keyframes jumpAni {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0);
  }
}

.jump-reverse {
  animation: jumpReverseAni 7s linear infinite;
}
@keyframes jumpReverseAni {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(0);
  }
}

.spin {
  animation: spin 15s linear infinite;
}
.spin-slow {
  animation: spin 50s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.scalein.slider-animated {
  --animation-name: scalein;
}

.slidetopleft.slider-animated {
  --animation-name: slidetopleft;
}

.slidebottomright.slider-animated {
  --animation-name: slidebottomright;
}

.slideinleft.slider-animated {
  --animation-name: slideinleft;
}

.slideinright.slider-animated {
  --animation-name: slideinright;
}

.slideinup.slider-animated {
  --animation-name: slideinup;
}

.slideindown.slider-animated {
  --animation-name: slideindown;
}
.rollinleft.slider-animated {
  --animation-name: rollinleft;
}
.rollinright.slider-animated {
  --animation-name: rollinright;
}


.scalein,
.slidetopleft,
.slidebottomright,
.slideinleft,
.slideinright,
.slideindown,
.slideinup,
.rollinleft,
.rollinright {
  opacity: 0;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-duration: 1s;
  animation-delay: 0.3s;
  animation-name: var(--animation-name);
}

.slider-animated {
  opacity: 1;
}

@keyframes slideinup {
  0% {
    opacity: 0;
    transform: translateY(70px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideinright {
  0% {
    opacity: 0;
    transform: translateX(70px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slideindown {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideinleft {
  0% {
    opacity: 0;
    transform: translateX(-70px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slidebottomright {
  0% {
    opacity: 0;
    transform: translateX(100px) translateY(100px);
  }

  100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes slidetopleft {
  0% {
    opacity: 0;
    transform: translateX(-100px) translateY(-100px);
  }

  100% {
    transform: translateX(0) translateY(0);
  }
}


@keyframes rotate {
  from {
      transform: rotate(0deg);
  }
  to { 
      transform: rotate(360deg);
  }
  0% {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
  }  
  75% {
    border-top-color: #fff;
    border-left-color: #fff;
    border-right-color: #fff;
    border-bottom-color: transparent;
  }
  100% {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
  }
}
/*img-animation**********************/
.img-custom-anim-right {
  animation: img-anim-right 1.3s forwards cubic-bezier(.645,.045,.355,1) .4s;
  opacity: 0;
}
@keyframes img-anim-right {
  0% {
      transform: translateX(5%);
      clip-path: inset(0 0 0 100%);
      opacity: 0;
  }

  100% {
      transform: translateX(0);
      clip-path: inset(0 0 0 0);
      opacity: 1;
  }
}
.img-custom-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(.645,.045,.355,1) .4s;
  opacity: 0;
}
@keyframes img-anim-left {
  0% {
      transform: translateX(-5%);
      clip-path: inset(0 100% 0 0);
      opacity: 0;
  }

  100% {
      transform: translateX(0);
      clip-path: inset(0 0 0 0);
      opacity: 1;
  }
}

.img-custom-anim-top {
  animation: img-anim-top 1.3s forwards cubic-bezier(.645,.045,.355,1);
  opacity: 0;
}
@keyframes img-anim-top {
  0% {
      transform: translateY(-5%);
      clip-path: inset(0 0 100% 0);
      opacity: 0;
  }

  100% {
      transform: translateY(0);
      clip-path: inset(0 0 0 0);
      opacity: 1;
  }
}

/* Commercial Solar Panels page */
.solar-hero-section {
  background: #fff;
  overflow: hidden;
}

.solar-image-stack {
  min-height: 590px;
  padding: 0 88px 92px 0;
}

.solar-main-image {
  margin: 0;
  width: 100%;
  height: 560px;
  overflow: hidden;
  border-radius: 120px 0 0 120px;
  background: #f1f3f5;
}

.solar-main-image img,
.solar-thumb-image img,
.solar-why-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solar-ruler {
  position: absolute;
  top: 0;
  right: 38px;
  width: 28px;
  height: 560px;
  background-image: repeating-linear-gradient(to bottom, rgba(12, 31, 58, .45) 0, rgba(12, 31, 58, .45) 1px, transparent 1px, transparent 8px);
  opacity: .8;
  animation: solar-ruler-move 1.4s linear infinite;
}

@keyframes solar-ruler-move {
  from {
    background-position-y: 0;
  }
  to {
    background-position-y: 32px;
  }
}

/* Homepage TPO roofing feature */
.tpo-home-section {
  overflow: hidden;
}

.hoa-home-section.theme-blue {
  background: #061428;
}

.hoa-home-section.theme-red {
  background: #ed1c2a;
}

.hoa-home-section .bg-shape {
  opacity: .15;
}

.hoa-home-section .section-title,
.hoa-home-section p,
.hoa-home-section .about-3-list li,
.hoa-home-section .about-3-progress-bar h6,
.hoa-home-section .progress-count,
.hoa-home-section .home-about-call .content small,
.hoa-home-section .home-about-call .content strong {
  color: #fff;
}

.hoa-home-section .about-3-progress-bar .progress {
  background: rgba(255, 255, 255, .2);
}

.tpo-home-visual {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 1;
  margin-left: auto;
  display: grid;
  place-items: center;
}

.tpo-home-image {
  position: relative;
  z-index: 1;
  width: calc(100% - 58px);
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  padding: 20px;
  background: #fff;
  border: 10px solid #fff;
  border-radius: 50%;
  box-shadow: 0 24px 48px rgba(12, 31, 58, .18);
}

.tpo-home-image::after {
  position: absolute;
  inset: 0;
  content: '';
  border: 1px solid rgba(237, 28, 42, .48);
  border-radius: 50%;
  pointer-events: none;
}

.tpo-home-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The TPO overview uses a clean rounded image card instead of a circular treatment. */
#tpo-home-overview .tpo-home-visual {
  width: min(100%, 460px);
  aspect-ratio: 1;
}

#tpo-home-overview .tpo-home-image {
  width: 100%;
  border-radius: 7px;
}

#tpo-home-overview .tpo-home-image::after {
  border-radius: 7px;
}

#tpo-home-overview .tpo-home-ruler,
#tpo-home-overview .tpo-home-visual::after {
  display: none;
}

.tpo-home-ruler {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 2px solid rgba(12, 31, 58, .42);
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(12, 31, 58, .62) 0deg .7deg, transparent .7deg 4deg);
  -webkit-mask: radial-gradient(circle, transparent 0 76%, #000 76.5% 100%);
  mask: radial-gradient(circle, transparent 0 76%, #000 76.5% 100%);
  animation: tpo-ruler-spin 70s linear infinite;
  pointer-events: none;
}

.tpo-home-visual::after {
  position: absolute;
  z-index: 3;
  inset: 12px;
  content: '';
  border: 2px dashed rgba(237, 28, 42, .9);
  border-radius: 50%;
  animation: tpo-ruler-spin-reverse 55s linear infinite;
  pointer-events: none;
}

@keyframes tpo-ruler-spin {
  to { transform: rotate(360deg); }
}

@keyframes tpo-ruler-spin-reverse {
  to { transform: rotate(-360deg); }
}

/* Homepage HOA feature image */
.hoa-home-visual {
  position: relative;
  width: min(100%, 450px);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.hoa-home-image {
  padding: 0;
}

.hoa-home-image img {
  object-fit: cover;
}

@media (max-width: 991px) {
  .tpo-home-visual {
    width: min(100%, 420px);
    margin: 0 auto 42px;
  }
  .hoa-home-visual {
    width: min(100%, 400px);
    margin: 0 auto 42px;
  }
}

/* Final laptop-header overrides: the link row remains intact; quote and phone
   become a compact utility strip beneath it instead of forcing a wrap. */
@media only screen and (min-width: 1200px) and (max-width: 1749px) {
  .header-area .large-container { width: 100%; max-width: none; padding-left: 18px; padding-right: 18px; }
  .header-main { min-height: 108px; gap: 14px; align-items: center; padding: 11px 0 8px; }
  .header-left { flex: 0 0 auto; padding-top: 0; }
  .header-logo { width: clamp(118px, 9vw, 145px); max-width: 145px; }
  .header-right { display: flex !important; flex: 1 1 auto; min-width: 0; flex-wrap: wrap !important; align-content: flex-start; justify-content: flex-end; gap: 7px 10px; }
  .mean__menu-wrapper.d-none.d-xl-block { display: block !important; flex: 0 0 100%; min-width: 0; order: 1; margin-left: 0 !important; }
  .main-menu, .main-menu > nav { width: 100%; }
  .main-menu > nav > ul { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap !important; white-space: nowrap; }
  .main-menu ul li { flex: 0 0 auto; margin-inline-end: clamp(7px, .65vw, 12px); }
  .main-menu ul li a { font-size: clamp(11px, .72vw, 13px); white-space: nowrap; }
  .header-action.d-none.d-xl-inline-flex { display: inline-flex !important; }
  .header-action { order: 2; flex: 0 0 auto; margin: 0; }
  .header-action .header-link-1 { display: flex !important; }
  .header-link .primary-btn-1 { min-height: 28px !important; height: 28px; padding: 7px 11px !important; font-size: 10px !important; line-height: 1; white-space: nowrap; }
  .header-link-1 { gap: 6px; }
  .header-link-1 .icon { width: 24px !important; height: 24px !important; font-size: 11px !important; }
  .header-link-1 .icon::before { width: 30px !important; height: 30px !important; top: -3px; left: -3px; }
  .header-link-1 .content span { font-size: 9px !important; line-height: 11px; }
  .header-link-1 .content h6, .header-link-1 .content h6 a { font-size: 12px !important; line-height: 1.1; white-space: nowrap; }
}

/* Purpose-built mobile navigation inside the off-canvas panel. */
.mobile-menu .mean-bar { display: none !important; }
.mobile-menu .fcc-mobile-navigation { display: block; width: 100%; margin: 0 0 24px; }
.fcc-mobile-navigation ul { margin: 0; padding: 0; list-style: none; }
.fcc-mobile-navigation > ul { border-top: 1px solid rgba(255, 255, 255, .16); }
.fcc-mobile-navigation li { position: relative; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.fcc-mobile-navigation li a { display: block; padding: 13px 42px 13px 0; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; }
.fcc-mobile-navigation li a:hover,
.fcc-mobile-navigation li a:focus { color: #ff2636; }
.fcc-mobile-navigation .submenu { display: none; padding: 0 0 6px 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.fcc-mobile-navigation li.is-open > .submenu { display: block; }
.fcc-mobile-navigation .submenu li:last-child { border-bottom: 0; }
.fcc-mobile-navigation .submenu li a { padding-top: 10px; padding-bottom: 10px; color: rgba(255, 255, 255, .82); font-size: 13px; font-weight: 500; }
.fcc-mobile-nav-toggle { position: absolute; z-index: 2; top: 7px; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; color: #fff; border: 1px solid rgba(255, 255, 255, .36); border-radius: 50%; background: transparent; cursor: pointer; }
.fcc-mobile-nav-toggle:hover,
.fcc-mobile-nav-toggle:focus-visible { color: #fff; border-color: #ff2636; background: #ff2636; outline: none; }
.fcc-mobile-navigation .submenu .fcc-mobile-nav-toggle { top: 4px; width: 28px; height: 28px; font-size: 11px; }
@media (min-width: 1200px) { .mobile-menu .fcc-mobile-navigation { display: none; } }

/* Desktop utility actions live in the top bar, preserving a centered logo and
   an uninterrupted navigation row below. */
.header-top { gap: 16px; }
.header-top-contact-info { order: 1; }
.header-top-socials { order: 2; margin-left: auto; }
.fcc-header-top-actions { order: 3; display: flex; align-items: center; gap: 16px; margin-left: 16px; }
.fcc-header-top-actions .header-action { display: flex; align-items: center; margin: 0; }
.fcc-header-top-actions .primary-btn-1 { min-height: 28px; padding: 8px 12px; font-size: 10px; line-height: 1; }
.fcc-header-top-actions .header-link-1 { gap: 6px; }
.fcc-header-top-actions .header-link-1 { min-height: 28px; padding: 3px 10px 3px 4px; border-radius: 4px; background: #ed1c2a; }
.fcc-header-top-actions .header-link-1 .icon { width: 21px; height: 21px; color: #ed1c2a; background: #fff; font-size: 10px; }
.fcc-header-top-actions .header-link-1 .icon::before { display: none; }
.fcc-header-top-actions .header-link-1 .content span { display: none; }
.fcc-header-top-actions .header-link-1 .content h6,
.fcc-header-top-actions .header-link-1 .content h6 a { color: #fff; font-size: 12px; line-height: 1.1; white-space: nowrap; }
@media only screen and (min-width: 1200px) and (max-width: 1749px) {
  .header-main { min-height: 76px !important; align-items: center !important; padding: 0 !important; }
  .header-left { padding-top: 0; }
}
@media (max-width: 1199px) { .fcc-header-top-actions { display: none; } }

/* Scroll-activated bottom action widget. */
.fcc-sticky-actions { position: fixed; z-index: 9999; right: 82px; bottom: 22px; display: flex; overflow: hidden; border: 1px solid rgba(12, 31, 58, .16); border-radius: 999px; background: #fff; box-shadow: 0 12px 30px rgba(4, 20, 40, .2); opacity: 0; pointer-events: none; transform: translateY(18px); transition: opacity .25s ease, transform .25s ease; }
.fcc-sticky-actions.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.fcc-sticky-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.fcc-sticky-actions__call { color: #0c1f3a; background: #fff; }
.fcc-sticky-actions__call:hover { color: #ed1c2a; }
.fcc-sticky-actions__quote { color: #fff; background: #ed1c2a; }
.fcc-sticky-actions__quote:hover { color: #fff; background: #c91321; }
@media (max-width: 767px) {
  .fcc-sticky-actions { right: 16px; bottom: 16px; }
  .fcc-sticky-actions a { min-height: 39px; padding: 0 13px; font-size: 11px; }
}

@media (max-width: 575px) {
  .tpo-home-visual {
    width: min(100%, 310px);
  }
  .tpo-home-image {
    border-width: 7px;
    padding: 12px;
  }
  .hoa-home-visual {
    width: min(100%, 300px);
  }
}

/* More apparent, but still subtle, homepage section reveals. */
@media (prefers-reduced-motion: no-preference) {
  .fcc-home-reveal {
    opacity: 0;
    transform: translateY(52px) scale(.985);
    transition: opacity .8s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
  }

  .fcc-home-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .fcc-home-reveal .fcc-home-reveal-child {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .65s ease, transform .75s cubic-bezier(.16, 1, .3, 1);
  }

  .fcc-home-reveal .fcc-home-reveal-child.fcc-home-reveal-image {
    transform: translateX(-36px) scale(.96);
  }

  .fcc-home-reveal.is-visible .fcc-home-reveal-child {
    opacity: 1;
    transform: translate(0) scale(1);
  }
}

.solar-thumb-image {
  position: absolute;
  left: -60px;
  bottom: 10px;
  width: 236px;
  height: 272px;
  margin: 0;
  border: 10px solid #fff;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(12, 31, 58, .16);
}

.solar-experience-box {
  position: absolute;
  right: 20px;
  bottom: 10px;
  min-width: 300px;
  min-height: 116px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px 30px;
  background: var(--theme-color);
  color: #fff;
  border-radius: 7px;
  box-shadow: 0 18px 35px rgba(239, 22, 39, .25);
}

.solar-experience-box strong {
  font-size: 52px;
  line-height: 1;
  color: #fff;
}

.solar-experience-box span {
  max-width: 160px;
  font-weight: 700;
  line-height: 1.35;
}

.solar-image-stack h1 {
  position: absolute;
  left: -118px;
  top: 80px;
  margin: 0;
  color: rgba(12, 31, 58, .08);
  font-size: 82px;
  line-height: .9;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0;
  z-index: 0;
}

.solar-content-area {
  padding-left: 60px;
}

.solar-service-area-note {
  margin-top: 44px;
  padding: 28px 34px;
  border-left: 5px solid var(--theme-color);
  border-radius: 7px;
  background: #f7f8fa;
  box-shadow: 0 14px 32px rgba(12, 31, 58, .08);
}

.solar-service-area-note span {
  display: block;
  margin-bottom: 10px;
  color: var(--theme-color);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.solar-service-area-note p {
  max-width: 1060px;
  margin: 0;
  color: #5f6671;
}

.solar-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}

.solar-check-list li {
  position: relative;
  margin-bottom: 15px;
  padding-left: 24px;
  font-weight: 700;
  color: var(--theme-color-1);
}

.solar-check-list li::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 1px;
  font-family: "Font Awesome 6 Pro";
  font-size: 14px;
  color: var(--theme-color);
}

.solar-progress-bar h6 {
  margin-bottom: 14px;
}

.solar-progress-bar .progress {
  height: 10px;
  border-radius: 0;
  background: #e9edf2;
}

.solar-progress-bar .progress-bar {
  background: var(--theme-color);
}

.solar-progress-bar .progress-count {
  position: absolute;
  right: 0;
  top: 0;
  color: var(--theme-color-1);
  font-weight: 700;
}

.solar-why-section {
  overflow: hidden;
}

.solar-why-wide-container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.solar-why-row {
  min-height: 640px;
}

.solar-why-bg {
  position: absolute;
  inset: 0;
  opacity: .08;
  background-size: cover;
  background-position: center;
}

.solar-why-image-area {
  height: 100%;
  min-height: 640px;
  margin: 0;
  padding: 0;
}

.solar-why-main-image {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
}

.solar-why-image-area h2 {
  position: absolute;
  left: -98px;
  top: 40px;
  color: rgba(255, 255, 255, .08);
  font-size: 86px;
  line-height: .85;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0;
}

.solar-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.solar-why-content {
  height: 100%;
  padding: 90px clamp(34px, 5vw, 86px);
}

.solar-why-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.solar-savings-section {
  position: relative;
  overflow: hidden;
  background: var(--theme-color-1);
}

.solar-savings-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(239, 22, 39, .14), transparent 34%),
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .11), transparent 30%);
  opacity: .9;
  animation: solar-bg-drift 18s ease-in-out infinite alternate;
}

.solar-savings-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 18px);
  opacity: .35;
  animation: solar-line-drift 12s linear infinite;
}

@keyframes solar-bg-drift {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.06) translate3d(-18px, 14px, 0);
  }
}

@keyframes solar-line-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 80px 80px;
  }
}

.solar-savings-panel {
  position: relative;
  z-index: 1;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.solar-savings-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.solar-savings-panel h4 {
  margin-bottom: 14px;
  color: #fff;
}

.solar-savings-panel p {
  color: rgba(255, 255, 255, .82);
}

.solar-savings-intro {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
  color: rgba(255, 255, 255, .86);
}

.solar-savings-heading {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto 34px;
  text-align: center;
}

.solar-savings-section .section-title {
  color: #fff;
}

.solar-savings-tabs {
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: 22px;
  margin-top: 0;
}

.solar-savings-tab-nav {
  display: grid;
  gap: 12px;
  align-content: start;
}

.solar-savings-tab-nav button {
  width: 100%;
  min-height: 76px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  font-weight: 800;
  text-align: left;
  transition: background-color .25s ease, transform .25s ease, border-color .25s ease;
}

.solar-savings-tab-nav button:hover,
.solar-savings-tab-nav button.active {
  transform: translateX(6px);
  border-color: rgba(255, 255, 255, .42);
  background: var(--theme-color);
}

.solar-savings-tab-panels {
  min-height: 420px;
}

.solar-savings-tab-panel {
  display: none;
  grid-template-columns: minmax(240px, 38%) minmax(0, 1fr);
  gap: 26px;
  min-height: 420px;
  padding: 20px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .26);
  border: 1px solid rgba(255, 255, 255, .14);
}

.solar-savings-tab-panel.active {
  display: grid;
  animation: solar-tab-in .32s ease;
}

@keyframes solar-tab-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.solar-savings-media {
  min-height: 380px;
  overflow: hidden;
  border-radius: 10px;
}

.solar-savings-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solar-savings-copy {
  align-self: center;
  padding: 10px 8px;
}

.solar-savings-copy span {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(239, 22, 39, .18);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.solar-savings-copy h4 {
  margin-bottom: 16px;
}

.solar-savings-copy ul {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.solar-savings-copy li {
  position: relative;
  padding-left: 24px;
  color: rgba(255, 255, 255, .88);
  font-weight: 700;
}

.solar-savings-copy li::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Font Awesome 6 Pro";
  color: var(--theme-color);
}

.solar-savings-cta {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.solar-savings-cta a {
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 15px 18px;
  border-radius: 8px;
  font-weight: 800;
  letter-spacing: .01em;
}

.solar-savings-cta .solar-call-now-btn {
  border: 1px solid var(--theme-color-1);
  background: rgba(255, 255, 255, .96);
  color: var(--theme-color-1);
}

.solar-savings-cta .solar-call-now-btn span {
  background-color: transparent !important;
}

.solar-savings-cta .solar-call-now-btn:hover {
  border-color: rgba(255, 255, 255, .85) !important;
  background: transparent;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .36), 0 12px 30px rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}

body.commercial-solar-page .primary-btn-1,
body.commercial-solar-page .primary-btn-1-red,
body.commercial-solar-page .primary-btn-1-blue-white,
body.commercial-solar-page .primary-btn-1-blue,
body.commercial-solar-page .primary-btn-1-red-blue,
body.commercial-solar-page .primary-btn-1-white-red,
body.commercial-solar-page .primary-btn-1-white-blue {
  isolation: isolate;
}

body.commercial-solar-page .primary-btn-1 span,
body.commercial-solar-page .primary-btn-1-blue-white span,
body.commercial-solar-page .primary-btn-1-red-blue span,
body.commercial-solar-page .primary-btn-1-white-blue span {
  background-color: var(--theme-color) !important;
}

body.commercial-solar-page .primary-btn-1-red span,
body.commercial-solar-page .primary-btn-1-blue span,
body.commercial-solar-page .primary-btn-1-white-red span {
  background-color: var(--theme-color-1) !important;
}

body.commercial-solar-page .primary-btn-1-blue span,
body.commercial-solar-page .primary-btn-1-blue-white span {
  background-color: #1857b8 !important;
}

body.commercial-solar-page .primary-btn-1:hover,
body.commercial-solar-page .primary-btn-1-red:hover,
body.commercial-solar-page .primary-btn-1-blue-white:hover,
body.commercial-solar-page .primary-btn-1-blue:hover,
body.commercial-solar-page .primary-btn-1-red-blue:hover,
body.commercial-solar-page .primary-btn-1-white-red:hover,
body.commercial-solar-page .primary-btn-1-white-blue:hover {
  color: #fff !important;
  border-color: #fff !important;
}

body.commercial-solar-page .primary-btn-1:hover i,
body.commercial-solar-page .primary-btn-1-red:hover i,
body.commercial-solar-page .primary-btn-1-blue-white:hover i,
body.commercial-solar-page .primary-btn-1-blue:hover i,
body.commercial-solar-page .primary-btn-1-red-blue:hover i,
body.commercial-solar-page .primary-btn-1-white-red:hover i,
body.commercial-solar-page .primary-btn-1-white-blue:hover i {
  color: #fff !important;
}

body.commercial-solar-page .solar-savings-cta .solar-call-now-btn span {
  background-color: transparent !important;
}

body.commercial-solar-page .solar-savings-cta .solar-call-now-btn:hover {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .9) !important;
  color: #fff !important;
}

.solar-form-section .help-3-form-area button.primary-btn-1:hover {
  color: #fff !important;
  border-color: #fff !important;
}

.solar-feature-card {
  min-height: 158px;
  padding: 24px;
  background: #fff;
  border-radius: 7px;
  transition: transform .25s ease, box-shadow .25s ease;
}

.solar-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .22);
}

.solar-feature-card i {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--theme-color);
  font-size: 36px;
}

.solar-feature-card h5 {
  margin-bottom: 8px;
  color: var(--theme-color-1);
}

.solar-feature-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.solar-planning-section {
  background: #fff;
}

.solar-form-section {
  margin-top: 0;
  padding-top: 96px !important;
  padding-bottom: 86px;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.94) 0%, rgba(255,255,255,.94) 18%, var(--theme-color-1) 18%, var(--theme-color-1) 100%),
    url("../imgs/service/service-1-commercial-solar-03.webp") center/cover no-repeat;
}

.solar-form-section .help-3-form-area {
  box-shadow: 0 26px 60px rgba(12, 31, 58, .18);
}

.commercial-solar-page .solar-inline-cta {
  padding-top: 0 !important;
  z-index: 3;
}

.commercial-solar-page .solar-inline-cta .small-container,
.commercial-solar-page .solar-inline-cta .row {
  position: relative;
  z-index: 3;
}

.commercial-solar-page .solar-inline-cta .box-shadow-1 {
  box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
}

.commercial-solar-page .solar-inline-cta figure.image {
  height: 248px;
  margin-bottom: 0;
}

.commercial-solar-page .solar-inline-cta figure.image img {
  height: 100%;
  object-fit: cover;
}

.commercial-solar-page .solar-inline-cta .content {
  min-height: 248px;
  padding: 48px 30px 42px;
}

.commercial-solar-page .solar-inline-cta .content p {
  margin-bottom: 14px;
}

.commercial-solar-page .solar-inline-cta .content h3 {
  font-size: calc(40px - 5pt);
}

.commercial-solar-page .solar-services-slider {
  margin-top: -74px;
  padding-top: 152px;
}

.solar-info-card {
  height: 100%;
  padding: 30px;
  border-left: 4px solid var(--theme-color);
  border-radius: 7px;
  background: #f7f8fa;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.solar-info-card:hover {
  transform: translateY(-5px);
  background: #fff;
  box-shadow: 0 18px 35px rgba(12, 31, 58, .12);
}

.solar-info-card span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #fff;
  background: var(--theme-color);
  border-radius: 50%;
  font-weight: 800;
}

.solar-info-card h4 {
  margin-bottom: 12px;
}

@media (max-width: 1199px) {
  .solar-image-stack {
    padding-right: 62px;
  }
  .solar-content-area,
  .solar-why-content {
    padding-left: 25px;
  }
  .solar-why-content {
    padding-right: 30px;
  }
  .solar-savings-tabs,
  .solar-savings-tab-panel {
    grid-template-columns: 1fr;
  }
  .solar-savings-tab-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .solar-savings-cta {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .solar-savings-tab-nav button:hover,
  .solar-savings-tab-nav button.active {
    transform: translateY(-3px);
  }
}

@media (max-width: 991px) {
  .solar-image-stack,
  .solar-why-image-area {
    min-height: auto;
    margin-bottom: 45px;
  }
  .solar-why-row {
    min-height: auto;
  }
  .solar-content-area,
  .solar-why-content {
    padding-left: 0;
  }
  .solar-why-content {
    padding: 45px 24px;
  }
  .solar-main-image,
  .solar-ruler {
    height: 460px;
  }
  .solar-thumb-image,
  .solar-experience-box {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 18px;
  }
  .solar-why-main-image {
    width: 100%;
    height: 430px;
  }
  .commercial-solar-page .solar-services-slider {
    margin-top: 0;
    padding-top: 70px;
  }
  .commercial-solar-page .solar-inline-cta .content {
    min-height: auto;
  }
  .solar-image-stack h1,
  .solar-why-image-area h2 {
    display: none;
  }
}

@media (max-width: 575px) {
  .parking-structure-badges {
    grid-template-columns: 1fr;
  }

  .commercial-parking-structure-page .parking-structure-hero::before {
    background: linear-gradient(180deg, rgba(237, 23, 36, .98) 0%, rgba(139, 7, 16, .98) 44%, #fff 44%, #fff 100%);
  }

  .parking-structure-seo-image-wrap {
    flex-direction: column;
    align-items: center;
  }

  .parking-structure-seo-image {
    width: min(300px, 86vw);
    height: auto;
    flex-basis: auto;
  }

  .parking-structure-seo-note {
    max-width: 100%;
    margin-left: 0;
    margin-bottom: 0;
  }

  .roof-maintenance-content h1 {
    font-size: 34px;
  }

  .roof-maintenance-actions {
    gap: 18px;
  }

  .roof-maintenance-visual figure.image {
    width: min(100%, 420px);
    height: auto;
  }

  .roof-maintenance-badge-row {
    grid-template-columns: 1fr;
  }

  .commercial-maintenance-progress-band {
    padding: 24px;
  }

  .commercial-maintenance-progress-list,
  .commercial-maintenance-counter-row {
    grid-template-columns: 1fr;
  }

  .maintenance-support-section {
    padding: 64px 0;
  }

  .maintenance-support-content h3 {
    font-size: 31px;
  }

  .maintenance-card-grid,
  .maintenance-detail-list,
  .roof-repair-planning-grid {
    grid-template-columns: 1fr;
  }

  .siding-hero-content h1 {
    font-size: 34px;
  }

  .siding-hero-actions {
    gap: 18px;
  }

  .siding-hero-visual figure.image,
  .siding-before-after-image,
  .siding-before-after-image img {
    height: 360px;
    min-height: 360px;
  }

  .commercial-siding-page .siding-hero-visual {
    padding-bottom: 0;
  }

  .siding-hero-card {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: none;
    margin-top: 16px;
  }

  .commercial-siding-page .siding-hero-card {
    position: relative;
    left: auto;
    bottom: auto;
    max-width: none;
    margin-top: 16px;
  }

  .siding-hero-layered-image {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 220px;
    margin-top: 16px;
  }

  .commercial-siding-page .siding-hero-layered-image {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 220px;
    margin-top: 16px;
  }

  .commercial-siding-page .siding-hero-visual::before,
  .commercial-siding-page .siding-hero-visual::after {
    display: none;
  }

  .siding-scope-list,
  .siding-advantage-item {
    grid-template-columns: 1fr;
  }

  .solar-main-image {
    height: 360px;
    border-radius: 50px 0 0 50px;
  }
  .solar-ruler {
    display: none;
  }
  .solar-image-stack {
    padding: 0;
  }
  .solar-thumb-image,
  .solar-experience-box {
    width: 100%;
  }
  .solar-check-grid,
  .solar-feature-grid,
  .solar-savings-tabs,
  .solar-savings-tab-panel,
  .solar-savings-tab-nav,
  .solar-savings-cta {
    grid-template-columns: 1fr;
  }
  .solar-savings-panel {
    padding: 0;
  }
  .solar-savings-media {
    min-height: 260px;
  }
  .solar-experience-box {
    min-width: 0;
  }
}

/* FAQ page */
.faq-intro-section {
  position: relative;
  overflow: hidden;
  background: var(--theme-color-1);
}

.faq-intro-section::before {
  content: "";
  position: absolute;
  inset: -35% -10% auto auto;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  animation: faq-intro-drift 14s linear infinite;
}

.faq-intro-section::after {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 21, 35, 0.2), rgba(239, 21, 35, 0));
}

.faq-intro-section .small-container {
  position: relative;
  z-index: 1;
}

.faq-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 40px;
  align-items: stretch;
}

.faq-intro-content .section-sub-title {
  color: var(--theme-color);
}

.faq-intro-content .section-title,
.faq-intro-panel h4 {
  color: #fff;
}

.faq-intro-content p {
  color: rgba(255, 255, 255, 0.78);
  max-width: 850px;
}

.faq-intro-panel {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 34px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.18);
}

.faq-intro-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.faq-intro-list li {
  position: relative;
  color: rgba(255, 255, 255, 0.82);
  padding-left: 28px;
}

.faq-intro-list li::before {
  content: "\f00c";
  position: absolute;
  left: 0;
  top: 1px;
  font-family: "Font Awesome 6 Pro";
  font-weight: 700;
  color: var(--theme-color);
}

@keyframes faq-intro-drift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(-28px, 18px, 0) rotate(8deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@media (max-width: 991px) {
  .faq-intro-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .faq-intro-panel {
    padding: 26px 22px;
  }
}

/* Why Choose Us page */
.why-choose-hero {
  overflow: hidden;
}

.why-choose-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(239, 21, 35, 0.16), transparent 36%),
    radial-gradient(circle at 78% 12%, rgba(255, 255, 255, 0.1), transparent 26%);
  pointer-events: none;
}

.why-choose-hero-shape {
  position: absolute;
  right: -130px;
  bottom: -190px;
  width: 460px;
  height: 460px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: why-hero-orbit 16s linear infinite;
}

.why-choose-hero .small-container {
  position: relative;
  z-index: 1;
}

.why-choose-hero .roof-repair-section-heading {
  max-width: 980px;
}

.why-choose-hero .section-sub-title {
  color: var(--theme-color);
}

.why-choose-hero .roof-repair-content-area p,
.why-management-section p {
  color: rgba(255, 255, 255, 0.78);
}

.why-choose-image-area figure.image {
  overflow: hidden;
  border-radius: 12px;
}

.why-choose-image-area h1 {
  color: rgba(255, 255, 255, 0.08);
}

.why-choose-counter-row .roof-repair-counter {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.why-choose-counter-row .roof-repair-counter strong,
.why-choose-counter-row .roof-repair-counter span {
  color: #fff;
}

@keyframes why-hero-orbit {
  from {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  to {
    transform: rotate(360deg) translate3d(0, 0, 0);
  }
}

.why-expertise-section {
  background: #fff;
}

.why-expertise-header {
  max-width: 930px;
}

.why-expertise-header p {
  margin-top: 22px;
  max-width: 880px;
}

.why-expertise-ribbon {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(16, 32, 57, 0.12);
}

.why-expertise-card {
  position: relative;
  min-height: 315px;
  padding: 38px 34px;
  background: var(--theme-color-1);
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.why-expertise-card:nth-child(2) {
  background: #142945;
}

.why-expertise-card:nth-child(3) {
  background: #18304f;
}

.why-expertise-card:hover {
  transform: translateY(-8px);
  background: var(--theme-color);
}

.why-expertise-card span {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  margin-bottom: 34px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
}

.why-expertise-card h4 {
  margin-bottom: 16px;
  color: #fff;
}

.why-expertise-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
}

.why-proof-section {
  background: #f5f7fa;
}

.why-proof-lead {
  padding-right: 24px;
}

.why-proof-lead .section-title {
  margin-bottom: 28px;
}

.why-proof-lead p + p,
.why-management-title p + p {
  margin-top: 16px;
}

.why-proof-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
}

.why-call-btn,
.why-local-phone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--theme-color-1);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  overflow: hidden;
}

.why-call-btn:hover,
.why-local-phone:hover {
  color: #fff;
}

.why-call-btn i,
.why-local-phone i {
  position: relative;
  z-index: 1;
}

.why-call-btn span,
.why-local-phone span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--theme-color-1);
  transition: all .6s;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.why-call-btn:hover span,
.why-local-phone:hover span {
  width: 225%;
  height: 1000px;
}

.why-call-btn span {
  background-color: var(--theme-color);
}

.why-proof-actions .why-call-btn {
  min-height: 46px;
  padding: 0 20px;
  font-size: 13px;
}

.why-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.why-proof-item {
  min-height: 250px;
  padding: 30px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(16, 32, 57, 0.08);
  box-shadow: 0 14px 34px rgba(16, 32, 57, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-proof-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(16, 32, 57, 0.13);
}

.why-proof-item.featured {
  background: var(--theme-color-1);
}

.why-proof-item i {
  display: inline-block;
  margin-bottom: 22px;
  color: var(--theme-color);
  font-size: 42px;
}

.why-proof-item h4 {
  margin-bottom: 12px;
}

.why-proof-item.featured h4,
.why-proof-item.featured p {
  color: #fff;
}

.why-management-section {
  position: relative;
  overflow: hidden;
}

.why-management-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.38;
  animation: why-pattern-slide 18s linear infinite;
}

.why-management-section .small-container {
  position: relative;
  z-index: 1;
}

.why-management-row {
  align-items: stretch;
}

@media (min-width: 992px) {
  .why-management-row > div:first-child {
    flex: 0 0 45%;
    max-width: 45%;
  }

  .why-management-row > div:last-child {
    flex: 0 0 55%;
    max-width: 55%;
  }
}

.why-timeline {
  display: grid;
  gap: 18px;
}

.why-timeline-item {
  position: relative;
  padding: 30px 32px 30px 110px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.why-timeline-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--theme-color), #1268c9);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.why-timeline-item:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(237, 28, 36, 0.52);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.22);
}

.why-timeline-item span {
  position: absolute;
  left: 28px;
  top: 30px;
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.why-timeline-item:hover::before {
  opacity: 1;
}

.why-timeline-item:hover span {
  transform: scale(1.06);
  background: #1268c9;
}

.why-timeline-item h4 {
  margin-bottom: 10px;
  color: #fff;
}

.why-timeline-item p {
  margin: 0;
}

@keyframes why-pattern-slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 112px 112px;
  }
}

.why-local-section {
  position: relative;
  overflow: hidden;
  background: #f2f4f7;
}

.why-local-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(242, 244, 247, 0.98) 0%, rgba(242, 244, 247, 0.86) 52%, rgba(242, 244, 247, 0.96) 100%),
    url("../imgs/bg/choose-bg-commercial-02.webp") right center / cover no-repeat;
  opacity: 0.34;
  mix-blend-mode: multiply;
}

.why-local-section .small-container {
  position: relative;
  z-index: 1;
}

.why-local-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 38px;
  align-items: stretch;
  padding: 46px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  border-left: 6px solid var(--theme-color);
  box-shadow: 0 20px 60px rgba(16, 32, 57, 0.08);
  backdrop-filter: blur(2px);
}

.why-local-content p {
  margin-top: 22px;
}

.why-local-phone {
  margin-top: 24px;
  background: var(--theme-color);
}

.why-local-counties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.why-local-counties div {
  min-height: 120px;
  padding: 22px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(16, 32, 57, 0.08);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.why-local-counties div:hover {
  transform: translateY(-5px);
  border-color: var(--theme-color);
}

.why-local-counties strong {
  display: block;
  margin-bottom: 20px;
  color: var(--theme-color);
  font-size: 14px;
}

.why-local-counties span {
  color: var(--theme-color-1);
  font-size: 18px;
  font-weight: 800;
}

@media (max-width: 991px) {
  .why-expertise-ribbon,
  .why-proof-grid,
  .why-local-wrap {
    grid-template-columns: 1fr;
  }

  .why-proof-lead {
    padding-right: 0;
  }
}

@media (max-width: 575px) {
  .why-timeline-item {
    padding: 104px 24px 26px;
  }

  .why-local-wrap {
    padding: 28px 22px;
  }

  .why-local-counties {
    grid-template-columns: 1fr;
  }
}

/* About/company quick contact section */
.about-quick-contact-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .9) 42%, var(--theme-color-1) 42%, var(--theme-color-1) 100%),
    url("../imgs/bg/testimonial-bg_w1920-WHITE-85-01.webp") center top / cover no-repeat;
}

.about-quick-contact-section::before {
  content: "";
  position: absolute;
  inset: 0 0 58% 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .72), rgba(255, 255, 255, .96));
  pointer-events: none;
}

body.our-advantage-page .about-quick-contact-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, .58) 42%, var(--theme-color-1) 42%, var(--theme-color-1) 100%),
    url("../imgs/bg/full_circle_construction_bg-01_2000x1000.webp") center 22% / cover no-repeat;
}

body.our-advantage-page .about-quick-contact-section::before {
  inset: 0 0 56% 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .42), rgba(255, 255, 255, .82)),
    radial-gradient(circle at 68% 38%, rgba(24, 87, 184, .18), transparent 34%);
}

.about-quick-contact-section .small-container {
  position: relative;
  z-index: 1;
}

.about-quick-contact-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: 34px;
  align-items: stretch;
  padding: 42px;
  border-radius: 12px;
  background: var(--theme-color);
  box-shadow: 0 26px 60px rgba(16, 32, 57, 0.18);
  overflow: hidden;
}

.about-quick-contact-wrap::before {
  content: "";
  position: absolute;
  inset: auto -90px -140px auto;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

.about-quick-contact-copy,
.about-quick-contact-form {
  position: relative;
  z-index: 1;
}

.about-quick-contact-copy {
  padding: 8px 0;
}

.about-quick-contact-copy .section-sub-title {
  color: #fff;
}

.about-quick-contact-copy h3 {
  margin-top: 12px;
  margin-bottom: 18px;
  color: #fff;
  font-size: 34px;
}

.about-quick-contact-copy p {
  color: rgba(255, 255, 255, 0.86);
}

.about-quick-contact-actions {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.about-quick-contact-actions a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 800;
}

.about-quick-contact-actions a:hover {
  background: #fff;
  color: var(--theme-color-1);
}

.about-quick-contact-form {
  padding: 28px;
  border-radius: 10px;
  background: #fff;
}

.about-quick-contact-form input,
.about-quick-contact-form select,
.about-quick-contact-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 56px;
  line-height: 56px;
  border: 1px solid rgba(16, 32, 57, 0.14);
  border-radius: 8px;
  background: #f7f8fa;
  color: var(--theme-color-1);
  font-weight: 600;
  padding-left: 18px;
  padding-right: 18px;
}

.about-quick-contact-form select {
  width: 100%;
  min-width: 0;
  padding-left: 20px;
  padding-right: 42px;
  text-overflow: ellipsis;
}

.about-quick-contact-form textarea {
  min-height: 118px;
  padding-top: 15px;
  line-height: 1.5;
  resize: vertical;
}

.about-quick-contact-form button {
  width: 100%;
  justify-content: center;
  border-radius: 8px;
}

@media (max-width: 991px) {
  .about-quick-contact-wrap {
    grid-template-columns: 1fr;
    padding: 34px;
  }
}

@media (max-width: 575px) {
  .about-quick-contact-wrap {
    padding: 24px;
  }

  .about-quick-contact-copy h3 {
    font-size: 28px;
  }

  .about-quick-contact-form {
    padding: 20px;
  }
}

/* Our Advantage page */
.advantage-hero-section {
  position: relative;
  overflow: hidden;
}

.advantage-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(239, 21, 35, 0.18), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 42%);
}

.advantage-hero-section .small-container {
  position: relative;
  z-index: 1;
}

.advantage-hero-copy p,
.advantage-program-section p {
  color: rgba(255, 255, 255, 0.78);
}

.advantage-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.advantage-savings-card {
  padding: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.2);
}

.advantage-savings-card > span {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--theme-color);
  font-weight: 800;
  text-transform: uppercase;
}

.advantage-savings-card h4 {
  margin-bottom: 28px;
  color: #fff;
}

.advantage-savings-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.advantage-savings-row div {
  min-height: 190px;
  padding: 24px;
  border-radius: 10px;
  background: #fff;
}

.advantage-savings-row strong {
  display: block;
  margin-bottom: 14px;
  color: var(--theme-color);
  font-size: 22px;
}

.advantage-contract-section {
  background: #fff;
}

.advantage-contract-section .title-box p {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.advantage-contract-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.advantage-contract-card {
  min-height: 310px;
  padding: 34px 30px;
  border-radius: 12px;
  background: #f7f8fa;
  border-top: 5px solid var(--theme-color);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.advantage-contract-card:hover {
  transform: translateY(-7px);
  background: #fff;
  box-shadow: 0 22px 45px rgba(16, 32, 57, 0.13);
}

.advantage-contract-card i {
  display: inline-block;
  margin-bottom: 26px;
  color: var(--theme-color);
  font-size: 44px;
}

.advantage-contract-card h4 {
  margin-bottom: 14px;
}

.advantage-cost-section {
  background: #f5f7fa;
}

.advantage-cost-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 44px;
  align-items: center;
}

.advantage-cost-list {
  display: grid;
  gap: 14px;
}

.advantage-cost-list div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 90px;
  padding: 18px 22px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(16, 32, 57, 0.08);
}

.advantage-cost-list strong {
  display: inline-flex;
  width: 54px;
  height: 54px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
}

.advantage-cost-list span {
  color: var(--theme-color-1);
  font-weight: 700;
}

.advantage-program-section {
  position: relative;
  overflow: hidden;
}

.advantage-program-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(135deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.35;
}

.advantage-program-section .small-container {
  position: relative;
  z-index: 1;
}

.advantage-program-list {
  display: grid;
  gap: 14px;
}

.advantage-program-intro {
  max-width: 460px;
}

.advantage-program-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.advantage-program-list div {
  padding: 26px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-left: 4px solid var(--theme-color);
}

.advantage-program-list h4 {
  margin-bottom: 8px;
  color: #fff;
}

.advantage-program-list p {
  margin: 0;
}

.advantage-after-form-section {
  background: #fff;
}

.advantage-after-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 36px;
  align-items: stretch;
}

.advantage-after-form-copy {
  padding: 40px;
  border-radius: 12px;
  background: #f6f8fb;
  border-left: 5px solid var(--theme-color);
}

.advantage-after-form-copy p {
  margin-top: 18px;
}

.advantage-after-form-points {
  display: grid;
  gap: 14px;
}

.advantage-after-form-points div {
  min-height: 122px;
  padding: 26px;
  border-radius: 10px;
  background: var(--theme-color-1);
  transition: transform .25s ease, background-color .25s ease;
}

.advantage-after-form-points div:hover {
  transform: translateX(8px);
  background: var(--theme-color);
}

.advantage-after-form-points strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 20px;
}

.advantage-after-form-points span {
  color: rgba(255, 255, 255, .78);
}

.advantage-footer-banner {
  padding: 0 0 84px;
  background: #fff;
}

.advantage-footer-banner-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 36px 40px;
  border-radius: 12px;
  background: var(--theme-color);
  box-shadow: 0 24px 55px rgba(239, 21, 35, .22);
}

.advantage-footer-banner-wrap span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, .82);
  font-weight: 800;
  text-transform: uppercase;
}

.advantage-footer-banner-wrap h3 {
  color: #fff;
  font-size: 30px;
}

@media (max-width: 991px) {
  .advantage-savings-row,
  .advantage-contract-grid,
  .advantage-cost-layout,
  .advantage-after-form-grid {
    grid-template-columns: 1fr;
  }

  .advantage-footer-banner-wrap {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 575px) {
  .advantage-savings-card {
    padding: 28px 22px;
  }

  .advantage-cost-list div {
    grid-template-columns: 1fr;
  }

  .advantage-after-form-copy,
  .advantage-footer-banner-wrap {
    padding: 28px 22px;
  }

.advantage-footer-banner-wrap h3 {
    font-size: 24px;
  }
}

/* Residential service detail pages */
.hoa-blue-breadcrumb {
  background: #071d3d;
}

.hoa-blue-breadcrumb .breadcrumb__thumb {
  opacity: 1;
}

.hoa-blue-hero {
  background: linear-gradient(135deg, #061936 0%, #0b2f66 54%, #071d3d 100%);
  overflow: hidden;
}

.hoa-blue-hero::before {
  content: none;
}

.hoa-blue-hero .small-container {
  position: relative;
  z-index: 1;
}

.hoa-blue-hero .section-sub-title {
  color: var(--theme-color);
}

.hoa-blue-hero-content {
  max-width: 820px;
}

.hoa-blue-hero-content h1 {
  max-width: 820px;
  margin: 14px 0 24px;
  color: #fff;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
}

.hoa-blue-hero-content .roof-repair-intro-title {
  color: #fff;
}

.hoa-blue-hero-content p {
  max-width: 780px;
  color: rgba(255, 255, 255, .84);
  font-size: 18px;
  line-height: 1.78;
}

.hoa-blue-hero-content .primary-btn-1-blue-white,
.hoa-blue-hero-content .primary-btn-1-red {
  margin-right: 14px;
  margin-bottom: 12px;
}

.hoa-blue-hero-image {
  max-width: 390px;
  margin-left: auto;
  padding: 0 0 64px;
}

.hoa-blue-hero-image figure.image {
  border-radius: 14px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .32);
}

.hoa-blue-hero-image img {
  width: 100%;
  min-height: 430px;
  object-fit: cover;
  border-radius: 14px;
}

.hoa-blue-hero-image .residential-hero-badge {
  right: auto;
  left: -38px;
  bottom: 0;
}

.hoa-blue-counter-row {
  transform: none;
  max-width: 520px;
  margin: 28px 0 0 auto;
}

.hoa-blue-service-note {
  background: #fff;
}

.hoa-blue-service-note .section-sub-title {
  color: var(--theme-color);
}

.hoa-blue-service-note h3 {
  color: #071d3d;
}

.hoa-blue-service-note p {
  color: #777;
}

.hoa-bottom-cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #061936 0%, #0b2f66 58%, #071d3d 100%);
}

.hoa-bottom-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 84% 35%, rgba(238, 20, 38, .28), transparent 32%);
  pointer-events: none;
}

.hoa-bottom-cta .small-container {
  position: relative;
  z-index: 1;
}

.seo-commercial-hero {
  background: #fff;
}

.seo-commercial-hero > .shape-1 {
  opacity: .08;
}

.seo-commercial-hero .choose-3-content-area p {
  color: #6f6f6f;
}

.residential-detail-hero {
  position: relative;
  overflow: hidden;
  padding: 118px 0 104px;
  background: radial-gradient(circle at 82% 12%, rgba(47, 111, 202, .38), transparent 34%), linear-gradient(135deg, #071d3d 0%, #102f63 58%, #071d3d 100%);
}

.residential-detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../imgs/bg/testimonial-bg_w1920-BLUE-01.webp") center / cover no-repeat;
  opacity: .24;
}

.residential-detail-hero .small-container {
  position: relative;
  z-index: 1;
}

.residential-detail-hero-content .section-sub-title {
  color: var(--theme-color);
}

.residential-detail-hero-content h1 {
  max-width: 780px;
  margin: 14px 0 24px;
  color: #fff;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
}

.residential-detail-hero-content p {
  max-width: 720px;
  color: rgba(255, 255, 255, .84);
  font-size: 18px;
  line-height: 1.78;
}

.residential-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.residential-detail-hero-image {
  position: relative;
  padding: 18px 18px 72px 0;
}

.residential-detail-hero-image img {
  width: 100%;
  min-height: 520px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .32);
}

.residential-hero-badge {
  position: absolute;
  left: -34px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 310px;
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--theme-color);
  color: #fff;
  box-shadow: 0 18px 38px rgba(237, 28, 36, .28);
}

.residential-hero-badge strong {
  font-size: 40px;
  line-height: 1;
}

.residential-hero-badge span {
  font-weight: 800;
  line-height: 1.35;
}

.commercial-energy-hero {
  background: #fff;
}

.commercial-energy-hero::before {
  background: linear-gradient(120deg, rgba(239, 22, 39, .06), transparent 34%), radial-gradient(circle at 84% 12%, rgba(47, 111, 202, .14), transparent 28%);
  opacity: 1;
}

.commercial-energy-hero .residential-detail-hero-content h1 {
  color: var(--theme-color-1);
}

.commercial-energy-hero .residential-detail-hero-content p {
  color: #626a76;
}

.commercial-energy-hero .residential-detail-hero-image img {
  box-shadow: 0 28px 60px rgba(16, 32, 57, .18);
}

.commercial-energy-animation {
  position: absolute;
  right: -28px;
  top: 28px;
  width: 172px;
  height: 150px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 20px 48px rgba(16, 32, 57, .18);
  z-index: 2;
}

.energy-sun {
  position: absolute;
  right: 22px;
  top: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffbf3f;
  box-shadow: 0 0 0 10px rgba(255, 191, 63, .16);
}

.energy-windmill {
  position: absolute;
  left: 24px;
  bottom: 22px;
  width: 70px;
  height: 104px;
}

.energy-windmill .windmast {
  position: absolute;
  left: 32px;
  bottom: 0;
  width: 6px;
  height: 68px;
  border-radius: 6px 6px 0 0;
  background: #102039;
}

.energy-windmill .windhub {
  position: absolute;
  left: 26px;
  top: 24px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--theme-color);
  z-index: 2;
}

.energy-windmill .blade {
  position: absolute;
  left: 34px;
  top: 33px;
  width: 6px;
  height: 34px;
  border-radius: 999px;
  background: #2f6fca;
  transform-origin: 3px -1px;
  animation: energyWindSpin 4.5s linear infinite;
}

.energy-windmill .blade-2 {
  animation-delay: -1.5s;
  transform: rotate(120deg);
}

.energy-windmill .blade-3 {
  animation-delay: -3s;
  transform: rotate(240deg);
}

.energy-solar-panel {
  position: absolute;
  right: 18px;
  bottom: 22px;
  display: grid;
  grid-template-columns: repeat(3, 22px);
  gap: 4px;
  padding: 9px;
  border-radius: 8px;
  background: linear-gradient(135deg, #102039, #1857b8);
  transform: skewY(-8deg);
}

.energy-solar-panel span {
  display: block;
  height: 16px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .78);
  animation: solarPulse 2.8s ease-in-out infinite;
}

.energy-solar-panel span:nth-child(even) {
  animation-delay: .45s;
}

@keyframes energyWindSpin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

@keyframes solarPulse {
  0%, 100% { opacity: .52; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .energy-windmill .blade,
  .energy-solar-panel span {
    animation: none;
  }
}

.residential-info-section,
.residential-split-section {
  background: #fff;
}

.residential-lead-text {
  font-size: 18px;
  line-height: 1.78;
}

.residential-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.residential-process-grid div {
  min-height: 210px;
  padding: 24px;
  border-radius: 10px;
  background: #f4f7fb;
  border: 1px solid rgba(7, 29, 61, .08);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.residential-process-grid div:hover {
  transform: translateY(-6px);
  background: #fff;
  box-shadow: 0 20px 44px rgba(16, 32, 57, .12);
}

.residential-process-grid span {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
  font-weight: 900;
}

.residential-process-grid h4 {
  margin-bottom: 10px;
  color: var(--theme-color-1);
}

.residential-card-section {
  overflow: hidden;
}

.residential-card-section .title-box p {
  max-width: 760px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, .76);
}

.residential-blue-card {
  height: 100%;
  min-height: 285px;
  padding: 34px 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.residential-blue-card:hover {
  transform: translateY(-8px);
  background: var(--theme-color);
  border-color: var(--theme-color);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .22);
}

.residential-blue-card i {
  display: inline-flex;
  width: 62px;
  height: 62px;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  border-radius: 10px;
  background: #fff;
  color: var(--theme-color);
  font-size: 30px;
}

.residential-blue-card h4 {
  margin-bottom: 14px;
  color: #fff;
}

.residential-blue-card p {
  color: rgba(255, 255, 255, .82);
}

.bg-soft-gray {
  background: #f4f7fb;
}

.residential-rounded-image {
  width: 100%;
  min-height: 480px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 22px 50px rgba(16, 32, 57, .16);
}

.residential-check-list {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.residential-check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--theme-color-1);
  font-weight: 700;
}

.residential-check-list i {
  margin-top: 5px;
  color: var(--theme-color);
}

.residential-simple-cta {
  color: #fff;
}

.residential-simple-cta h2 {
  margin-top: 10px;
  color: #fff;
  font-size: 38px;
}

.solar-benefit-panel {
  display: grid;
  gap: 16px;
  padding: 26px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(7, 29, 61, .92), rgba(24, 87, 184, .86)), url("../imgs/bg/full_circle_construction_bg-03_1200x680.webp") center / cover no-repeat;
  box-shadow: 0 24px 54px rgba(16, 32, 57, .18);
}

.solar-benefit-panel div {
  padding: 22px 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .11);
  border: 1px solid rgba(255, 255, 255, .18);
}

.solar-benefit-panel strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 22px;
}

.solar-benefit-panel span {
  color: rgba(255, 255, 255, .82);
}

.residential-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.residential-mini-grid div {
  padding: 22px;
  border-radius: 8px;
  background: #fff;
  border-left: 4px solid var(--theme-color);
}

.residential-mini-grid h5 {
  margin-bottom: 8px;
  color: var(--theme-color-1);
}

.hoa-roadmap-section {
  background: #fff;
}

.hoa-roadmap-section p {
  font-size: 17px;
  line-height: 1.78;
}

.hoa-roadmap {
  position: relative;
  display: grid;
  gap: 18px;
  padding-left: 34px;
}

.hoa-roadmap::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: linear-gradient(180deg, var(--theme-color), #1857b8);
}

.hoa-roadmap div {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 12px 18px;
  padding: 24px 26px;
  border-radius: 10px;
  background: #f4f7fb;
  border: 1px solid rgba(16, 32, 57, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.hoa-roadmap div:hover {
  transform: translateX(8px);
  box-shadow: 0 18px 38px rgba(16, 32, 57, .12);
}

.hoa-roadmap span {
  grid-row: span 2;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--theme-color);
  color: #fff;
  font-weight: 900;
}

.hoa-roadmap strong {
  color: var(--theme-color-1);
  font-size: 22px;
}

.hoa-roadmap p {
  margin: 0;
}

.hoa-service-matrix-section {
  overflow: hidden;
}

.hoa-service-image {
  position: sticky;
  top: 120px;
}

.hoa-service-image img {
  width: 100%;
  min-height: 560px;
  object-fit: cover;
  border-radius: 12px;
}

.hoa-service-image div {
  margin: -72px 26px 0;
  position: relative;
  padding: 24px;
  border-radius: 10px;
  background: var(--theme-color);
  color: #fff;
  box-shadow: 0 18px 40px rgba(237, 28, 36, .22);
}

.hoa-service-image strong {
  display: block;
  margin-bottom: 8px;
  font-size: 26px;
}

.hoa-service-list {
  display: grid;
  gap: 16px;
}

.hoa-service-list article {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 20px;
  align-items: start;
  padding: 26px;
  border-radius: 10px;
  background: #fff;
  border-left: 5px solid var(--theme-color);
  box-shadow: 0 14px 34px rgba(16, 32, 57, .08);
  transition: transform .25s ease, border-color .25s ease;
}

.hoa-service-list article:hover {
  transform: translateY(-5px);
  border-color: #1857b8;
}

.hoa-service-list i {
  width: 58px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f4f7fb;
  color: var(--theme-color);
  font-size: 28px;
}

.hoa-value-band {
  color: #fff;
}

.hoa-value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.hoa-value-grid div {
  min-height: 190px;
  padding: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
}

.hoa-value-grid strong {
  display: block;
  margin-bottom: 12px;
  color: #fff;
  font-size: 22px;
}

.hoa-value-grid span {
  color: rgba(255, 255, 255, .78);
}

.solar-planning-panel-section {
  background: #fff;
}

.solar-planning-panel-section p {
  font-size: 17px;
  line-height: 1.78;
}

.solar-planning-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.solar-planning-pills span {
  padding: 10px 14px;
  border-radius: 999px;
  background: #f4f7fb;
  color: var(--theme-color-1);
  font-weight: 800;
}

.solar-stack-panel {
  display: grid;
  gap: 18px;
  padding: 28px;
  border-radius: 12px;
  background: linear-gradient(135deg, #071d3d, #1857b8);
  box-shadow: 0 24px 54px rgba(16, 32, 57, .18);
}

.solar-stack-panel article {
  position: relative;
  padding: 26px 28px 26px 96px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
}

.solar-stack-panel strong {
  position: absolute;
  left: 26px;
  top: 26px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme-color);
  color: #fff;
}

.solar-stack-panel h4 {
  color: #fff;
}

.solar-stack-panel p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .78);
}

.solar-services-showcase {
  overflow: hidden;
}

.solar-showcase-image {
  position: relative;
  min-height: 620px;
  border-radius: 12px;
  overflow: hidden;
  background: #1857b8;
}

.solar-showcase-image img {
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  opacity: .88;
}

.solar-showcase-copy {
  max-width: 760px;
  margin: 16px 0 30px;
  color: rgba(255, 255, 255, .78);
}

.solar-feature-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.solar-feature-columns div {
  min-height: 235px;
  padding: 28px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  transition: transform .25s ease, background-color .25s ease;
}

.solar-feature-columns div:hover {
  transform: translateY(-7px);
  background: rgba(24, 87, 184, .72);
}

.solar-feature-columns i {
  display: inline-flex;
  margin-bottom: 18px;
  color: var(--theme-color);
  font-size: 34px;
}

.solar-feature-columns h4 {
  color: #fff;
}

.solar-feature-columns p {
  color: rgba(255, 255, 255, .78);
}

/* Service area hub */
.service-area-hub-hero {
  background: #fff;
}

.service-area-hub-hero h1 {
  margin: 14px 0 22px;
  color: var(--theme-color-1);
  font-size: 52px;
  font-weight: 900;
  line-height: 1.12;
}

.service-area-hub-hero p,
.service-area-seo-section p,
.orange-county-city-section p {
  font-size: 17px;
  line-height: 1.78;
}

.service-area-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.service-area-hub-card {
  position: relative;
  padding: 42px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(7, 29, 61, .94), rgba(24, 87, 184, .88)),
    url("../imgs/bg/full_circle_construction_bg-01_1200x680.webp") center / cover no-repeat;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 24px 54px rgba(16, 32, 57, .18);
}

.service-area-hub-card strong {
  color: var(--theme-color);
  text-transform: uppercase;
  letter-spacing: 0;
}

.service-area-hub-card h3 {
  margin: 18px 0 14px;
  color: #fff;
  font-size: 38px;
}

.service-area-hub-card p,
.service-area-hub-card span {
  color: rgba(255, 255, 255, .82);
}

.service-counties-section .title-box p {
  max-width: 830px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, .78);
}

.service-county-card {
  height: 100%;
  min-height: 270px;
  padding: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}

.service-county-card:hover,
.service-county-card.primary {
  transform: translateY(-6px);
  background: var(--theme-color);
  border-color: var(--theme-color);
}

.service-county-card span {
  display: inline-flex;
  min-width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fff;
  color: var(--theme-color);
  font-weight: 900;
}

.service-county-card h3 {
  color: #fff;
  margin-bottom: 12px;
}

.service-county-card p {
  color: rgba(255, 255, 255, .82);
}

.service-area-sticky-title {
  position: sticky;
  top: 120px;
}

.service-city-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.service-city-grid a {
  display: block;
  min-height: 150px;
  padding: 24px;
  border-radius: 10px;
  background: #f4f7fb;
  border-left: 5px solid var(--theme-color);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.service-city-grid a:hover {
  transform: translateY(-5px);
  background: #fff;
  box-shadow: 0 18px 38px rgba(16, 32, 57, .12);
}

.service-city-grid strong {
  display: block;
  margin-bottom: 9px;
  color: var(--theme-color-1);
  font-size: 22px;
}

.service-city-grid span {
  color: #686a6f;
}

.service-area-seo-section h2 {
  font-size: 36px;
}

.service-area-cta {
  color: #fff;
}

.service-area-cta h2 {
  margin-top: 10px;
  color: #fff;
  font-size: 38px;
}

@media (max-width: 1199px) {
  .hoa-blue-hero-content h1 {
    font-size: 46px;
  }

  .residential-detail-hero-content h1 {
    font-size: 46px;
  }
}

@media (max-width: 991px) {
  .hoa-blue-hero-content h1 {
    font-size: 40px;
  }

  .hoa-blue-hero-image {
    max-width: 520px;
    margin-left: 0;
  }

  .hoa-blue-hero-image img {
    min-height: 390px;
  }

  .hoa-blue-hero-image .residential-hero-badge {
    left: 18px;
  }

  .hoa-blue-counter-row {
    max-width: none;
    margin-left: 0;
  }

  .residential-detail-hero {
    padding: 86px 0 78px;
  }

  .residential-detail-hero-content h1 {
    font-size: 40px;
  }

  .residential-process-grid,
  .residential-mini-grid,
  .hoa-value-grid,
  .solar-feature-columns,
  .service-city-grid {
    grid-template-columns: 1fr;
  }

  .residential-detail-hero-image img {
    min-height: 390px;
  }

  .commercial-energy-animation {
    right: 18px;
    top: 18px;
  }

  .hoa-service-image {
    position: relative;
    top: auto;
  }

  .hoa-service-image img,
  .solar-showcase-image,
  .solar-showcase-image img {
    min-height: 420px;
  }

  .service-area-sticky-title {
    position: relative;
    top: auto;
  }

  .service-area-hub-hero h1 {
    font-size: 38px;
  }
}

@media (max-width: 575px) {
  .hoa-blue-hero-content h1 {
    font-size: 34px;
  }

  .hoa-blue-hero-image {
    padding-bottom: 0;
  }

  .hoa-blue-hero-image .residential-hero-badge {
    position: relative;
    left: auto;
    bottom: auto;
    margin: -42px 18px 0;
  }

  .hoa-blue-counter-row {
    grid-template-columns: 1fr;
  }

  .residential-detail-hero-content h1 {
    font-size: 34px;
  }

  .residential-hero-badge {
    position: relative;
    left: 0;
    bottom: auto;
    margin-top: -42px;
  }

  .commercial-energy-animation {
    position: relative;
    right: auto;
    top: auto;
    margin: -28px 18px 0 auto;
  }

  .hoa-roadmap,
  .hoa-roadmap div,
  .hoa-service-list article,
  .solar-stack-panel article {
    display: block;
    padding-left: 24px;
  }

  .hoa-roadmap::before {
    display: none;
  }

  .hoa-roadmap span,
  .solar-stack-panel strong {
    position: static;
    margin-bottom: 14px;
  }

  .service-area-hub-card {
    padding: 30px 24px;
  }

  .service-area-cta h2 {
    font-size: 28px;
  }
}

/* ==========================================================================
   V3 SITEWIDE BUTTON ORDER AND HOVER SWEEP
   ========================================================================== */
.fcc-action-row,
.home-about-action-row,
.why-proof-actions,
.roof-repair-actions,
.roof-services-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.fcc-action-row .fcc-quote-action,
.home-about-action-row .primary-btn-1,
.home-about-action-row .primary-btn-1-red,
.why-proof-actions .primary-btn-1-red,
.roof-repair-actions .primary-btn-1,
.roof-repair-actions .primary-btn-1-red,
.roof-services-actions .primary-btn-1,
.roof-services-actions .primary-btn-1-red {
  order: 1;
}

.fcc-action-row .fcc-call-action,
.home-about-action-row .home-about-call,
.why-proof-actions .why-call-btn,
.roof-repair-actions .roof-repair-call,
.roof-services-actions .roof-services-call {
  order: 2;
}

.home-about-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}

.home-about-call {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--primary-color);
}

.home-about-call .icon-1 {
  position: relative;
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--theme-color);
  font-size: 23px;
  transform: rotate(-45deg);
  transition: transform 0.6s ease;
}

.home-about-call .icon-1::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
}

.home-about-call:hover .icon-1 {
  transform: rotate(0deg);
}

.home-about-call .content {
  display: grid;
  gap: 2px;
}

.home-about-call small {
  color: #787878;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.home-about-call strong {
  color: var(--primary-color);
  font-size: 18px;
  line-height: 1.2;
  transition: color 0.25s ease;
}

.home-about-call:hover strong {
  color: var(--theme-color);
}

/* ==========================================================================
   V3 SITEWIDE CTA COLORS
   ========================================================================== */
:root {
  --fcc-call-blue: #1268c9;
  --fcc-call-blue-dark: #0d56a8;
}

a[href="get-quote.html"].primary-btn-1,
a[href="get-quote.html"].primary-btn-1-blue,
a[href="get-quote.html"].primary-btn-1-blue-white,
a[href="get-quote.html"].primary-btn-1-red,
a[href="get-quote.html"].primary-btn-1-red-blue,
a[href="get-quote.html"].primary-btn-1-white-red,
a[href="get-quote.html"].primary-btn-1-white-blue,
a[href="get-quote.html"].primary-btn-2,
a[href="get-quote.html"].primary-btn-3,
a[href="get-quote.html"].primary-btn-4,
a[href="get-quote.html"].primary-btn-5,
a[href="get-quote.html"].vh-btn-primary {
  background: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
  color: #fff !important;
}

a[href="get-quote.html"].btn-hover span,
a[href="get-quote.html"].btn-hover::before {
  background-color: var(--theme-color-1) !important;
}

a[href="tel:19498131858"].primary-btn-1,
a[href="tel:19498131858"].primary-btn-1-blue,
a[href="tel:19498131858"].primary-btn-1-blue-white,
a[href="tel:19498131858"].primary-btn-1-red,
a[href="tel:19498131858"].primary-btn-1-red-blue,
a[href="tel:19498131858"].primary-btn-1-white-red,
a[href="tel:19498131858"].primary-btn-1-white-blue,
a[href="tel:19498131858"].primary-btn-2,
a[href="tel:19498131858"].primary-btn-3,
a[href="tel:19498131858"].primary-btn-4,
a[href="tel:19498131858"].primary-btn-5,
a[href="tel:19498131858"].why-call-btn,
a[href="tel:19498131858"].why-local-phone,
a[href="tel:19498131858"].roof-repair-call,
a[href="tel:19498131858"].roof-services-call,
a[href="tel:19498131858"].solar-call-now-btn {
  background: var(--fcc-call-blue) !important;
  border-color: var(--fcc-call-blue) !important;
  color: #fff !important;
}

a[href="tel:19498131858"].btn-hover span,
a[href="tel:19498131858"].btn-hover::before {
  background-color: var(--fcc-call-blue-dark) !important;
}

.home-about-call .icon-1 {
  background: var(--fcc-call-blue);
}

.home-about-call .icon-1::before {
  border-color: var(--fcc-call-blue);
}

.home-about-call:hover strong {
  color: var(--fcc-call-blue);
}

/* ==========================================================================
   V3 SHARED HIDDEN LABELS
   ========================================================================== */
.fcc-hidden-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   V3 HOME PAGE QUOTE FORM
   ========================================================================== */
.fcc-home-quote-form {
  width: 100%;
}

.fcc-home-quote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.fcc-home-quote-field {
  position: relative;
  min-width: 0;
}

.fcc-home-quote-field.is-full,
.fcc-home-quote-submit {
  grid-column: 1 / -1;
}

.fcc-home-quote-field input,
.fcc-home-quote-field select {
  width: 100%;
  height: 58px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--theme-color-1);
  font-size: 15px;
  font-weight: 700;
  padding: 0 18px;
  outline: 0;
}

.fcc-home-quote-field select {
  appearance: auto;
  padding-right: 42px;
  text-overflow: ellipsis;
}

.fcc-home-quote-field input::placeholder {
  color: rgba(16, 32, 57, 0.58);
}

.fcc-home-quote-field input:focus,
.fcc-home-quote-field select:focus {
  border-color: var(--theme-color);
  box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.12);
}

.fcc-home-quote-submit {
  margin-top: 2px;
}

.fcc-home-quote-submit button {
  width: 100%;
  justify-content: center;
}

@media (max-width: 575px) {
  .fcc-home-quote-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   V3 SHARED QUOTE FORM FIELD ALIGNMENT
   ========================================================================== */
.fcc-company-field,
.fcc-start-date-field {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}

.about-quick-contact-form .row,
.quote-modern-card .row,
.help-3-form-area .row,
.linkedin-roof-form-grid .row {
  align-items: stretch;
}

.quote-modern-card input,
.quote-modern-card select,
.quote-modern-card textarea,
.help-3-form-area input,
.help-3-form-area select,
.help-3-form-area textarea,
.linkedin-roof-form-grid input,
.linkedin-roof-form-grid select,
.linkedin-roof-form-grid textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.quote-modern-card select,
.help-3-form-area select,
.linkedin-roof-form-grid select {
  padding-left: 20px;
  padding-right: 42px;
  text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .fcc-company-field,
  .fcc-start-date-field {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ==========================================================================
   V3 CONFIRMATION PAGE USER DETAILS
   ========================================================================== */
.fcc-confirmation-card {
  max-width: 780px;
  margin: 32px auto 0;
  padding: 30px;
  border-radius: 12px;
  background: #f7f8fa;
  border: 1px solid rgba(16, 32, 57, 0.1);
  text-align: left;
}

.fcc-confirmation-card h4 {
  margin-bottom: 18px;
  color: var(--theme-color-1);
}

.fcc-confirmation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
}

.fcc-confirmation-grid p {
  margin: 0;
  color: #62676f;
}

.fcc-confirmation-grid strong {
  display: block;
  color: var(--theme-color-1);
}

@media (max-width: 575px) {
  .fcc-confirmation-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   V3 SHARED BUTTON HOVER SWEEP
   ========================================================================== */
.btn-hover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.btn-hover::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  left: var(--fcc-hover-x, 50%);
  top: var(--fcc-hover-y, 50%);
  border-radius: 999px;
  background: var(--theme-color-1);
  transform: translate(-50%, -50%);
  transition: width 0.55s ease, height 0.55s ease;
  z-index: -1;
}

.btn-hover:hover::before {
  width: 260%;
  height: 520px;
}

.primary-btn-5.btn-hover::before,
.primary-btn-1-blue-white.btn-hover::before {
  background: var(--theme-color);
}

.primary-btn-1-red.btn-hover::before,
.primary-btn-1-white-red.btn-hover::before {
  background: var(--theme-color-1);
}

.primary-btn-1,
.primary-btn-1-blue,
.primary-btn-1-blue-white,
.primary-btn-1-red,
.primary-btn-1-red-blue,
.primary-btn-1-white-red,
.primary-btn-1-white-blue,
.primary-btn-2,
.primary-btn-3,
.primary-btn-4,
.primary-btn-5 {
  isolation: isolate;
}

.fcc-testimonials-two-section .fcc-testimonials-slider {
  overflow: hidden;
  padding: 0 76px 36px;
}

.fcc-testimonials-two-section .swiper-wrapper {
  align-items: stretch;
}

.fcc-testimonials-two-section .fcc-testimonials-two-grid,
.fcc-testimonials-two-section .fcc-testimonials-two-grid--partial {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 78px;
  max-width: none;
  margin: 0;
  padding: 0;
}

.fcc-testimonials-two-section .fcc-testimonials-two-grid--partial {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.fcc-testimonials-two-section .testimonials-two-box.fcc-testimonials-two-card {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  min-height: 252px;
  aspect-ratio: auto;
  padding: 36px 36px 46px 72px;
  border-radius: 12px;
}

.fcc-testimonials-two-section .testimonials-two-box.fcc-testimonials-two-card .author-image {
  left: -50px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.fcc-testimonials-two-section .testimonials-two-box.fcc-testimonials-two-card .author-image img {
  width: 96px;
  height: 96px;
}

@media (max-width: 1199px) {
  .fcc-testimonials-two-section .fcc-testimonials-slider {
    padding-left: 60px;
    padding-right: 28px;
  }

  .fcc-testimonials-two-section .fcc-testimonials-two-grid,
  .fcc-testimonials-two-section .fcc-testimonials-two-grid--partial {
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px) {
  .fcc-testimonials-two-section .fcc-testimonials-slider {
    padding-left: 0;
    padding-right: 0;
  }

  .fcc-testimonials-two-section .testimonials-two-box.fcc-testimonials-two-card {
    margin-top: 54px;
    padding: 64px 26px 34px;
  }

  .fcc-testimonials-two-section .testimonials-two-box.fcc-testimonials-two-card .author-image {
    left: 26px;
    top: -48px;
    transform: none;
  }
}

/* ==========================================================================
   V3 HOME VIDEO HERO
   ========================================================================== */
/* ── BANNER WRAPPER ─────────────────────────────────────── */
.vh-banner {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  overflow: visible;
}

/* ── VIDEO BACKGROUND ───────────────────────────────────── */
.vh-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.vh-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── OVERLAY LAYERS ─────────────────────────────────────── */
/*
  LAYER 1 — Navy base  (main darkness control)
  LAYER 2 — Red tint   (brand color wash)
  LAYER 3 — Directional gradient (left dark → right lighter)

  Fine-tune live in browser console:
  setOverlay(0.72, 0.14)  →  (navyOpacity, redOpacity)
*/
.vh-overlay-1 {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--theme-color-1);   /* #102039 navy */
  opacity: 0.95;
}
.vh-overlay-2 {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--theme-color);     /* #EA1826 red  */
  opacity: 0.14;
}
.vh-overlay-3 {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    115deg,
    rgba(16, 32, 57, 0.95) 0%,
    rgba(16, 32, 57, 0.60) 55%,
    rgba(16, 32, 57, 0.20) 100%
  );
}

/* ── CONTENT ────────────────────────────────────────────── */
.vh-content {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 80px 0 60px;   /* tighter — pushes content up */
}

/* ── GRID ───────────────────────────────────────────────── */
.vh-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: end;  /* bottom of right col lines up with bottom of buttons */
}

/* ── OVERLINE ───────────────────────────────────────────── */
.vh-sub {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.vh-sub-line {
  width: 44px;
  height: 2px;
  background: var(--theme-color);
  flex-shrink: 0;
}
.vh-sub span {
  font-family: var(--primary-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--theme-color);
}

/* ── H1 ─────────────────────────────────────────────────── */
.vh-h1 {
  font-family: var(--primary-font);
  font-size: clamp(58px, 7.5vw, 76px);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.05;
  margin-bottom: 26px;
}
.vh-h1 em {
  color: var(--theme-color);
  font-style: normal;
  font-size: 7.5rem;
}

.vh-service-subtitle {
  max-width: 660px;
  margin: 16px 0 22px;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.35;
}

/* ── PARAGRAPH ──────────────────────────────────────────── */
.vh-p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.85;
  margin-bottom: 40px;
  max-width: 590px;
}

/* ── BUTTONS ────────────────────────────────────────────── */
.vh-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;         /* no bottom gap — stats gone from left */
}
.vh-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 38px;
  background: var(--theme-color);
  color: #ffffff;
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--theme-color);
  transition: all 0.3s ease;
}
.vh-btn-primary:hover {
  background: transparent;
  color: var(--theme-color);
}
.vh-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 38px;
  background: transparent;
  color: #ffffff;
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.35);
  transition: all 0.3s ease;
}
.vh-btn-outline:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.vh-btn-icon {
  display: inline-flex;
  align-items: center;
}

/* ── RIGHT COLUMN ───────────────────────────────────────── */
.vh-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;    /* everything anchors to the right */
  gap: 0;
  padding-top: 0;
}

/* ── PHONE CARD — half width, right-aligned ─────────────── */
.vh-phone-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(251,0,4,0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 22px 24px;
  width: 52%;              /* half width, anchored right */
  margin-bottom: 20px;     /* vertical gap before badges */
  transition: border-color 0.3s;
}
.vh-phone-card:hover {
  border-color: rgba(234, 24, 38, 0.5);
}
.vh-phone-icon {
  width: 46px;
  height: 46px;
  background: var(--theme-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vh-phone-icon svg {
  width: 20px;
  height: 20px;
  fill: #ffffff;
}
.vh-phone-label {
  font-family: var(--primary-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}
.vh-phone-num {
  font-family: var(--primary-font);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.vh-phone-num a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s;
}
.vh-phone-num a:hover {
  color: var(--theme-color);
}

/* ── CREDENTIAL BADGES ──────────────────────────────────── */
.vh-badges {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(2,100,217,0.05);
}
.vh-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex: 1 1 auto;
  transition: background 0.3s;
}
.vh-badge:last-child {
  border-right: none;
}
.vh-badge:hover {
  background: rgba(234, 24, 38, 0.10);
}
.vh-badge-dot {
  width: 6px;
  height: 6px;
  background: var(--theme-color);
  border-radius: 50%;
  flex-shrink: 0;
}
.vh-badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vh-badge span {
  font-family: var(--primary-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.70);
  white-space: nowrap;
}
.vh-badge-sub {
  font-family: var(--primary-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  color: rgba(234, 24, 38, 0.75) !important;
  text-transform: uppercase !important;
  white-space: nowrap;
}

/* ── STATS — under badges, same width block ─────────────── */
.vh-stats {
  display: flex;
  width: 100%;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.04);
}
.vh-stat {
  flex: 1;
  padding: 20px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.vh-stat:last-child {
  border-right: none;
}
.vh-stat-num {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-family: var(--primary-font);
  font-size: 34px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}
.vh-stat-license { font-size: clamp(20px, 1.8vw, 30px); font-weight: 600; letter-spacing: -.04em; }
.vh-stat-plus {
  font-size: 20px;
  color: var(--theme-color);
  margin-top: 4px;
  font-weight: 700;
}
.vh-stat-label {
  font-family: var(--primary-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 6px;
}

/* Compact homepage hero statistics */
.vh-mini-stats {
  width: 100%;
  max-width: none;
  align-self: stretch;
  gap: 0;
  margin-top: 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-top: 0;
  background: rgba(255, 255, 255, 0.04);
}
.vh-mini-stats .vh-stat {
  min-width: 0;
  padding: 6px 10px 0;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  background: transparent;
}
.vh-mini-stats .vh-stat:last-child {
  border-right: 0;
}
.vh-mini-stats .vh-stat-num {
  font-size: 22px;
}
.vh-mini-stats .vh-stat-license {
  font-size: 22px;
  font-weight: 500;
}
.vh-mini-stats .vh-stat-plus {
  margin-top: 2px;
  font-size: 15px;
}
.vh-mini-stats .vh-stat-label {
  margin-top: 2px;
  font-size: 7px;
  letter-spacing: 0.07em;
}
@media (max-width: 991px) {
  .vh-mini-stats {
    width: 100%;
    max-width: none;
    align-self: stretch;
  }
}

@media (min-width: 992px) {
  .vh-right .vh-badges,
  .vh-right .vh-mini-stats {
    width: 60%;
    align-self: flex-end;
  }

  .vh-right .vh-badge {
    padding: 9px 12px;
  }
}

/* ── SCROLL INDICATOR ───────────────────────────────────── */
.vh-scroll-cue {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}
.vh-scroll-label {
  font-family: var(--primary-font);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  writing-mode: vertical-rl;
}
.vh-scroll-line {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
}
.vh-scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  animation: vhScrollDrop 1.8s ease-in-out infinite;
}
@keyframes vhScrollDrop {
  0%   { top: -100%; }
  100% { top: 100%; }
}

/* ── MUTE CONTROL — bottom right ────────────────────────── */
.vh-controls {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 20;
}
.vh-ctrl-btn {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  transition: all 0.3s ease;
  padding: 0;
}
.vh-ctrl-btn:hover {
  background: var(--theme-color);
  border-color: var(--theme-color);
}
.vh-ctrl-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  display: block;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1199px) {
  .vh-h1 { font-size: clamp(34px, 4.5vw, 58px); }
  .vh-service-subtitle { max-width: 560px; }
  .vh-stat-num { font-size: 28px; }
  .vh-stat-plus { font-size: 17px; }
}

@media (max-width: 991px) {
  .vh-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .vh-content {
    padding: 130px 0 90px;
  }
  .vh-scroll-cue {
    display: none;
  }
}

@media (max-width: 767px) {
  .vh-content { padding: 110px 0 70px; }
  .vh-h1 { font-size: clamp(32px, 8vw, 48px); }
  .vh-service-subtitle { max-width: 100%; font-size: 20px; }
  .vh-btns {
    flex-direction: column;
    width: 100%;
  }
  .vh-btn-primary,
  .vh-btn-outline {
    justify-content: center;
    width: 100%;
  }
  .vh-right {
    align-items: stretch;
    width: 100%;
  }
  .vh-phone-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 18px 16px;
    gap: 14px;
  }
  .vh-phone-card > div:last-child {
    min-width: 0;
  }
  .vh-phone-num {
    font-size: clamp(16px, 5vw, 18px);
    line-height: 1.15;
  }
  .vh-phone-num a {
    display: inline-block;
    white-space: nowrap;
  }
  .vh-badges,
  .vh-stats {
    width: 100%;
    box-sizing: border-box;
  }
  .vh-controls { bottom: 20px; right: 20px; }
  .vh-stat-num { font-size: 26px; }
}

@media (max-width: 480px) {
  .vh-phone-card {
    padding: 16px 14px;
  }
  .vh-phone-icon {
    width: 42px;
    height: 42px;
  }
  .vh-badge span { font-size: 10px; }
  .vh-badge { padding: 10px 12px; }
}

/* ==========================================================================
   V4 HOME LATEST PROJECT
   ========================================================================== */
.fcc-latest-project-section {
  width: 100%;
  padding: 70px 0;
  background: #fefefe;
  overflow: hidden;
}

.service-page-section {
  background: linear-gradient(270deg, #ffffff, #fbfdff, #edf6ff, #ffffff);
  background-size: 800% 800%;
  -webkit-animation: AnimationName 30s ease infinite;
  -moz-animation: AnimationName 30s ease infinite;
  animation: AnimationName 30s ease infinite;
}

.home-about-section {
  background: linear-gradient(270deg, #ffffff, #ffffff, #f9f9f9, #ffffff);
  background-size: 800% 800%;
  -webkit-animation: AnimationName 30s ease infinite;
  -moz-animation: AnimationName 30s ease infinite;
  animation: AnimationName 30s ease infinite;
}

.service-card-section-title {
  max-width: 780px;
  margin: 0 auto 34px;
}

.service-card-section-title .section-title {
  color: #102039;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
}

/* All commercial services page */
body.all-commercial-services-page .service-page-section {
  background: linear-gradient(180deg, #f3f9ff 0%, #ffffff 64%);
}

body.all-commercial-services-page .all-commercial-intro-row {
  row-gap: 24px;
  align-items: center;
}

body.all-commercial-services-page .all-commercial-action-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  max-width: none;
}

body.all-commercial-services-page .all-commercial-action-row .primary-btn-1-red,
body.all-commercial-services-page .all-commercial-action-row .primary-btn-1-blue-white {
  min-height: 48px;
  width: 100%;
  padding: 14px 22px;
  border-radius: 5px;
  font-size: 13px;
  line-height: 1;
  justify-content: center;
}

body.all-commercial-services-page .all-commercial-action-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 7px;
  background: #ffffff;
  border-left: 4px solid var(--theme-color);
  box-shadow: 0 14px 34px rgba(7, 25, 50, .08);
}

body.all-commercial-services-page .all-commercial-action-stat strong {
  flex: 0 0 auto;
  color: #102039;
  font-size: 27px;
  line-height: 1;
  font-weight: 900;
}

body.all-commercial-services-page .all-commercial-action-stat span {
  color: #5f6d7d;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 800;
}

body.all-commercial-services-page .all-commercial-intro-content h1 {
  margin: 0 0 12px;
  color: #102039;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.18;
}

body.all-commercial-services-page .all-commercial-intro-content h1 span {
  display: block;
  color: var(--theme-color);
  font-weight: 500;
}

body.all-commercial-services-page .all-commercial-intro-content p {
  max-width: 610px;
  margin: 0;
  color: #6d7684;
  font-size: 16px;
  line-height: 1.65;
}

body.all-commercial-services-page .service-slider-area {
  height: 100%;
  border-radius: 7px;
  overflow: hidden;
  background: #ffffff;
}

body.all-commercial-services-page .service-slider-area .content {
  min-height: 265px;
}

body.all-commercial-services-page .service-slider-area .content h4 {
  line-height: 1.18;
}

body.all-commercial-services-page .choose-section .choose-area-icon-box .icon-box {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: 0 0 92px;
}

body.all-commercial-services-page .choose-section .choose-area-icon-box .icon-box::before {
  border-radius: 50%;
}

body.all-commercial-services-page .choose-section .all-commercial-choose-image-col {
  display: flex;
  align-items: flex-start;
}

body.all-commercial-services-page .choose-section .all-commercial-choose-image {
  position: relative;
  display: inline-block;
  padding-top: 80px;
  margin-top: 145px;
  transform: translateX(-30px);
}

body.all-commercial-services-page .choose-section .all-commercial-choose-call {
  position: absolute;
  left: 64px;
  right: 28px;
  bottom: -28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 18px;
  border-radius: 8px;
  color: #ffffff;
  background: linear-gradient(135deg, #ef1523 0%, #c8101f 100%);
  box-shadow: 0 18px 40px rgba(239, 21, 35, .28);
  overflow: hidden;
  transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease;
}

body.all-commercial-services-page .choose-section .all-commercial-choose-call::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 58%);
  transform: translateX(-105%);
  transition: transform 500ms ease;
}

body.all-commercial-services-page .choose-section .all-commercial-choose-call:hover {
  color: #ffffff;
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(239, 21, 35, .38);
  background: linear-gradient(135deg, #ff2433 0%, #bf0d1b 100%);
}

body.all-commercial-services-page .choose-section .all-commercial-choose-call:hover::before {
  transform: translateX(105%);
}

body.all-commercial-services-page .choose-section .all-commercial-choose-call span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
  font-size: 18px;
}

body.all-commercial-services-page .choose-section .all-commercial-choose-call strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-right: auto;
  font-size: 13px;
  line-height: 1;
  text-transform: uppercase;
}

body.all-commercial-services-page .choose-section .all-commercial-choose-call b {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
}

body.all-commercial-services-page .choose-section .bg-image {
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  height: 100%;
  width: 45%;
  background-position: right top;
  background-size: cover;
}

@media only screen and (max-width: 991px) {
  body.all-commercial-services-page .all-commercial-action-row {
    max-width: 390px;
    flex-direction: row;
    justify-content: flex-start;
  }

  body.all-commercial-services-page .all-commercial-intro-content h1 {
    font-size: 25px;
  }
}

@media only screen and (max-width: 575px) {
  body.all-commercial-services-page .all-commercial-action-row {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
  }

  body.all-commercial-services-page .all-commercial-action-row .primary-btn-1-red,
  body.all-commercial-services-page .all-commercial-action-row .primary-btn-1-blue-white {
    width: 100%;
  }
}

.service-page-section .row > [class*="col-"] {
  display: flex;
}

.service-page-section .service-slider-area {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(16, 32, 57, 0.08);
}

.service-page-section .service-slider-area figure {
  flex: 0 0 auto;
  border-radius: 14px 14px 0 0;
}

.service-page-section .service-slider-area figure img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.service-page-section .service-slider-area .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 14px 14px;
}

.service-page-section .service-slider-area .content h4 {
  font-size: 26px;
  line-height: 1.12;
}

.service-page-section .service-slider-area .content p {
  flex: 1;
  font-size: 16px;
  line-height: 1.55;
}

.service-page-section .service-slider-area .service-btn {
  margin-top: auto;
  font-size: 13px;
}

.home-about-section .home-about-row {
  --bs-gutter-x: 5rem;
}

.home-about-section .about-3-image-area {
  max-width: 81%;
  margin-left: auto;
  margin-right: auto;
}

.home-about-section .about-3-image-area figure.image {
  padding-right: 0 !important;
}

.home-about-section .about-3-image-area figure.image img {
  width: 100%;
}

/* Framed image treatment for the first homepage section. */
#home-roofing-overview .about-3-image-area figure.image {
  padding: 7px !important;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(12, 31, 58, .14);
}

#home-roofing-overview .about-3-image-area figure.image img {
  border-radius: 15px;
}

/* Homepage section-title system: strong navy headline with a red key phrase. */
.home-pop-heading {
  max-width: 900px;
  font-size: clamp(34px, 3.25vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.home-pop-heading span {
  color: #ed1c2a;
}

.service-card-section-title .home-pop-heading,
.home-work-process .home-pop-heading {
  margin-left: auto;
  margin-right: auto;
}

.home-service-tabs .home-pop-heading {
  max-width: 680px;
}

@media (max-width: 767px) {
  .home-pop-heading {
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.1;
  }
}

/* Laptop header: keep every primary link readable and move utility actions to
   a compact second row before the navigation would ever wrap. */
@media only screen and (min-width: 1200px) and (max-width: 1749px) {
  .header-area {
    padding: 0;
  }

  .header-area .large-container {
    width: 100%;
    max-width: none;
    padding-left: 18px;
    padding-right: 18px;
  }

  .header-main {
    min-height: 108px;
    gap: 14px;
    align-items: flex-start;
    padding: 11px 0 8px;
  }

  .header-left {
    flex: 0 0 auto;
    padding-top: 7px;
  }

  .header-logo {
    max-width: 145px;
  }

  .header-right {
    display: flex !important;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap !important;
    align-content: flex-start;
    justify-content: flex-end;
    gap: 7px 10px;
  }

  .mean__menu-wrapper.d-none.d-xl-block {
    display: block !important;
    flex: 0 0 100%;
    min-width: 0;
    order: 1;
    margin-left: 0 !important;
  }

  .main-menu,
  .main-menu > nav {
    width: 100%;
  }

  .main-menu > nav > ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap !important;
    white-space: nowrap;
  }

  .main-menu ul li {
    flex: 0 0 auto;
    margin-inline-end: clamp(7px, .65vw, 12px);
  }

  .main-menu ul li a {
    font-size: clamp(11px, .72vw, 13px);
    white-space: nowrap;
  }

  .header-action.d-none.d-xl-inline-flex {
    display: inline-flex !important;
  }

  .header-action {
    order: 2;
    flex: 0 0 auto;
    margin: 0;
  }

  .header-link .primary-btn-1 {
    min-height: 34px;
    padding: 9px 14px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
  }

  .header-link-1 {
    gap: 7px;
  }

  .header-link-1 .icon {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .header-link-1 .icon::before {
    width: 38px;
    height: 38px;
  }

  .header-link-1 .content span {
    font-size: 10px;
    line-height: 13px;
  }

  .header-link-1 .content h6,
  .header-link-1 .content h6 a {
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
  }
}

.home-about-section .about-3-image-area .shape-1 {
  right: -28px;
}

.home-about-section .about-3-content-area {
  padding-left: 10px;
}

.home-about-section .about-3-content-area .progress {
  max-width: 100%;
  width: 100%;
}

.home-about-section .about-3-content-area .progress-count {
  right: 0;
}

@media (max-width: 991px) {
  .home-about-section .home-about-row {
    --bs-gutter-x: 1.5rem;
  }

  .home-about-section .about-3-image-area {
    max-width: 100%;
    margin-bottom: 34px;
  }

  .home-about-section .about-3-content-area {
    padding-left: 0;
  }
}

.fcc-latest-project-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
  gap: 48px;
  align-items: center;
}

.fcc-latest-project-content h2 {
  color: #102039;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  margin: 12px 0 16px;
  font-weight: 800;
}

.fcc-latest-project-content p {
  max-width: 720px;
  color: #5d6877;
  line-height: 1.75;
  margin: 0;
  padding-top: 10px;
}

.fcc-latest-project-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.fcc-latest-project-item {
  padding: 12px 18px;
  background: #102039;
  border: 1px solid rgba(31, 95, 153, 0.28);
  box-shadow: 0 14px 28px rgba(3, 18, 42, 0.18);
}

.fcc-latest-project-item span {
  display: block;
  color: #ff4652;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.fcc-latest-project-item strong {
  display: block;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.35;
}

.fcc-latest-project-media {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 18px;
  align-items: stretch;
}

.fcc-latest-project-image,
.fcc-latest-project-video {
  min-height: 360px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
}

.fcc-latest-project-image img,
.fcc-latest-project-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fcc-latest-project-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(16, 32, 57, 0.08), rgba(16, 32, 57, 0.64));
  pointer-events: none;
}

.fcc-latest-project-video-label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  padding: 16px 18px;
  background: rgba(16, 32, 57, 0.72);
  border-left: 4px solid var(--theme-color);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fcc-latest-project-video-label span {
  display: block;
  color: var(--theme-color);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.fcc-latest-project-video-label strong {
  display: block;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.25;
}

@media (max-width: 991px) {
  .fcc-latest-project-layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .fcc-latest-project-media {
    grid-template-columns: 1fr;
  }

  .fcc-latest-project-image,
  .fcc-latest-project-video {
    min-height: 300px;
  }
}

@media (max-width: 575px) {
  .fcc-latest-project-section {
    padding: 44px 0;
  }

  .fcc-latest-project-details {
    grid-template-columns: 1fr;
  }

  .fcc-latest-project-image,
  .fcc-latest-project-video {
    min-height: 240px;
  }
}

/*----------------------------------------
Top-level dropdown parent links
----------------------------------------*/
.main-menu > nav > ul > li > a.dropdown-parent-link {
  cursor: default;
}

/*----------------------------------------
Commercial Roofing Services Intro
----------------------------------------*/
body.commercial-roofing-services-page .commercial-roofing-intro-row {
  align-items: center;
  row-gap: 24px;
}

body.commercial-roofing-services-page .service-page-section .commercial-roofing-intro-row > [class*="col-"] {
  display: block;
}

body.commercial-roofing-services-page .commercial-roofing-intro-content .row > [class*="col-"] {
  display: block;
}

body.commercial-roofing-services-page .commercial-roofing-action-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

body.commercial-roofing-services-page .commercial-roofing-action-row .primary-btn-1-red,
body.commercial-roofing-services-page .commercial-roofing-action-row .primary-btn-1-blue-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 46px;
  padding: 13px 18px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
}

body.commercial-roofing-services-page .commercial-roofing-intro-content h1 {
  margin: 0;
  color: var(--title-color);
  font-size: 28px !important;
  font-weight: 900;
  line-height: 1.15;
}

body.commercial-roofing-services-page .commercial-roofing-intro-content h1 span {
  display: block;
  color: var(--theme-color);
  font-size: 18px !important;
  line-height: 1.3;
  font-weight: 500;
}

/* Add breathing room between the service-page sections without affecting other pages. */
body.commercial-roofing-services-page .help-3-form-section {
  margin-top: -40px;
  padding-top: 90px !important;
  padding-bottom: 40px;
}

body.commercial-roofing-services-page .service-page-section {
  padding-top: 80px;
}

/* Commercial roofing service highlights */
body.commercial-roofing-services-page .choose-3-content-area .icon-box-area {
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e9f1;
  border-left: 3px solid var(--theme-color);
  border-bottom-color: #e2e9f1;
  border-radius: 6px;
  transition: transform .28s ease, background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

body.commercial-roofing-services-page .choose-3-content-area .icon-box-area:hover {
  background: #0a2345 !important;
  border-color: var(--theme-color) !important;
  box-shadow: 0 14px 28px rgba(16, 32, 57, .18);
  transform: translateY(-5px);
}

body.commercial-roofing-services-page .choose-3-content-area .icon-box-area:hover .icon-box,
body.commercial-roofing-services-page .choose-3-content-area .icon-box-area:hover h5 a {
  color: #fff !important;
}

body.commercial-roofing-services-page .help-3-form-area button.primary-btn-1 {
  justify-content: center;
  text-align: center;
}

body.commercial-roofing-services-page .fcc-mini-submit-desktop,
body.commercial-roofing-services-page .fcc-mini-submit-mobile {
  font-style: normal;
}

body.commercial-roofing-services-page .fcc-mini-submit-mobile {
  display: none;
}

@media only screen and (max-width: 575px) {
  body.commercial-roofing-services-page .help-3-form-area button.primary-btn-1 {
    width: 100% !important;
    min-height: 46px;
    padding: 10px 14px;
    font-size: 12px;
  }

  body.commercial-roofing-services-page .fcc-mini-submit-desktop {
    display: none;
  }

  body.commercial-roofing-services-page .fcc-mini-submit-mobile {
    display: inline;
  }
}

body.commercial-roofing-services-page .service-autoplay-video {
  display: block;
  background: #102039;
}

body.commercial-roofing-services-page .service-slider-area .icon-box .solar-service-icon {
  position: relative;
  z-index: 2;
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(18%) sepia(72%) saturate(3107%) hue-rotate(342deg) brightness(98%) contrast(89%);
  transition: filter .3s ease;
}

body.commercial-roofing-services-page .service-slider-area:hover .icon-box .solar-service-icon {
  filter: brightness(0) invert(1);
}

body.commercial-roofing-services-page .service-slider-area .icon-box .parking-service-icon {
  position: relative;
  z-index: 2;
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(18%) sepia(72%) saturate(3107%) hue-rotate(342deg) brightness(98%) contrast(89%);
  transition: filter .3s ease;
}

body.commercial-roofing-services-page .service-slider-area:hover .icon-box .parking-service-icon {
  filter: brightness(0) invert(1);
}

body.commercial-roofing-services-page .service-slider-area .icon-box .siding-service-icon {
  position: relative;
  z-index: 2;
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(18%) sepia(72%) saturate(3107%) hue-rotate(342deg) brightness(98%) contrast(89%);
  transition: filter .3s ease;
}

body.commercial-roofing-services-page .service-slider-area:hover .icon-box .siding-service-icon {
  filter: brightness(0) invert(1);
}

body.commercial-roofing-services-page .commercial-roofing-intro-content p {
  max-width: 610px;
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
}

@media only screen and (max-width: 991px) {
  body.commercial-roofing-services-page .commercial-roofing-action-row {
    max-width: 390px;
    flex-direction: row;
  }
}

@media only screen and (max-width: 575px) {
  body.commercial-roofing-services-page .commercial-roofing-action-row {
    max-width: none;
    flex-direction: column;
  }
}

/*----------------------------------------
Global Image Glass Shine Hover
----------------------------------------*/
figure.image,
.image.w-img,
.w-img,
.service-autoplay-video,
.roof-installation-video-card,
.cornering-risk-panel,
.siding-hero-main-image,
.siding-hero-layered-image,
.parking-structure-hero-image,
.parking-structure-video-frame {
  position: relative;
}

figure.image,
.image.w-img,
.w-img,
.roof-installation-video-card,
.cornering-risk-panel,
.siding-hero-main-image,
.siding-hero-layered-image,
.parking-structure-hero-image,
.parking-structure-video-frame {
  overflow: hidden;
}

figure.image::after,
.image.w-img::after,
.w-img::after,
.roof-installation-video-card::after,
.cornering-risk-panel::after,
.siding-hero-main-image::after,
.siding-hero-layered-image::after,
.parking-structure-hero-image::after,
.parking-structure-video-frame::after {
  content: "";
  position: absolute;
  top: -35%;
  left: -85%;
  z-index: 7;
  width: 46%;
  height: 170%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .16) 34%, rgba(255, 255, 255, .66) 50%, rgba(255, 255, 255, .16) 66%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-24deg);
  opacity: 0;
  pointer-events: none;
}

figure.image:hover::after,
.image.w-img:hover::after,
.w-img:hover::after,
.roof-installation-video-card:hover::after,
.cornering-risk-panel:hover::after,
.siding-hero-main-image:hover::after,
.siding-hero-layered-image:hover::after,
.parking-structure-hero-image:hover::after,
.parking-structure-video-frame:hover::after {
  animation: full-circle-glass-shine 1.15s ease;
}

.header-logo figure::after,
.header-logo a::after,
.footer-widget-1 figure.image::after,
.footer-logo figure.image::after,
.brand-image::after,
.brand-active figure.image::after,
.footer-socials a::after,
.social-media a::after,
.main-menu img::after,
.service-icon::after,
.icon-box::after {
  content: none !important;
  display: none !important;
}

@keyframes full-circle-glass-shine {
  0% {
    left: -85%;
    opacity: 0;
  }

  14% {
    opacity: 1;
  }

  100% {
    left: 135%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  figure.image:hover::after,
  .image.w-img:hover::after,
  .w-img:hover::after,
  .roof-installation-video-card:hover::after,
  .cornering-risk-panel:hover::after,
  .siding-hero-main-image:hover::after,
  .siding-hero-layered-image:hover::after,
  .parking-structure-hero-image:hover::after,
  .parking-structure-video-frame:hover::after {
    animation: none;
  }
}

@media only screen and (max-width: 1199px) {
  .index-footer-newsletter-content {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-left: 28%;
  }

  .index-footer-newsletter-form {
    max-width: 640px;
  }
}

@media only screen and (max-width: 991px) {
  .index-footer-newsletter-cta {
    margin-top: 0;
    overflow: hidden;
  }

  .index-footer-newsletter-image {
    width: 100%;
    height: 165px;
    top: 0;
    left: 0;
    bottom: auto;
    clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  }

  .index-footer-newsletter-cta::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 165px;
    clip-path: none;
    z-index: 1;
    background:
      linear-gradient(180deg, rgba(2, 14, 32, 0.01 ) 0 30%, transparent 10%),
      radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.14), transparent 26%);
  }

  .index-footer-newsletter-cta::after {
    display: none;
  }

  .index-footer-newsletter-content {
    margin-left: 0;
    padding: 205px 0 34px;
  }

  .index-footer-newsletter-content h3 {
    font-size: 28px;
  }

  .index-footer-contact-strip {
    gap: 18px 22px;
  }

  .index-footer-link-area {
    padding-top: 44px !important;
  }
}

@media only screen and (max-width: 575px) {
  .index-footer-newsletter-content {
    padding-top: 190px;
  }

  .index-footer-newsletter-content h3 {
    font-size: 24px;
  }

  .index-footer-newsletter-form {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .index-footer-email-action {
    grid-template-columns: 1fr;
    gap: 8px;
    overflow: visible;
  }

  .index-footer-email-action input,
  .index-footer-email-action .primary-btn-1 {
    border-radius: 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.26);
  }

  .index-footer-contact-strip {
    flex-direction: column;
    gap: 14px;
  }

  .index-footer-contact-strip .index-footer-quote-btn {
    width: 100%;
    justify-content: center;
  }
}

/*----------------------------------------
FAQ Page Refinements
----------------------------------------*/
.faq-page-section {
  overflow: hidden;
}

.faq-page-section .row {
  align-items: flex-start;
}

.faq-page-section .faq-wrapper.pr-80 {
  padding-right: 55px;
}

.faq-page-section .accordion-button {
  font-size: 14px;
  line-height: 1.55;
  padding: 16px 48px 16px 22px;
  font-weight: 600;
}

.faq-page-section .accordion-button::after,
.faq-page-section .accordion-button:not(.collapsed)::after {
  top: calc(50% - 20px);
  transform: translateY(-50%);
}

.faq-image-ring {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 520px;
  margin: 0 0 0 18px;
  padding: 18px 18px 4px;
  isolation: isolate;
}

.faq-image-ring img {
  position: relative;
  z-index: 3;
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 22px 55px rgba(6, 31, 61, 0.16);
}

.faq-side-support {
  max-width: 520px;
  margin: 24px 0 0 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #001f45;
}

.faq-side-support__header > span {
  display: inline-flex;
  align-items: center;
  color: #ed1c24;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 8px;
}

.faq-side-support__header h4 {
  color: #001f45;
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 0;
}

.faq-side-support__header p {
  color: #526174;
  font-size: 14px;
  line-height: 1.6;
  margin: 8px 0 0;
}

.faq-side-support__quick-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 9px;
}

.faq-side-support__quick-list li {
  display: flex;
  gap: 10px;
  color: #42536b;
  font-size: 14px;
  line-height: 1.45;
}

.faq-side-support__quick-list li span {
  flex: 0 0 auto;
  color: #ed1c24;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.faq-side-progress {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.faq-side-progress__top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #001f45;
  font-size: 12px;
  font-weight: 800;
}

.faq-side-progress__top span,
.faq-side-progress__top strong {
  color: #001f45;
}

.faq-side-progress__bar {
  height: 5px;
  margin-top: 7px;
  border-radius: 999px;
  background: #edf2f8;
  overflow: hidden;
}

.faq-side-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ed1c24 0%, #1d70cf 100%);
}

.faq-side-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 16px;
}

.faq-side-chips span {
  position: relative;
  color: #001f45;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  padding: 0 0 0 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.faq-side-chips span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ed1c24;
  transform: translateY(-50%);
}

.faq-side-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.faq-side-actions .primary-btn-1 {
  height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
}

.faq-side-call {
  height: 42px;
  padding: 0 16px;
  border-radius: 4px;
  background: #1d70cf;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 14px 30px rgba(29, 112, 207, 0.22);
}

.faq-side-call:hover {
  color: #fff;
  background: #0c4f9f;
}

.faq-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

.faq-ring-red {
  width: 430px;
  height: 430px;
  border: 22px solid rgba(237, 28, 36, 0.88);
  top: 46px;
  right: -44px;
}

.faq-ring-blue {
  width: 345px;
  height: 345px;
  border: 18px solid rgba(11, 42, 78, 0.82);
  bottom: 0;
  left: -34px;
}

.faq-page-blog {
  padding-top: 90px;
  background: #f7f8fa;
}

.faq-page-blog .blog-style-one {
  border-radius: 8px;
  overflow: hidden;
}

@media (max-width: 1199px) {
  .faq-ring-red {
    width: 360px;
    height: 360px;
    right: -18px;
  }

  .faq-ring-blue {
    width: 280px;
    height: 280px;
    left: -16px;
  }
}

@media (max-width: 991px) {
  .faq-page-section .faq-wrapper.pr-80 {
    padding-right: 0;
  }

  .faq-image-ring {
    margin-top: 40px;
    margin-left: 0;
  }

  .faq-side-support {
    margin: 18px auto 0;
    max-width: 520px;
  }
}

@media (max-width: 575px) {
  .faq-image-ring {
    padding: 12px;
  }

  .faq-ring-red {
    width: 255px;
    height: 255px;
    border-width: 14px;
    top: 34px;
    right: -8px;
  }

  .faq-ring-blue {
    width: 210px;
    height: 210px;
    border-width: 12px;
    left: -8px;
  }

  .faq-page-blog {
    padding-top: 65px;
  }

   .faq-side-support {
      padding: 0;
      margin-top: 16px;
   }

  .faq-side-actions a {
    width: 100%;
    justify-content: center;
  }
}

/* Featured medical campus project */
.fcc-medical-campus-project {
  position: relative;
  background:
    radial-gradient(circle at 8% 10%, rgba(237, 23, 36, .10), transparent 28%),
    linear-gradient(135deg, #f5f8fc 0%, #ffffff 55%, #eef4fb 100%);
}

.fcc-medical-campus-project .fcc-latest-project-layout {
  padding: 46px;
  overflow: hidden;
  border: 1px solid rgba(16, 45, 80, .10);
  border-radius: 24px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 24px 60px rgba(16, 45, 80, .10);
}

.fcc-medical-campus-project .fcc-latest-project-content h4 {
  margin: 0 0 12px;
  color: var(--theme-color-1);
  font-size: 18px;
  font-weight: 700;
}

.fcc-medical-campus-location {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  color: #667386;
  font-size: 14px;
  font-weight: 700;
}

.fcc-medical-campus-location i {
  color: var(--theme-color);
}

.fcc-medical-campus-project .fcc-latest-project-details {
  gap: 14px;
}

.fcc-medical-campus-project .fcc-latest-project-item {
  min-height: 92px;
  padding: 16px;
  border: 1px solid rgba(16, 45, 80, .10);
  border-radius: 12px;
  background: var(--theme-color-1);
}

.fcc-medical-campus-project .fcc-latest-project-image,
.fcc-medical-campus-project .fcc-latest-project-video {
  border-radius: 18px;
}

@media (max-width: 991px) {
  .fcc-medical-campus-project .fcc-latest-project-layout {
    padding: 34px;
  }
}

@media (max-width: 575px) {
  .fcc-medical-campus-project .fcc-latest-project-layout {
    padding: 26px 20px;
    border-radius: 18px;
  }
}

/* Homepage core services carousel */
.home-core-services-section .service-card-section-title {
  margin-bottom: 36px;
}

.home-core-services-carousel-shell {
  position: relative;
  margin: 0 62px;
}

.home-core-services-carousel {
  padding: 8px 0 54px;
}

.home-core-services-carousel .swiper-slide {
  height: auto;
}

.home-core-service-card {
  height: 100%;
}
.home-core-service-card .icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-core-service-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: invert(17%) sepia(97%) saturate(3548%) hue-rotate(344deg) brightness(101%) contrast(89%);
}

.home-core-services-nav {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.home-core-services-prev,
.home-core-services-next {
  position: absolute;
  top: calc(50% - 20px);
  display: inline-flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: center;
  color: var(--theme-color-1);
  background: transparent;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  pointer-events: auto;
  transform: translateY(-50%);
  transition: background .2s ease, transform .2s ease;
}

.home-core-services-prev:hover,
.home-core-services-next:hover {
  background: var(--theme-color);
  color: #fff;
  transform: translateY(calc(-50% - 2px));
}

.home-core-services-prev {
  left: -88px;
}

.home-core-services-next {
  right: -88px;
}

.home-core-services-pagination {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.home-core-services-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  opacity: 1;
  background: rgba(16, 45, 80, .28);
}

.home-core-services-pagination .swiper-pagination-bullet-active {
  width: 26px;
  border-radius: 999px;
  background: var(--theme-color);
}

@media (max-width: 767px) {
  .home-core-services-carousel-shell {
    margin: 0 42px;
  }

  .home-core-services-carousel {
    padding: 8px 0 54px;
  }

  .home-core-services-prev {
    left: -54px;
  }

  .home-core-services-next {
    right: -54px;
  }
}

/* Commercial siding hero: keep the secondary media and experience badge isolated
   from shared hero and image-hover positioning rules. */
.commercial-siding-page .commercial-siding-hero-secondary-image {
  position: absolute;
  left: -72px;
  top: 104px;
  z-index: 4;
  width: 230px;
  height: 164px;
  margin: 0;
  overflow: hidden;
  border: 10px solid #fff;
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(12, 31, 58, .22);
}

.commercial-siding-page .commercial-siding-hero-secondary-image video,
.commercial-siding-page .commercial-siding-hero-secondary-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.commercial-siding-page .commercial-siding-hero-experience-card {
  position: absolute;
  left: -40px;
  bottom: 54px;
  z-index: 5;
  display: flex;
  max-width: 320px;
  gap: 16px;
  align-items: center;
  padding: 24px;
  color: #fff;
  background: var(--theme-color);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(239, 22, 39, .22);
}

.commercial-siding-page .commercial-siding-hero-experience-card strong {
  font-size: 46px;
  line-height: 1;
}

.commercial-siding-page .commercial-siding-hero-experience-card span {
  font-weight: 800;
  line-height: 1.35;
}

@media only screen and (max-width: 1199px) {
  .commercial-siding-page .commercial-siding-hero-secondary-image {
    left: 18px;
    top: 32px;
    width: 190px;
    height: 132px;
    border-width: 8px;
  }

  .commercial-siding-page .commercial-siding-hero-experience-card {
    left: 0;
    bottom: 28px;
  }
}

@media only screen and (max-width: 767px) {
  .commercial-siding-page .commercial-siding-hero-visual {
    padding-bottom: 0;
  }

  .commercial-siding-page .commercial-siding-hero-secondary-image,
  .commercial-siding-page .commercial-siding-hero-experience-card {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    margin-top: 16px;
  }

  .commercial-siding-page .commercial-siding-hero-secondary-image {
    height: 220px;
    border-width: 8px;
  }
}

/* Homepage hero content slides */
.vh-hero-slides { display: grid; min-height: 470px; }
.vh-hero-slide { grid-area: 1 / 1; align-self: start; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px); transition: opacity .45s ease, transform .45s ease, visibility .45s ease; }
.vh-hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.vh-energy-title { max-width: 760px; margin: 0 0 22px; color: #fff; font-family: var(--primary-font); font-size: clamp(36px, 4.1vw, 58px); font-weight: 800; line-height: 1.08; text-transform: none; }
.vh-energy-copy { max-width: 740px; margin-bottom: 28px; }
.vh-energy-copy p { margin: 0 0 13px; color: rgba(255,255,255,.83); font-size: 15px; line-height: 1.55; }
.vh-energy-copy p:last-child { margin-bottom: 0; }
.vh-energy-slide .vh-btn-primary { padding-right: 29px; }
.vh-hero-pagination { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.vh-hero-dot { width: 28px; height: 5px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.42); cursor: pointer; transition: width .25s ease, background-color .25s ease; }
.vh-hero-dot.is-active, .vh-hero-dot:hover, .vh-hero-dot:focus-visible { width: 42px; background: var(--theme-color); }
.vh-hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 991px) { .vh-hero-slides { min-height: 0; } .vh-energy-title { max-width: 680px; } }
@media (max-width: 575px) { .vh-energy-title { font-size: 32px; } .vh-energy-copy p { font-size: 14px; line-height: 1.5; } .vh-energy-slide .vh-btn-primary, .vh-energy-slide .vh-btn-outline { width: 100%; justify-content: center; } }

/* National Energy Installers hero messaging */
.vh-energy-title em { color: var(--theme-color); font-style: normal; }
.vh-energy-subtitle { max-width: 720px; margin: -6px 0 20px; color: #fff; font-family: var(--primary-font); font-size: clamp(20px, 2vw, 28px); font-weight: 700; line-height: 1.25; text-transform: none; }
.vh-energy-callout { position: relative; display: flex; flex-direction: column; width: 52%; margin: 0 0 16px; padding: 18px 46px 18px 20px; color: #fff; text-decoration: none; background: rgba(16,32,57,.82); border: 1px solid rgba(234,24,38,.8); box-shadow: 0 12px 28px rgba(0,0,0,.14); transition: background-color .25s ease, transform .25s ease, border-color .25s ease; }
.vh-energy-callout:hover { color: #fff; background: rgba(234,24,38,.7); border-color: #fff; transform: translateY(-3px); }
.vh-energy-callout-kicker { margin-bottom: 6px; color: var(--theme-color); font-family: var(--primary-font); font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-transform: none; }
.vh-energy-callout:hover .vh-energy-callout-kicker { color: #fff; }
.vh-energy-callout-title { max-width: 260px; font-family: var(--primary-font); font-size: 17px; font-weight: 800; line-height: 1.25; }
.vh-energy-callout-title em { color: var(--theme-color); font-style: italic; }
.vh-energy-callout:hover .vh-energy-callout-title em { color: #fff; }
.vh-energy-callout-arrow { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); color: var(--theme-color); font-size: 28px; line-height: 1; transition: color .25s ease, transform .25s ease; }
.vh-energy-callout:hover .vh-energy-callout-arrow { color: #fff; transform: translate(4px,-50%); }
@media (max-width: 991px) { .vh-energy-callout { width: 100%; } }

/* National Energy Installers partnership section */
.home-energy-partnership-section { position: relative; overflow: hidden; padding: 110px 0; background: #f5f8fc; }
.home-energy-partnership-section::before { position: absolute; top: -210px; right: -120px; width: 510px; height: 510px; border: 56px solid rgba(234,24,38,.08); border-radius: 50%; content: ''; }
.home-energy-partnership-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(380px,.88fr); gap: 72px; align-items: start; }
.home-energy-partnership-content { padding-top: 10px; }
.home-energy-partnership-content h2 { max-width: 730px; margin: 10px 0 28px; color: var(--theme-color-1); font-family: var(--primary-font); font-size: clamp(35px,3.55vw,54px); font-weight: 800; line-height: 1.1; text-transform: none; }
.home-energy-partnership-content h2 em { color: var(--theme-color); font-style: normal; }
.home-energy-partnership-subtitle { max-width: 650px; margin: -8px 0 22px; color: var(--theme-color-1); font-family: var(--primary-font); font-size: clamp(19px,1.7vw,25px); font-weight: 400; line-height: 1.3; }
.home-energy-partnership-content p { max-width: 760px; margin: 0 0 16px; color: #526075; font-size: 16px; line-height: 1.72; }
.home-energy-partnership-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 19px; margin-top: 34px; }
.home-energy-partnership-quote { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; color: #fff; background: var(--theme-color-1); font-family: var(--primary-font); font-size: 14px; font-weight: 800; line-height: normal; text-transform: uppercase; transition: background-color .25s ease, transform .25s ease; }
.home-energy-partnership-quote:hover { color: #fff; background: #24456f; transform: translateY(-2px); }
.home-energy-partnership-panel { position: relative; padding: 36px; color: #fff; background: var(--theme-color-1); box-shadow: 0 24px 48px rgba(16,32,57,.18); }
.home-energy-partnership-panel::after { position: absolute; right: -42px; bottom: -140px; width: 160px; height: 160px; border: 1px solid rgba(234,24,38,.45); border-radius: 50%; content: ''; pointer-events: none; }
.home-energy-logo-placeholder { display: flex; flex-direction: column; justify-content: center; min-height: 112px; margin-bottom: 31px; padding: 22px; border: 1px dashed rgba(255,255,255,.55); background: rgba(255,255,255,.06); text-align: center; }
.home-energy-logo-placeholder img { display: block; width: auto; max-width: 100%; max-height: 72px; margin: 0 auto; object-fit: contain; }
.home-energy-logo-placeholder span { color: #fff; font-family: var(--primary-font); font-size: 22px; font-weight: 800; line-height: 1.2; }
.home-energy-logo-placeholder small { margin-top: 7px; color: rgba(255,255,255,.64); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.home-energy-panel-heading { padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.18); }
.home-energy-panel-heading span { color: var(--theme-color); font-family: var(--primary-font); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.home-energy-panel-heading h3 { margin: 9px 0 0; color: #fff; font-family: var(--primary-font); font-size: 27px; font-weight: 800; line-height: 1.16; }
.home-energy-service-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 18px; margin: 26px 0 0; padding: 0; list-style: none; }
.home-energy-service-list li { position: relative; padding-left: 18px; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.4; }
.home-energy-service-list li::before { position: absolute; top: 8px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--theme-color); content: ''; }
.home-energy-phone-cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 31px; color: #fff; text-decoration: none; }
.home-energy-phone-cta:hover { color: #fff; }
.home-energy-phone-cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--theme-color); font-size: 17px; transition: transform .25s ease, background-color .25s ease; }
.home-energy-phone-cta:hover .home-energy-phone-cta-icon { background: #fff; color: var(--theme-color); transform: scale(1.07); }
.home-energy-phone-cta small, .home-energy-phone-cta strong { display: block; font-family: var(--primary-font); }
.home-energy-phone-cta small { margin-bottom: 3px; color: rgba(255,255,255,.62); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.home-energy-phone-cta strong { color: #fff; font-size: 18px; font-weight: 800; line-height: 1; }
@media (max-width: 1199px) { .home-energy-partnership-grid { grid-template-columns: minmax(0,1fr) minmax(350px,.8fr); gap: 44px; } .home-energy-partnership-panel { padding: 29px; } }
@media (max-width: 991px) { .home-energy-partnership-section { padding: 82px 0; } .home-energy-partnership-grid { grid-template-columns: 1fr; gap: 45px; } .home-energy-partnership-panel::after { display: none; } }
@media (max-width: 575px) { .home-energy-partnership-section { padding: 65px 0; } .home-energy-partnership-content h2 { font-size: 33px; } .home-energy-partnership-panel { padding: 25px 20px; } .home-energy-service-list { grid-template-columns: 1fr; } .home-energy-logo-placeholder span { font-size: 19px; } }

/* Modern homepage service tabs */
.home-service-tabs {
  background: linear-gradient(135deg, #0d203b 0%, #112b50 58%, #0b1b33 100%);
}
.home-service-tabs .service-tab-title-area {
  margin-bottom: 46px !important;
}
.home-service-tabs .service-tab-btn-area ul {
  gap: 12px;
}
.home-service-tabs .service-tab-btn-area ul .nav-link {
  width: 100%;
  min-height: 76px;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}
.home-service-tabs .service-tab-btn-area ul .nav-link::before,
.home-service-tabs .service-tab-btn-area ul .nav-link::after {
  display: none;
}
.home-service-tabs .service-tab-btn-area ul .nav-link .icon-box {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(234, 24, 38, 0.08);
  font-size: 30px;
}
.home-service-tabs .home-service-tab-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: invert(17%) sepia(97%) saturate(3548%) hue-rotate(344deg) brightness(101%) contrast(89%);
}
.home-service-tabs .service-tab-btn-area ul .nav-link:not(.active):hover {
  transform: translateX(4px);
  background: #fff;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
}
.home-service-tabs .service-tab-btn-area ul .nav-link.active {
  border-color: var(--theme-color) !important;
  background: var(--theme-color);
  box-shadow: 0 16px 32px rgba(234, 24, 38, 0.28);
}
.home-service-tabs .service-tab-btn-area ul .nav-link.active .icon-box {
  background: rgba(255, 255, 255, 0.16);
}
.home-service-tabs .service-tab-btn-area ul .nav-link.active .home-service-tab-icon {
  filter: brightness(0) invert(1);
}
.home-service-tabs .service-tab-details-area .tab-content {
  height: 560px;
  min-height: 560px;
}
.home-service-tabs .service-tab-content {
  height: 100%;
  padding: 18px;
  gap: 34px;
  border: 1px solid rgba(16, 32, 57, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.2);
}
.home-service-tabs .service-tab-content .tab-bg-shape {
  display: none;
}
.home-service-tabs .service-tab-content figure.image {
  border-radius: 12px;
}
.home-service-tabs .service-tab-content .content {
  padding: 12px 20px 12px 4px;
}
.home-service-tabs .service-tab-content .content h4 {
  margin-bottom: 4px;
  font-size: 30px;
  line-height: 1.16;
}
.home-service-tabs .service-tab-content .content .primary-btn-1 {
  border-radius: 7px;
}
@media (max-width: 1199px) {
  .home-service-tabs .service-tab-btn-area ul .nav-link {
    width: 100%;
  }
  .home-service-tabs .service-tab-details-area .tab-content {
    height: 510px;
    min-height: 510px;
  }
}
@media (max-width: 767px) {
.home-service-tabs .service-tab-content {
    border-radius: 14px;
  }
}

/* Animated process icon rings */
.confirmation-breadcrumb .breadcrumb__thumb {
  z-index: 0;
}
.confirmation-breadcrumb .breadcrumb__thumb::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(7, 29, 61, 0.72);
}
.confirmation-breadcrumb .breadcrumb__wrapper {
  z-index: 1;
}

.footer-brand-contact .footer-license,
.footer-widget-1 .footer-license {
  margin: -8px 0 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Parking structure service cards: staggered reveal and interactive hover */
.parking-structure-seo-grid .parking-structure-seo-card.parking-reveal {
  filter: blur(6px);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(.2, .75, .25, 1),
    filter 700ms ease,
    box-shadow 280ms ease,
    border-color 280ms ease,
    background 280ms ease;
}
.parking-structure-seo-grid .parking-structure-seo-card.parking-reveal.is-visible {
  filter: blur(0);
}
.parking-structure-seo-card::before {
  transition: width 320ms ease, opacity 320ms ease;
}
.parking-structure-seo-card::after {
  transition: transform 420ms ease, background 320ms ease;
}
.parking-structure-seo-grid .parking-structure-seo-card.parking-reveal.is-visible:hover,
.parking-structure-seo-card:hover {
  transform: translateY(-12px) scale(1.018);
  border-color: rgba(237, 23, 36, .72);
  background: var(--theme-color);
  box-shadow: 0 28px 60px rgba(16, 32, 57, .32), 0 12px 22px rgba(237, 23, 36, .26);
}
.parking-structure-seo-card:hover::before {
  width: 100%;
  opacity: .14;
  background: var(--theme-color-1);
}
.parking-structure-seo-card:hover::after {
  transform: scale(1.45);
  background: rgba(255, 255, 255, .12);
}
.parking-structure-card-top span {
  background: var(--theme-color-1);
}
.parking-structure-seo-card:hover .parking-structure-card-top span {
  transform: scale(1.08);
  box-shadow: 0 7px 16px rgba(237, 23, 36, .3);
}
.parking-structure-seo-card:hover .parking-structure-card-top i {
  color: var(--theme-color);
  background: #fff;
  border-color: #fff;
  transform: rotate(-8deg) scale(1.08);
}
.parking-structure-card-top span,
.parking-structure-card-top i,
.parking-structure-seo-grid h3 {
  transition: transform 260ms ease, color 260ms ease, background 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}
.parking-structure-seo-card:hover h3 {
  transform: translateX(6px);
}
@media (prefers-reduced-motion: reduce) {
  .parking-structure-seo-grid .parking-structure-seo-card.parking-reveal,
  .parking-structure-seo-card::before,
  .parking-structure-seo-card::after,
  .parking-structure-card-top span,
  .parking-structure-card-top i,
  .parking-structure-seo-grid h3 {
    filter: none;
    transition: none;
  }
}

/* Keep the primary navigation on one row.  Mid-size desktop screens use the
   existing off-canvas menu before the desktop links have room to wrap. */
@media only screen and (min-width: 1500px) {
  .header-area .large-container {
    width: 100%;
    max-width: none;
    padding-left: 48px;
    padding-right: 48px;
  }

  .header-main,
  .header-right,
  .main-menu > nav > ul {
    flex-wrap: nowrap !important;
  }

  .header-main {
    gap: 18px;
  }

  .header-right {
    flex: 1 1 auto;
    min-width: 0;
    gap: 18px;
  }

  .mean__menu-wrapper,
  .main-menu,
  .main-menu > nav {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mean__menu-wrapper {
    margin-left: 0 !important;
  }

  .main-menu > nav > ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
  }

  .main-menu ul li {
    flex: 0 0 auto;
    margin-inline-end: clamp(11px, .85vw, 18px);
  }

  .main-menu ul li a {
    font-size: clamp(12px, .7vw, 14px);
    white-space: nowrap;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .mean__menu-wrapper.d-none.d-xl-block,
  .header-action.d-none.d-xl-inline-flex {
    display: none !important;
  }

  .header__hamburger.d-xl-none {
    display: flex !important;
    align-items: center;
  }

  .header-main {
    min-height: 84px;
  }
}

/* Header navigation controls: desktop submenus stay discoverable, while the
   site changes to a dedicated menu trigger before navigation can wrap. */
@media only screen and (min-width: 1500px) {
  .main-menu > nav > ul > li.has-dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .main-menu > nav > ul > li.has-dropdown > a::after {
    content: "\f078";
    display: inline-block;
    color: currentColor;
    font-family: "Font Awesome 5 Pro";
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    opacity: .78;
    pointer-events: none;
    transition: transform .2s ease;
  }

  .main-menu > nav > ul > li.has-dropdown:hover > a::after,
  .main-menu > nav > ul > li.has-dropdown:focus-within > a::after {
    transform: rotate(180deg);
  }
}

.fcc-mobile-menu-toggle {
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(10, 35, 69, .18);
  border-radius: 50%;
  background: #fff;
  color: var(--theme-color-1);
  box-shadow: 0 8px 18px rgba(10, 35, 69, .1);
  cursor: pointer;
}

.fcc-mobile-menu-toggle:hover,
.fcc-mobile-menu-toggle:focus-visible {
  border-color: var(--theme-color);
  background: var(--theme-color);
  color: #fff;
  outline: none;
}

.fcc-menu-icon,
.fcc-menu-icon::before,
.fcc-menu-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 4px;
  background: currentColor;
  content: "";
  transition: transform .2s ease, top .2s ease, background-color .2s ease;
}

.fcc-menu-icon {
  position: relative;
}

.fcc-menu-icon::before,
.fcc-menu-icon::after {
  position: absolute;
  left: 0;
}

.fcc-menu-icon::before { top: -7px; }
.fcc-menu-icon::after { top: 7px; }

.fcc-mobile-menu-toggle[aria-expanded="true"] .fcc-menu-icon { background: transparent; }
.fcc-mobile-menu-toggle[aria-expanded="true"] .fcc-menu-icon::before { top: 0; transform: rotate(45deg); }
.fcc-mobile-menu-toggle[aria-expanded="true"] .fcc-menu-icon::after { top: 0; transform: rotate(-45deg); }

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .header-main { min-height: 88px; }
  .header-right { gap: 18px; }
  .header-action:not(.d-none) .header-link-1 { margin-left: 0; }
}

@media only screen and (max-width: 1199px) {
  .header-main { min-height: 78px; }
  .header-right { gap: 12px; }
}

@media only screen and (max-width: 767px) {
  .header-main { min-height: 70px; }
  .header-logo img { max-width: 178px; height: auto; }
  .header-action:not(.d-none) { display: none; }
  .fcc-mobile-menu-toggle { width: 46px; height: 46px; }
}

.home-work-process .work-process-box .icon-box {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.home-work-process .title-box {
  padding-bottom: 16px;
}
.home-work-process .work-process-box .icon-box::after {
  display: none;
}
.home-work-process .home-process-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 124px;
  height: 124px;
  margin: -62px 0 0 -62px;
  border: 2px dashed var(--theme-color);
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
  z-index: 1;
  animation: homeProcessIconRing 20s linear infinite;
}
.home-work-process .work-process-box .icon-box i {
  position: relative;
  z-index: 2 !important;
}
.home-work-process .work-process-box .icon-box > span {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3 !important;
}
.home-work-process .work-process-box .content {
  padding-top: 30px;
}
.home-work-process .work-process-box:hover .home-process-orbit {
  animation-duration: 12s;
}
@keyframes homeProcessIconRing {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .home-work-process .home-process-orbit {
    animation: none;
  }
}

/* V5 forward-port: latest Energy Infrastructure form treatment */
.solar-form-section {
  background: linear-gradient(to bottom, #fff 0%, #fff 50%, var(--theme-color-1) 50%, var(--theme-color-1) 100%);
}
.commercial-energy-page .energy-assessment-submit {
  width: 60% !important;
}
@media only screen and (max-width: 991px) {
  .commercial-energy-page .energy-assessment-submit {
    width: 100% !important;
    min-height: 48px;
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
  }
}
/* Commercial energy infrastructure page */
.energy-partnership-intro-section { position: relative; overflow: hidden; padding: 112px 0 102px; background: #f6f8fc; }
.energy-partnership-intro-section::before { position: absolute; top: -210px; right: -115px; width: 520px; height: 520px; border: 56px solid rgba(234,24,38,.08); border-radius: 50%; content: ''; }
.energy-partnership-intro-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.16fr) minmax(360px,.84fr); gap: 76px; align-items: center; }
.energy-partnership-intro-copy h1 { max-width: 800px; margin: 12px 0 18px; color: var(--theme-color-1); font-family: var(--primary-font); font-size: clamp(39px,4.1vw,63px); font-weight: 800; line-height: 1.08; }
.energy-partnership-intro-copy h1 em, .energy-coordination-heading h2 em { color: var(--theme-color); font-style: normal; }
.energy-partnership-intro-copy h2 { max-width: 690px; margin: 0 0 22px; color: #345b88; font-family: var(--primary-font); font-size: clamp(21px,2vw,29px); font-weight: 500; line-height: 1.28; }
.energy-partnership-intro-copy p { max-width: 775px; margin: 0 0 15px; color: #526075; font-size: 16px; line-height: 1.72; }
.energy-partnership-intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 21px; margin-top: 31px; }
.energy-partnership-phone { display: inline-flex; align-items: center; gap: 10px; color: var(--theme-color-1); font-family: var(--primary-font); font-size: 15px; font-weight: 800; }
.energy-partnership-phone i { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: var(--theme-color); }
.energy-partnership-logo-panel { position: relative; padding: 38px; color: #fff; background: var(--theme-color-1); box-shadow: 0 25px 55px rgba(16,32,57,.2); }
.energy-partnership-logo-panel::after { position: absolute; right: -44px; bottom: -44px; width: 130px; height: 130px; border: 2px solid rgba(234,24,38,.65); border-radius: 50%; content: ''; }
.energy-partnership-logo-wrap { display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 26px; border: 1px dashed rgba(255,255,255,.52); background: rgba(255,255,255,.06); }
.energy-partnership-logo-wrap img { display: block; max-width: 100%; max-height: 86px; width: auto; object-fit: contain; }
.energy-partnership-logo-kicker { display: block; margin: 28px 0 23px; color: var(--theme-color); font-family: var(--primary-font); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-align: center; text-transform: uppercase; }
.energy-partnership-credentials { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid rgba(255,255,255,.17); }
.energy-partnership-credentials div { padding: 18px 13px 0; border-right: 1px solid rgba(255,255,255,.14); text-align: center; }
.energy-partnership-credentials div:last-child { border-right: 0; }
.energy-partnership-credentials strong, .energy-partnership-credentials span { display: block; }
.energy-partnership-credentials strong { color: #fff; font-family: var(--primary-font); font-size: 22px; font-weight: 800; line-height: 1; }
.energy-partnership-credentials span { margin-top: 7px; color: rgba(255,255,255,.6); font-size: 10px; font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.energy-coordination-section { padding: 112px 0; background: #fff; }
.energy-coordination-heading { max-width: 905px; margin: 0 auto 50px; text-align: center; }
.energy-coordination-heading h2 { margin: 10px 0 22px; color: var(--theme-color-1); font-family: var(--primary-font); font-size: 42px; font-weight: 800; line-height: 1.15; }
.energy-coordination-heading p { margin: 0; color: #59677a; font-size: 16px; line-height: 1.72; }
.energy-coordination-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(390px,.9fr); gap: 55px; align-items: stretch; }
.energy-coordination-steps { display: grid; gap: 18px; }
.energy-coordination-steps article { position: relative; min-height: 148px; padding: 29px 29px 26px 104px; border: 1px solid #e3e9f2; background: #fff; box-shadow: 0 12px 27px rgba(17,42,75,.05); }
.energy-coordination-steps article span { position: absolute; top: 29px; left: 27px; color: var(--theme-color); font-family: var(--primary-font); font-size: 30px; font-weight: 800; line-height: 1; }
.energy-coordination-steps h3 { margin: 0 0 9px; color: var(--theme-color-1); font-family: var(--primary-font); font-size: 22px; font-weight: 800; }
.energy-coordination-steps p { margin: 0; color: #5c6879; font-size: 15px; line-height: 1.6; }
.energy-coordination-services-panel { padding: 38px; background: #eaf1f9; border-top: 5px solid var(--theme-color); }
.energy-coordination-services-panel > span { display: block; margin-bottom: 22px; color: var(--theme-color-1); font-family: var(--primary-font); font-size: 17px; font-weight: 800; }
.energy-coordination-services-panel ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 20px; margin: 0; padding: 0; list-style: none; }
.energy-coordination-services-panel li { position: relative; padding-left: 18px; color: #485a72; font-size: 14px; line-height: 1.45; }
.energy-coordination-services-panel li::before { position: absolute; top: 7px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--theme-color); content: ''; }
@media (max-width: 1199px) { .energy-partnership-intro-grid { gap: 48px; } .energy-partnership-logo-panel { padding: 29px; } .energy-coordination-layout { gap: 35px; } .energy-coordination-services-panel { padding: 30px; } }
@media (max-width: 991px) { .energy-partnership-intro-section, .energy-coordination-section { padding: 80px 0; } .energy-partnership-intro-grid, .energy-coordination-layout { grid-template-columns: 1fr; } .energy-partnership-logo-panel::after { display: none; } .energy-partnership-intro-copy { order: 1; } .energy-partnership-logo-panel { order: 2; } }
@media (max-width: 575px) { .energy-partnership-intro-section, .energy-coordination-section { padding: 65px 0; } .energy-partnership-intro-copy h1 { font-size: 36px; } .energy-partnership-logo-panel, .energy-coordination-services-panel { padding: 24px 20px; } .energy-partnership-credentials strong { font-size: 18px; } .energy-partnership-credentials div { padding-left: 7px; padding-right: 7px; } .energy-coordination-steps article { padding: 82px 23px 23px; } .energy-coordination-steps article span { left: 23px; } .energy-coordination-services-panel ul { grid-template-columns: 1fr; } }

/* Editorial visual layout for the National Energy Installers partnership */
.energy-partnership-intro-grid { grid-template-columns: minmax(0,1fr) minmax(500px,1fr); gap: 64px; align-items: start; }
.energy-partnership-visual { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,220px); gap: 22px; }
.energy-partnership-photo { margin: 0; overflow: hidden; }
.energy-partnership-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.energy-partnership-photo:hover img { transform: scale(1.05); }
.energy-partnership-proof-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; padding: 20px; color: #fff; background: var(--theme-color); text-align: center; }
.energy-partnership-proof-card strong { display: block; margin-bottom: 10px; color: #fff; font-family: var(--primary-font); font-size: clamp(46px,4vw,64px); font-weight: 800; line-height: .92; }
.energy-partnership-proof-card span { color: #fff; font-family: var(--primary-font); font-size: 24px; font-weight: 800; line-height: 1.06; }
.energy-partnership-logo-panel { display: flex; flex-direction: column; justify-content: center; min-height: 220px; padding: 25px; box-shadow: none; }
.energy-partnership-logo-panel::after { display: none; }
.energy-partnership-logo-wrap { min-height: 124px; padding: 20px; }
.energy-partnership-logo-wrap img { max-height: 70px; }
.energy-partnership-logo-kicker { margin: 18px 0 0; font-size: 10px; line-height: 1.35; }
@media (max-width: 1199px) { .energy-partnership-intro-grid { grid-template-columns: minmax(0,1fr) minmax(430px,.9fr); gap: 44px; } .energy-partnership-visual { grid-template-rows: repeat(2,195px); gap: 16px; } .energy-partnership-proof-card, .energy-partnership-logo-panel { min-height: 195px; } }
@media (max-width: 991px) { .energy-partnership-intro-grid { grid-template-columns: 1fr; } .energy-partnership-visual { max-width: 620px; width: 100%; margin: 0 auto; grid-template-rows: repeat(2,220px); } }
@media (max-width: 575px) { .energy-partnership-visual { grid-template-columns: 1fr; grid-template-rows: repeat(4,210px); } .energy-partnership-proof-card, .energy-partnership-logo-panel { min-height: 210px; } }

/* Three-panel National Energy Installers layout */
.energy-partnership-visual { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: 275px 205px; }
.energy-partnership-logo-panel { grid-column: 1 / -1; grid-row: 1; min-height: 275px; }
.energy-partnership-photo-two, .energy-partnership-proof-card { grid-row: 2; }
.energy-partnership-proof-card { min-height: 205px; }
.energy-partnership-logo-wrap { min-height: 175px; }
.energy-partnership-logo-wrap img { max-height: 102px; }
.energy-partnership-logo-kicker { margin-top: 20px; }

/* Commercial energy strategy section */
.energy-asset-strategy-section { position: relative; overflow: hidden; padding: 110px 0; background: #fff; }
.energy-asset-strategy-grid { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,13fr); gap: 82px; align-items: center; }
.energy-asset-bulb-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 485px; overflow: hidden; color: #fff; background: var(--theme-color-1); }
.energy-asset-bulb-visual::before, .energy-asset-bulb-visual::after { position: absolute; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; content: ''; }
.energy-asset-bulb-visual::before { width: 380px; height: 380px; }
.energy-asset-bulb-visual::after { width: 540px; height: 540px; }
.energy-asset-bulb-ring { position: absolute; width: 250px; height: 250px; border: 20px solid rgba(234,24,38,.82); border-radius: 50%; }
.energy-asset-bulb-visual i { position: relative; z-index: 1; color: #fff; font-size: 126px; line-height: 1; text-shadow: 0 10px 18px rgba(0,0,0,.16); }
.energy-asset-bulb-visual span { position: relative; z-index: 1; margin-top: 30px; color: #fff; font-family: var(--primary-font); font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.energy-asset-strategy-content h2 { max-width: 790px; margin: 12px 0 23px; color: var(--theme-color-1); font-family: var(--primary-font); font-size: 42px; font-weight: 800; line-height: 1.15; }
.energy-asset-strategy-content h2 em { color: var(--theme-color); font-style: normal; }
.energy-asset-strategy-content > p { max-width: 730px; margin: 0 0 22px; color: #536277; font-size: 16px; line-height: 1.73; }
.energy-asset-highlight { max-width: 720px; margin-bottom: 24px; padding: 18px 21px; border-left: 3px solid var(--theme-color); color: var(--theme-color-1); background: #f5f8fc; font-family: var(--primary-font); font-size: 17px; font-weight: 700; line-height: 1.5; box-shadow: 0 10px 25px rgba(17,42,75,.06); }
.energy-asset-strategy-content ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 24px; margin: 0 0 30px; padding: 0; list-style: none; }
.energy-asset-strategy-content li { position: relative; padding-left: 19px; color: #455974; font-size: 14px; font-weight: 600; line-height: 1.45; }
.energy-asset-strategy-content li::before { position: absolute; top: 1px; left: 0; color: var(--theme-color); font-family: "Font Awesome 5 Pro"; font-size: 13px; font-weight: 900; content: "\f00c"; }
@media (max-width: 1199px) { .energy-partnership-visual { grid-template-rows: 235px 185px; } .energy-partnership-logo-panel { min-height: 235px; } .energy-partnership-proof-card { min-height: 185px; } .energy-partnership-logo-wrap { min-height: 140px; } .energy-asset-strategy-grid { gap: 48px; } .energy-asset-bulb-visual { min-height: 430px; } }
@media (max-width: 991px) { .energy-partnership-visual { grid-template-rows: 275px 205px; } .energy-partnership-logo-panel { min-height: 275px; } .energy-partnership-proof-card { min-height: 205px; } .energy-asset-strategy-grid { grid-template-columns: 1fr; gap: 45px; } .energy-asset-bulb-visual { max-width: 600px; width: 100%; min-height: 400px; margin: 0 auto; } }
@media (max-width: 575px) { .energy-partnership-visual { grid-template-columns: 1fr; grid-template-rows: 260px 205px 205px; } .energy-partnership-logo-panel { grid-column: 1; grid-row: 1; min-height: 260px; } .energy-partnership-photo-two { grid-row: 2; } .energy-partnership-proof-card { grid-row: 3; min-height: 205px; } .energy-asset-strategy-section { padding: 68px 0; } .energy-asset-bulb-visual { min-height: 330px; } .energy-asset-bulb-visual i { font-size: 95px; } .energy-asset-bulb-ring { width: 195px; height: 195px; border-width: 15px; } .energy-asset-strategy-content h2 { font-size: 36px; } .energy-asset-strategy-content ul { grid-template-columns: 1fr; } }

/* Align the partnership visual with the supporting copy on wide screens */
@media (min-width: 1200px) {
  .energy-partnership-intro-grid { grid-template-columns: minmax(0,1.3fr) minmax(420px,.85fr); gap: 40px; }
  .energy-partnership-intro-copy h1 { max-width: none; }
  .energy-partnership-visual { margin-top: 285px; }
}

/* Full-width partnership heading with aligned supporting columns */
.energy-partnership-heading-row { grid-area: heading; }
.energy-partnership-heading-row h1 { max-width: 100%; margin: 12px 0 0; color: var(--theme-color-1); font-family: var(--primary-font); font-size: clamp(39px,4.1vw,63px); font-weight: 800; line-height: 1.08; }
.energy-partnership-heading-row h1 em { color: var(--theme-color); font-style: normal; }
.energy-partnership-intro-details { grid-area: details; }
.energy-partnership-intro-details h2 { max-width: 690px; margin: 0 0 22px; color: var(--theme-color-1); font-family: var(--primary-font); font-size: 25px; font-weight: 400; line-height: 1.3; }
.energy-partnership-intro-details p { margin: 0 0 15px; color: #526075; font-size: 16px; line-height: 1.72; }
@media (min-width: 1200px) {
  .energy-partnership-intro-grid { grid-template-areas: 'heading visual' 'details visual'; grid-template-columns: minmax(0,1.45fr) minmax(350px,.75fr); gap: 26px 42px; align-items: start; }
  .energy-partnership-intro-details { grid-area: details; }
  .energy-partnership-visual { grid-area: visual; margin-top: 0; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .energy-partnership-intro-grid { grid-template-areas: 'heading visual' 'details visual'; grid-template-columns: minmax(0,1.3fr) minmax(330px,.8fr); gap: 26px 35px; }
  .energy-partnership-intro-details { grid-area: details; }
  .energy-partnership-visual { grid-area: visual; margin: 0; }
}
@media (max-width: 991px) {
  .energy-partnership-heading-row { order: 1; }
  .energy-partnership-intro-details { order: 2; }
  .energy-partnership-visual { order: 3; }
  .energy-partnership-heading-row h1 { font-size: clamp(36px,6vw,53px); }
}

/* Compact typography for the solid proof card */
.energy-partnership-proof-card strong { margin-bottom: 8px; font-size: clamp(38px,3.2vw,52px); line-height: 1; white-space: nowrap; }
.energy-partnership-proof-card strong small { font-size: 13px; font-weight: 200; letter-spacing: 0; }
.energy-partnership-proof-card span { font-size: 16px; line-height: 1.08; }
.energy-partnership-solar-icon { width: 64px; height: 64px; margin: 0 0 18px; object-fit: contain; filter: brightness(0) invert(1); }

/* Solar image inside a light-bulb silhouette */
.energy-asset-bulb-visual { background: radial-gradient(circle at 50% 38%, #274975 0, var(--theme-color-1) 64%); }
.energy-asset-bulb-ring { width: 310px; height: 310px; border-width: 18px; opacity: .78; }
.energy-asset-bulb-image { position: relative; z-index: 1; width: 300px; height: 360px; margin: 0; overflow: hidden; box-shadow: 0 19px 35px rgba(0,0,0,.24); }
.energy-asset-bulb-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.energy-asset-bulb-visual span { margin-top: 18px; }
@media (max-width: 575px) { .energy-asset-bulb-ring { width: 255px; height: 255px; } .energy-asset-bulb-image { width: 230px; height: 280px; } }

/* Dark coordinated-services treatment */
.energy-coordination-section { position: relative; overflow: hidden; background: var(--theme-color-1); }
.energy-coordination-section::before { position: absolute; top: -185px; left: -155px; width: 430px; height: 430px; border: 48px solid rgba(255,255,255,.05); border-radius: 50%; content: ''; }
.energy-coordination-section .energy-coordination-heading { position: relative; }
.energy-coordination-section .energy-coordination-heading h2 { color: #fff; }
.energy-coordination-section .energy-coordination-heading p { color: rgba(255,255,255,.72); }
.energy-coordination-steps article { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.055); box-shadow: none; }
.energy-coordination-steps h3 { color: #fff; }
.energy-coordination-steps p { color: rgba(255,255,255,.72); }
.energy-coordination-services-panel { border: 2px solid var(--theme-color); border-top-width: 2px; border-radius: 12px; background: #fff; }
.energy-coordination-services-panel > span { color: var(--theme-color-1); font-size: 22px; line-height: 1.25; }
.energy-coordination-services-panel li { color: #40536e; }
.energy-coordination-services-panel li::before { top: 1px; width: auto; height: auto; border-radius: 0; background: transparent; color: var(--theme-color); font-family: "Font Awesome 5 Pro"; font-size: 13px; font-weight: 900; content: "\f00c"; }

/* Display only the supplied energy image, without the decorative frame */
.energy-asset-bulb-visual { display: block; min-height: 0; overflow: visible; background: transparent; }
.energy-asset-bulb-visual::before, .energy-asset-bulb-visual::after, .energy-asset-bulb-ring, .energy-asset-bulb-visual > span { display: none; }
.energy-asset-bulb-image { width: 100%; max-width: 390px; height: auto; margin: 0 auto; overflow: visible; box-shadow: none; }
.energy-asset-bulb-image img { width: 100%; height: auto; object-fit: contain; }

/* Consistent primary section headlines on the energy infrastructure page */
.commercial-energy-page .energy-partnership-heading-row h1 { font-size: 42px; line-height: 1.15; }
.commercial-energy-page .help-3-form-area > h3,
.commercial-energy-page .work-process-section .section-title { font-size: 42px; line-height: 1.15; }
.commercial-energy-page .work-process-section { background: #fff; }
@media (max-width: 575px) {
  .commercial-energy-page .energy-partnership-heading-row h1,
  .commercial-energy-page .energy-asset-strategy-content h2,
  .commercial-energy-page .help-3-form-area > h3,
  .commercial-energy-page .work-process-section .section-title { font-size: 34px; }
}

/* ========================================================================== 
   GET A QUOTE — APPLICATION-STYLE FREE ASSESSMENT
   ========================================================================== */
.quote-assessment-section {
  padding: 96px 0;
  background: linear-gradient(180deg, #f5f8fc 0%, #ffffff 100%);
}
.quote-assessment-intro { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.quote-assessment-intro h1 { margin: 12px 0 16px; color: var(--primary-color); font-size: clamp(36px, 4vw, 54px); line-height: 1.12; }
.quote-assessment-intro p { margin: 0; color: #627187; font-size: 17px; line-height: 1.7; }
.quote-assessment-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.quote-assessment-card { padding: 38px; background: #fff; border: 1px solid #dfe6ef; border-radius: 14px; box-shadow: 0 20px 50px rgba(16, 32, 57, .10); }
.quote-assessment-card-header { margin-bottom: 26px; padding-bottom: 21px; border-bottom: 1px solid #e6ebf2; }
.quote-assessment-card-header span, .quote-assessment-aside-intro > span { color: var(--theme-color); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.quote-assessment-card-header h2 { margin: 8px 0; color: var(--primary-color); font-size: 30px; line-height: 1.18; }
.quote-assessment-card-header p { margin: 0; color: #66748a; }
.quote-assessment-card .row { margin: 0; }
.quote-assessment-card .col-lg-3 { margin-bottom: 16px; }
.quote-assessment-card input, .quote-assessment-card select, .quote-assessment-card textarea { width: 100%; height: 54px; padding: 0 16px; color: var(--primary-color); background: #f8fafc; border: 1px solid #d7e0ec; border-radius: 7px; font-size: 14px; outline: 0; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.quote-assessment-card textarea { height: auto; min-height: 112px; padding: 15px 16px; line-height: 1.55; resize: vertical; }
.quote-assessment-card input:focus, .quote-assessment-card select:focus, .quote-assessment-card textarea:focus { background: #fff; border-color: var(--theme-color); box-shadow: 0 0 0 3px rgba(237, 28, 36, .12); }
.quote-assessment-card select { appearance: auto; }
.quote-assessment-card .pt-30 { padding-top: 12px !important; }
.quote-assessment-card button.primary-btn-1 { width: 100% !important; min-height: 54px; justify-content: center; border-radius: 7px; }
.quote-assessment-aside { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.quote-assessment-aside-intro { grid-column: 1 / -1; padding: 0 0 18px; color: var(--primary-color); background: transparent; border-bottom: 1px solid #dfe6ef; }
.quote-assessment-aside-intro > span { color: #ff8590; }
.quote-assessment-aside-intro h2 { margin: 8px 0 0; color: var(--primary-color); font-size: 28px; line-height: 1.24; }
.quote-assessment-benefit { display: flex; gap: 15px; align-items: flex-start; padding: 20px; background: #fff; border: 1px solid #e0e7f0; border-radius: 8px; box-shadow: 0 9px 24px rgba(16, 32, 57, .06); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.quote-assessment-benefit:hover { transform: translateY(-3px); border-color: rgba(237, 28, 36, .55); box-shadow: 0 14px 28px rgba(16, 32, 57, .10); }
.quote-assessment-benefit > i { display: inline-flex; flex: 0 0 42px; align-items: center; justify-content: center; width: 42px; height: 42px; color: var(--theme-color); background: rgba(237, 28, 36, .08); border-radius: 50%; font-size: 18px; }
.quote-assessment-benefit h3 { margin: 1px 0 6px; color: var(--primary-color); font-size: 18px; }
.quote-assessment-benefit p { margin: 0; color: #68768a; font-size: 14px; line-height: 1.55; }
.quote-assessment-callout { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 0; padding: 21px; color: #fff; background: var(--theme-color); border-radius: 8px; }
.quote-assessment-callout i { display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; height: 34px; background: rgba(255,255,255,.16); border-radius: 50%; }
.quote-assessment-callout > div { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.quote-assessment-callout span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.quote-assessment-callout a { color: #fff; font-size: 17px; font-weight: 800; white-space: nowrap; }
.fcc-quote-field-label { display: block; margin: 0 0 6px 2px; color: #596a80; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
@media (min-width: 992px) { .quote-assessment-card .fcc-quote-row-2 { order: 10; } .quote-assessment-card .fcc-start-date-field.fcc-quote-row-2 { flex: 0 0 25% !important; order: 13; max-width: 25% !important; } .quote-assessment-card .fcc-quote-row-3 { order: 20; } .quote-assessment-card .fcc-company-field.fcc-quote-row-3 { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; } .quote-assessment-card .fcc-quote-row-4 { order: 30; } .quote-assessment-card .fcc-quote-row-5 { order: 40; } .quote-assessment-card .fcc-quote-row-6 { order: 50; } .quote-assessment-card .fcc-quote-row-7 { order: 60; } }
@media (max-width: 991px) { .quote-assessment-layout { grid-template-columns: 1fr; } .quote-assessment-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quote-assessment-aside-intro, .quote-assessment-callout { grid-column: 1 / -1; } }
@media (max-width: 767px) { .quote-assessment-section { padding: 64px 0; } .quote-assessment-card { padding: 25px 20px; } .quote-assessment-card-header h2 { font-size: 25px; } .quote-assessment-card .col-lg-3 { margin-bottom: 12px; } .quote-assessment-aside { grid-template-columns: 1fr; } .quote-assessment-aside-intro, .quote-assessment-callout { grid-column: auto; } }

/* ========================================================================== 
   MINI QUOTE FORM COLOR OPTIONS
   Default is blue. Add one modifier to any .help-3-form-area to switch it:
   fcc-mini-form--red | fcc-mini-form--blue | fcc-mini-form--blue-2 |
   fcc-mini-form--white
   ========================================================================== */
.help-3-form-area:not(.fcc-mini-form--red):not(.fcc-mini-form--blue-2):not(.fcc-mini-form-b2):not(.fcc-mini-form--white),
.help-3-form-area.fcc-mini-form--blue,
.help-3-form-area.fcc-mini-form-b { background: linear-gradient(135deg, #102f5a 0%, #0a2345 100%); box-shadow: 0 24px 54px rgba(10, 35, 69, .22); }
.help-3-form-area.fcc-mini-form--blue-2,
.help-3-form-area.fcc-mini-form-b2 { background: linear-gradient(135deg, #1767ae 0%, #0f437d 100%); box-shadow: 0 24px 54px rgba(15, 67, 125, .24); }
.help-3-form-area.fcc-mini-form--red { background: linear-gradient(135deg, #ef2634 0%, #d90f20 100%); box-shadow: 0 24px 54px rgba(217, 15, 32, .20); }
.help-3-form-area.fcc-mini-form--white { background: #fff; border: 1px solid #dfe6ef; box-shadow: 0 24px 54px rgba(16, 32, 57, .10); }
.help-3-form-area.fcc-mini-form--white h3,
.help-3-form-area.fcc-mini-form--white h4,
.help-3-form-area.fcc-mini-form--white p { color: var(--primary-color) !important; }
.help-3-form-area.fcc-mini-form--white input,
.help-3-form-area.fcc-mini-form--white select,
.help-3-form-area.fcc-mini-form--white textarea { color: var(--primary-color) !important; background: #f8fafc !important; border-color: #d7e0ec !important; }
.help-3-form-area.fcc-mini-form--white ::placeholder { color: #66748a !important; }
.help-3-form-area.fcc-mini-form--white input[type="date"] { color: var(--primary-color) !important; }
.help-3-form-area.fcc-mini-form--white input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
.help-3-form-area.fcc-mini-form--white button.primary-btn-1 { color: #fff !important; background: var(--theme-color) !important; border-color: var(--theme-color) !important; }
.help-3-form-area.fcc-mini-form--white button.primary-btn-1:hover { color: var(--primary-color) !important; background: #fff !important; }

/* Raised NEI partnership visual panel */
.energy-partnership-visual { position: relative; box-sizing: border-box; padding: 25px; border: 1px solid #d9e2ee; background: #fff; box-shadow: 0 22px 42px rgba(16,32,57,.14); }
.energy-partnership-floating-counter { position: absolute; z-index: 3; top: -24px; left: -24px; display: flex; align-items: center; gap: 10px; min-width: 154px; padding: 14px 17px; color: #fff; background: var(--theme-color); box-shadow: 0 12px 24px rgba(234,24,38,.25); }
.energy-partnership-floating-counter strong { color: #fff; font-family: var(--primary-font); font-size: 36px; font-weight: 800; line-height: .9; }
.energy-partnership-floating-counter span { color: #fff; font-family: var(--primary-font); font-size: 10px; font-weight: 800; letter-spacing: .04em; line-height: 1.25; text-transform: uppercase; }
@media (max-width: 575px) { .energy-partnership-visual { padding: 18px; } .energy-partnership-floating-counter { top: -18px; left: 14px; } }

/* Keep the partnership introduction in a single, readable column while the mobile header is active. */
@media (max-width: 1199px) {
  .energy-partnership-intro-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .energy-partnership-heading-row,
  .energy-partnership-intro-details,
  .energy-partnership-visual {
    width: 100%;
    grid-area: auto;
  }

  .energy-partnership-heading-row { order: 1; }
  .energy-partnership-intro-details { order: 2; }
  .energy-partnership-visual {
    order: 3;
    max-width: 580px;
    margin: 0 auto;
  }
}

/* Index-only compact newsletter footer preview. */
@media (min-width: 992px) {
  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-cta {
    min-height: 175px;
    margin-top: 30px;
  }

  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-cta::before,
  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-cta::after,
  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-image {
    top: -30px;
  }

  /* Keep the compact homepage photo proportional without crowding the copy. */
  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-image {
    width: 27%;
  }

  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-cta::before {
    left: calc(26% - 5px);
  }

  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-cta::after {
    left: 27%;
  }

  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-content {
    margin-left: 29%;
    padding: 24px 0 16px;
  }

  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-content span {
    margin-bottom: 5px;
    font-size: 11px;
  }

  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-content h3 {
    margin-bottom: 7px;
    font-size: 23px;
  }

  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-content p {
    font-size: 13px;
    line-height: 1.45;
  }

  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-form {
    gap: 8px;
    padding: 14px 16px;
  }

  .fcc-homepage .index-footer-color-swap .index-footer-newsletter-form input {
    height: 38px;
    padding: 0 13px;
    font-size: 13px;
  }

  .fcc-homepage .index-footer-color-swap .index-footer-email-action button {
    min-height: 38px;
    font-size: 12px;
  }
}

/* Keep the red contact-strip phone and quote email actionable and easy to identify. */
.index-footer-contact-strip > a[href^="tel:"],
.index-footer-contact-strip > a[href^="mailto:"] {
  position: relative;
  z-index: 5;
  color: #ffffff;
  cursor: pointer;
  pointer-events: auto !important;
  text-decoration: none;
}

.index-footer-contact-strip > a[href^="tel:"]:hover,
.index-footer-contact-strip > a[href^="mailto:"]:hover,
.index-footer-contact-strip > a[href^="tel:"]:focus-visible,
.index-footer-contact-strip > a[href^="mailto:"]:focus-visible {
  color: #ffffff;
  text-decoration: none;
}

.index-footer-contact-strip > a[href^="tel:"]::after,
.index-footer-contact-strip > a[href^="mailto:"]::after {
  content: "";
  position: absolute;
  inset: -8px -10px;
  z-index: -1;
  border-radius: 4px;
  transition: background-color 180ms ease;
}

.index-footer-contact-strip > a[href^="tel:"]:hover::after,
.index-footer-contact-strip > a[href^="mailto:"]:hover::after,
.index-footer-contact-strip > a[href^="tel:"]:focus-visible::after,
.index-footer-contact-strip > a[href^="mailto:"]:focus-visible::after {
  background: rgba(255, 255, 255, 0.16);
}

/* Compact desktop navigation: trims 12px from both the upper and lower link padding. */
@media (min-width: 1200px) {
  .header-area .main-menu > nav > ul > li > a {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}