/*----------------- Font -----------------*/
@font-face {
  font-family: 'LightFont';
  src: url('font/HelveticaNeueLight.ttf')  format('truetype');
}
.light-font,.light-fontall *{
  font-family: 'LightFont', Fallback, sans-serif;
}
@font-face {
  font-family: 'ThinFont';
  src: url('font/HelveticaNeueThin.ttf')  format('truetype');
}
.thin-font,.thin-fontall *{
  font-family: 'ThinFont', Fallback, sans-serif;
}
@font-face {
  font-family: 'RegularFont';
  src: url('font/Lora-Regular.ttf')  format('truetype');
}
.regular-font,.regular-fontall *{
  font-family: 'RegularFont', Fallback, sans-serif;
}
@font-face {
  font-family: 'MediumFont';
  src: url('font/Lora-Medium.ttf')  format('truetype');
}
.medium-font,.medium-fontall *{
  font-family: 'MediumFont', Fallback, sans-serif;
}
@font-face {
  font-family: 'BoldFont';
  src: url('font/Lora-Bold.ttf')  format('truetype');
}
.bold-font,.bold-fontall *{
  font-family: 'BoldFont', Fallback, sans-serif;
}

@font-face {
  font-family: 'LightFont2';
  src: url('font/Poppins-Light.ttf')  format('truetype');
}
.light-font2,.light-fontall2 *{
  font-family: 'LightFont2', Fallback, sans-serif;
}
@font-face {
  font-family: 'ThinFont2';
  src: url('font/HelveticaNeueThin.ttf')  format('truetype');
}
.thin-font2,.thin-fontall2 *{
  font-family: 'ThinFont2', Fallback, sans-serif;
}
@font-face {
  font-family: 'RegularFont2';
  src: url('font/Poppins-Regular.ttf')  format('truetype');
}
.regular-font2,.regular-fontall2 *{
  font-family: 'RegularFont2', Fallback, sans-serif;
}
@font-face {
  font-family: 'MediumFont2';
  src: url('font/Poppins-Medium.ttf')  format('truetype');
}
.medium-font2,.medium-fontall2 *{
  font-family: 'MediumFont2', Fallback, sans-serif;
}
@font-face {
  font-family: 'BoldFont2';
  src: url('font/Poppins-Bold.ttf')  format('truetype');
}
.bold-font2,.bold-fontall2 *{
  font-family: 'BoldFont2', Fallback, sans-serif;
}

/*----------------- Font -----------------*/

/*----------------- Navbar -----------------*/
.home-navbar.fixed-top{
  position: absolute !important;
}

.home-navbar .logo{
  max-width: 180px;
}
.home-navbar.fixed-top .logo{
  filter: brightness(0) invert(1);
}
.home-navbar{margin-top: 15px;}
.home-navbar .navbar-nav li{
  margin: 0 5px;
}
.home-navbar .navbar-nav>.nav-item>a{
  color: black;
  padding: 3px 25px !important;
}
.home-navbar.fixed-top .navbar-nav>.nav-item>a{
  color: #fff7e1;
}
.home-navbar .navbar-nav li:last-child a{
  color: black;
}
.home-navbar.fixed-top .navbar-nav li:last-child a{
  color: black;
  background-color: #fffdeb;
  border-radius: 100px;
}
.home-navbar .navbar-nav li:last-child a{
  color: white;
  background-color: #3b2314;
  border-radius: 100px;
}

/*----------------- Navbar -----------------*/

/*----------------- Banner -----------------*/
#slideShow .overlay-text{
  letter-spacing: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}
#slideShow .btn-cta{
  background-color: white;
  color: black;
  border-radius: 100px;
  padding: 5px 20px;
}
/*----------------- Banner -----------------*/

/*----------------- Product -----------------*/
.prodInfo .ext-color {
    display: none;
}
.prodInfo .list-inline input:checked + label{
  color: white !important;
  background-color: black !important;
}
.prodInfo .ext-colorpicker2{
  border-radius: 100px;
    margin-right: 2px;
    border: 1px solid grey !important;
    margin-bottom: 10px !important;
    padding: 2px 15px;
}
/*----------------- Product -----------------*/

/*----------------- Common Section -----------------*/
.btn-whatsapp{
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:42px;
  box-shadow: 2px 2px 3px #999;
  z-index:100;
}
.haboutus .subtitle,.haboutus2 .subtitle{
  color: #8c8e90 !important;
}
.haboutus .img-section h4{
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 80%;
}
.haboutus .img-section img{
  transition: 0.5s;
}
.haboutus .img-section img:hover{
  transform: scale(1.01);
}

.hproject .input-group input, .hproject .input-group .btn,.hportfolio .input-group input, .hportfolio .input-group .btn{
  border-radius: 100px;
}

.hproject .clientSwiper img{
  text-align: center;
  height: 48px;
  object-fit: contain;
}
.hstart .btn{
  background-color: white !important;
  color: black;
  border-radius: 100px;
}
.hstart h3{
  color: #faefea !important; 
  letter-spacing: 2px; 
}
/*----------------- Common Section -----------------*/

/*----------------- Footer Section -----------------*/
#footer{
  background-color: #ab9c88;
}
#footer .logo{
  max-width: 220px;
  filter: brightness(0) invert(1);
}
#footer *{color: #fff7e1 !important}
#footer .grey-text{color: #a7a9ac !important;}
#footer .copyright{font-size: small !important;}
/*----------------- Footer Section -----------------*/

/*----------------- Less Than -----------------*/
@media only screen and (max-width: 1200px){ /* col-xl */

}
@media only screen and (max-width: 992px){ /* col-lg */
  .home-navbar{
    margin-top: 10px;
  }
  .home-navbar,.home-navbar.fixed-top{
    position: relative !important;
    flex-wrap: wrap;
  }
  .home-navbar .logo{
    filter: brightness(0) invert(0) !important;
    max-width: 160px !important;
  }  

  .home-navbar .navbar-nav>.nav-item>a{
    color: black !important;
    text-align: center !important;
    margin-top: 5px;
    font-size: 14px !important;
  }
  .home-navbar .navbar-nav li:last-child a{
    color: white !important;
    background-color: black;
    border-radius: 100px;
  }  
  .navbar-expand-sm .navbar-collapse{
    justify-content: space-evenly;
  }
  .hwhy .icon{
    height: 80px;
  }
  #slideShow .overlay-text{
    width: 90%;
  }
  #slideShow .overlay-text .btn-cta{
    font-size: 15px !important;
  }
  #hcta .line{
    width: 300px;
  }  
}
@media only screen and (max-width: 768px){ /* col-md */
}
@media only screen and (max-width: 576px){ /* col-sm */
.btn-whatsapp{
    width: 46px;
    height: 46px;
    bottom: 30px;
    right: 20px;
    font-size: 32px;
}
.home-navbar.fixed-top{
  position: relative !important;
}  
.home-navbar .logo{
  filter: brightness(0) invert(0) !important;
  max-width: 130px !important;
}
.home-navbar .navbar-toggler{
  font-size: small;
  margin-top: 20px;
  margin-right: 5px;  
}
.home-navbar .navbar-nav>.nav-item>a{
  color: black !important;
  text-align: center !important;
  margin-top: 5px;
}
.home-navbar .navbar-nav li:last-child a{
  color: white !important;
  background-color: black;
  border-radius: 100px;
}
  #footer .logo{
    max-width: 160px !important;
  }
  .hwhy .icon{
    height: 60px;
  }  
  #slideShow .overlay-text {
    width: 96% !important;
  }
  #slideShow .overlay-text *{
    font-size: larger !important;
    margin-bottom: 5px;
  }
  #slideShow .overlay-text .btn-cta{
    font-size: 13px !important;
  }  
}
/*----------------- Less Than -----------------*/

/*----------------- Greater Than -----------------*/
@media only screen and (min-width: 1200px){ /* col-xl */

}
@media only screen and (min-width: 992px){ /* col-lg */
  .hwhy .icon{
    height: 100px;
  }
  #hcta .line{
    width: 450px;
  }
}
@media only screen and (min-width: 768px){ /* col-md */
  .blog-content{
    border-right: 1px solid black;
  }
}
@media only screen and (min-width: 576px){ /* col-sm */

}



/*----------------- Greater Than -----------------*/

/*----------------- Between -----------------*/
@media  (min-width:992px) and (max-width:1200px) {

}
@media  (min-width:768px) and (max-width:992px) {
  .home-navbar .logo-div{
    text-align: center !important;
  }
  .home-navbar .navbar-nav{
    margin-top: 10px;
  }
}
@media  (min-width:576px) and (max-width:768px) {
  .container, .container-sm {
    max-width: 90% !important;
  }
  .home-navbar .logo-div{
    text-align: center !important;
  }  
  .home-navbar .navbar-nav{
    margin-top: 10px;
  }  
}

/*----------------- Between -----------------*/

/*----------------- Lulu Beauty Studio Home -----------------*/
body{
  background:#f5f3ef;
  color:#2f2723;
}

#hbanner{
  padding:0;
}

.hbannermain{
  min-height:720px;
  background:#b6a89b;
}

.hbannermainimg{
  min-height:720px;
  object-fit:cover;
}

.hbanneroverlay{
  background:rgba(0,0,0,0.06);
}

.hbannerlogo{
  padding-left:40px;
}

.hbannerlogo h2{
  font-size:40px;
  line-height:100%;
}

.hbannerlogo p{
  font-size:18px;
  letter-spacing:6px;
  text-transform:uppercase;
}

.hbannercontent{
  max-width:520px;
}

.hbannercontent h1{
  font-size:64px;
  line-height:115%;
  margin-bottom:20px;
}

.hbannercontent p{
  font-size:17px !important;
  line-height:180%;
  margin-bottom:30px;
}

.hmainbtn{
  background:#fffdeb;
  border:1px solid #ffffff;
  color:#2f2723 !important;
  border-radius:50px;
  padding:12px 30px;
  font-size:14px !important;
  letter-spacing:1px;
}

.hmainbtn:hover{
  background:transparent;
  color:#ffffff !important;
  border-color:#ffffff;
  transition:0.3s;
}

.houtlinebtn{
  background:transparent;
  border:1px solid #8f8173;
  color:#5e5147 !important;
  border-radius:50px;
  padding:12px 30px;
  font-size:14px !important;
  letter-spacing:1px;
}

.houtlinebtn:hover{
  background:#b2a392;
  color:#ffffff !important;
  border-color:#b2a392;
  transition:0.3s;
}

#hfocus{
  padding:100px 0;
}

.hfocuscontent h2{
  font-size:58px;
  line-height:120%;
  margin-bottom:20px;
}

.hfocuscontent ul li{
  font-size:33px;
  line-height:150%;
  font-style:italic;
}

.hfocuscontent p{
  font-size:17px !important;
  line-height:180%;
  color:#5e5147;
}

.hfocusimg img{
  border-radius:28px;
}

#hservices{
  padding:30px 0 100px 0;
}

.hsectiontitle{
  margin-bottom:50px;
}

.hsectiontitle h2{
  font-size:56px;
}

.hsectiontitle p{
  font-size:17px !important;
  line-height:180%;
  color:#5e5147;
  max-width:760px;
  margin-inline:auto;
}

.hservicebox{
  display:block;
}

.hserviceimg{
  border-radius:26px;
}

.hserviceimg img{
  height:380px;
  object-fit:cover;
  border-radius:26px;
  transition:all 0.4s ease;
}

.hserviceoverlay{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  border-radius:26px;
  background:rgba(0,0,0,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
}

.hserviceoverlay h3{
  color:#ffffff;
  font-size:24px !important;
  line-height:140%;
}

.hservicebox:hover .hserviceimg img{
  transform:scale(1.05);
}

.hservicesprev,
.hservicesnext{
  width:48px;
  height:48px;
  border-radius:50%;
  background:#ffffff;
  color:#2f2723;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:45%;
  z-index:5;
  cursor:pointer;
}

.hservicesprev{
  left:-20px;
}

.hservicesnext{
  right:-20px;
}

.hservicesprev i,
.hservicesnext i{
  font-size:22px;
}

#htestimonials{
  padding:100px 0;
  background:#ffffff;
}

.htestimonialscontent h2{
  font-size:54px;
  margin-bottom:20px;
}

.htestimonialscontent p{
  font-size:18px !important;
  line-height:180%;
  color:#5e5147;
  margin-bottom:30px;
}

.htestimonialimg img{
  object-fit:cover;
}

.htestimonialpagination{
  margin-top:20px;
  position:relative !important;
  bottom:auto !important;
}

#habout{
  background:#b2a392;
}

.haboutleft img{
  min-height:620px;
  object-fit:cover;
}

.haboutright{
  padding:70px 50px;
  color:#ffffff;
}

.haboutright h2{
  font-size:52px;
  margin-bottom:10px;
}

.haboutright h3{
  font-size:28px !important;
  line-height:150%;
  margin-bottom:25px;
  font-style:italic;
}

.haboutsmallimg{
  margin-bottom:25px;
}

.haboutsmallimg img{
  width:180px;
  border-radius:18px;
}

.haboutright p{
  font-size:17px !important;
  line-height:190%;
  margin-bottom:30px;
}

.haboutbtn:hover{
  color:#ffffff !important;
}

#hcta{
  position:relative;
}

.hctamain{
  min-height:420px;
}

.hctaimg{
  min-height:420px;
  object-fit:cover;
}

.hctaoverlay{
  background:rgba(56,39,25,0.30);
}

.hctacontent{
  color:#ffffff;
}

.hctacontent h2{
  font-size:50px;
}

.hctacontent p{
  font-size:28px !important;
}

#hcontact{
  padding:80px 0 30px 0;
  background:#b2a392;
  color:#ffffff;
}

.hfooterlogo h2{
  font-size:42px;
  line-height:100%;
}

.hfooterlogo p{
  font-size:16px;
  letter-spacing:6px;
  text-transform:uppercase;
}

.hfooterbox h3{
  font-size:22px !important;
  margin-bottom:20px;
}

.hfooterbox ul li{
  font-size:15px !important;
  line-height:190%;
  margin-bottom:8px;
}

.hfooterbox ul li a{
  color:#ffffff;
}

.hfooterbox ul li i{
  margin-right:8px;
}

.hcopyright{
  border-top:1px solid rgba(255,255,255,0.25);
  margin-top:40px;
  padding-top:25px;
  gap:15px;
}

.hcopyright p{
  font-size:14px !important;
}

.hfootersocial a{
  color:#ffffff;
  font-size:22px;
  margin-left:12px;
}

.hwhatsappbtn{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999;
}

.hwhatsappbtn a{
  width:58px;
  height:58px;
  background:#25d366;
  color:#ffffff !important;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
  font-size:30px;
}

.swiper-pagination-bullet{
  width:10px;
  height:10px;
}

.swiper-pagination-bullet-active{
  background:#8f8173;
}

@media only screen and (max-width: 1199px){
  .hbannercontent h1{
    font-size:52px;
  }

  .hfocuscontent h2{
    font-size:46px;
  }

  .hfocuscontent ul li{
    font-size:28px;
  }
}

@media only screen and (max-width: 992px){
  .hbannermain,
  .hbannermainimg{
    min-height:620px;
  }

  .hbannerlogo{
    padding-left:0;
    text-align:center;
    width:100%;
    margin-bottom:30px;
  }

  .hbannercontent{
    max-width:100%;
    text-align:center !important;
  }

  .hbannercontent h1{
    font-size:42px;
  }

  .hfocuscontent{
    margin-bottom:40px;
  }

  .hfocuscontent h2{
    font-size:38px;
  }

  .hfocuscontent ul li{
    font-size:23px;
  }

  .hsectiontitle h2,
  .htestimonialscontent h2,
  .haboutright h2,
  .hctacontent h2{
    font-size:38px;
  }

  .hservicesprev{
    left:0;
  }

  .hservicesnext{
    right:0;
  }

  .haboutright{
    padding:50px 30px;
  }
}

@media only screen and (max-width: 768px){
  #hfocus,
  #hservices,
  #htestimonials{
    padding:70px 0;
  }

  .hbannermain,
  .hbannermainimg{
    min-height:560px;
  }

  .hbannercontent h1{
    font-size:34px;
  }

  .hbannercontent p,
  .hsectiontitle p,
  .htestimonialscontent p,
  .haboutright p{
    font-size:15px !important;
  }

  .hfocuscontent h2{
    font-size:32px;
  }

  .hfocuscontent ul li{
    font-size:20px;
  }

  .hserviceimg img{
    height:320px;
  }

  .htestimonialimg img{
  }

  .haboutleft img{
    min-height:auto;
  }

  .hctacontent h2{
    font-size:30px;
  }

  .hctacontent p{
    font-size:20px !important;
  }

  .hfooterlogo,
  .hfooterbox{
    margin-bottom:30px;
  }

  .hfootersocial a{
    margin:0 6px;
  }
}

@media only screen and (max-width: 576px){
  .hservicesprev,
  .hservicesnext{
    width:40px;
    height:40px;
    top:42%;
  }

  .hbannercontent p br,
  .hfocuscontent p br,
  .hsectiontitle p br,
  .haboutright p br{
    display:none;
  }
}
/*----------------- Lulu Beauty Studio Home -----------------*/

/* =========================
   Services Page
========================= */

#sbanner{
    padding:0;
}

.sbannermain{
    min-height:360px;
    background:#c9b08d;
}

.sbannermainimg{
    width:100%;
    height:360px;
    object-fit:cover;
}

.sbanneroverlay{
    background:rgba(68,48,29,0.18);
}

.sbannercontent h1{
    font-size:58px;
    line-height:120%;
}



/* =========================
   Services Section
========================= */

#sservices{
    padding:70px 0 40px 0;
    background:#f5f3ef;
}

.sservicesrow{
    margin-bottom:45px;
}

.sservicecol{
    margin-bottom:25px;
    scroll-margin-top:120px;
}

.sservicebox{
    width:100%;
}



/* =========================
   Service Image
========================= */

.sserviceimg{
    border-radius:30px;
    overflow:hidden;
    aspect-ratio:1/1;
}

.sserviceimg img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:all .4s ease;
}

.sserviceimglink:hover img{
    transform:scale(1.05);
}



/* =========================
   Service Content
========================= */

.sservicecontent{
    max-width:470px;
    margin:18px auto 0 auto;
    text-align:center;
}

.sservicecontent h3{
    font-size:28px;
    line-height:135%;
    color:#2f2723;
}

.sservicecontent p{
    font-size:16px;
    line-height:180%;
    color:#5e5147;
}



/* =========================
   Special Layout
========================= */

.sservicecol-large .sserviceimg{
    aspect-ratio:16/10;
}

.sservicecol-textonly{
    min-height:320px;
}

.sservicecol-textonly .sservicecontent{
    max-width:420px;
}

.sservicesrow-three .sserviceimg{
    aspect-ratio:1/1;
}

.sservicecol-three .sservicecontent{
    max-width:320px;
}

.sservicecol-three .sservicecontent h3{
    font-size:24px;
}

.sservicecol-three .sservicecontent p{
    font-size:15px;
}



/* =========================
   Why Lulu Section
========================= */

#swhy{
    padding:20px 0 90px 0;
    background:#f5f3ef;
}

.swhycontent{
    max-width:470px;
}

.swhycontent h2{
    font-size:54px;
    line-height:120%;
    color:#2f2723;
}

.swhycontent ul li{
    position:relative;
    padding-left:18px;
    margin-bottom:12px;
    font-size:18px;
    line-height:180%;
    color:#5e5147;
}

.swhycontent ul li:before{
    content:"•";
    position:absolute;
    left:0;
    top:0;
    color:#8f8173;
}

.swhyimg img{
    border-radius:26px;
}



/* =========================
   Responsive
========================= */

@media (max-width:1199px){

    .sbannercontent h1{
        font-size:50px;
    }

    .sservicecontent h3{
        font-size:26px;
    }

    .swhycontent h2{
        font-size:46px;
    }

}

@media (max-width:992px){

    .sbannermainimg{
        height:300px;
    }

    .sbannercontent h1{
        font-size:42px;
    }

    .sservicecol-textonly{
        min-height:auto;
    }

    .swhycontent{
        max-width:100%;
        margin-bottom:35px;
    }

    .swhycontent h2{
        font-size:38px;
    }

}

@media (max-width:768px){

    #sservices{
        padding:55px 0 20px 0;
    }

    #swhy{
        padding:10px 0 70px 0;
    }

    .sbannermainimg{
        height:240px;
    }

    .sbannercontent h1{
        font-size:32px;
    }

    .sservicecol{
        margin-bottom:35px;
    }

    .sservicecontent{
        margin-top:16px;
    }

    .sservicecontent h3{
        font-size:23px;
    }

    .sservicecontent p{
        font-size:15px;
    }

    .swhycontent h2{
        font-size:32px;
    }

    .swhycontent ul li{
        font-size:16px;
        line-height:170%;
    }

}

@media (max-width:576px){

    .sbannercontent h1{
        font-size:28px;
    }

}
/* =========================
   Services Page
========================= */

/* Testimonials Banner */

#tbanner{
padding:0;
}

.tbannermainimg{
height:360px;
object-fit:cover;
}

.tbanneroverlay{
background:rgba(0,0,0,0.25);
}

.tbannercontent h1{
font-size:56px;
}



/* Testimonials Layout */

#ttestimonials{
padding:80px 0;
background:#f6f4f1;
}

.ttestileft h2{
font-size:48px;
}

.ttestilist li{
margin-bottom:14px;
}

.ttesticat{
text-decoration:none;
color:#222;
display:inline-block;
padding:6px 16px;
border-radius:20px;
transition:0.3s;
}

.ttesticat.active,
.ttesticat:hover{
background:#4b2c1c;
color:#fff;
}



/* testimonial grid */

.ttestiimg{
border-radius:16px;
overflow:hidden;
}

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



/* responsive */

@media(max-width:992px){

.ttestileft{
margin-bottom:40px;
}

.ttestileft h2{
font-size:36px;
}

}

/* Testimonials */
/*==============================
ABOUT PAGE
==============================*/

#aboutbanner{
padding:0;
}

.aboutbannermain{
position:relative;
}

.aboutbannermainimg{
width:100%;
aspect-ratio:16/6;
object-fit:cover;
}

.aboutbanneroverlay{
background:rgba(77,50,24,0.25);
}

.aboutbannercontent h1{
font-size:58px;
line-height:120%;
color:#fff;
}



/*==============================
ABOUT INTRO
==============================*/

#aboutintro{
padding:95px 0 90px 0;
background:#f5f3ef;
}

.aboutintrotitle{
margin-bottom:35px;
}

.aboutintrotitle h2{
font-size:56px;
line-height:115%;
color:#2f2723;
}

.aboutintrocontent{
margin-bottom:45px;
}

.aboutintrocontent p{
font-size:18px;
line-height:175%;
color:#4f4a45;
}

.aboutintroimg{
overflow:hidden;
border-radius:16px;
}

.aboutintroimg img{
width:100%;
object-fit:cover;
}

.aboutintroimgsmall img{
aspect-ratio:1/1;
}

.aboutintroimglarge img{
aspect-ratio:4/5;
}



/*==============================
CERTIFICATIONS
==============================*/

#aboutcert{
padding:0 0 90px 0;
background:#f5f3ef;
}

.aboutcerttitle{
margin-bottom:50px;
}

.aboutcerttitle h2{
font-size:54px;
line-height:120%;
color:#2f2723;
}

.aboutcertswiper{
padding-bottom:10px;
}

.aboutcertimg{
border-radius:16px;
overflow:hidden;
}

.aboutcertimg img{
width:100%;
aspect-ratio:4/5;
object-fit:cover;
transition:0.35s;
}

.aboutcertimg:hover img{
transform:scale(1.05);
}



/*==============================
RESPONSIVE
==============================*/

@media (max-width:1200px){

.aboutbannercontent h1{
font-size:48px;
}

.aboutintrotitle h2{
font-size:48px;
}

.aboutcerttitle h2{
font-size:46px;
}

}


@media (max-width:992px){

.aboutbannermainimg{
aspect-ratio:16/7;
}

.aboutbannercontent h1{
font-size:40px;
}

.aboutintrotitle h2{
font-size:40px;
}

.aboutcerttitle h2{
font-size:38px;
}

.aboutintrocontent{
margin-bottom:30px;
}

.aboutintroimgsmall{
margin-bottom:25px;
}

}


@media (max-width:768px){

#aboutintro{
padding:70px 0;
}

#aboutcert{
padding-bottom:70px;
}

.aboutbannermainimg{
aspect-ratio:16/8;
}

.aboutbannercontent h1{
font-size:30px;
}

.aboutintrotitle{
margin-bottom:20px;
}

.aboutintrotitle h2{
font-size:32px;
}

.aboutintrocontent p{
font-size:16px;
}

.aboutcerttitle{
margin-bottom:35px;
}

.aboutcerttitle h2{
font-size:32px;
}

.aboutcertimg img{
aspect-ratio:1/1;
}

}


@media (max-width:576px){

.aboutbannercontent h1{
font-size:26px;
line-height:135%;
}

.aboutintrotitle h2{
font-size:28px;
}

.aboutcerttitle h2{
font-size:28px;
}

}
/*==============================
ABOUT INTRO
==============================*/
/*==============================
CONTACT PAGE
==============================*/

#contactbanner{
    padding:0;
}

.contactbannermain{
    position:relative;
}

.contactbannermainimg{
    width:100%;
    aspect-ratio:16/6;
    object-fit:cover;
}

.contactbanneroverlay{
    background:rgba(62,38,19,0.20);
}

.contactbannercontent h1{
    font-size:58px;
    line-height:120%;
    color:#ffffff;
}



/*==============================
CONTACT INFO
==============================*/

#contactinfo{
    padding:90px 0;
    background:#f5f3ef;
}

.contactinfoleft{
    max-width:500px;
}

.contactinfotitle{
    margin-bottom:55px;
}

.contactinfotitle h2{
    font-size:62px;
    line-height:110%;
    color:#1f1b18;
    text-transform:uppercase;
}

.contactinfotitle p{
    font-size:18px;
    line-height:175%;
    color:#4f4a45;
}



/*==============================
CONTACT FORM
==============================*/

.contactformgroup{
    margin-bottom:20px;
}

.contactforminput,
.contactformtextarea{
    width:100%;
    border:0;
    border-bottom:1px solid #a9a29c;
    background:transparent;
    padding:0 8px 12px 8px;
    font-size:16px;
    line-height:160%;
    color:#2f2723;
    border-radius:0;
    outline:none;
    box-shadow:none;
}

.contactforminput::placeholder,
.contactformtextarea::placeholder{
    color:#6f6963;
    opacity:1;
}

.contactforminput:focus,
.contactformtextarea:focus{
    border-bottom:1px solid #2f2723;
}

.contactformtextarea{
    min-height:120px;
    resize:none;
    padding-top:0;
}

.contactformbtnwrap{
    margin-top:30px;
}

.contactsubmitbtn{
    min-width:135px;
    height:46px;
    border-radius:40px;
    background:#1f1b18;
    color:#ffffff;
    border:1px solid #1f1b18;
    font-size:14px;
    letter-spacing:1px;
    padding:10px 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.contactsubmitbtn:hover{
    background:transparent;
    color:#1f1b18;
    border-color:#1f1b18;
    transition:0.3s;
}



/*==============================
CONTACT MAP
==============================*/

.contactmapwrap{
    width:100%;
    border-radius:34px;
    overflow:hidden;
}

.contactmapimg{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
}



/*==============================
RESPONSIVE
==============================*/

@media (max-width:1200px){

    .contactbannercontent h1{
        font-size:48px;
    }

    .contactinfotitle h2{
        font-size:52px;
    }

}

@media (max-width:992px){

    .contactbannermainimg{
        aspect-ratio:16/7;
    }

    .contactbannercontent h1{
        font-size:40px;
    }

    #contactinfo{
        padding:75px 0;
    }

    .contactinfoleft{
        max-width:100%;
        margin-bottom:40px;
    }

    .contactinfotitle{
        margin-bottom:40px;
    }

    .contactinfotitle h2{
        font-size:42px;
    }

}

@media (max-width:768px){

    .contactbannermainimg{
        aspect-ratio:16/8;
    }

    .contactbannercontent h1{
        font-size:30px;
    }

    #contactinfo{
        padding:65px 0;
    }

    .contactinfotitle{
        margin-bottom:30px;
    }

    .contactinfotitle h2{
        font-size:34px;
    }

    .contactinfotitle p{
        font-size:16px;
    }

    .contactformgroup{
        margin-bottom:18px;
    }

    .contactmapwrap{
        border-radius:24px;
        margin-top:10px;
    }

}

@media (max-width:576px){

    .contactbannercontent h1{
        font-size:26px;
        line-height:135%;
    }

    .contactinfotitle h2{
        font-size:28px;
    }

    .contactmapimg{
        aspect-ratio:4/4.2;
    }

}