:root {
    --indigo: #96A5C2;
    --vivid: #BFDCFE;
    --blae: #BBBBBB;
    --silt: #A8ACA3;
    --taupe: #968C85;
    --sand: #D8D0C5;
    --ebony: #000000;
    --glo: #FFFFFF;
    --mist: #F2F0ED;
}

/* =========================
   GEORGIA FONT
========================= */
@font-face {
  font-family: 'Georgia Custom';
  src: url('../fonts/georgia/georgia.woff2') format('woff2'),
       url('../fonts/georgia/georgia.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================
   SF PRO DISPLAY - REGULAR
========================= */
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/sf-pro/SFProDisplay-Regular.woff2') format('woff2'),
       url('../fonts/sf-pro/SFProDisplay-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================
   SF PRO DISPLAY - MEDIUM
========================= */
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/sf-pro/SFProDisplay-Medium.woff2') format('woff2'),
       url('../fonts/sf-pro/SFProDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* =========================
   SF PRO DISPLAY - SEMIBOLD
========================= */
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/sf-pro/SFProDisplay-Semibold.woff2') format('woff2'),
       url('../fonts/sf-pro/SFProDisplay-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* =========================
   GLOBAL FONT USAGE
========================= */
body {
  font-family: 'SF Pro Display', 
               -apple-system, BlinkMacSystemFont, 
               'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 
               'Helvetica Neue', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: #222;
  background-color: var(--glo);
}


h1, h2, h3, blockquote {
  font-family: 'Georgia Custom', Georgia, 'Times New Roman', serif;
}


/* ==============================================
   MAIN CONTAINER (Matches 1336px grid from Figma)
   ============================================== */
@media (min-width: 1200px) {
  .container {
    max-width: 1336px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Keep same at ≥1400px for consistency */
@media (min-width: 1400px) {
  .container {
    max-width: 1336px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ==============================================
   HEADER CONTAINER (Wider 1392px grid)
   ============================================== */
.header-container {
  max-width: 1392px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  z-index: 2;
}

/* ==============================================
   CONSISTENT INNER GUTTERS FOR BOTH
   ============================================== */
.container > .row,
.header-container > .row {
  --bs-gutter-x: 26px; /* ~52px total spacing in 1440px view */
}

/* ==============================================
   CENTER FIX FOR ULTRA-WIDE SCREENS ≥1920px
   Keeps design centered within 1440px frame
   ============================================== */
@media (min-width: 1920px) {
    .container, .header-container {
      padding-left: 2rem;
      padding-right: 2rem;
      max-width: 1872.768px;
    }
}



#headerSection{margin-bottom:-124px;padding:clamp(16px,2vw,24px) 0}
#headerSection>.header-container{width:100%;max-width:clamp(1140px,92vw,1392px);margin:0 auto;padding:0 1rem}
#headerSection>.header-container>nav{background-color:rgba(76,81,77,.6)!important;border-radius:100px;padding:clamp(12px,1.5vw,16px);backdrop-filter:blur(44px);-webkit-backdrop-filter:blur(44px);display:flex;align-items:center;justify-content:space-between}
#headerSection .navbar-brand img{max-height:clamp(36px,4vw,48px);width:auto}
#headerSection .nav-link{font-size:clamp(13px, .9vw, 14px);font-family:'SF Pro',sans-serif;color:var(--glo)!important;padding:0!important;transition:color .3s ease}
#headerSection .nav-link.active,#headerSection .nav-link:hover{color:#fff!important}
#headerSection .navbar-nav{gap:clamp(16px,2.5vw,32px)}
#headerSection .top-call{color:var(--glo);font-size:clamp(14px, 1vw, 16px);font-weight:500;font-family:'SF Pro Display',sans-serif;padding:10px 24px;text-decoration:none;line-height:24px;letter-spacing:.32px;background-color:rgba(255,255,255,.12);border-radius:25px;transition:background-color .3s ease,color .3s ease}
#headerSection .top-call:hover{background-color:rgba(255,255,255,.25)}

/* MEDIA QUERIES */
@media (min-width: 1920px) {
  #headerSection > .header-container {max-width: 1440px;}
}

@media (max-width: 991px) {
  #headerSection > .header-container>nav{border-radius:40px;padding:12px 20px}
  #headerSection .navbar-collapse{background-color:rgba(76,81,77,.85);border-radius:20px;margin-top:12px;padding:1rem}
  #headerSection .navbar-nav{gap:1rem;align-items:center}
  #headerSection .top-call{display:none}
}

@media (max-width: 575px) {
  #headerSection{margin-bottom:-80px;padding:12px 0}
  #headerSection>.header-container>nav{border-radius:30px}
  #headerSection .navbar-brand img{max-height:36px}
  #headerSection .navbar-collapse{padding:.75rem 1rem}
}


#homeHeroSection{background-image:url('assets/imgs/home/hero-image-square.png');background-size:cover;background-position:100% 20%;background-repeat:no-repeat;padding:0 0 clamp(3rem,4vw,4.75rem);position:relative}
#homeHeroSection:before{content:'';position:absolute;width:100%;height:38%;bottom:0;background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.62) 92%);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:1}
#homeHeroSection .container *{z-index:2}
#homeHeroSection h1{font-size:clamp(2rem,4vw,3.75rem);line-height:clamp(2.5rem,5vw,72px);color:var(--glo);margin:0}
#homeHeroSection .left p{font-size:clamp(1rem,2vw,1.5rem);line-height:clamp(1.5rem,2.5vw,36px);color:rgba(255,255,255,.6);margin:0 0 10px 0}
#homeHeroSection .right{gap:clamp(24px,3vw,48px);display:flex;flex-direction:column;align-items:flex-start}
#homeHeroSection .right p{color:var(--glo);font-size:clamp(.875rem,1.5vw,1.125rem);margin:0}
#homeHeroSection .right .btn{padding:clamp(8px,1vw,10px) clamp(16px,2vw,24px);font-size:clamp(.875rem,1vw,1rem);border-radius:32px;font-weight:500;background-color:var(--glo);font-family:'SF Pro Display',sans-serif}

/* MEDIA QUERIES */
@media (max-width:991px){
  #homeHeroSection h1{font-size:clamp(1.75rem,4vw,3rem);line-height:clamp(2rem,4vw,3.5rem)}
  #homeHeroSection .left p{font-size:clamp(.875rem,2vw,1.25rem);line-height:clamp(1.25rem,2.5vw,28px)}
  #homeHeroSection .right p{font-size:clamp(.75rem,1.5vw,1rem)}
  #homeHeroSection .right{gap:24px}
}

@media (max-width:575px){
  #homeHeroSection h1{font-size:clamp(1.5rem,5vw,2.5rem);line-height:clamp(2rem,5vw,3rem)}
  #homeHeroSection .left p{font-size:clamp(.75rem,3vw,1rem);line-height:clamp(1rem,3vw,1.5rem)}
  #homeHeroSection .right p{font-size:clamp(.7rem,3vw,.875rem)}
  #homeHeroSection .right .btn{padding:8px 16px;font-size:.875rem}
}


#homeServiceSection{padding:clamp(4rem,6vw,5rem) 0 clamp(4rem,6vw,5rem)}
#homeServiceSection .title-section{padding-bottom:clamp(2rem,4vw,3.75rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
#homeServiceSection .title h2{font-size:clamp(1.75rem,3vw,3rem);margin:0}
#homeServiceSection .button{display:flex;gap:clamp(8px,2vw,10px);flex-wrap:wrap}
#homeServiceSection .btn,#homeServiceSection .btn.active,#homeServiceSection .btn:hover,#homeServiceSection .btn.active:hover{padding:clamp(8px,1.5vw,10px) clamp(16px,2vw,24px);border-radius:25px;background-color:transparent;color:var(--ebony);border-color:transparent;transition:all .3s ease}
#homeServiceSection .btn.active,#homeServiceSection .btn.active:hover,#homeServiceSection .btn:hover{background-color:var(--mist)}
#homeServiceSection .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.5vw,16px)}
#homeServiceSection .service-grid .service-item{padding:clamp(8px,1vw,12px);background-color:var(--mist);border-radius:12px;display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
#homeServiceSection .si-image{height:clamp(150px,15vw,215px);background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:8px}
#homeServiceSection .si-content{padding:clamp(8px,1vw,12px);gap:clamp(24px,3vw,37px);display:flex;flex-direction:column}
#homeServiceSection .si-content h3{font-size:clamp(1.25rem,2vw,1.5rem);font-family:'SF Pro Display',sans-serif;font-weight:600;margin-bottom:0}
#homeServiceSection .si-content p{font-size:clamp(.75rem,1.5vw,.875rem);font-family:'SF Pro Display',sans-serif;font-weight:400;margin-bottom:0;color:var(--ebony);opacity:.6}
#homeServiceSection .btn.contact-us{background-color:#4c514d;color:#fff}
#homeServiceSection .title-section.look{padding-top:clamp(4rem,8vw,10rem);display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(16px,2vw,24px)}
#homeServiceSection .title-section.look .title{flex:0 0 40%}
#homeServiceSection .title-section.look .button{flex:0 0 55%;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,2vw,24px)}
#homeServiceSection .title-section.look p{font-size:clamp(.875rem,1.5vw,1rem);line-height:clamp(1.25rem,2vw,1.5rem);margin:0}

/* MEDIA QUERIES */
@media (max-width:991px){
  #homeServiceSection .service-grid{grid-template-columns:repeat(2,1fr)}
  #homeServiceSection .btn{font-size:clamp(.75rem,1.5vw,.875rem)}
  #homeServiceSection .title-section.look .title,
  #homeServiceSection .title-section.look .button{flex:0 0 100%;}
}
@media (max-width:575px){
  #homeServiceSection .service-grid{grid-template-columns:1fr;gap:clamp(8px,3vw,16px)}
  #homeServiceSection .title-section.look{padding-top:clamp(2rem,6vw,4rem)}
  #homeServiceSection .title h2{font-size:clamp(1.5rem,5vw,2.25rem)}
  #homeServiceSection .title-section.look{padding-top:clamp(2rem,6vw,4rem);gap:clamp(12px,2vw,16px);}
  #homeServiceSection .title-section.look .title h2{font-size:clamp(1.5rem,5vw,2.25rem);}
}


#homeBenefitSection{background-color:var(--indigo);padding:clamp(4rem,6vw,5rem) 0}
#homeBenefitSection>.container{max-width:clamp(1140px,92vw,1366px);margin:0 auto;padding:0 1rem}
#homeBenefitSection .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:clamp(2rem,3vw,4rem)}
#homeBenefitSection .title{flex:0 0 clamp(38%, 36%, 40%);display:flex;flex-direction:column;justify-content:flex-start;min-height:clamp(400px,50vw,588px)}
#homeBenefitSection .title h2{font-size:clamp(1.5rem,3vw,2.25rem);margin-bottom:1rem;line-height:clamp(2rem,4vw,3rem)}
#homeBenefitSection .title p{font-size:clamp(.875rem,1.5vw,1rem);line-height:clamp(1.25rem,2vw,1.5rem);margin:0}
#homeBenefitSection .benefits{flex:0 0 clamp(55%, 50%, 55%);display:flex;flex-direction:column;gap:clamp(2rem,4vw,4rem);max-width:600px}
#homeBenefitSection .benefit-item{padding:clamp(1rem,2vw,1.25rem);border-radius:clamp(16px,2vw,24px);background-color:#fff;display:flex;flex-direction:column;gap:clamp(2rem,3vw,3rem);max-width:100%}
#homeBenefitSection .bi-image{width:100%;height:clamp(180px,20vw,282px);border-radius:clamp(16px,2vw,24px);background-position:100% 30%;background-size:100% auto}
#homeBenefitSection .bi-content h3{font-size:clamp(1.5rem,2.5vw,2.25rem);font-weight:600;font-family:'SF Pro Display',sans-serif;margin-bottom:clamp(1rem,2vw,1.75rem)}
#homeBenefitSection .bi-content p{font-size:clamp(.75rem,1.5vw,.875rem);font-family:'SF Pro Display',sans-serif;font-weight:400;margin-bottom:clamp(.75rem,1.5vw,1.5rem);line-height:clamp(1.25rem,2vw,1.5rem)}

/* MEDIA QUERIES */
@media(max-width:991px){
  #homeBenefitSection .title,
  #homeBenefitSection .benefits{flex:0 0 100%}
  #homeBenefitSection .title{min-height:auto;margin-bottom:2rem}
}

@media(max-width:575px){
  #homeBenefitSection{padding:clamp(2rem,6vw,3rem) 0}
  #homeBenefitSection .benefit-item{gap:clamp(1rem,3vw,2rem)}
  #homeBenefitSection .bi-image{height:clamp(150px,25vw,200px)}
  #homeBenefitSection .bi-content h3{font-size:clamp(1.25rem,4vw,1.75rem)}
  #homeBenefitSection .bi-content p{font-size:clamp(.75rem,3vw,.875rem)}
}

#homeWhyChooseSection{padding:clamp(4rem,8vw,8rem) 0 clamp(2rem,4vw,4rem)}
#homeWhyChooseSection>.container{max-width:clamp(1140px,92vw,1366px);margin:0 auto;padding:0 1rem}
#homeWhyChooseSection .title-section.look{display:flex;flex-wrap:wrap;align-items:flex-start;gap:clamp(1rem,3vw,3rem)}
#homeWhyChooseSection .title-section .title{flex:0 0 clamp(35%,36%,38%)}
#homeWhyChooseSection .title-section .statement{flex:0 0 clamp(55%,50%,60%)}
#homeWhyChooseSection .title-section h2{font-size:clamp(2rem, 4vw, 3rem);line-height:1.2;margin:0}
#homeWhyChooseSection .statement p{font-size:clamp(1.75rem, 4vw, 3.5rem);line-height:clamp(2rem, 4.5vw, 4.25rem);margin:0}
#homeWhyChooseSection .why-slider{display:flex;flex-wrap:wrap;gap:clamp(8px,1vw,16px);margin-top:clamp(2rem,3vw,4rem)}
#homeWhyChooseSection .why-slider .col-md-4{padding:0;flex:0 0 calc(33.333% - clamp(8px,1vw,16px))}
#homeWhyChooseSection .why-item{padding:clamp(1.25rem,2vw,2.25rem);border-radius:16px;background-color:var(--mist);height:clamp(350px,32vw,426px);display:flex;flex-direction:column;justify-content:space-between}
#homeWhyChooseSection .wi-title{font-size:clamp(1.25rem, 2vw, 1.5rem);font-weight:600;font-family:'SF Pro Display',sans-serif;margin:0 0 clamp(.75rem,2vw,1.25rem)}
#homeWhyChooseSection .wi-desc{font-size:clamp(.875rem, 1.5vw, 1rem);line-height:1.5;opacity:.6;margin:0}
#homeWhyChooseSection .tour{background-color:var(--vivid);border-radius:32px;padding:0;overflow:hidden;display:flex}
#homeWhyChooseSection .tour>.col-md-5,#homeWhyChooseSection .tour>.col-md-7{padding:0}
#homeWhyChooseSection .tour>.col-md-7{padding:16px}
#homeWhyChooseSection .tour .content{padding:6rem 5rem 6rem 4.5rem}
#homeWhyChooseSection .tour h2{font-size:3.5rem;line-height:3.9rem;margin-bottom:1.5rem}
#homeWhyChooseSection .tour h3{font-family:"SF Pro Display",sans-serif;font-size:1.25rem;line-height:2rem;font-weight:600;margin-bottom:3rem}
#homeWhyChooseSection .tour p{opacity:.75;font-size:1.05rem;line-height:1.7rem}
#homeWhyChooseSection .tour .timage{width:100%;height:100%;background-size:cover;background-position:center right;background-repeat:no-repeat;border-radius:16px}

/* MEDIA QUERIES */
@media (max-width: 991px) {
  #homeWhyChooseSection .why-slider .col-md-4{flex:0 0 calc(50% - clamp(8px,2vw,16px))}
  #homeWhyChooseSection .title-section .statement,#homeWhyChooseSection .title-section .title{flex:0 0 100%}
  #homeWhyChooseSection .tour{flex-direction:column}
  #homeWhyChooseSection .tour .content{padding:3rem 2rem}
  #homeWhyChooseSection .tour .timage{height:350px}
}

@media (max-width: 575px) {
  #homeWhyChooseSection .why-slider .col-md-4 {flex: 0 0 100%;}
}


/* --- TESTIMONIAL SECTION --- */

#homeTestimonialSection {
  padding: 6rem 0 8rem;
}

#homeTestimonialSection .title h2 {
  font-size: 3rem;
  line-height: 3.6rem;
}

/* Subtitle + body text beside the heading */
#homeTestimonialSection .statement p {
  font-size: 1rem;
  line-height: 1.6rem;
  font-weight: 400;
  margin-bottom: 1rem;
}

#homeTestimonialSection .statement p:first-child {
  font-size: 1.25rem;
  line-height: 2rem;
  font-weight: 600;
}

/* Grid setup */
#homeTestimonialSection .tesimonial-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 4rem;
  gap: 1rem;
}

/* Card */
#homeTestimonialSection .testimonial-item {
  border-radius: 24px;
  padding: 32px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Color variations */
#homeTestimonialSection .testimonial-item.taupe-bg { background-color: var(--taupe); }
#homeTestimonialSection .testimonial-item.vivid-bg { background-color: var(--vivid); }
#homeTestimonialSection .testimonial-item.slit-bg  { background-color: var(--silt); }
#homeTestimonialSection .testimonial-item.mist-bg  { background-color: var(--mist); }

/* Text colors */
#homeTestimonialSection .testimonial-item.black-text h3,
#homeTestimonialSection .testimonial-item.black-text h4,
#homeTestimonialSection .testimonial-item.black-text p {
  color: var(--ebony);
}

#homeTestimonialSection .testimonial-item.white-text h3,
#homeTestimonialSection .testimonial-item.white-text h4,
#homeTestimonialSection .testimonial-item.white-text p {
  color: var(--glo);
}

/* Number badge */
#homeTestimonialSection .testimonial-item h4 {
  font-size: 0.875rem;
  opacity: 0.6;
  margin-bottom: 20px;
}

/* Card name */
#homeTestimonialSection h3.ti-name {
  font-size: 1.4rem;
  font-family: "SF Pro Display", sans-serif;
  font-weight: 600;
  margin-bottom: 10px;
}

/* Center content for LAST tile ("See all reviews") */
#homeTestimonialSection .testimonial-item:last-child {
  justify-content: center !important;
  align-items: center !important;
}

#homeTestimonialSection .testimonial-item:last-child h5 {
  font-size: 1.25rem;
  line-height: 1.6rem;
  text-align: center;
}
@media (max-width: 991px) {
  #homeTestimonialSection .tesimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  #homeTestimonialSection .tesimonial-grid {
    grid-template-columns: 1fr;
  }
}


/* ==============================
   GALLERY RESULT SECTION
   ============================== */

#homeGalleryResultSection {
  padding: 9rem 0 3rem;
}

#homeGalleryResultSection .gallery {
  padding: 4rem 3rem 6rem;
  border-radius: 24px;
  background-color: var(--mist);
}

/* Title */
#homeGalleryResultSection .gallery h2 {
  font-size: 3rem;
  line-height: 3.75rem;
  text-align: center;
  margin-bottom: 1rem;
}

#homeGalleryResultSection .gallery p {
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: center;
  max-width: 560px;
  margin: 0 auto 2.5rem;
}

/* Filter Buttons */
#homeGalleryResultSection .gallery-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2rem;
}

#homeGalleryResultSection .gallery-filter-button-group {
  display: flex;
  gap: .5rem;
}

#homeGalleryResultSection .gallery-filter-button-group .btn {
  padding: 10px 24px;
  border-radius: 25px;
  font-size: .9rem;
  background-color: transparent;
  border: none;
  color: var(--ebony);
}

#homeGalleryResultSection .gallery-filter-button-group .btn.active,
#homeGalleryResultSection .gallery-filter-button-group .btn:hover {
  background-color: rgba(0,0,0,.06);
}

/* Separator */
#homeGalleryResultSection .gallery-seperator {
  width: 100%;
  height: 1px;
  background-color: rgba(0,0,0,.12);
  margin: 32px 0;
}

/* Before / After grid */
#homeGalleryResultSection .gallery-grid-items-wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

#homeGalleryResultSection .gallery-grid-item {
  background-color: var(--glo);
  padding: 12px;
  border-radius: 24px;
}

#homeGalleryResultSection .gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
}

#homeGalleryResultSection .gallery-item-title {
  font-size: 1rem;
  font-weight: 600;
  font-family: "SF Pro Display", sans-serif;
}

#homeGalleryResultSection .label {
  font-size: .75rem;
  padding: 4px 12px;
  border-radius: 50px;
  background-color: rgba(0,0,0,.12);
}

#homeGalleryResultSection .gallery-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#homeGalleryResultSection .gallery-content > .before,
#homeGalleryResultSection .gallery-content > .after {
  width: 100%;
  height: 190px;
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  position: relative;
}

#homeGalleryResultSection span.ba {
  position: absolute;
  bottom: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 50px;
  font-size: .7rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--glo);
}

#homeGalleryResultSection span.ba.before {
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(20px);
}

#homeGalleryResultSection span.ba.after {
  background: var(--indigo);
}

/* Reason to believe */
#homeGalleryResultSection .tw h2 {
  margin: 6rem 0 3rem;
}

#homeGalleryResultSection .reason-to-believe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  margin-bottom: 4rem;
}

#homeGalleryResultSection .rtb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#homeGalleryResultSection .rtb p {
  font-size: 1.2rem;
  text-align: center;
  font-weight: 600;
  max-width: 330px;
}

/* AUTHOR BOX FIX */
#homeGalleryResultSection .author-box {
  padding: 16px;
  background-color: #4c514d;
  border-radius: 48px;
  display: flex;
  align-items: center;
  gap: 48px;

  /* Ensures the container grows properly */
  min-height: 540px;
}

/* LEFT IMAGE FIX (uses background-image) */
#homeGalleryResultSection .author_image {
  flex: 0 0 38%;         /* proportion more like figma */
  border-radius: 32px;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;

  /* This forces the image block to always have height */
  height: 100%;
  min-height: 100%;
      background-color: #fff;
}

/* RIGHT CONTENT AREA */
#homeGalleryResultSection .author_content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;  /* centers content vertically */
  gap: 40px;
}

#homeGalleryResultSection .author_content img {
  width: 46px;
}

#homeGalleryResultSection .author_content h2 {
  margin: 0;
  font-size: 2.25rem;
  font-family: 'SF Pro Display', sans-serif;
  font-weight: 600;
  line-height: 2.75rem;
  color: var(--glo);
      text-align: left;
}

/* AUTHOR NAME BLOCK */
#homeGalleryResultSection .author_detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#homeGalleryResultSection .author_name h4 {
  font-size: 1.5rem;
  color: #fff;
  line-height: 2.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}

#homeGalleryResultSection .author_name span {
  font-size: 1rem;
  color: #fff;
  opacity: 70%;
}

/* BUTTONS */
#homeGalleryResultSection .author_contact {
  display: flex;
  align-items: center;
  gap: 8px;
}

#homeGalleryResultSection .author_contact .btn {
  padding: 10px 24px;
  border-radius: 70px;
  font-size: 1rem;
  font-weight: 500;
  border: 0;
}

#homeGalleryResultSection .author_contact .btn.btn-light {
  background-color: #fff;
  color: #000;
}

#homeGalleryResultSection .author_contact .btn.btn-dark {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}



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

@media (max-width: 991px) {
  #homeGalleryResultSection .gallery-grid-items-wrap {
    grid-template-columns: repeat(2, 1fr);
  }

  #homeGalleryResultSection .reason-to-believe {
    grid-template-columns: 1fr;
  }

  #homeGalleryResultSection .author-box {
    flex-direction: column;
    text-align: center;
  }

  #homeGalleryResultSection .author_image {
    width: 100%;
    height: 380px; /* Image remains full and cropped */
  }

  #homeGalleryResultSection .author_detail {
    flex-direction: column;
    gap: 24px;
  }
}

@media (max-width: 575px) {
  #homeGalleryResultSection .gallery-grid-items-wrap {
    grid-template-columns: 1fr;
  }

  
}




#homeArticleSection{padding:6.25rem 0}

#homeArticleSection>.container{display:flex;flex-direction:column;gap:3.75rem;padding:0 1rem}

#homeArticleSection .title-section{align-items:center}

#homeArticleSection .title h2{font-size:3rem;margin:0}

#homeArticleSection .btn.btn-primary.view-all{padding:10px 24px;border-radius:70px;font-size:1rem;font-family:'SF Pro Display',sans-serif;font-weight:500;background:#4c514d;border-color:#4c514d;color:#fff}

#homeArticleSection .blog-loop{padding:28px;background-color:var(--mist);border-radius:24px;border:1px solid rgba(0,0,0,.04);display:grid;grid-template-columns:1fr 1fr;gap:20px}

#homeArticleSection .blog-item{display:flex;gap:28px;padding:28px;border-radius:16px;background:transparent;align-items:flex-start;border-bottom:1px solid rgba(0,0,0,.02)}

#homeArticleSection .blog-item:nth-child(odd){border-right:1px solid rgba(0,0,0,.02)}

#homeArticleSection .bi-image{flex:0 0 150px;height:150px;border-radius:12px;background-position:center;background-size:cover;background-repeat:no-repeat}

#homeArticleSection .bi-content{display:flex;flex-direction:column;justify-content:space-between;gap:12px; height: 100%;}

#homeArticleSection .bi-meta{display:flex;justify-content:space-between;align-items:center;gap:12px}

#homeArticleSection .bi-date{font-size:.95rem;color:rgba(0,0,0,.8)}

#homeArticleSection .bi-category{font-size:.75rem;padding:6px 12px;border-radius:24px;background-color:rgba(0,0,0,.06);font-weight:500}

#homeArticleSection .bi-title{font-size:1.125rem;font-weight:600;line-height:1.4;font-family:'SF Pro Display',sans-serif;margin:0}

/* responsive: keep two columns on large tablets, one column on small screens */
@media(max-width:991px){
  #homeArticleSection .blog-loop{grid-template-columns:1fr}
  #homeArticleSection .blog-item{flex-direction:row;align-items:flex-start;border-right:none}
  #homeArticleSection .bi-image{flex:0 0 140px;height:140px}
}

@media(max-width:575px){
  #homeArticleSection .blog-item{flex-direction:column;align-items:stretch;padding:20px}
  #homeArticleSection .bi-image{width:100%;height:220px;flex:0 0 auto;border-radius:12px}
  #homeArticleSection .bi-meta{flex-direction:row;justify-content:space-between}
  #homeArticleSection .bi-title{font-size:1rem}
}



#homeFaqSection .faq-section{background:#fff;color:#000}
#homeFaqSection .faq-title{font-size:2rem;font-weight:600}
#homeFaqSection .faq-subtitle{color:#555;margin-bottom:2rem}
#homeFaqSection .accordion-item{border:1px solid #eee;border-radius:.75rem;margin-bottom:1rem;overflow:hidden;background:#f9f8f7;box-shadow:0 2px 6px rgba(0,0,0,.04)}
#homeFaqSection .accordion-flush>.accordion-item{border-radius:1rem}
#homeFaqSection .accordion-button:focus{box-shadow:none}
#homeFaqSection .accordion-button{background-color:var(--mist);color:#000;font-size:1.25rem;font-weight:600;padding:1rem 1.25rem;box-shadow:none;line-height:2rem;font-family:'SF Pro Display',sans-serif;border:none;transition:background-color .3s ease}
#homeFaqSection .accordion-button:hover{background-color:#f1efed}
#homeFaqSection .accordion-button:not(.collapsed){background-color:#6c635a;color:#fff}
#homeFaqSection .accordion-button::after{display:none}
#homeFaqSection .accordion-button::before{flex-shrink:0;width:var(--bs-accordion-btn-icon-width);height:var(--bs-accordion-btn-icon-width);margin-left:0;margin-right:17px;content:"";background-image:var(--bs-accordion-btn-icon);background-repeat:no-repeat;background-size:var(--bs-accordion-btn-icon-width);transition:var(--bs-accordion-btn-icon-transition)}
#homeFaqSection .accordion-button:not(.collapsed)::before{filter:invert(1);transform:rotate(180deg)}
#homeFaqSection .accordion-body{background-color:var(--mist);color:#444;padding:1rem 1.25rem;font-size:.95rem;line-height:1.6}



/* CTA SECTION (Matches Figma exactly) */

#homeCtaSection {
  margin-top: 6rem;
}

#homeCtaSection .row {
  position: relative;
  padding: 6rem 5rem;
  border-radius: 40px;
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Strong white gradient on left */
#homeCtaSection .row:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.65) 35%, rgba(255,255,255,0) 60%);
  border-radius: inherit;
  z-index: 0;
}

/* Content container */
#homeCtaSection .row .col-md-6 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  z-index: 2;
  align-items: start;
}

/* Typography */
#homeCtaSection h2 {
  font-size: 3.5rem;
  font-weight: 600;
  max-width: 460px;
}

#homeCtaSection p {
  font-size: 1.15rem;
  color: #333;
  max-width: 460px;
}

/* Buttons */
#homeCtaSection .cta-btn-group {
  display: flex;
  gap: 12px;
}

#homeCtaSection .cta-btn-group .btn {
  padding: 12px 28px;
  border-radius: 60px;
  font-size: 1rem;
  font-weight: 500;
  font-family: "SF Pro Display", sans-serif;
  transition: all .25s ease;
}

/* Primary – Black */
#homeCtaSection .btn.fom {
  background: #000;
  color: #fff;
}

/* Secondary – Transparent border */
#homeCtaSection .btn.ot {
  border: 2px solid #000;
  background: transparent;
  color: #000;
}

#homeCtaSection .btn.fom:hover {
  opacity: .85;
}

#homeCtaSection .btn.ot:hover {
  background: #000;
  color: #fff;
}


/* ============================
   ✅ Responsive Media Queries
   ============================ */

/* Laptop screens (1200px and down) */
@media (max-width: 1200px) {
  #homeCtaSection .row {
    padding: 5rem 3.5rem;
    background-size: 120%;
  }

  #homeCtaSection h2 {
    font-size: 3rem;
  }
}

/* Tablet screens (992px and down) */
@media (max-width: 992px) {
  #homeCtaSection .row {
    padding: 4rem 2.5rem;
    flex-direction: column;
    background-position: center;
    background-size: cover;
    text-align: center;
  }

  #homeCtaSection .row .col-md-6 {
    align-items: center;
  }

  #homeCtaSection .cta-btn-group {
    justify-content: center;
  }

  /* Adjust gradient to lighter opacity so image shows better */
  #homeCtaSection .row:before {
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0.75) 40%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}

/* Mobile screens (576px and down) */
@media (max-width: 576px) {
  #homeCtaSection .row {
    padding: 3rem 1.5rem;
  }

  #homeCtaSection h2 {
    font-size: 2.3rem;
  }

  #homeCtaSection p {
    font-size: 1rem;
  }

  #homeCtaSection .cta-btn-group {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  #homeCtaSection .cta-btn-group .btn {
    width: 100%;
    text-align: center;
  }
}

























/* =====================================================
   FOOTER — EXACT FIGMA MATCH
===================================================== */
#footerSection {
  background-color: #4c514d;
  color: #fff;
  padding: 4rem 0 3rem;
}

/* Footer container layout */
#footerSection .footer-main {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: flex-start;
  gap: 3rem;
}

/* Logo + contact block (left column) */
#footerSection .footer-col-1 img {
  width: 210px;
  margin-bottom: 1.5rem;
}

#footerSection .footer-contact i {
  font-size: 18px;
  width: 22px;
}

/* Right side links */
#footerSection .footer-links h4 {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-bottom: 1rem;
}

#footerSection .footer-links a {
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--glo) !important;
}

/* Contact Button */
#footerSection .footer-button a {
  padding: 10px 32px;
  font-size: 1rem;
  border-radius: 40px;
  background-color: #fff;
  color: #000;
  font-weight: 600;
}

/* Footer Bottom */
#footerSection .copyright {
  margin-top: 4rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 1.5rem;
}

#footerSection .copyright .privacy {
  display: flex;
  gap: 2rem;
}

#footerSection .copyright .privacy a,
#footerSection .copyright p {
  font-size: .85rem;
  opacity: .7;
  text-decoration: none;
}

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

@media (max-width: 992px) {
  #footerSection .footer-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  #footerSection .footer-main {
    grid-template-columns: 1fr;
    text-align: center;
  }

  #footerSection .footer-contact {
    justify-content: center;
  }

  #footerSection .footer-button {
    justify-content: center;
  }

  #footerSection .copyright {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}