/* DETAILS
==================================================
	Theme Name: BMW Prefab Division
==================================================*/



@charset "utf-8";



@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');



:root{

    /* ~-~-~-~-~ common transition ~-~-~-~-~ */

    --transition-common: all 0.5s ease 0s;

    /* ~-~-~-~-~ common transition ~-~-~-~-~ */



    /* ~-~-~-~-~ colors ~-~-~-~-~ */

    --color-accent: #FF9B31;

    --color-primary: #404040;       

    --color-secondary: #002E38;

    --rgb-secondary: 0, 46, 56;

    --color-tertiary: #4F676C;      

    --color-quaternary: #EDF4F5;

    --color-quinary: #000;              

    --color-senary: #000;              

    --color-octonary: #000;      

    --color-nonary: #000;        

    --color-denary: #000;        

    

    --color-white: #fff;

    --color-black: #000;

    /* ~-~-~-~-~ colors ~-~-~-~-~ */



    /* ~-~-~-~-~ declare font family & weight ~-~-~-~-~ */

    --ff-base: "Roboto", sans-serif;

    --ff-accent: "Manrope", sans-serif;

    --ff-awesome: "Font Awesome 6 Free";

    --fw-regular: 400;

    --fw-medium: 500;

    --fw-semi-bold: 600;

    --fw-bold: 700;

    /* ~-~-~-~-~ declare font family & weight ~-~-~-~-~ */



    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */

    --f-size-XXXL: 80px;    

    --f-size-XXL: 54px;      

    --f-size-XL: 24px;       

    --f-size-L: 20px;       

    --f-size-M: 18px;      

    --f-size-S: 16px;     

    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */



    /* ~-~-~-~-~ other adjustments ~-~-~-~-~ */

    --margin-title: 0 0 25px 0;

    --margin-paragraph: 0 0 25px 0;



    --border-radius-image: 10px;

    --padding-height: clamp(50px, 7.76563vw, 100px);

    --gap-40:40px;

    --gap-50:50px;

    /* ~-~-~-~-~ other adjustments ~-~-~-~-~ */



    /* ~-~-~-~-~ form adjustments ~-~-~-~-~ */

    --form-height: 55px;

    --form-font-color: #767676;

    --form-placeholder-color: #767676;

    --form-border-radious: 100px;

    --form-holder-bg: var(--color-white);

    /* ~-~-~-~-~ form adjustments ~-~-~-~-~ */

}

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

    :root{

        --f-size-XXXL: 60px;    

        --f-size-XXL: 44px; 

   }

}

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

    :root{

        /* ~-~-~-~-~ declare font size ~-~-~-~-~ */

        --f-size-XXXL: 52px;    

        --f-size-XXL: 36px;      

        --f-size-XL: 22px;       

        --f-size-L: 18px;     

        /* ~-~-~-~-~ declare font size ~-~-~-~-~ */

        --gap-40:30px;

        --gap-50:40px;

   }

}

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

    :root{

    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */

    --f-size-XXXL: 46px;    

    --f-size-XXL: 32px;      

    --f-size-XL: 20px;       

    --f-size-L: 16px;

    --f-size-M: 16px;      

    --f-size-S: 15px;    

    /* ~-~-~-~-~ declare font size ~-~-~-~-~ */

    --gap-40:25px;

    --gap-50:30px;

   }

}



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

    :root{

        --f-size-XXXL: 38px;    

        --f-size-XXL: 28px; 

        --f-size-XL: 18px;

   }

}

/* ~-~-~-~-~-~-~-~-~-~ global font settings start ~-~-~-~-~-~-~-~-~-~ */

html{ overflow-x: hidden;}

body{ font-family: var(--ff-base); font-weight: var(--fw-regular); font-size: var(--f-size-M); color: var(--color-primary); counter-reset: my-carousel-counter;

overflow-x: hidden;}

body,p{ margin: 0;}

p:not(:last-child){ margin: var(--margin-paragraph);}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{ font-weight: var(--fw-medium); color: var(--color-secondary); line-height: 1.25; margin: var(--margin-title);}

h1,.h1{ font-size: var(--f-size-XXXL);}

h2,.h2{ font-size: var(--f-size-XXL);}

h3,.h3{ font-size: var(--f-size-XL);}

h4,.h4{ font-size: var(--f-size-L);}

h6,.h6{ font-size: var(--f-size-M);}



/* ~-~-~-~-~-~-~-~-~-~ global adjustments start ~-~-~-~-~-~-~-~-~-~ */

img{ max-width: 100%;}
a, img{ border: none; text-decoration: none; outline: none;}
a, a:link, a:visited, a:focus, a:hover{ outline: none; text-decoration: none; transition: var(--transition-common);}
ul{ list-style: none; margin: 0; padding: 0;}
.padding-common{ padding-top: var(--padding-height); padding-bottom: var(--padding-height);}
.padding-top-common{ padding-top: var(--padding-height);}
.padding-bottom-common{ padding-bottom: var(--padding-height);}
/* ==##==##== utility classes ==##==##== */
.decorated-title{ display: inline-flex; font-family: var(--ff-accent-regular); font-weight: var(--fw-semi-bold); font-size: var(--f-size-M); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.15rem; position: relative; padding-bottom: 3px; isolation: isolate; margin-bottom: 15px;}
.decorated-title::before{ content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 95%; background: rgb(237,28,36); background: linear-gradient(0deg, rgba(237,28,36,0.12) 0%, rgba(237,28,36,0) 100%);}
.overlay-content{ position: relative; z-index: 3;}
.arrow{ display: inline-flex; justify-content: center; align-items: center; width: 45px; height: 45px; background: var(--color-accent); transition: var(--transition-common);}
.arrow::before{ content: ""; background: url(../images/right-arrow.svg) top left no-repeat; background-size: 100%; width: 20px; height: 20px;}
.fade-bg{ background: var(--color-quaternary);}
.background-cover { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
.responsive-image-wrapper { position: relative; overflow: hidden; }
.responsive-image-wrapper img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mb-50{ margin-bottom: var(--gap-50);}



/* ==##==##== utility classes ==##==##== */



/* ==##==##== container adjustments ==##==##== */

@media only screen and (min-width: 1600px){

    .container{ max-width: 1444px;}

}

/* ==##==##== container adjustments ==##==##== */



/* ==##==##== button settings ==##==##== */

.button__primary, .header-button a{ display: inline-flex; align-items: center; justify-content: center; font-family: var(--ff-accent); font-weight: var(--fw-semi-bold); font-size: var(--f-size-M); color: var(--color-white); background: var(--color-accent); text-align: center; border: 4px solid var(--color-accent); padding: 12px 30px; position: relative; isolation: isolate; overflow: hidden;}
.button__primary::before, .header-button a::before{ content: ""; position: absolute; z-index: -1; inset: 0; background: var(--color-secondary);}
.button__primary::after, .header-button a::after{ content: ""; position: absolute; z-index: -1; inset: 0; background: var(--color-accent); transform: rotate(45deg) translate(-30px, -30px); width: 200px; height: 200px; transition: var(--transition-common);}
.button__primary:hover, .header-button a:hover{ color: var(--color-white);}
.button__primary:hover::after, .header-button a:hover::after{ transform: rotate(45deg) translate(140px, -30px);}

.button__secondary{ display: inline-flex; align-items: center; font-family: var(--ff-accent); font-weight: var(--fw-semi-bold); color: var(--color-secondary); column-gap: 12px;}
.button__secondary::after{ content: ""; background: url(../images/dark-arrow.svg) top left no-repeat; background-size: 100%; width: 16px; height: 12px; transition: var(--transition-common);}
.button__secondary:hover{ color: var(--color-secondary);}
.button__secondary:hover::after{ transform: translate(10px,0);}
@media only screen and (max-width: 767px){
    .button__primary, .header-button a{ padding: 11px 25px;}
    .mb-5{ margin-bottom: 25px !important;}
}
/* ==##==##== button settings ==##==##== */

/* ==##==##== form control settings ==##==##== */
.form-control{ background-color: var(--form-holder-bg) !important; height: var(--form-height);  border: 1px solid #CECECE !important;  border-radius: 0; box-shadow: none !important; color: var(--form-font-color); font-size: var(--f-size-M); padding-right: 20px; padding-left: 20px;}
select.form-control { background: url(../images/select-arrow.svg); background-position: right 5px center; background-size: 13px; background-repeat: no-repeat; padding: 2px 22px 2px 15px; height: fit-content; color: var(--color-secondary); cursor: pointer;}
textarea.form-control{ height: 100px; padding-top: 15px; resize: none;}
.form-control::-moz-placeholder { color: var(--form-placeholder-color); opacity: 1; font-weight: 400;}
.form-control:-ms-input-placeholder { color: var(--form-placeholder-color); font-weight: 400;}
.form-control::-webkit-input-placeholder { color: var(--form-placeholder-color); font-weight: 400;}
.form-row{ margin-bottom: 30px;}
@media only screen and (max-width: 991px){
    .form-row{ margin-bottom: 20px;}
}

/* ==##==##== form control settings ==##==##== */



/* ~-~-~-~-~-~-~-~-~-~ header adjustments start ~-~-~-~-~-~-~-~-~-~ */



/* ~~hamburger menu start~~ */

.hamburger-nav { display: none; vertical-align: top; width: 28px; height: 26px; position: relative; margin: 0 0 0 15px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; margin-top: 0; z-index: 9;}

.hamburger-nav span { display: block; position: absolute; height: 2px; width: 100%; background: var(--color-black); border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

.hamburger-nav span:nth-child(1) { top: 2px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}

.hamburger-nav span:nth-child(2) { top: 10px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}

.hamburger-nav span:nth-child(3) { top: 18px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}

.hamburger-nav-close { vertical-align: top; width: 30px; height: 24px; position: relative; margin: 0 0 0 15px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; margin-top: 0; z-index: 9;}

.hamburger-nav-close span { display: block; position: absolute; height: 2px; width: 100%; background: var(--color-white); border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

.hamburger-nav-close span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 10px; left: 3px;}

.hamburger-nav-close span:nth-child(2) { width: 0%; opacity: 0;}

.hamburger-nav-close span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 10px; left: 2px;}

/* ~~hamburger menu end~~ */





.main-header{ background: var(--color-white); position: relative; z-index: 999; inset: 0 0 auto 0;}
.main-header .container-fluid{ max-width: 1800px; padding-right: 40px; padding-left: 40px;}
/* .main-header .header-inner-wrap::before{ content: ""; position: absolute; inset: auto auto 0 0; width: 90%; height: 1px; background: rgba(255,255,255,0.4);} */
.header-logo a{ display: block; height: 60px;}
.header-logo a img{ display: block; width: auto; height: 100%;}
.desktop-menu ul{ align-items: center;}
.desktop-menu ul li:not(.header-button) a{ display: block; font-family: var(--ff-accent); font-size: var(--f-size-M); color: var(--color-black); padding: 39px 0; margin: 0 10px; position: relative;}
.desktop-menu ul li a:hover{ color: var(--color-accent);}
.header-right-panel .links-block ul{ gap: 10px;}
.header-right-panel .links-block ul li a{ display: block; width: 55px; height: 55px; border: 1px solid rgba(var(--rgb-senary),0.5); border-radius: 50%; position: relative; font-size: 0;}
.header-right-panel .links-block ul li a::before{ content: ""; position: absolute; inset: 0; background-size: 100% !important; width: 25px; height: 25px; margin: auto; transition: var(--transition-common);}
.header-right-panel .links-block ul li.user a::before{ background: url(../images/user-icon.svg) top left no-repeat;}
.header-right-panel .links-block ul li.cart a::before{ background: url(../images/cart-icon.svg) top left no-repeat;}
.header-right-panel .links-block ul li a:hover{ background: var(--color-quinary); border-color: var(--color-quinary);}
.header-right-panel .links-block ul li a:hover::before{ filter: brightness(0) invert(1);}
/* sub-menu start */
.main-header .menu-item-has-children { position: relative; }
/* .main-header .menu-item-has-children .sub-menu { background: #FFF; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.13); width: 210px; border-radius: var(--border-radius-image); position: absolute; top: 80%; opacity: 0; visibility: hidden; overflow: hidden; transition: var(--transition-common); } */
.main-header .menu-item-has-children .sub-menu { background: #EDF4F5F2; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.13); width: 350px; padding: 30px 0; position: absolute; top: 80%; opacity: 0; visibility: hidden; overflow: hidden; transition: var(--transition-common); }
.main-header .menu-item-has-children .sub-menu li a { display: block; margin: 0; padding: 5px 30px; color:  var(--color-secondary) !important; font-weight: var(--fw-medium);}
.main-header .menu-item-has-children .sub-menu a:hover { background: var(--color-white);}
.main-header .menu-item-has-children:hover .sub-menu { transform: translateY(10px); opacity: 1; visibility: visible; }
.main-header .menu-item-has-children>a { padding-right: 20px !important; }
.main-header .menu-item-has-children>a::before { position: absolute; content: ''; border: solid var(--color-black); border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(45deg) translateY(-50%); -webkit-transform: rotate(45deg) translateY(-50%); right: 5px; top: 49%; transition: var(--transition-common); }
.desktop-menu ul li a:hover::before{ border-color: var(--color-accent);}
/* sub-menu end */
.main-header .header-button{ margin-left: 30px;}
.current-menu-item:not(.header-button)>a{ color: var(--color-accent) !important;}
.current-menu-item:not(.header-button)>a::before{ border-color: var(--color-accent) !important;}
/* Mobile Menu */
.mobile-menu { display: none; background: var(--color-secondary); width: 100vw; height: 100vh; position: fixed; top: 0; right: -100vw; overflow: hidden; z-index: 999; transition: var(--transition-common); }
.mobile-menu .top-row { padding: 20px; }
.mobile-menubar { height: calc(100vh - 120px); padding: 20px 0; overflow: auto; }
.mobile-menu .mobile-menubar li { opacity: 0; -webkit-transform: translateX(-150px); transform: translateX(-150px); -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s; padding: 0 20px; font-size: 22px;}
.mobile-menu .mobile-menubar li a{ color: var(--color-white);}
.mobile-menu .mobile-menubar li:not(.header-button) a{ display: inline-block; padding: 10px 0;}
.mobile-menu .mobile-menubar li .sub-arrow { display: flex; align-items: center; justify-content: end; width: 33px; height: 33px; position: absolute; z-index: 1; top: 10px; right: 20px; color: #fff; }
.mobile-menu .mobile-menubar li li{ padding: 0;}
.menu-open .mobile-menu { right: 0; }
.menu-open .mobile-menu .mobile-menubar li { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); position: relative;}
.menu-open .mobile-menu .mobile-menubar li:nth-child(2) { transition-delay: 0.24s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(3) { transition-delay: 0.32s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(4) { transition-delay: 0.40s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(5) { transition-delay: 0.48s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(6) { transition-delay: 0.56s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(7) { transition-delay: 0.57s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(8) { transition-delay: 0.58s; }
.menu-open .mobile-menu .mobile-menubar li:nth-child(9) { transition-delay: 0.59s; }
/* ~~ header sticky start ~~ */

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ~~ header sticky start ~~ */
.header-sticky .main-header { position: fixed; width: 100%; box-shadow: 4px 4px 15px 0px rgb(0 0 0 / 10%); animation: slide-down 0.5s;}
.no-banner .main-header{ border-bottom: 1px solid #0000004d;}
.header-sticky .top-header { display: none; }
.header-sticky.no-banner .main-header{ border-color: transparent;}
.header-sticky main { padding-top: 106px; }
/* ~~ header sticky end ~~ */

@media only screen and (max-width: 1699px){
    .header-logo a{ height: 55px;}
    /* .desktop-menu ul li:not(.header-button) a{ margin: 0 5px;} */

}
@media only screen and (max-width: 1599px){
    .main-header .container-fluid{ padding:0 15px;}
    .header-logo a { height: 40px; }
    /* .desktop-menu ul li:not(.header-button) a { margin: 0 3px; } */
    .main-header .menu-item-has-children>a { padding-right: 16px !important; }
    .header-button a{ padding: 10px 20px;}
    .main-header .header-button { margin-left: 10px; }
}

@media only screen and (max-width: 1399px) {
    .main-header .header-inner-wrap{ padding: 15px 0;}
    .desktop-menu ul li:not(.header-button) a{ padding: 20px 0; margin: 0 7px;}
    .desktop-menu ul li:first-child a{ margin-left: 0;}
    .header-sticky main { padding-top: 97px; }
}
@media only screen and (max-width: 1199px){
    .desktop-menu { display: none; }
    .hamburger-nav { display: block; }
    .mobile-menu { display: block; }
    .mobile-menu .logo-wrap a{ display: inline-block; height: 55px;}
    .mobile-menu .logo-wrap a img { display: block; width: auto; height: 100%; }
    .mobile-menu .sub-menu { display: none; width: calc(100% - 20px); margin-left: auto; }
    .mobile-menu .sub-menu li{ padding: 0;}
    .mobile-menu .header-button{ margin-top: 15px;}

    .header-sticky main { padding-top: 70px; }
}
@media only screen and (max-width: 991px){
    .mobile-menu .top-row { padding: 20px 15px; }
    .mobile-menu .mobile-menubar li{ font-size: 18px; padding: 0 15px;}
    .mobile-menu .mobile-menubar li .sub-arrow{ right: 15px;}
}

@media only screen and (max-width: 575px){
    .header-logo a, .mobile-menu .logo-wrap a { height: 35px;}
    .header-sticky main { padding-top: 65px; }
}



/* ~~ header sticky end ~~ */



/* ~-~-~-~-~-~-~-~-~-~ global adjustments  end ~-~-~-~-~-~-~-~-~-~ */

/* ~-~-~-~-~-~-~-~-~-~~-~-~-~-~-~-~-~-~-~~-~-~-~-~-~-~-~-~-~~-~-~ */



/* HOME PAGE START HERE ********************/

/* HOME PAGE START HERE ********************/

.hero-section{ position: relative; z-index: 1;}
.hero-carousel *{ color: var(--color-white);}
.hero-carousel{ position: relative; z-index: 1;}
.hero-carousel.slick-dotted.slick-slider{ margin-bottom: 0;}
.hero-carousel .inner-wrapper{ position: relative; height: calc(100vh - 106px);}
.hero-carousel .bg-image-block{ position: relative; z-index: 1; height: calc(100vh - 106px); background-repeat: no-repeat !important; background-position: top center !important; background-size: cover !important;}
.hero-carousel .info-block{ position: absolute; z-index: 2; inset: 0;}
.hero-carousel .info-block .info-holder{ max-width: 1030px; margin: 0 auto;}
.hero-carousel .info-block .info-holder .description-holder{ max-width: 900px; margin: 0 auto;}
.hero-carousel .slick-dots{ display: none; justify-content: center; align-items: center; inset-block-end: 0; inset-inline-start: 0; background: var(--color-white); width: 470px; height: 90px;}
.hero-carousel .slick-dots li button:before{ display: none;}
.hero-carousel .slick-dots li button:after{ content: ""; display: block; width: 14px; height: 14px; border: 1px solid #D9D9D9; background: #D9D9D9; border-radius: 50%;}
.hero-carousel .slick-dots li.slick-active button:after{ border: 1px solid var(--color-secondary); background: var(--color-white);}
.hero-section .phone-block{ position: absolute; z-index: 2; display: inline-flex; align-items: center; inset-inline-end: 0; inset-block-end: 0; background: var(--color-secondary); width: 590px; height: 170px; padding-left: 60px;}
.hero-section .phone-block ul{ margin: 0; padding: 0; list-style: none;}
.hero-section .phone-block ul li a{ display: block; color: var(--color-white); position: relative; padding-left: 88px;}
.hero-section .phone-block ul li a::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 70px; height: 70px; border: 2px solid rgba(255,255,255,0.2); border-radius: 50%; background: url(../images/phone-icon.svg) center center no-repeat; background-size: 50%; margin: auto 0;}
.hero-section .phone-block ul li{ font-weight: var(--fw-medium); font-size: var(--f-size-XL);}
.hero-section .phone-block ul li span.small-heading{ display: block; font-weight: var(--fw-regular); font-size: var(--f-size-M); color: #84999D;}
.decoration-under-hero{ position: relative; z-index: 3; background: var(--color-white); height: 70px;}
.decoration-under-hero::before{ content: ""; position: absolute; z-index: 1; inset-block-start: -70px; inset-inline-end: 0; background: url(../images/decoration-one.svg) top left no-repeat; background-size: 100%; width: 210px; height: 210px;}

.product-section{ position: relative; z-index: 2; background: var(--color-quaternary); overflow: hidden;}
.product-section .container{ position: relative; z-index: 2;}
.product-section .slick-list{ overflow: visible;}
.product-carousel .item, .product-listing .item{ padding: 0 12px;}
.product-carousel .slick-list{ margin: 0 -12px;}
.product-carousel .item .inner-wrap, .product-listing .item .inner-wrap{ position: relative;}
.product-carousel .item .inner-wrap a, .product-listing .item .inner-wrap a{ display: block; position: absolute; inset: 0; z-index: 3; font-size: 0;}
.product-carousel .item .image-holder, .product-listing .item .image-holder{ position: relative; z-index: 1; padding-bottom: 111%;}
.product-carousel .item .image-holder img, .product-listing .item .image-holder img{ position: absolute; display: block; width: 100%; height: 100%; object-fit: cover;}
.product-carousel .item .info-holder, .product-listing .item .info-holder{ position: absolute; z-index: 2; inset: auto auto 0 0; display: flex; align-items: center; width: calc(100% - 120px); height: 80px; background: var(--color-secondary); padding: 0 24px;}
.product-carousel .item .info-holder::before, .product-listing .item .info-holder::before{ content: ""; position: absolute; inset-block-start: 0; inset-inline-end: -80px; border-top: 80px solid transparent; border-left: 80px solid var(--color-secondary);}
.product-carousel .item .info-holder h3, .product-listing .item .info-holder h3{ color: var(--color-white); margin: 0;}
.product-carousel .item .info-holder span.arrow, .product-listing .item .info-holder span.arrow{ display: inline-flex; justify-content: center; align-items: center; position: absolute; inset: 0 -50px 0 auto; width: 45px; height: 45px; background: var(--color-accent); margin: auto 0; transform: translate(-15px, 0px); opacity: 0; transition: var(--transition-common);}
.product-carousel .item .info-holder span.arrow::before, .product-listing .item .info-holder span.arrow::before{ content: ""; display: block; background: url(../images/right-arrow.svg) top left no-repeat; background-size: 100%; width: 20px; height: 20px;}
.product-carousel .item .inner-wrap:hover .info-holder span.arrow, .product-listing .item .inner-wrap:hover .info-holder span.arrow{ opacity: 1; transform: translate(0px, 0px);}
.product-carousel .slick-arrow{ z-index: 2; width: 50px; height: 50px; background: var(--color-accent); transition: var(--transition-common);}
.product-carousel .slick-arrow:hover{ background: var(--color-secondary);}
.product-carousel .slick-prev{ left: 0;}
.product-carousel .slick-next{ right: 0;}
.product-carousel .slick-prev, .product-carousel .slick-next{ display: flex; justify-content: center; align-items: center;}
.product-carousel .slick-prev::before, .product-carousel .slick-next:before{ display: none;}
.product-carousel .slick-prev::after, .product-carousel .slick-next:after{ content: ""; display: block; background-size: 100% !important; width: 20px; height: 20px;}
.product-carousel .slick-prev::after{ background: url(../images/right-arrow.svg) top left no-repeat; transform: scale(-1);}
.product-carousel .slick-next::after{ background: url(../images/right-arrow.svg) top left no-repeat;}
.product-carousel .slick-arrow.slick-disabled{ opacity: 0.5;}
.product-section .decoration-holder{ position: relative; z-index: 1; width: 100%; height: 70px; background: var(--color-white); margin-top: -28px;}
.product-section .decoration-holder::before{ content: ""; position: absolute; inset-block-start: -70px; inset-inline-start: 115px; background: url(../images/decoration-two.svg) top left no-repeat; background-size: 100%; width: 70px; height: 140px;}

.solution-section{ position: relative; z-index: 1; overflow: hidden;}
.solution-section .title-holder{ max-width: 680px;}
.solution-section .image-holder{ width: 152.8%; padding-left: 40px;}
.solution-section .image-holder img{ display: block; width: 100%;}

@media only screen and (min-width: 768px){
    .digit-holder .row{ margin-left: -22px; margin-right: -22px;}
    .digit-holder .item{ padding-left: 22px; padding-right: 22px;}
}
.digit-holder .item{ position: relative;}
.digit-holder .item::before{ content: ""; position: absolute; inset-inline-end: 0; inset-block-end: 0; width: 60px; height: 110px; background: #DBECF0; transform: skew(-30deg, 0deg); transform-origin: 0 0;}
.digit-holder .item:not(:nth-child(even))::before{ inset-block-end: 60px;}
.digit-holder .item:nth-child(even)::before{ inset-block-end: -20px;}
.digit-holder .item .inner-wrapper{ border: 1px solid rgba(var(--rgb-secondary),0.3); padding: 50px;}
.digit-holder .item .number{ display: inline-flex; font-size: 100px; line-height: 1; font-weight: var(--fw-medium); color: var(--color-secondary); margin-block-end: 25px;}
.digit-holder .item .number span{ transition: var(--transition-common);}
.digit-holder .item p{ font-weight: var(--fw-semi-bold); color: var(--color-tertiary);}
.digit-holder .item:nth-child(even){ margin-block-start: 80px;}

.benefit-section{ position: relative;}
.benefit-section .content-holder{ position: relative; z-index: 2;}
.benefit-section .outer-image-holder{ position: absolute; inset: 0 auto 0 0; width: 50%; display: none;}
.benefit-section .outer-color-holder{ position: absolute; inset: 0 0 0 auto; width: 100%; background: var(--color-secondary);}
.benefit-section .outer-color-holder::before{ content: ""; position: absolute; z-index: 1; top: 0; right: 0; width: 140px; height: 140px; background: url(../images/decoration-four.svg) top left no-repeat; background-size: 100%;}
@media only screen and (min-width: 992px){
    .benefit-section .outer-image-holder{ background-position: top left !important; background-repeat: no-repeat !important; background-size: cover !important; display: block;}
    .benefit-section .outer-color-holder{ width: 50%;}
}

.benefit-section h2{ color: var(--color-white);}
.benefit-section .info-col .inner-wrapper{ padding-left: 40px;}
.benefit-listing .inner-block{ padding: 24px;}
.benefit-listing .top-wrap .icon-holder{ width: 50px;}
.benefit-listing .top-wrap .icon-holder img{ display: block; width: 100%;}
.benefit-listing .top-wrap .title-holder{ width: calc(100% - 50px);}
.benefit-listing .top-wrap h6{ color: var(--color-white); margin: 0;}
@media only screen and (min-width: 576px){
    .benefit-listing .item:nth-child(1), .benefit-listing .item:nth-child(2){ margin-bottom: 24px;}
    .benefit-listing .item:nth-child(1) .inner-block, .benefit-listing .item:nth-child(4) .inner-block{ border: 1px solid rgba(255,255,255,0.3);}
    .benefit-listing .item:nth-child(2) .inner-block, .benefit-listing .item:nth-child(3) .inner-block{ background: rgba(255,255,255,0.05);}
}
.benefit-listing .item .inner-block{ height: 100%;}
.benefit-listing p{ color: #9BADB1;}
.cost-section h2{ margin-bottom: 75px;}
.cost-section .desc-holder{ margin-bottom: 50px;}
.cost-section ul.advantage-listing{ margin: 0; padding: 0; list-style: none; position: relative; isolation: isolate;}
.cost-section ul.advantage-listing::before{ content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 30px; border: 1px dashed #4e8d9a; margin: 0 auto;}
.cost-section ul.advantage-listing li{ display: flex; align-items: center; font-weight: var(--fw-medium); color: var(--color-secondary);}
.cost-section ul.advantage-listing li:not(:last-child){ margin-bottom: 25px;}
.cost-section ul.advantage-listing li .icon-holder{ display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--color-accent);}
.cost-section ul.advantage-listing li .icon-holder img{ display: block; width: auto; height: 40px;}
.cost-section ul.advantage-listing li .info-holder{ width: calc(100% - 60px); padding-left: 15px;}
.services-section{ background: var(--color-quaternary);}

.services-section .container{ position: relative;}

@media only screen and (min-width: 576px){
    .services-section .title-block{ position: absolute; inset: 90px 0 auto 0; pointer-events: none;}
}
.services-listing .item{ border-left: 1px solid #D9D9D9;}
.services-listing .item:last-child{ border-right: 1px solid #D9D9D9;}
.services-listing .item .inner-wrapper{ height: 100%; margin-left: 24px; margin-right: 24px; position: relative;}
@media only screen and (min-width: 992px){
    .services-listing .item .inner-wrapper{ padding-top: 200px; padding-bottom: 100px;}
}

.services-listing .item .inner-wrapper a{ display: block; position: absolute; z-index: 2; inset: 0; font-size: 0;}
.services-listing .item .service-block{ display: flex; flex-flow: column nowrap; height: 100%; position: relative; z-index: 1;}
.services-listing .item .image-holder{ border: 1px solid #D9D9D9; padding: 16px;} 
.services-listing .item .image-holder .image-inner-holder{ position: relative; padding-bottom: 100%;}
.services-listing .item .image-holder .image-inner-holder img{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
/* .services-listing .item .arrow{  display: inline-flex; justify-content: center; align-items: center; width: 45px; height: 45px; background: var(--color-accent); margin-block-start: auto; margin-inline: auto; transition: var(--transition-common);}
.services-listing .item .arrow::before{ content: ""; background: url(../images/right-arrow.svg) top left no-repeat; background-size: 100%; width: 20px; height: 20px;} */
.services-listing .item .inner-wrapper .arrow{ margin-inline: auto; background: var(--color-secondary);}
.services-listing .item .inner-wrapper:hover .arrow{ background: var(--color-accent);}
/* .featured-projects-section{ background: var(--color-quaternary);} */
.featured-projects-section .title-block .col-md-3{ text-align: right;}
.featured-projects-section .title-block h2{ margin: 0;}
.featured-projects-section .title-block .inner-wrapper{ max-width: 600px;}

/* ********************GRID DESIGN START HERE******************** */
/* ********************GRID DESIGN START HERE******************** */
.projects-listing-card { height: 100%; }
.projects-listing-card a{ display: block; height: 100%; position: relative;}
.projects-listing-card  .image-holder { padding-bottom: 55%; height: 100%; }
.projects-listing-card  .image-holder::before{ content: ""; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 54.29%, rgba(0, 0, 0, 0.9) 100%); transition: var(--transition-common); opacity: 0;}
.projects-listing-card .info-holder{ position: absolute; z-index: 2; inset: auto 0 0 0; padding: 0 30px 30px; opacity: 0; transition: var(--transition-common);}
.projects-listing-card .info-holder .info-block{ width: calc(100% - 45px); padding-right: 20px;}
.projects-listing-card .info-holder h3{ color: var(--color-white); margin-bottom: 5px;}
.projects-listing-card .info-holder p{ color: var(--color-white);}
.projects-listing-card .info-holder .arrow{ transform: translate(-15px,0); transition: var(--transition-common);}
.projects-listing-card .info-holder .arrow{ display: none;}
.projects-listing-card a:hover .image-holder::before{ opacity: 1;}
.projects-listing-card a:hover .info-holder{ opacity: 1;}
.projects-listing-card a:hover .arrow{ transform: translate(0,0);}
.projects-listing-outer .button-row{ margin-top: var(--gap-50);}
.projects-listing-outer .button-row:has([style="display: none;"]){ margin-top: 0;}
.projects-listing-row { margin: 0 -12px;}
.projects-listing-col{ width: 25%; flex: 0 0 auto; padding: 0 12px; margin-top: 25px;}
.projects-listing-col:nth-child(3n-2) { width: 50%; }
.projects-listing-col:nth-child(6n-2) { width: 25%; }
.projects-listing-col:nth-child(6n+0){ width: 50%;}

@media only screen and (min-width: 992px){
    .projects-listing-col:nth-child(-n+3){ margin-top: 0;}
}
@media only screen and (max-width: 1399px){
    .projects-listing-card .info-holder{ padding: 0 20px 20px}
}
@media only screen and (max-width: 1199px){
    .projects-listing-row { margin: 0 -8px; }
    .projects-listing-col{ padding: 0 8px; margin-top: 16px;}
    .projects-listing-card .info-holder{ padding: 0 15px 15px; }
}
@media only screen and (max-width: 991px){
    .projects-listing-col{ width: 50%;}
    .projects-listing-col:nth-child(3n-2) { width: 100%; }
    .projects-listing-card { min-height: 350px; }
    .projects-listing-card .image-holder{ padding-bottom: 50%;}
    .projects-listing-card .image-holder::before, .projects-listing-card .info-holder{ opacity: 1;}
    .projects-listing-card .info-holder .arrow{ transform: none;}
}

@media only screen and (max-width: 767px){
    .projects-listing-card { min-height: 300px; }
    .projects-listing-card .info-holder { justify-content: space-between; }
    .product-carousel .item .info-holder, .product-listing .item .info-holder{ width: calc(100% - 80px); padding: 0 15px;}
}

@media only screen and (max-width: 575px){
    .projects-listing-row { margin: 0 -5px; }
    .projects-listing-col { padding: 0 5px; margin-top: 10px; }
    .projects-listing-card .info-holder { padding: 0 10px 15px; }    
}
@media only screen and (max-width: 479px){
    .projects-listing-col { width: 100% !important; }
    .projects-listing-card { min-height: auto; }
    .projects-listing-card .image-holder { padding-bottom: 65%; }
}
/* ********************GRID DESIGN END HERE******************** */
/* ********************GRID DESIGN END HERE******************** */



.testimonial-section{ background: var(--color-quaternary);}
.testimonial-section .section-title{ margin-bottom: var(--gap-50);}
.testimonial-card { background: var(--color-white); padding: 30px; border: 1px solid #ADC8D0; height: 100%;}
.testimonial-card .review-post-profile { margin-bottom: 22px; }
.testimonial-card .author-profile { width: 80px; height: 80px; border-radius: 50%; margin-right: 20px; overflow: hidden; }
.testimonial-card .author-profile img{ width: 100%; height: 100%; object-fit: cover;}
.testimonial-card .author-info h3 { margin-bottom: 5px; }
.testimonial-card .review-start-wrap { margin-bottom: 20px; }
.testimonial-card  .review-content p { margin-bottom: 10px; }
.testimonial-card  .review-content a{ margin-top: 20px; color: var(--color-secondary); font-weight: var(--fw-bold); text-decoration: underline;}
.testimonial-card  .review-content a:hover{ color: var(--color-accent);}
.testimonial-slider .slick-list{ margin: 0 -12px;}
.testimonial-slider .slick-track{ display: flex;}
.testimonial-slider .slick-list .slick-slide{ padding: 0 12px; height: inherit;}
.testimonial-slider .slick-arrow { background-color: var(--color-quaternary); background-position: center !important; background-size: 10px !important; background-repeat: no-repeat !important; border: 1px solid var(--color-secondary); width: 45px; height: 45px; z-index: 5; transition: var(--transition-common);}
/* .testimonial-slider .slick-arrow::before{ content: ""; display: block; background-position: center !important; background-size: 17px !important; background-repeat: no-repeat !important; width: 18px; height: 10px;} */
.testimonial-slider .slick-arrow::before{ display: none;}
.testimonial-slider .slick-prev.slick-arrow { left: -70px; background-image: url(../images/curved-prev-arrow.svg);}
.testimonial-slider .slick-next.slick-arrow { right: -70px; background-image: url(../images/curved-next-arrow.svg);}
.testimonial-slider .slick-arrow:hover{ background-color: var(--color-accent); border-color: var(--color-accent);}
.recent-blog-section .title-block .col-md-3{ text-align: right;}
.recent-blog-section .title-block h2{ margin: 0;}
.recent-blog-section .title-block .inner-wrapper{ max-width: 600px;}
.blog-showcasing .item .inner-wrapper{ height: 100%; background: var(--color-white); border: 1px solid #BEC1C7;}
.blog-showcasing .item .blog-thumb-holder{ position: relative; width: 45%;}
.blog-showcasing .item .blog-info-holder{ display: flex; flex-direction: column; justify-content: center; position: relative; width: 55%; padding: 30px;}
.blog-showcasing .item .blog-thumb-holder .thumb-holder{ position: relative; z-index: 1; padding-bottom: 111.12%; height: 100%;}
.blog-showcasing .item .blog-thumb-holder .thumb-holder img{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.blog-showcasing .item .blog-thumb-holder .date-holder{ position: absolute; z-index: 2; inset: auto auto 0 0; background: var(--color-accent); font-size: var(--f-size-M); font-weight: var(--fw-medium); color: var(--color-white); padding: 24px; border-width: 2px 2px 0 0; border-style: solid; border-color: var(--color-white);}

.client-section .section-title{ margin-bottom: var(--gap-40);}
.client-section .logo-box { height: 100px; padding: 20px 10px; display: flex; align-items: center; justify-content: center; background: #EDF4F5; border-radius: 10px; }
.client-section .logo-box img{ display: block; max-height: 100%;}
.client-section .client-logo-slider .slick-list { padding: 10px 0; margin: -10px; }
.client-section .client-logo-slider .slick-slide{ padding: 0 10px;}

.cta-section{ background: var(--color-quaternary); position: relative;}

/* .cta-section::before{ content: ""; background: url(../images/pre-fab-top-design.svg); background-position: center; background-size: 100%; position: absolute; z-index: 1; top: 0; left: 0; width: 70px; height: 70px;} */

.cta-section .image-col .image-holder{ width: 142%; float: right; position: relative;}

.cta-section .image-col .image-holder::before{ content: ""; background: url(../images/pre-fab-top-design.svg); background-position: center; background-size: 100%; position: absolute; z-index: 1; top: 0; left: 0; width: 70px; height: 70px;}

.cta-section .image-col .image-holder::after{ content: ""; background: url(../images/pre-fab-bottom-design.svg); background-position: center; background-size: 100%; position: absolute; z-index: 1; right: 0; bottom: 0; width: 140px; height: 140px;}

.cta-section .image-col .image-holder img{ display: block; width: 100%;}

.cta-section .container{ position: relative; z-index: 2;}

.cta-section .outer-image-holder{ position: absolute; z-index: 1; inset: 0 auto 0 0; width: 30%; background-repeat: no-repeat !important; background-position: top left !important; background-size: 100% !important;}

.cta-section .info-col .info-wrapper{ padding-left: 50px;}



.prefab-testimonial-section{ overflow: hidden;}

.prefab-testimonial-section .title-block { margin-bottom: var(--gap-40) !important;}

.prefab-testimonial-section h2{ margin-bottom: 0;}

.prefab-testimonial-carousel .slick-list{ overflow: visible;}

.prefab-testimonial-carousel .slick-track{ display: flex;}

.prefab-testimonial-carousel .item{ height: inherit; padding: 0 12px;}

.prefab-testimonial-carousel .item .inner-wrapper{ height: 100%; padding: 45px 20px 20px; margin-top: 25px; border-style: solid; border-width: 2px 0 0 2px; border-color: var(--color-accent); box-shadow: 4px 4px 10px 0px #0000000D; position: relative;}

.prefab-testimonial-carousel .item .inner-wrapper .number-holder{ display: inline-flex; justify-content: center; align-items: center; position: absolute; top: -25px; left: 25px; width: 50px; height: 50px; isolation: isolate; font-size: var(--f-size-XL); font-weight: var(--fw-medium); color: var(--color-white);}

.prefab-testimonial-carousel .item .inner-wrapper .number-holder::before{ /*content: " 0"counter(my-carousel-counter)" "; counter-increment: my-carousel-counter;*/ content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 50px; height: 50px; background: var(--color-accent); transform: skew(-10deg, 0deg);}

.prefab-testimonial-carousel .item .inner-wrapper li { position: relative; padding-left: 22px; }
.prefab-testimonial-carousel .item .inner-wrapper li::before{ content: ""; position: absolute; top: 5px; left: 0; background: url(../images/bullet-daimond.svg) top left no-repeat; background-size: 100%; width: 14px; height: 14px;} 

.usp-section{ background: var(--color-secondary); /* padding-top: 50px; */ }

.usp-section .container-fluid{ max-width: 2200px;}

@media only screen and (min-width: 992px){

    .usp-section .container-fluid{ padding-left: 0;}

}

.usp-carousel .slick-list { margin-left: -12px; margin-right: -12px;}

.usp-carousel .item{ padding: 0 12px;}

.usp-carousel .item .inner-wrapper{ position: relative;}

.usp-carousel .item .image-holder{ position: relative; z-index: 1; padding-bottom: 95%;}

.usp-carousel .item .image-holder img{ display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}

.usp-carousel .item .info-holder{ position: absolute; z-index: 2; top: 60%; right: 0; left: 0; background: var(--color-white); padding: 24px; border-top: 5px solid var(--color-accent); height: 100%; transition: var(--transition-common);}

.usp-carousel .item .info-holder h3, .usp-carousel .item .info-holder p{ margin-bottom: 10px;}

.usp-carousel .item .info-holder ul{ margin: 0; padding: 0; list-style: none;}

.usp-carousel .item .info-holder ul li{ position: relative; padding-left: 22px;}

.usp-carousel .item .info-holder ul li:not(:last-child){ margin-bottom: 8px;}

.usp-carousel .item .info-holder ul li::before{ content: ""; position: absolute; top: 5px; left: 0; background: url(../images/bullet-daimond.svg) top left no-repeat; background-size: 100%; width: 14px; height: 14px;} 

.usp-carousel .item .inner-wrapper:hover .info-holder { background: rgba(0, 0, 0, 0.85); top: 0; overflow: auto;}

.usp-carousel .item .inner-wrapper:hover .info-holder *{ color: var(--color-white);}



.usp-section .section-title-row { padding-left: 25%; margin-bottom: var(--gap-50);}

.usp-section .section-title-row .title-wrap{ max-width: 540px;}

.usp-section .section-title-row h2{ color: var(--color-white); margin-bottom: 0;}



.usp-section .slider-outer { padding-left: 25%; }

.usp-section .left-image-wraper { width: 28%; height: calc(100% - 50px); position: absolute; z-index: 1; bottom: 0; left: 0; }

.usp-section .left-image-wraper::before { content: ""; background: url(../images/usp-left-iamge-design.svg); background-position: center; background-size: 100%; position: absolute; z-index: 1; top: 0; left: 0; width: 140px; height: 140px; }

.usp-section .left-image-wraper img { width: 100%; height: 100%; object-fit: cover; }







.slider-arrow-wrap .slick-arrow { background-position: center !important; background-size: 10px !important; background-repeat: no-repeat !important; border: 1px solid #ffffff; width: 45px; height: 45px; z-index: 5; transition: var(--transition-common); cursor: pointer;}

.slider-arrow-wrap .slick-arrow.usp-carousel-prev-arrow{ background-image: url(../images/curved-prev-arrow-white.svg);}

.slider-arrow-wrap .slick-arrow.usp-carousel-next-arrow{background-image: url(../images/curved-next-arrow-white.svg);}

.slider-arrow-wrap .slick-arrow:not(:last-child){ margin-right: 16px;}

.slider-arrow-wrap .slick-arrow:hover{ background-color: var(--color-accent); border-color: transparent;}

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

    .usp-section .section-title-row{ padding-left: 30%;}

}

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

    .services-listing .item .inner-wrapper{ margin-left: 15px; margin-right: 15px;}

    .testimonial-slider .slick-prev.slick-arrow { left: -35px;}

    .testimonial-slider .slick-next.slick-arrow { right: -35px;}

}

@media only screen and (max-width: 1399px){
    .hero-carousel .inner-wrapper, .hero-carousel .bg-image-block { height: calc(100vh - 97px);}
    .hero-carousel .info-block .info-holder{ max-width: 60%;}
    .hero-carousel .slick-dots{ width: 25%;}
    .hero-section .phone-block{ width: 40%; padding-left: 30px;}

    .decoration-under-hero{ height: 50px;}
    .decoration-under-hero::before{ width: 150px; height: 150px; inset-block-start: -50px;}
    .solution-section .image-holder{ width: 140%;}
    .digit-holder .item .inner-wrapper{ padding: 35px;}
    .digit-holder .item .number{ font-size: 80px;}
    .benefit-section .info-col .inner-wrapper { padding-left: 30px; }
    .benefit-section .outer-color-holder::before{ width: 100px; height: 100px;}
    .services-listing .item .inner-wrapper { margin-left: 5px; margin-right: 5px; }
    .usp-section .left-image-wraper{ width: 25%;}
    .usp-section .left-image-wraper::before{ width: 100px; height: 100px;}
    .usp-section .section-title-row .title-wrap{ max-width: 380px;}
    .usp-section .slider-outer{ padding-left: 18%;}
    .usp-carousel .item .image-holder{ padding-bottom: 110%;}
    /* .featured-projects-listing .item .info-holder{ padding: 0 20px 20px} */
    .blog-showcasing .item .blog-info-holder{ padding: 20px;}
    .blog-showcasing .item .blog-thumb-holder .date-holder{ padding: 15px;}
    .cta-section .image-col .image-holder::after{ width: 100px; height: 100px;}
    .cta-section .image-col .image-holder::before{ width: 45px; height: 45px;}
}

@media only screen and (max-width: 1199px){
    .hero-carousel .inner-wrapper, .hero-carousel .bg-image-block { height: calc(100vh - 70px); }
    .hero-section .phone-block { height: 100px; }
    .hero-section .phone-block ul li a{ padding-left: 65px;}
    .hero-section .phone-block ul li a::before{ width: 55px; height: 55px;}
    .digit-holder .item .number { font-size: 60px; }
    .benefit-listing .inner-block{ padding: 15px;}
    .benefit-listing .top-wrap .icon-holder { width: 35px; }
    .cost-section ul.advantage-listing::before{ left: 25px;}
    .cost-section ul.advantage-listing li .icon-holder{ width: 50px; height: 50px;}
    .usp-carousel .item .info-holder{ padding: 15px;}    
    .arrow{ width: 30px; height: 30px;}
    .arrow::before{ width: 15px; height: 15px;}

    .testimonial-card{ padding: 20px;}

    .testimonial-slider .slick-arrow{ width: 38px; height: 38px; background-size: 8px !important;}

    .testimonial-slider .slick-prev.slick-arrow { left: -20px;}

    .testimonial-slider .slick-next.slick-arrow { right: -20px;}

}

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

    .hero-carousel .info-block .info-holder { max-width: 100%; }

    .hero-carousel .slick-dots { width: fit-content; height: auto; padding: 20px; }

    .hero-section .phone-block{ width: 55%;}

    .product-carousel .item .info-holder span.arrow, .product-listing .item .info-holder span.arrow{ transform: none; opacity: 1;}

    .services-listing .item:nth-child(2){ border-right: 1px solid #D9D9D9;}

    .services-listing .item .inner-wrapper{ padding-bottom: 60px;}

    .solution-section .image-holder{ width: 105%; padding-left: 0;}

    /* .digit-holder .item .inner-wrapper { padding: 20px; }

    .digit-holder .item::before{ width: 45px; height: 90px;} */

    .benefit-section{ padding-top: var(--padding-height); padding-bottom: var(--padding-height);}

    .benefit-section .info-col .inner-wrapper{ padding: 25px 0 0 0;}



    .usp-section .slider-outer { padding-left: 0; }

    .usp-section .section-title-row{ padding: 0;}

    .usp-section .slider-outer .usp-carousel{ margin-bottom: 25px;}

    .usp-section .left-image-wraper{ display: none;}

    .featured-projects-section .title-block.mb-5 { margin-bottom: 5px !important; }

    .featured-projects-section .row{ margin-bottom:  0 !important;}

    .featured-projects-listing .item { margin-top: 25px; }

    .featured-projects-section .button-wrap { margin-top: 25px; }



    .testimonial-slider .slick-list{ margin: 0 -8px;}

    .testimonial-slider .slick-list .slick-slide{ padding: 0 8px;}

    .testimonial-card .author-profile { width: 60px; height: 60px; margin-right: 12px; }

    .recent-blog-section .title-block.mb-5 { margin-bottom: 25px !important; }

    .recent-blog-section .blog-showcasing .item:not(:last-child){ margin-bottom: 25px;}

    .recent-blog-section .blog-showcasing .button-wraper{ margin-top: 25px;}
    .client-section .logo-box{ height: 80px;}
    .client-section .client-logo-slider .slick-list { padding: 6px 0; margin: -6px; }
    .client-section .client-logo-slider .slick-slide{ padding: 0 6px;}

    .cta-section{ padding: var(--padding-height) 0;}

    .cta-section .image-col .image-holder{ width: 100%; float: none; margin-bottom: 25px;}

    .cta-section .info-col .info-wrapper { padding-left: 0; }

    

}



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

    .services-listing .item:is(:nth-child(1), :nth-child(2)) .inner-wrapper{ padding-top: 200px;}

}

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

    .product-section{ padding-bottom: var(--padding-height);}

    .product-section .decoration-holder{ display: none;}

    .solution-section .info-wrapper{ margin-bottom: 25px;}

    .product-carousel .slick-arrow{ width: 40px; height: 40px;}

    .product-carousel .slick-prev::after, .product-carousel .slick-next:after{ width: 16px; height: 16px;}

    .product-carousel .item .info-holder span.arrow, .product-listing .item .info-holder span.arrow{ width: 35px; height: 35px;}

    .product-carousel .item .info-holder span.arrow::before, .product-listing .item .info-holder span.arrow::before{ width: 15px; height: 15px;}

    .digit-holder .item:nth-child(even) { margin-block-start: 40px; }

    .digit-holder .item .inner-wrapper { padding: 20px 15px; }

    .digit-holder .item .number { font-size: 40px; }

    .digit-holder .item::before{ width: 30px; height: 60px;}

    .digit-holder .item:not(:nth-child(even))::before { inset-block-end: 25px; }

    .cost-section h2, .cost-section  .inner-wrapper, .cost-section .desc-holder{ margin-bottom: 25px;}

    .prefab-testimonial-carousel .item .inner-wrapper{ margin-top: 20px;}

    .prefab-testimonial-carousel .item .inner-wrapper .number-holder, .prefab-testimonial-carousel .item .inner-wrapper .number-holder::before{ width: 40px; height: 40px;}

    .prefab-testimonial-carousel .item .inner-wrapper .number-holder{ top: -20px;}

}



@media only screen and (max-width: 575px){
    .hero-carousel .inner-wrapper, .hero-carousel .bg-image-block { height: calc(100vh - 95px); }
    .hero-section .phone-block{ width: 100%; padding-left: 15px;}

    .hero-carousel .slick-dots { padding: 0; bottom: -23px; left: 10px;}

    .decoration-under-hero { height: 30px; z-index: inherit; }

    .decoration-under-hero::before{ z-index: 5;}

    .digit-holder .item:not(:last-child){ margin-bottom: 20px;}

    .digit-holder .item:nth-child(even){ margin-top: 0;}

    .digit-holder .item:not(:nth-child(even))::before { inset-block-end: -15px; }

    .digit-holder .item:nth-child(even)::before { inset-block-end: -15px; }

    .benefit-section .outer-color-holder::before, .cta-section .image-col .image-holder::after { width: 60px; height: 60px; }

    .benefit-listing .item:nth-child(odd) .inner-block{ background: rgba(255,255,255,0.05);}

    .benefit-listing .item:nth-child(even) .inner-block{ border: 1px solid rgba(255,255,255,0.3);}

    

    .benefit-listing .item:not(:last-child){ margin-bottom: 25px;}

    .services-section{ padding-top: var(--padding-height);}

    .services-listing .item{ border-left: none;}

    .services-listing .item:nth-child(2){ border-right: none;}

    .services-listing .item:last-child{ border-right: none;}

    .services-listing .item .inner-wrapper { padding-bottom: 0; }

    .services-listing .item:not(:last-child){ margin-bottom: 25px;}

    .testimonial-section .slider-outer { padding: 0 15px; }

    .testimonial-card .review-post-profile { margin-bottom: 15px; }

    .testimonial-card .review-start-wrap { margin-bottom: 15px; }

    .blog-showcasing .item .inner-wrapper{ flex-wrap: wrap;}

    .blog-showcasing .item .blog-thumb-holder, .blog-showcasing .item .blog-info-holder{ width: 100%;}

    .blog-showcasing .item .blog-thumb-holder .thumb-holder{ padding-bottom: 100%;}

    .blog-showcasing .item .blog-info-holder{ padding: 20px 15px;}

    .cta-section .image-col .image-holder::before { width: 30px; height: 30px; }

}



/* HOME PAGE END HERE ********************/

/* HOME PAGE END HERE ********************/



/* FOOTER PART START HERE ********************/

/* FOOTER PART START HERE ********************/

.footer-wraper { background-color: #002E38; background-position: center !important; background-repeat: no-repeat !important; background-size: cover !important; }

.top-footer{ padding-bottom: 40px;}

.footer-logo-outer{ margin-bottom: 30px;}

.footer-logo-outer .border-line { flex: 1 1 0; height: 1px; background-color: rgba(255, 255,255, 0.2); }

.footer-logo { flex: 0 0 auto; height: 65px; margin: 0 40px; }

.footer-logo *{ display: block; width: auto; height: 100%;}



.social-link ul { display: flex; align-items: center; justify-content: center; }

.social-link li{ margin: 0 4px;}

.social-link li a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255,0.2); border-radius: 50%; color: #fff; }

.social-link li a:hover{ background: var(--color-accent); border-color: transparent;}

.footer-contact-card-col{ margin-top: 30px;}

.footer-contact-card { padding: 30px; height: 100%; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(2px); }



.footer-contact-card .icon { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border: 2px solid rgba(255, 255, 255,0.2); border-radius: 50%; }

.footer-contact-card .info{ width: calc(100% - 70px); padding-left: 16px;}

.footer-contact-card .info h6 { margin-bottom: 5px; color: #84999D; }

.footer-contact-card li{ color: var(--color-white); font-size: var(--f-size-XL); font-weight: var(--fw-medium);}

.footer-contact-card li a{ color: var(--color-white);}

.footer-contact-card li a:hover{ color: var(--color-accent);}



.bootom-footer{ padding: 20px 0; border-top: 1px solid rgba(255, 255, 255,0.1);}

.bootom-footer p, .bootom-footer li a{ color: #9BADB1;}

.bootom-footer .copy-right-col a{ color: var(--color-white);}

.bootom-footer .copy-right-col a:hover, .bootom-footer li a:hover{ color: var(--color-accent);}

.bootom-footer .policy-col ul{ display: flex; align-items: center;}

.bootom-footer .policy-col li{ display: flex; align-items: center;}

.bootom-footer .policy-col li:not(:last-child)::after{ content: ""; display: block; width: 5px; height: 5px; background: #9BADB1; border-radius: 50%; margin: 0 10px;}

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

    .footer-logo{ height: 55px;}

    .footer-contact-card{ padding: 20px;}

    .footer-contact-card .icon{ width: 60px; height: 60px;}

}

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

    .footer-logo { height: 50px; }

    .footer-contact-card { padding: 15px; }

    .footer-contact-card .icon { width: 50px; height: 50px; }

    .footer-contact-card .icon img { width: auto; height: 18px; }

    .footer-contact-card .info{ padding-left: 12px;}

    .bootom-footer .inner-row { justify-content: center !important; flex-wrap: wrap; }

    .bootom-footer .inner-row .copy-right-col { width: 100%; text-align: center; margin-bottom: 5px; }

}

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

    .decoration-under-hero { height: 30px; }

    .decoration-under-hero::before { width: 100px; height: 100px; inset-block-start: -33px; }

}

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

    .footer-logo-outer { margin-bottom: 25px; }

    .footer-logo { height: 40px; margin: 0 15px; }

    .footer-contact-card-col { margin-top: 25px; }

}

/* FOOTER PART END HERE ********************/

/* FOOTER PART END HERE ********************/



/* OVERVIEW PAGE START HERE ********************/

/* OVERVIEW PAGE START HERE ********************/

.inner-banner-section .bg-image-block { padding-bottom: 36.8%; background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; }

.inner-banner-section .bg-image-block::before{ content: ""; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, #030303 0%, rgba(3, 3, 3, 0.2) 46.11%, rgba(3, 3, 3, 0.8) 100%); }

.inner-banner-section .info-block { position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; align-items: self-end; align-items: end; padding-bottom: 10%;}

.inner-banner-section .info-block h1{ color: var(--color-white); line-height: 1.1; margin-bottom: 0;}



.introduction-section  .info-outer{ margin-bottom: var(--gap-50);}

.introduction-section  .info-outer .info-wraper { padding-right: 5%; }

.introduction-section .image-wraper { padding-bottom: 72%; }



.growth-section .section-title{ max-width: 935px; margin: 0 auto var(--gap-50);}

.growth-box-card{ height: 100%; transition: var(--transition-common); opacity: 0.5;}

.growth-box-card .year p { font-size: 100px; font-weight: 600; font-family: Arial, sans-serif; color: transparent; -webkit-text-stroke: 1px #002E38; line-height: 1; margin-bottom: 10px; }

.growth-box-card { padding-bottom: 50px; position: relative;}

.growth-box-card::before{ content: ""; position: absolute; z-index: 1; bottom: 0; left: 0; width: 20px; height: 20px; background: var(--color-accent);}

.growth-inner-section .border-line { height: 2px; background: #002E38; position: absolute; z-index: -1; bottom: 9px; right: 0; left: 0; }

.growth-slider .slick-list{ overflow: visible; margin: 0 -12px;}

.growth-slider .slick-track{ display: flex;}

.growth-slider .slick-slide{ padding: 0 12px; height: inherit;}

.slick-active .growth-box-card{ opacity: 1;}

.light-box-card .card-image { position: relative; padding-bottom: 100%; }

.light-box-card .card-image a { display: block; }

.light-box-card .card-image img { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

.light-box-card-col{ margin-top: 25px;}

@media only screen and (min-width: 992px){

    .light-box-card-col:nth-child(-n+3){ margin-top: 0;}

}

@media only screen and (min-width: 1200px){

    .light-box-card-col:nth-child(-n+4){ margin-top: 0;}

}



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

    .growth-box-card .year p{ font-size: 80px;}

}

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

    .growth-box-card .year p{ font-size: 60px;}

}

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

    .introduction-section  .info-outer .info-wraper { padding-right: 0; margin-bottom: 25px; }

    .light-box-card-col{ margin-top: 10px;}

    .light-box-card-col:nth-child(-n+2){ margin-top: 0;}

    .light-box-card-outer .row { margin-right: -5px; margin-left: -5px; }

    .light-box-card-outer .row>*{ padding-right: 5px; padding-left: 5px;}

}

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

    .inner-banner-section .bg-image-block{ padding-bottom: 45%;}

    .growth-box-card .year p{ font-size: 50px;}

}

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

    .inner-banner-section .bg-image-block{ padding-bottom: 60%;}

    .growth-slider { padding-right: 15%;}

}

/* OVERVIEW PAGE END HERE ********************/

/* OVERVIEW PAGE END HERE ********************/



/* MISSION PAGE START HERE ********************/

/* MISSION PAGE START HERE ********************/

.innovation-section .image-wraper { padding-bottom: 85%; }

.innovation-section .image-wraper::before{ content: ""; background: url(../images/innovation-image-design.svg); background-size: 100%; background-repeat: no-repeat; position: absolute; z-index: 1; top: 0; right: 0; width: 140px; height: 140px;}

.innovation-section .info-wraper { padding-left: 5%; }

.innovation-mission-box { padding: 24px 60px 24px 24px; background: var(--color-secondary); border-left: 5px solid var(--color-accent); position: absolute; z-index: 1; bottom: 0; left: 0; width: fit-content; }

.innovation-mission-box .icon { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 50%; margin-right: 16px; }

.innovation-mission-box h3{ margin-bottom: 0; color: var(--color-white);}

.innovation-mission-box::before { content: ""; background: url(../images/innovation-mission-design.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; width: 70px; position: absolute; bottom: -70px; right: -70px; height: 140px; }



.our-vission-section .bg-image-block{ position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: 85%;}

.our-vission-section .bg-image-block::before { content: ""; background: rgba(0, 46, 56,0.4); position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; }

.our-vission-section .bg-image-block::after { content: ""; background: url(../images/our-vission-image-design.svg); background-position: center; background-size: 100%; background-repeat: no-repeat; position: absolute; top: 0; right: 0; z-index: 2; width: 140px; height: 140px; }

.our-vission-section .our-vission-box { max-width: 570px; background: var(--color-accent); color: var(--color-white); border-bottom: 30px solid var(--color-secondary); padding: 50px; margin-left: auto; }

.our-vission-section .our-vission-box h2{ color: var(--color-white);}

.values-section .inner-wraper { max-width: 1180px; margin: 0 auto; }

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

    .innovation-section .image-wraper::before, .our-vission-section .bg-image-block::after{ width: 100px; height: 100px;}

    .innovation-mission-box::before { width: 50px; height: 100px; bottom: -50px; right: -50px; }

}

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

    .innovation-section .info-wraper { padding-left: 0; margin-bottom: 25px; }

    .innovation-mission-box .icon{ width: 50px; height: 50px;}

    .innovation-mission-box{ padding: 15px 40px 15px 20px;}

    .our-vission-section .our-vission-box{ padding: 30px; border-width: 20px;}

}

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

    .inner-banner-section .info-block{ padding-bottom: 30px;}

}

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

    .innovation-section .image-wraper::before, .our-vission-section .bg-image-block::after { width: 60px; height: 60px; }

    .innovation-mission-box::before { width: 30px; height: 60px; bottom: -30px; right: -30px; }

}

/* MISSION PAGE END HERE ********************/

/* MISSION PAGE END HERE ********************/



/* TEAM PAGE START HERE ********************/

/* TEAM PAGE START HERE ********************/

.team-section .section-title{ max-width: 1170px; margin: 0 auto}

.team-section .section-title h2{ max-width: 680px; margin: 0 auto 30px;}

.team-card .team-image { padding-bottom: 115%; }

.team-image-outer{ overflow: hidden;}

.team-card .social-link-outer { position: absolute; z-index: 3; width: fit-content; right: 0; bottom: 0; }

.team-card .social-link-outer li a { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--color-accent); color: var(--color-white); transition: var(--transition-common); }

.team-card .share-link{ position: absolute; right: 0; bottom: 0; transition: var(--transition-common);}

.team-card .team-social-link { transform: translateY(100%); transition: var(--transition-common); }

.team-card .border-solid{ width: 60px; height: 10px; background: var(--color-secondary); margin-left: auto;}



.team-card:hover .share-link{ transform: translateY(100%); }

.team-card:hover .team-social-link{ transform: none; transition-delay: 0.1s;}

.team-card .team-info-wrap { margin-top: 20px;}

.team-card .team-info-wrap .position-wrap p { margin-bottom: 10px; color: var(--color-accent); font-weight: var(--fw-medium);}

.team-card  .name-wrap h4{ margin-bottom: 0; font-size: var(--f-size-XL);}

.team-card  .name-wrap a{ color: var(--color-secondary);}

.team-modal-wraper .modal-dialog { max-width: 1305px; }

.team-modal-wraper .modal-body{ padding: var(--padding-height); isolation: isolate;}

.team-modal-wraper .modal-body::before { content: ""; background: var(--color-secondary); width: 30%; height: 100%; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; }

.team-modal-wraper .modal-body::after{ content: ""; background: url(../images/team-popup.png); background-size: cover; background-repeat: no-repeat; background-position: center; width: 90px; height: 90px; position: absolute; z-index: -1; bottom: 0; left: 0;}

.team-modal-wraper .image-wraper { padding-bottom: 105%; border: 1px solid #0000001A; }

.modal-body button.btn-close { width: 50px; height: 50px; background-color: #EDF4F5; background-size: 15px; border: 1px solid #002E384D; border-radius: 50%; opacity: 1; position: absolute; z-index: 3; top: 30px; right: 30px; }

.team-card-col{ margin-top: var(--gap-50);}

.modal-content{ border-radius: 0;}

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

    .team-card .social-link-outer li a{ width: 50px; height: 50px;}

    .team-card .border-solid{ width: 50px;}

}

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

    .team-modal-wraper .modal-body::after{ width: 60px; height: 60px;}

    .team-section .section-title h2{ max-width: 510px;}

    .modal-body button.btn-close { width: 40px; height: 40px; top: 15px; right: 15px; }

}

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

    .team-section .section-title h2{ margin-bottom: 20px;}

    .team-card-col{ margin-top: 25px;}

    .team-card .share-link{ display: none;}

    .team-card .team-social-link{ transform: none;}

    .team-card .social-link-outer li a { width: 40px; height: 40px; }

    .team-card .border-solid { width: 40px; height: 7px; }



    .team-modal-wraper .modal-body { padding: 50px 30px; }

    .modal-body button.btn-close { width: 30px; height: 30px; top: 10px; right: 10px; background-size: 12px; }

}

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

    .team-modal-wraper .modal-body { padding: 50px 15px; }

    .team-modal-wraper .modal-body::after{ width: 40px; height: 40px;}

}

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

    .team-card-outer .row{ margin-right: -5px; margin-left: -5px;}

    .team-card-col { width: 50%; padding: 0 5px; }

    .team-card .social-link-outer li a { width: 30px; height: 30px; font-size: 14px; } 

    .team-card .border-solid { width: 30px; height: 5px; }

    .team-card .team-info-wrap { margin-top: 15px; }

    .team-modal-wraper .modal-body { padding: 55px 15px 30px; }

    .team-modal-wraper .modal-body::before{ width: 100%; height: 25%;}

    .team-modal-wraper .modal-body::after{ display: none;}

    .modal-body button.btn-close { width: 25px; height: 25px; }

    .team-modal-wraper .image-wraper{ margin-bottom: 20px;}

    

}

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

    .team-card-col { width: 100%;}

}

/* TEAM PAGE END HERE ********************/

/* TEAM PAGE END HERE ********************/



/* CERTIFICATION AND ACCREDITATIONS PAGE START HERE ********************/

/* CERTIFICATION AND ACCREDITATIONS PAGE START HERE ********************/

.certifications-card-col{ margin-top: 30px;}

@media only screen and (min-width: 992px){

    .certifications-card-col:nth-child(-n+3){ margin-top: 0;}

}

@media only screen and (min-width: 1200px){

    .certifications-card-col:nth-child(-n+4){ margin-top: 0;}

}

.certifications-card{ padding: 0 20px 20px;}

.certifications-card::before{ content: ""; position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; width: 100%; height: 80%; border: 2px solid #002E381A;}

.certifications-card .certifications-image { padding-bottom: 100%; z-index: 3; }

.certifications-section .section-title { max-width: 1170px; margin: 0 auto var(--gap-50); }

.certifications-section .section-title h2{ max-width: 900px; margin-left: auto; margin-right: auto;}

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

    .certifications-card-col{ margin-top: 20px;}

    .certifications-card-col:nth-child(-n+2){ margin-top: 0;}

    .certifications-card { padding: 0 10px 10px; }

    .certifications-card::before{ height: calc(100% - 40px);}

}

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

    .certifications-card-outer .row{ margin: 0 -5px;}

    .certifications-card-col{ padding: 0 5px;}

    .certifications-card { padding: 0 6px 6px; }

    .certifications-card::before { height: calc(100% - 20px); }

    

}

/* CERTIFICATION AND ACCREDITATIONS PAGE END HERE ********************/

/* CERTIFICATION AND ACCREDITATIONS PAGE END HERE ********************/



/* FAQ PAGE START HERE ********************/

/* FAQ PAGE START HERE ********************/

.faq-wraper:not(:last-child){ margin-bottom: var(--padding-height);}

.faq-wraper .section-title{ margin-bottom: var(--gap-50);}

.faq-wraper .section-title h2 { width: fit-content; padding-right: 5%; margin-bottom: 0; padding-bottom: 25px; position: relative;}

.faq-wraper .section-title h2::before{ content: ""; width: 100%; height: 1px; background: #002E3833; position: absolute; z-index: 1; bottom: 0; left: 0;}

.faq-wraper .section-title h2::after{ content: ""; width: 50%; height: 2px; background: var(--color-accent); position: absolute; z-index: 1; bottom: 0; left: 0;}

.faq-wraper .accordion-item{ border: 0; border-radius: 0;}

.faq-wraper .accordion-item:not(:last-child){ margin-bottom: 25px;}

.faq-wraper .accordion-button { background: #DBECF0; border: 0; border-left: 5px solid var(--color-accent); border-radius: 0 !important; box-shadow: none; padding: 22px 55px 22px 90px; font-size: var(--f-size-XL); color: var(--color-secondary); font-weight: var(--fw-medium);}

.accordion-button::after { background: url(../images/drop-down-arrow.svg) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 16px !important; position: absolute; top: 25px; right: 20px; }

.faq-wraper .accordion-button .number { display: inline-flex; align-items: center; justify-content: center; width: 75px; flex: 0 0 auto; background: var(--color-secondary); color: var(--color-white); position: absolute; top: 0; bottom: 0; left: 0; }

.faq-wraper .accordion-body { background: #EDF4F5; padding: 25px; box-shadow: 0px 4px 20px 0px #0000000F; }

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

    .faq-wraper .accordion-button{ padding: 18px 55px 18px 80px;}

    .accordion-button::after{ top: 20px;}

    .faq-wraper .accordion-button .number{ width: 60px;}

}

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

    .faq-wraper .section-title h2{ padding-bottom: 15px;}

    .faq-wraper .accordion-button { padding: 12px 40px 12px 60px; border-width: 3px; }

    .accordion-button::after { top: 15px; right: 10px; background-size: 13px !important; }

    .faq-wraper .accordion-button .number { width: 50px;}

    .faq-wraper .accordion-body{ padding: 15px;}

}

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

    .faq-wraper:not(:last-child){ margin-bottom: 35px;}

}

/* FAQ PAGE END HERE ********************/

/* FAQ PAGE END HERE ********************/



/* RESOURCES PAGE START HERE ********************/

/* RESOURCES PAGE START HERE ********************/

.brochures-catalogs-section{ padding-top: clamp(30px, 4.76563vw, 70px); padding-bottom: clamp(30px, 4.76563vw, 70px);}

.brochures-catalogs-section:nth-child(odd){ background: var(--color-quaternary);}

.brochures-catalogs-section .section-tite{ max-width: 1175px; margin: 0 auto var(--gap-50);}

.brochures-outer .row{ justify-content: center;}

.brochures-card-box { padding: 30px 20px 20px; background: #DBECF0; border: 1px solid #002E381A; height: 100%; }

.brochures-card-box .pdf-icon { height: 50px; width: fit-content; margin: 0 auto 20px; }

.brochures-card-box .pdf-icon img{ display: block; width: auto; height: 100%;}

.brochures-card-box h5{ font-size: var(--f-size-M); font-weight: var(--fw-medium);}

.brochures-card-box .download-area-row { padding-top: 20px; border-top: 1px solid #002E381A; }

.brochures-card-box .download-btn-wrap{ height: 20px;}

.brochures-card-box .download-btn-wrap *{ display: block; height: 100%; width: auto;}

.brochures-col{ margin-top: 25px;}

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

    .brochures-col:nth-child(-n+3){ margin-top: 0;}

}

@media only screen and (min-width: 992px){

    .brochures-col:nth-child(-n+4){ margin-top: 0;}

}

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

    .brochures-col:nth-child(-n+6){ margin-top: 0;}

}



.technical-specifications-section .section-tite{ margin: 0 0 var(--gap-50);}

.technical-specifications-section .section-tite h2{ margin-bottom: 0;}

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

    .brochures-card-box{ padding: 20px 15px;}

}

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

    .technical-specifications-section .section-tite{ text-align: center;}

    .technical-specifications-section .section-tite h2{ margin-bottom: 20px;}

}

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

    .brochures-outer .row{ margin: 0 -5px;}

    .brochures-outer .row>*{ padding-right: 5px; padding-left: 5px;}

    .brochures-col { margin-top: 10px; }

    .brochures-col:nth-child(-n+2){ margin-top: 0;}

    .brochures-card-box .pdf-icon{ height: 40px;}

    .brochures-card-box .download-btn-wrap { height: 16px; }

}

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

    .brochures-card-box { padding: 15px 10px; }

    .brochures-card-box h5{ margin-bottom: 15px;}

    .brochures-card-box .download-area-row{ padding-top: 15px;}

}

/* RESOURCES PAGE END HERE ********************/

/* RESOURCES PAGE END HERE ********************/



/* COMMERCIAL PREEFABS PAGE START HERE ********************/

/* COMMERCIAL PREEFABS PAGE START HERE ********************/

.prefab-building-section .image-wraper img{ width: 100%;}

.prefab-building-section .info-wraper { padding-left: 10%; }



.smart-commercial-prefab-section .info-wraper { padding-right: 15%;}

.title-box-card .image-wraper{ padding-bottom: 110%;}

.title-box-card .title-outer { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; padding: 20px; }

.title-box-card .title{ background: var(--color-white); padding: 25px; position: relative; border-left: 5px solid var(--color-accent);}

.title-box-card .title h4{ margin-bottom: 0; font-size: var(--f-size-XL);}

.title-box-slider .slick-list { margin: 0 -12px;}

.title-box-slider .slick-slide{ padding: 0 12px;}

.industrial-buildings-slider-sec .title-box-card .title-outer{ position: absolute; z-index: 2; top: 60%; right: 0; left: 0; background: var(--color-white); padding: 24px; border-top: 5px solid var(--color-accent); height: 100%; transition: var(--transition-common);}
.industrial-buildings-slider-sec .title-box-card .title-outer .title { padding: 0; background: transparent; border: 0; }
.industrial-buildings-slider-sec .title-box-card h4{ margin-bottom: 20px;}
.industrial-buildings-slider-sec .title-box-card:hover .title-outer{ background: rgba(0, 0, 0, 0.85); top: 0; overflow: auto;}
.industrial-buildings-slider-sec .title-box-card:hover *{ color: var(--color-white);}
.industrial-buildings-slider-sec .title-box-card li { position: relative; padding-left: 22px; }
.industrial-buildings-slider-sec .title-box-card li:not(:last-child){ margin-bottom: 8px;}
.industrial-buildings-slider-sec .title-box-card li::before{ content: ""; position: absolute; top: 5px; left: 0; background: url(../images/bullet-daimond.svg) top left no-repeat; background-size: 100%; width: 14px; height: 14px;} 

.prefab-service-testimonial-section .prefab-testimonial-carousel .item .inner-wrapper{ background: var(--color-white);}
@media only screen and (max-width: 1399px){
    .industrial-buildings-slider-sec .title-box-card .title-outer{ padding: 15px 10px;}
}
@media only screen and (max-width: 1199px){

    .prefab-building-section .info-wraper { padding-left: 20px; }

    .smart-commercial-prefab-section .info-wraper{ padding-right: 20px;}

    .title-box-card .title-outer{ padding: 15px;}

    .title-box-card .title{ padding: 15px;}

}

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

    .prefab-building-section .info-wraper { padding-left: 0; margin-bottom: 25px; }

    .smart-commercial-prefab-section .info-wraper { padding-right: 0; margin-bottom: 25px; }

}

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

    .title-box-slider .slick-list { margin: 0 -5px;}

    .title-box-slider .slick-slide{ padding: 0 5px;}

    .title-box-card .title-outer { padding: 10px 5px; }

    .title-box-card .title { padding: 10px 5px; border-width: 4px; }

}



/* COMMERCIAL PREEFABS PAGE END HERE ********************/

/* COMMERCIAL PREEFABS PAGE END HERE ********************/





/* TECHNOLOGY & INNOVATION PAGE START HERE ********************/

/* TECHNOLOGY & INNOVATION PAGE START HERE ********************/

.advanced-manufacturing-section::before { content: ""; position: absolute; z-index: 2; bottom: -70px; left: 10%; background: url(../images/advanced-manufacturing-section-box-design.svg); background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; width: 70px; height: 140px; }

.advanced-manufacturing-section .image-wraper { position: absolute; width: 63%; right: 55%; bottom: 0; }

.advanced-manufacturing-section .image-wraper img{ width: 100%;}

.advanced-manufacturing-section .info-wraper { padding-left: 10%; }

.advanced-manufacturing-section .info-wraper h4{ font-size: var(--f-size-XL);}

.point-list ul li{ display: flex; align-items: center; font-weight: var(--fw-medium); color: var(--color-secondary); line-height: 1;}

.point-list ul li::before{ content: ""; flex: 0 0 auto; width: 12px; height: 12px; background: var(--color-accent); margin: 0 16px 0 0;}

.point-list ul li:not(:last-child){ margin-bottom: 15px;}



.bim-integration-section::before { content: ""; background: rgba(0, 46, 56,0.94); position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; }

.bim-integration-section .inner-row *{ color: var(--color-white);}

.bim-integration-section .inner-row .description-wraper{ display: flex; flex-wrap: wrap; margin: 0 -30px;}

.bim-integration-section .inner-row .description-wraper .item{ width: 50%; padding: 0 30px; margin-top: 20px;}



.materials-we-use-section .section-title{ margin-bottom: var(--gap-50);}

.materials-we-use-section .section-title h2{ margin-bottom: 0;}

.title-box-card-col{ margin-top: 25px;}

@media only screen and (min-width: 1200px){

    .title-box-card-col:nth-child(-n+4){ margin-top: 0;}

}

.eco-friendly-section .title-holder{ max-width: 100%;}

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

    .advanced-manufacturing-section .image-wraper {width: 55%; right: 50%;}

    .advanced-manufacturing-section::before{ width: 50px; height: 100px; bottom: -50px;}

}

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

    .bim-integration-section .inner-row .description-wraper{ margin: 0 -12px;}

    .bim-integration-section .inner-row .description-wraper .item{ padding: 0 12px;}

}

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

    .advanced-manufacturing-section .info-wraper{ padding: 0; margin-bottom: 25px;}

    .advanced-manufacturing-section .image-wraper { position: static; width: 100%; }

    .title-box-card-col:nth-child(-n+2){ margin-top: 0;}

}

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

    .bim-integration-section .inner-row .description-wraper .item{ width: 100%;}

}

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

    .title-box-card-col{ margin-top: 10px;}

}

/* TECHNOLOGY & INNOVATION PAGE END HERE ********************/

/* TECHNOLOGY & INNOVATION PAGE END HERE ********************/



/* PROJECT PAGE START HERE ********************/

/* PROJECT PAGE START HERE ********************/

.case-studies-section  .section-title{ margin-bottom: var(--gap-40);}

.case-studies-section  .slick-arrow::before, .case-studies-section  .slick-arrow::after{ display: none;}

.case-studies-section .product-carousel .slick-arrow{ background-color: var(--color-white); background-position: center !important; background-size: 10px !important; background-repeat: no-repeat !important; border: 1px solid var(--color-secondary); width: 45px; height: 45px; z-index: 5; transition: var(--transition-common);}

.case-studies-section .product-carousel .slick-prev{ left: -70px; background-image: url(../images/curved-prev-arrow.svg);}

.case-studies-section .product-carousel .slick-next { right: -70px; background-image: url(../images/curved-next-arrow.svg);}

.case-studies-section .product-carousel .slick-arrow:hover{ background-color: var(--color-accent); border-color: var(--color-accent);}

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

    .case-studies-section .product-carousel .slick-prev{ left: -35px;}

    .case-studies-section .product-carousel .slick-next { right: -35px;}

}

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

    .case-studies-section .product-carousel .slick-arrow{ width: 38px; height: 38px; background-size: 8px !important;}

    .case-studies-section .product-carousel .slick-prev{ left: -20px;}

    .case-studies-section .product-carousel .slick-next { right: -20px;}

}

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

    .case-studies-section  .slider-outer { padding: 0 15px; }

}

/* PROJECT PAGE END HERE ********************/

/* PROJECT PAGE END HERE ********************/



/* CASE STUDIES DETAILS PAGE START HERE ********************/

/* CASE STUDIES DETAILS PAGE START HERE ********************/

.case-studies-details  .iamge-wraper{ padding-bottom: 42%;}

.case-studies-details  .details-box { padding: 50px; background: var(--color-secondary); border-bottom: 10px solid var(--color-accent); max-width: 90%; margin: -5% auto var(--gap-50); position: relative; z-index: 1; }

.case-studies-details  .details-box  ul{ display: flex; flex-wrap: wrap; margin: 0 -10px;}

.case-studies-details  .details-box li{ width: 33.33%; padding: 0 10px; margin-top: 20px;}

.case-studies-details .details-box p{ color: #ADCAD1; margin-bottom: 15px;}

.case-studies-details .details-box h4{ color: var(--color-white); font-size: var(--f-size-XL); margin-bottom: 0;}

@media only screen and (min-width: 480px){

    .case-studies-details  .details-box li:nth-child(-n+2){ margin-top: 0;}

}

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

    .case-studies-details  .details-box li:nth-child(-n+3){ margin-top: 0;}

}

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

    .case-studies-details .details-box{ padding: 30px;}

}

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

    .case-studies-details .details-box{ padding: 20px;}

}

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

    .case-studies-details .details-box { padding: 20px 15px; max-width: calc(100% - 30px); }

    .case-studies-details  .details-box  ul{ flex-wrap: wrap;}

    .case-studies-details  .details-box li{ width: 50%;}

}

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

    .case-studies-details  .iamge-wraper { padding-bottom: 50%; }

    .case-studies-details .details-box{ margin-top: -40px;}

    .case-studies-details  .details-box li{ width: 100%;}

    .case-studies-details  .details-box li:first-child{ margin-top: 0;}

}

/* CASE STUDIES DETAILS PAGE END HERE ********************/

/* CASE STUDIES DETAILS PAGE END HERE ********************/



/* INDUSTRIES SERVED PAGE START HERE ********************/

/* INDUSTRIES SERVED PAGE START HERE ********************/

.services-item-section .services-item-box{ position: relative;}

.services-item-section .services-item-box .container{ position: relative; z-index: 3;}

.services-item-box .image-wraper { padding-bottom: 72%; }

.services-item-box .image-wraper::before{ content: ""; background-size: 100% !important; background-repeat: no-repeat !important; background-position: center !important; position: absolute; z-index: 1; top: 0; width: 140px; height: 140px;}





.services-item-section .services-item-box:nth-child(odd){ background: #EDF4F5;}

.services-item-section .services-item-box:nth-child(odd)::before { content: ""; background: url(../images/services-item-box-bottom-bg.svg); background-size: 100%; background-repeat: no-repeat; background-position: center; position: absolute; z-index: 1; bottom: 0; left: 0; width: 140px; height: 140px; }

.services-item-section .services-item-box:nth-child(odd) .row{ flex-direction: row-reverse;}

.services-item-section .services-item-box:nth-child(odd) .info-wraper { padding-left: 10%; }

.services-item-section .services-item-box:nth-child(odd) .image-wraper::before{ background: url(../images/services-item-box-image-top-left.svg); left: 0;}

.services-item-section .services-item-box:nth-child(even) .image-wraper::before{ background: url(../images/services-item-box-image-top-right.svg); right: 0;}

.services-item-section .services-item-box:nth-child(even) .info-wraper { padding-right: 10%; }

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

    .services-item-section .services-item-box:nth-child(odd)::before, .services-item-box .image-wraper::before{ width: 100px; height: 100px;}

    .services-item-section .services-item-box:nth-child(odd) .info-wraper { padding-left: 5%; }

    .services-item-section .services-item-box:nth-child(even) .info-wraper { padding-right: 5%; }

}

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

    .services-item-section .services-item-box:nth-child(odd) .info-wraper { padding-left: 0; }

    .services-item-section .services-item-box:nth-child(even) .info-wraper { padding-right: 0; }

}

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

    .services-item-section .services-item-box:nth-child(odd)::before, .services-item-box .image-wraper::before{ width: 60px; height: 60px;}

    .services-item-section .services-item-box .info-wraper { margin-bottom: 25px;}



}

/* INDUSTRIES SERVED PAGE END HERE ********************/

/* INDUSTRIES SERVED PAGE END HERE ********************/



/* BLOG PAGE START HERE ********************/

/* BLOG PAGE START HERE ********************/

.blog-section .section-title{ margin-bottom: var(--gap-40);}

.blog-section .blog-showcasing .item{ margin-top: 25px;}

.blog-section .blog-showcasing .button-wrap{ margin-top: var(--gap-50);}



.blog-details .image-outer { margin-bottom: var(--gap-40);}

.blog-details .image-bottom-gap{ padding-bottom: var(--gap-40);}

.blog-details .image-wraper { padding-bottom: 42%;}

.blog-details .date-outer { position: absolute; z-index: 3; bottom: 0; left: 0; width: 150px; height: 150px; background: var(--color-secondary);}

.blog-details .date-outer .day { display: flex; align-items: center; justify-content: center; height: 110px; padding: 5px; background: var(--color-accent); border: 2px solid var(--color-white); font-size: var(--f-size-XXL); color: var(--color-secondary); font-weight: var(--fw-medium); }

.blog-details .date-outer .year{ display: flex; align-items: center; justify-content: center; height: 40px; color: var(--color-white);}

.blog-details .info-wraper p:not(:last-child){ margin-bottom: 20px;}

.blog-details .info-wraper h4{ font-size: var(--f-size-XL); margin: 30px 0 15px;}

.blog-details img{ display: block;}

.blog-details .aligncenter{ margin: 0 auto;}

.blog-details ul { list-style: disc; list-style-position: inside; }

.blog-details ul li{ position: relative; display: list-item; color: var(--color-primary); line-height: 1.5; font-weight: var(--fw-regular);}

.blog-details li{ margin-bottom: 20px !important;}

.blog-details ul li::before { display: none; position: absolute; top: 2px; left: 0; }

.blog-details ol { padding: 0; list-style-position: inside; }



blockquote{ position: relative; background: var(--color-secondary); padding: 80px; color: var(--color-white); margin: var(--gap-50) 0; isolation: isolate;}

blockquote::before { content: ""; background: url(../images/quote.svg); background-position: center; background-repeat: no-repeat; background-size: 100%; width: 85px; height: 72px; position: absolute; z-index: -1; top: 45px; left: 45px; }

blockquote::after{ content: ""; background: url(../images/quote-design.svg); background-repeat: no-repeat; background-position: center; background-size: cover; width: 65px; height: 65px; position: absolute; z-index: -1; bottom: 0; left: 0;}

blockquote p{ font-size: var(--f-size-XL);}

blockquote p:last-child{ margin-bottom: 0;}

@media only screen and (min-width: 992px){

    .blog-section .blog-showcasing .item:nth-child(-n+2){ margin-top: 0;}

}

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

    blockquote{ padding: 50px;}

    blockquote::before { width: 60px; height: 45px; top: 25px; left: 25px; }

    blockquote::after{ width: 45px; height: 45px;}

}

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

    .blog-details .image-bottom-gap{ padding-bottom: 30px;}

    .blog-details .date-outer{ width: 110px; height: 110px;}

    .blog-details .date-outer .day{ height: 80px;}

    .blog-details .date-outer .year{ height: 30px;}

}

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

    .blog-section .blog-showcasing .item:first-child{ margin-top: 0;}

    blockquote { padding: 35px 20px; }

    blockquote::before { width: 40px; height: 30px; top: 15px; left: 15px; }

    blockquote::after { width: 30px; height: 30px; }

}

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

    .blog-details .image-wraper { padding-bottom: 50%; }

    .blog-details .image-bottom-gap { padding-bottom: 25px; }

    .blog-details .date-outer { width: 80px; height: 80px; }

    .blog-details .date-outer .day { height: 55px; }

    .blog-details .date-outer .year { height: 25px; font-size: 13px;}

}

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

    .blog-details .image-wraper { padding-bottom: 60%; }

    blockquote { padding: 30px 15px; }

}

/* BLOG PAGE END HERE ********************/

/* BLOG PAGE END HERE ********************/



/* CAREERS PAGE START HERE ********************/

/* CAREERS PAGE START HERE ********************/

body.modal-open.swal2-shown .modal-backdrop.fade.show { z-index: 1060; opacity: 0.7; }

.careers-item-row { background: #DBECF0; padding: 25px; }

.careers-item-row .careers-details{ flex: 1 1 auto; border-right: 1px solid #002E3833; padding-right: 55px;}

.careers-item-row h4{ font-size: var(--f-size-XL); margin-bottom: 15px;}

.careers-item-row .careers-details ul{ display: flex; flex-wrap: wrap;}

.careers-item-row .careers-details li{ display: flex; align-items: center; color: var(--color-secondary); font-weight: var(--fw-medium); line-height: 1;}

.careers-item-row .careers-details li img{ display: block; height: 22px; margin-right: 10px;}

.careers-item-row .careers-details li:not(:last-child){ margin-right: 20px;}

.careers-item-row .careers-button { flex: 0 0 auto; padding-left: 55px;}

.apply-btn{ display: flex; align-items: center; justify-content: center; padding: 15px 40px; border: 2px solid #002E38; color: var(--color-secondary); font-weight: var(--fw-bold); transition: var(--transition-common);}

.apply-btn::after { content: ""; background: url(../images/dark-arrow.svg); background-repeat: no-repeat !important; background-position: center !important; background-size: 16px !important; display: block; width: 24px; height: 24px; margin-left: 10px; transform: rotate(-45deg); transition: var(--transition-common); }

.apply-btn:hover{ background: var(--color-accent); border-color: var(--color-accent); color: var(--color-secondary);}

.apply-btn:hover::after{ transform: none;}



body.modal-open { height: 100vh; overflow: hidden; }

.modal { padding-right: 0 !important;}

.careers-modal .modal-dialog { max-width: 1300px; width: calc(100% - 20px);}

.careers-modal .modal-body{ padding: 0;}

.careers-modal .image-wraper-outer { height: 100%; padding: 50px; background: var(--color-secondary); position: relative; isolation: isolate;}

.careers-modal .image-wraper-outer::before{ content: ""; background: url(../images/careers-modal-design.png); background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; position: absolute; z-index: -1; top: 0; right: 0; width: 50px; height: 50px;}

.careers-modal .image-wraper-outer::after{ content: ""; background: url(../images/careers-modal-design.png); background-repeat: no-repeat !important; background-position: center !important; background-size: cover !important; position: absolute; z-index: -1; bottom: 0; left: 0; width: 50px; height: 50px;}

.careers-modal .image-wraper { height: 100%; }



.careers-modal .modal-form-outer{ padding: 50px 50px 50px 25px;}

.careers-modal .modal-form-outer .form-row { margin-bottom: 24px; }

.file-label{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 105px;}

.careers-modal .modal-form-outer .form-control img { display: block; height: 22px; margin-bottom: 5px; }

.careers-modal .modal-form-outer input[type="file"]{ position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; font-size: 0; opacity: 0; cursor: pointer;}

input[type="submit"]{ width: 100%; transition: var(--transition-common);}

input[type="submit"]:hover{ background: var(--color-secondary); border-color: var(--color-secondary);}



.swal2-actions button.swal2-styled{ background: var(--color-accent) !important; transition: var(--transition-common);}

.swal2-actions button.swal2-styled:hover{ background: var(--color-secondary) !important;}



.file-name-show-box { margin-bottom: 15px; }

.file-name-show-box p { display: flex; align-items: center; line-height: 1; gap: 8px; }

.file-name-show-box .remove-file { display: block; height: 15px; }

.careers-section{ padding-top: clamp(40px, 5.76563vw, 70px); padding-bottom: clamp(40px, 5.76563vw, 70px);}

.careers-section .top-wraper { margin-bottom: var(--gap-40); }

.careers-section .top-wraper a{ color: var(--color-secondary); text-decoration: underline;}

.careers-section .top-wraper a:hover{ color: var(--color-accent);}

.careers-item-row:not(:last-child){ margin-bottom: 25px;}

.careers-section .button-row{ margin-top: var(--gap-50);}

.careers-section .button-row:has([style="display: none;"]){ display: none;}





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

    .careers-modal .image-wraper-outer{ padding: 35px;}

    .careers-modal .image-wraper-outer::before, .careers-modal .image-wraper-outer::after{ width: 35px; height: 35px;}

    .careers-modal .modal-form-outer { padding: 35px 35px 35px 15px; }

    .modal-body button.btn-close{ width: 40px; height: 40px; top: 15px; right: 15px;}

    .careers-item-row .careers-details{ padding-right: 30px;}

    .careers-item-row .careers-button{ padding-left: 30px;}

}

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

    .careers-item-row{ padding: 20px;}

    .apply-btn{ padding: 12px 22px;}

    .apply-btn::after{ width: 18px; height: 18px; background-size: 14px !important;}

}

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

    .careers-item-row .inner-row{ flex-wrap: wrap;}

    .careers-item-row .careers-details{ width: 100%; padding: 0 0 20px; margin-bottom: 20px; border-right: 0; border-bottom: 1px solid #002E3833;}

    .careers-item-row .careers-button { padding-left: 0; }

    .careers-modal .image-wraper{ padding-bottom: 50%;}

    .careers-modal .image-wraper-outer::before{ right: auto; left: 0;}

    .careers-modal .image-wraper-outer::after{ left: auto; right: 0;}

    .careers-modal .image-wraper-outer, .careers-modal .modal-form-outer{ padding: 25px;}

}

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

    .careers-item-row { padding: 15px; }

    .careers-item-row .careers-details li{ width: 100%; margin-right: 0;}

    .careers-item-row .careers-details li:not(:last-child){ margin-bottom: 12px;}

    .careers-item-row .careers-details li img { height: 18px; margin-right: 8px; }



    .careers-modal .image-wraper-outer, .careers-modal .modal-form-outer{ padding: 15px;}

    .modal-body button.btn-close { width: 35px; height: 35px; top: 10px; right: 10px; }

}

/* CAREERS PAGE END HERE ********************/

/* CAREERS PAGE END HERE ********************/



/* CONTACT PAGE START HERE ********************/

/* CONTACT PAGE START HERE ********************/

.get-in-touch-section .section-title{ margin-bottom: var(--gap-50);}

.get-in-touch-box-card{ position: relative; padding: 50px; border: 1px solid #002E384D; height: 100%; isolation: isolate;}

.get-in-touch-box-card::before { content: ""; position: absolute; right: -18px; bottom: 25px; width: 60px; height: 110px; background: #DBECF0; transform: skew(-30deg, 0deg); transform-origin: 0 0; }

.get-in-touch-box-card .icon{ height: 55px; margin-bottom: 30px;}

.get-in-touch-box-card .icon img{ display: block; width: auto; height: 100%;}

.get-in-touch-box-card h3{ margin-bottom: 10px;}

.get-in-touch-box-card a{ color: var(--color-primary);}

.get-in-touch-box-card a:hover{ color: var(--color-accent);}



.contact-section .contact-form { padding-right: 10%; }

.wpcf7-not-valid{ border-color: #dc3232 !important;}

.wpcf7-not-valid-tip{ display: none;}

.wpcf7-response-output { margin: 25px 0 0 !important; padding: 5px 10px !important; text-align: center; line-height: 1.1; }

form .button-row{ position: relative;}

.wpcf7-spinner { position: absolute; bottom: -28px; right: 0; left: 0; margin: 0 auto; }

.map-wraper { position: relative; border: 1px solid #0000001A; border-radius: 10px; overflow: hidden; padding-bottom: 85%; }

.map-wraper iframe { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }

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

    .get-in-touch-box-card{ padding: 35px;}

    .get-in-touch-box-card .icon{ height: 40px;}

    .contact-section .contact-form { padding-right: 5%; }

}

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

    .get-in-touch-box-card { padding: 20px; }

    .get-in-touch-box-card::before { width: 40px; height: 80px; bottom: -15px; }

    .contact-section .contact-form { padding-right: 0; }

}

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

    .get-in-touch-box-col:not(:last-child){ margin-bottom: 25px;}

    .get-in-touch-box-card .icon{ margin-bottom: 20px;}

    .contact-section .contact-form{ margin-bottom: 30px;}

}

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

    .get-in-touch-box-card { padding: 15px; }

    .get-in-touch-box-card::before { width: 35px; height: 70px; bottom: -10px; right: -10px; }

    .get-in-touch-box-card .icon { height: 30px; }

}





/* star */

[data-star] { text-align: left; font-style: normal; display: inline-block; position: relative; unicode-bidi: bidi-override; font-size: var(--f-size-M); letter-spacing: 3px; color: var(--color-accent); }

[data-star]::before { display:block; content: '★★★★★'; color: transparent; /* Make the text fill transparent */ -webkit-text-stroke: 1px var(--color-accent); /* Outline the text with desired color */ }

[data-star]::after { white-space:nowrap; position:absolute; top:0; left:0; content: '★★★★★'; width: 0; color: var(--color-accent); overflow:hidden; height:100%; }



  [data-star^="0.1"]::after{width:2%}

  [data-star^="0.2"]::after{width:4%}

  [data-star^="0.3"]::after{width:6%}

  [data-star^="0.4"]::after{width:8%}

  [data-star^="0.5"]::after{width:10%}

  [data-star^="0.6"]::after{width:12%}

  [data-star^="0.7"]::after{width:14%}

  [data-star^="0.8"]::after{width:16%}

  [data-star^="0.9"]::after{width:18%}

  [data-star^="1"]::after{width:20%}

  [data-star^="1.1"]::after{width:22%}

  [data-star^="1.2"]::after{width:24%}

  [data-star^="1.3"]::after{width:26%}

  [data-star^="1.4"]::after{width:28%}

  [data-star^="1.5"]::after{width:30%}

  [data-star^="1.6"]::after{width:32%}

  [data-star^="1.7"]::after{width:34%}

  [data-star^="1.8"]::after{width:36%}

  [data-star^="1.9"]::after{width:38%}

  [data-star^="2"]::after{width:40%}

  [data-star^="2.1"]::after{width:42%}

  [data-star^="2.2"]::after{width:44%}

  [data-star^="2.3"]::after{width:46%}

  [data-star^="2.4"]::after{width:48%}

  [data-star^="2.5"]::after{width:50%}

  [data-star^="2.6"]::after{width:52%}

  [data-star^="2.7"]::after{width:54%}

  [data-star^="2.8"]::after{width:56%}

  [data-star^="2.9"]::after{width:58%}

  [data-star^="3"]::after{width:60%}

  [data-star^="3.1"]::after{width:62%}

  [data-star^="3.2"]::after{width:64%}

  [data-star^="3.3"]::after{width:66%}

  [data-star^="3.4"]::after{width:68%}

  [data-star^="3.5"]::after{width:70%}

  [data-star^="3.6"]::after{width:72%}

  [data-star^="3.7"]::after{width:74%}

  [data-star^="3.8"]::after{width:76%}

  [data-star^="3.9"]::after{width:78%}

  [data-star^="4"]::after{width:80%}

  [data-star^="4.1"]::after{width:82%}

  [data-star^="4.2"]::after{width:84%}

  [data-star^="4.3"]::after{width:86%}

  [data-star^="4.4"]::after{width:88%}

  [data-star^="4.5"]::after{width:90%}

  [data-star^="4.6"]::after{width:92%}

  [data-star^="4.7"]::after{width:94%}

  [data-star^="4.8"]::after{width:96%}

  [data-star^="4.9"]::after{width:98%}

  [data-star^="5"]::after{width:100%}

/* star */



.default-section{ min-height: 320px;}


.popup-inner ul {margin: 20px;}
.popup-inner ul li {list-style: disc;}
.extra-content {padding-top: 80px;}
.slick-prev:before, .slick-next:before {color: #000;}
.introduction-section ul {list-style: disc; margin-left: 30px;}
.prefab-testimonial-carousel ul.slick-dots {bottom: -60px;}
.project-section .extra-content ul {list-style: disc; margin-left: 30px;}