/* Marmm The Klinik — style.css */

:root{
  --forest:#102A43;
  --forest-deep:#0B2235;
  --ivory:#FffffF;
  --gold:#C9A15F;
  --gold-soft:#E4CFA0;
  --blush:#E8C9BC;
  --ink:#1C2422;
   --line:rgba(16,42,67,0.14);
  /* --line: rgba(15,61,59,0.14); */
  --max: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope', sans-serif;
  color:var(--ink);
  background:var(--ivory);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Fraunces', serif;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
.eyebrow{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:700; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--gold);}

/* ===== Top utility bar ===== */
.utility{
  background:var(--forest-deep); color:var(--ivory); font-size:13px;
}
.utility .wrap{display:flex; justify-content:space-between; align-items:center; padding:8px 24px; gap:12px; flex-wrap:wrap;}
.utility a{opacity:.9;}
.utility a:hover{opacity:1;}
.utility .u-left{display:flex; gap:18px; flex-wrap:wrap;}
.utility .u-left span{opacity:.7;}

/* ===== Nav ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,246,239,0.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.logo{display:flex; flex-direction:column; line-height:1;}
.logo b{font-family:'Fraunces', serif; font-size:22px; font-weight:600; letter-spacing:.01em;}
.logo span{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-top:4px;}
.nav-links{display:flex; gap:30px; font-size:14px; font-weight:600;}
.nav-links a{position:relative; padding:4px 0;}
.nav-links a::after{
  content:""; position:absolute; bottom:0; left:0; width:0; height:2px;
  background:var(--gold); transition:width .25s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-cta{
  background:var(--forest); color:var(--ivory); padding:11px 22px; border-radius:100px;
  font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px;
  transition:transform .2s ease, background .2s ease;
}
.nav-cta:hover{background:var(--forest-deep); transform:translateY(-1px);}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:60;}
.burger div{width:26px; height:2px; background:var(--ink);}

/* ===== Hero ===== */
.hero{
  position:relative; padding:100px 0 90px; overflow:hidden;
  background:
    radial-gradient(circle at 85% 10%, rgba(201,161,95,0.16), transparent 45%),
    var(--ivory);
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center;
}
.hero h1{
  font-size:clamp(38px, 5.4vw, 68px); font-weight:600; line-height:1.03; letter-spacing:-.01em;
  color:var(--forest-deep);
}
.hero h1 em{font-style:italic; color:var(--gold); font-weight:500;}
.hero p.lead{
  font-size:17px; line-height:1.7; color:#3d4744; margin-top:22px; max-width:480px;
}
.hero-cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.btn{
  padding:15px 28px; border-radius:100px; font-weight:700; font-size:14.5px;
  display:inline-flex; align-items:center; gap:9px; transition:all .22s ease; border:1px solid transparent;
}
.btn-primary{background:var(--forest); color:var(--ivory);}
.btn-primary:hover{background:var(--forest-deep); transform:translateY(-2px); box-shadow:0 12px 24px -8px rgba(15,61,59,.5);}
.btn-ghost{border-color:var(--forest); color:var(--forest);}
.btn-ghost:hover{background:var(--forest); color:var(--ivory);}

.hero-meta{display:flex; gap:28px; margin-top:44px; flex-wrap:wrap;}
.hero-meta .m{display:flex; flex-direction:column;}
.hero-meta .m b{font-family:'Fraunces',serif; font-size:26px; color:var(--forest-deep);}
.hero-meta .m span{font-size:12px; color:#5a655f; letter-spacing:.02em;}

/* hero image panel */
.hero-visual{position:relative; height:520px; border-radius:28px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(10,43,41,.5);}
.hero-img{width:100%; height:100%; object-fit:cover;}
.growth-card{
  position:absolute; left:24px; right:24px; bottom:24px;
  background:rgba(250,246,239,.96); border-radius:18px; padding:20px 22px;
  display:flex; justify-content:space-between; align-items:center;
}
.growth-card b{font-family:'Fraunces', serif; font-size:15px; color:var(--forest-deep);}
.growth-card span{font-size:12px; color:#5a655f;}
.rating-chip{
  position:absolute; top:24px; left:24px; background:rgba(250,246,239,.96);
  border-radius:14px; padding:12px 16px; display:flex; align-items:center; gap:10px;
}
.rating-chip b{font-family:'Fraunces',serif; font-size:20px; color:var(--forest-deep);}
.rating-chip span{font-size:11px; color:#5a655f; display:block;}
.stars{color:var(--gold); font-size:13px; letter-spacing:1px;}

/* ===== marquee strip ===== */
.strip{background:var(--forest-deep); color:var(--gold-soft); padding:14px 0; overflow:hidden; white-space:nowrap;}
.strip .track{display:inline-block; animation:scroll 26s linear infinite; font-size:13px; letter-spacing:.06em; font-weight:600;}
.strip .track span{margin:0 26px;}
@keyframes scroll{0%{transform:translateX(0);} 100%{transform:translateX(-50%);}}

/* ===== Section shell ===== */
section{padding:100px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(30px,4vw,44px); font-weight:600; color:var(--forest-deep); margin-top:14px; line-height:1.1;}
.section-head p{margin-top:16px; color:#4a5450; font-size:15.5px; line-height:1.7;}

/* ===== Services ===== */
.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden;}
.service{background:var(--ivory); transition:background .25s ease;}
.service:hover{background:#fff;}
.service-img{width:100%; height:180px; object-fit:cover;}
.service-body{padding:28px 30px 34px;}
.service .num{font-family:'Fraunces',serif; font-size:13px; color:var(--gold); font-weight:600;}
.service h3{font-size:21px; font-weight:600; margin-top:14px; color:var(--forest-deep);}
.service p{font-size:14px; color:#4a5450; margin-top:10px; line-height:1.65;}

/* ===== About / split ===== */
.about{background:var(--forest); color:var(--ivory);}
.about .section-head p{color:rgba(250,246,239,.75);}
.about .eyebrow{color:var(--gold-soft);}
.about .section-head h2{color:var(--ivory);}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
.about-list{display:flex; flex-direction:column; gap:26px;}
.about-item{display:flex; gap:18px; border-top:1px solid rgba(250,246,239,.15); padding-top:22px;}
.about-item:first-child{border-top:none; padding-top:0;}
.about-item .ai-num{font-family:'Fraunces',serif; font-size:15px; color:var(--gold-soft); min-width:34px;}
.about-item h4{font-size:17px; font-weight:700; margin-bottom:6px;}
.about-item p{font-size:14px; color:rgba(250,246,239,.7); line-height:1.6;}

/* ===== Gallery ===== */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.gallery-grid img{
  width:100%; height:230px; object-fit:cover; border-radius:16px;
  transition:transform .35s ease;
}
.gallery-grid img:hover{transform:scale(1.03);}

/* ===== Timing / Contact bar section ===== */
.info-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.info-card{
  border:1px solid var(--line); border-radius:20px; padding:30px 28px; background:#fff;
}
.info-card .icon-txt{font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--gold); font-weight:700;}
.info-card h3{font-family:'Fraunces',serif; font-size:22px; margin-top:14px; color:var(--forest-deep);}
.info-card p{font-size:14.5px; color:#4a5450; margin-top:10px; line-height:1.6;}
.info-card a.tel{color:var(--forest); font-weight:700; display:inline-block; margin-top:8px;}

/* ===== Location / map ===== */
.location{display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:24px; overflow:hidden; border:1px solid var(--line);}
.location .map-side{min-height:380px; background:linear-gradient(135deg, var(--blush), var(--gold-soft)); position:relative;}
.location .map-side::after{
  content:"📍"; position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); font-size:40px;
}
.location .txt-side{background:#fff; padding:46px 44px; display:flex; flex-direction:column; justify-content:center;}
.location .txt-side h3{font-family:'Fraunces',serif; font-size:26px; color:var(--forest-deep);}
.location .txt-side p{margin-top:14px; color:#4a5450; font-size:15px; line-height:1.7;}
.location .btn-primary{margin-top:24px; align-self:flex-start;}

/* ===== CTA banner ===== */
.cta-banner{
  background:linear-gradient(120deg, var(--forest-deep), var(--forest));
  color:var(--ivory); text-align:center; border-radius:28px; padding:70px 40px; margin:0 24px;
}
.cta-banner h2{font-size:clamp(28px,4vw,42px); font-weight:600;}
.cta-banner p{margin-top:14px; color:rgba(250,246,239,.75); max-width:520px; margin-left:auto; margin-right:auto;}
.cta-banner .hero-cta{justify-content:center; margin-top:30px;}

/* ===== Footer ===== */
footer{background:var(--forest-deep); color:rgba(250,246,239,.7); padding:60px 0 30px; margin-top:60px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(250,246,239,.12);}
footer h4{color:var(--ivory); font-size:14px; margin-bottom:16px; letter-spacing:.04em;}
footer .flogo{font-family:'Fraunces',serif; font-size:24px; color:var(--ivory); font-weight:600;}
footer p{font-size:14px; line-height:1.7; margin-top:12px; max-width:320px;}
footer ul{list-style:none;}

footer li{margin-bottom:10px; font-size:14px;}
footer li a:hover{color:var(--gold-soft);}
.foot-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:12.5px; flex-wrap:wrap; gap:10px;}

/* ===== Sticky mobile CTA ===== */
.mobile-cta{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:80;
  background:var(--forest-deep); padding:12px 16px; gap:10px;
}
.mobile-cta a{
  flex:1; text-align:center; padding:13px; border-radius:12px; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.mobile-cta .call{background:var(--gold); color:var(--forest-deep);}
.mobile-cta .wa{background:var(--ivory); color:var(--forest-deep);}

/* ===== Mobile menu bottom buttons ===== */
.menu-buttons{display:none;}
.menu-buttons a::after{display:none;}
.btn-wa{background:#25D366; color:#fff;}
.btn-wa:hover{background:#1ebc59; color:#fff;}

/* ===== Responsive ===== */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{height:400px; order:-1;}
  .about-grid{grid-template-columns:1fr; gap:36px;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .info-cards{grid-template-columns:1fr;}
  .location{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr; gap:28px;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .utility{display:none;}
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:74%; max-width:320px;
    background:var(--forest-deep); flex-direction:column; padding:100px 32px 40px; gap:22px;
    transform:translateX(100%); transition:transform .3s ease; z-index:55;
    overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{color:var(--ivory); font-size:17px;}
  .nav-cta{display:none;}
  .burger{display:flex;}
  .menu-buttons{
    display:flex; flex-direction:column; gap:14px; width:100%; margin-top:14px;
  }
  .menu-buttons .btn{width:100%; justify-content:center; padding:15px 20px; font-size:14px;}
  .services-grid{grid-template-columns:1fr;}
  section{padding:64px 0;}
  .hero{padding:48px 0 60px;}
  .hero-cta{flex-direction:column;}
  .btn{width:100%; justify-content:center;}
  .hero-meta{gap:20px;}
  body{padding-bottom:70px;}
  .mobile-cta{display:flex;}
  .cta-banner{margin:0 16px; padding:46px 24px;}
  .cta-banner .hero-cta{flex-direction:column;}
  .gallery-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .gallery-grid img{height:150px;}
}

@media (prefers-reduced-motion: reduce){
  .strip .track{animation:none !important;}
  .gallery-grid img{transition:none;}
}

/* ===== TABS SECTION ===== */
.tabs-section{padding-top:70px;}
.tabs-nav{
  display:flex; gap:8px; border-bottom:1px solid var(--line); margin-bottom:40px;
  flex-wrap:wrap;
}
.tab-btn{
  background:none; border:none; cursor:pointer; font-family:'Manrope', sans-serif;
  font-size:15px; font-weight:700; color:#5a655f; padding:14px 20px; position:relative;
  transition:color .2s ease;
}
.tab-btn::after{
  content:""; position:absolute; bottom:-1px; left:0; width:100%; height:2px;
  background:var(--forest); transform:scaleX(0); transition:transform .25s ease;
}
.tab-btn.active{color:var(--forest-deep);}
.tab-btn.active::after{transform:scaleX(1);}
.tab-btn:hover{color:var(--forest-deep);}

.tab-panel{display:none; animation:fadeIn .3s ease;}
.tab-panel.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

.panel-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; align-items:start;}
.panel-grid h3{font-family:'Fraunces',serif; font-size:24px; color:var(--forest-deep); margin-bottom:14px;}
.panel-grid p{color:#4a5450; font-size:15px; line-height:1.7; margin-bottom:8px;}
.check-list{list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:10px;}
.check-list li{font-size:14.5px; color:#3d4744; padding-left:26px; position:relative;}
.check-list li::before{content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:700;}

.panel-stats{display:flex; flex-direction:column; gap:20px;}
.pstat{border:1px solid var(--line); border-radius:16px; padding:20px 24px; background:#fff;}
.pstat b{font-family:'Fraunces',serif; font-size:26px; color:var(--forest-deep); display:block;}
.pstat span{font-size:12.5px; color:#5a655f;}

.tab-service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.tab-service-item{
  border:1px solid var(--line); border-radius:16px; padding:22px 20px; background:#fff;
}
.tab-service-item b{display:block; font-size:15.5px; color:var(--forest-deep); margin-bottom:6px;}
.tab-service-item span{font-size:13.5px; color:#5a655f;}

.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.review-card{border:1px solid var(--line); border-radius:16px; padding:24px 22px; background:#fff;}
.review-card .stars{color:var(--gold); font-size:14px; margin-bottom:12px;}
.review-card p{font-size:14.5px; color:#3d4744; line-height:1.6; margin-bottom:12px;}
.review-card span{font-size:12.5px; color:#8a938e;}
.review-note{margin-top:18px; font-size:12.5px; color:#8a938e; font-style:italic;}

.map-side.small{min-height:220px; border-radius:16px;}

/* ===== BOOKING FORM ===== */
.consult-form{max-width:760px; background:#fff; border:1px solid var(--line); border-radius:24px; padding:40px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-group{margin-bottom:20px; display:flex; flex-direction:column; gap:8px;}
.form-group label{font-size:13px; font-weight:700; color:var(--forest-deep);}
.form-group input, .form-group select, .form-group textarea{
  border:1px solid var(--line); border-radius:12px; padding:13px 16px; font-family:'Manrope', sans-serif;
  font-size:14.5px; color:var(--ink); background:var(--ivory); transition:border-color .2s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--gold);
}
.form-group textarea{resize:vertical;}
.form-error{
  display:none; background:#fdeceb; color:#a13a2f; border:1px solid #f3c9c4; border-radius:10px;
  padding:12px 16px; font-size:13.5px; margin-bottom:16px;
}
.form-error.show{display:block;}
.form-success{
  display:none; background:#e9f5ee; color:#1e6b45; border:1px solid #bfe3cf; border-radius:10px;
  padding:12px 16px; font-size:13.5px; margin-bottom:16px;
}
.form-success.show{display:block;}
.form-note{font-size:12.5px; color:#8a938e; margin-top:14px;}

/* ===== Floating action buttons ===== */
.floating-actions{
  position:fixed; right:24px; bottom:28px; display:flex; flex-direction:column; gap:12px; z-index:70;
}
.fab{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:21px; box-shadow:0 12px 24px -6px rgba(10,43,41,.45); border:none; cursor:pointer;
  transition:transform .2s ease, opacity .25s ease;
}
.fab:hover{transform:translateY(-3px) scale(1.04);}
.fab-call{background:var(--forest); color:var(--ivory);}
.fab-wa{background:#25D366; color:#fff;}
.fab-top{background:var(--gold); color:var(--forest-deep); opacity:0; pointer-events:none;}
.fab-top.show{opacity:1; pointer-events:auto;}

/* ===== Responsive additions ===== */
@media (max-width:960px){
  .panel-grid{grid-template-columns:1fr;}
  .tab-service-grid{grid-template-columns:1fr 1fr;}
  .review-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .tabs-nav{gap:2px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch;}
  .tab-btn{padding:12px 14px; font-size:14px; white-space:nowrap;}
  .tab-service-grid{grid-template-columns:1fr;}
  .consult-form{padding:26px 20px;}
  .floating-actions{bottom:86px; right:16px; gap:10px;}
  .fab-call, .fab-wa{display:none;}
  .fab{width:46px; height:46px; font-size:18px;}
}

/* .testimonial-video-card{ */
    /* max-width:900px; */
    /* margin:auto; */
    /* padding:30px; */
    /* background:#f8f4ec; */
    /* border-radius:30px; */
    /* box-shadow:0 15px 40px rgba(0,0,0,.12); */
/* } */
/*  */
/*  */
/* 16:9 Video */
/*  */
/* .video-wrapper{ */
    /* width:100%; */
    /* aspect-ratio:4/3; */
    /* overflow:hidden; */
    /* border-radius:22px; */
    /* margin-bottom:25px; */
/* } */
/*  */
/* .video-wrapper video{ */
    /* width:100%; */
    /* height:100%; */
    /* object-fit:cover; */
    /* display:block; */
/* } */

/* .hero{ */
    /* position:relative; */
    /* width:100%; */
    /* height:100vh; */
    /* overflow:hidden; */
/* } */
/*  */
/* .hero-video{ */
    /* position:absolute; */
    /* top:0; */
    /* left:0; */
    /* width:100%; */
    /* height:100%; */
    /* object-fit:cover; */
/* } */
/*  */
/* .hero-overlay{ */
    /* position:absolute; */
    /* inset:0; */
    /* background:rgba(0,0,0,.45); */
/* } */
/*  */
/* .hero-content{ */
    /* position:relative; */
    /* z-index:2; */
    /* height:100%; */
    /* display:flex; */
    /* flex-direction:column; */
    /* justify-content:center; */
    /* align-items:flex-start; */
    /* width:90%; */
    /* max-width:1200px; */
    /* margin:auto; */
    /* color:#fff; */
/* } */
/*  */
/* .hero-content h1{ */
    /* font-size:60px; */
    /* margin-bottom:15px; */
/* } */
/*  */
/* .hero-content p{ */
    /* font-size:20px; */
    /* margin-bottom:30px; */
/* } */
/*  */
/* @media(max-width:768px){ */
/*  */
/* .hero{ */
    /* height:70vh; */
/* } */
/*  */
/* .hero-content h1{ */
    /* font-size:34px; */
/* } */
/*  */
/* .hero-content p{ */
    /* font-size:16px; */
/* } */
/*  */
/* } */
.hero-video-section{
    width:100%;
    padding:20px 0 40px;
    background:-moz-only-whitespace;
}

.hero-video-section video{
    width:100%;
    max-width:1200px;
    aspect-ratio:16/9;
    display:block;
    margin:auto;
    object-fit:cover;
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.founder-section{
    padding:80px 8%;
    background:#f8f8f8;
}

.founder-section .container{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
}

.founder-image{
    flex:1;
    min-width:320px;
}
/*  */
/* .founder-image img{ */
    /* width:100%; */
    /* max-width:420px; */
    /* height:520px; */
    /* object-fit:cover; */
    /* border-radius:20px; */
    /* display:block; */
    /* margin:auto; */
    /* box-shadow:0 15px 40px rgba(0,0,0,.15); */

.founder-image img{
    width:100%;
    max-width:500px;
    height:600px;
    object-fit:cover;
    border-radius:20px;
    transform:translateY(-30px);
}

.founder-content{
    flex:1;
    min-width:320px;
    text-align: center;
}

.tag{
    display:inline-block;
    background:#102A43;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    margin-bottom:20px;
    font-size:14px;
}

.founder-content h2{
    font-size:42px;
    color:#222;
    margin-bottom:20px;
    text-align: center;
}

.founder-content p{
    font-size:17px;
    line-height:1.8;
    color:#555;
    margin-bottom:30px;
    text-align: center;
}

.info-box{
    display:flex;
    gap:20px;
    margin-bottom:35px;
}

.info-box div{
    background:#fff;
    padding:20px;
    text-align:center;
    flex:1;
    border-radius:15px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.info-box h3{
    color:#102A43;
    font-size:28px;
    margin-bottom:8px;
    text-align: center;
}

.info-box p{
    margin:0;
    font-size:14px;
    text-align: center;
}

.btn-founder{
    display:inline-block;
    padding:15px 35px;
    background:#102A43;
    color:#fff;
    text-decoration:none;
    border-radius:40px;
    transition:.3s;
}

.btn-founder:hover{
    background:#C49A5A;
}

@media(max-width:768px){

    .founder-section .container{
        flex-direction:column;
        text-align:center;
    }

    .founder-image img{
        max-width:300px;
        height:380px;
    }

    .info-box{
        flex-direction:column;
    }

    .founder-content h2{
        font-size:32px;
        text-align: center;
    }
}
.founder-gallery{
    display:flex;
    gap:15px;
    margin-top:30px;
    overflow-x:auto;
    scrollbar-width:none;
}

.founder-gallery::-webkit-scrollbar{
    display:none;
}

.founder-gallery img{
    width:110px;
    height:150px;      /* Vertical */
    object-fit:cover;
    border-radius:12px;
    flex-shrink:0;
    box-shadow:0 5px 10px rgba(0,0,0,0.15);
}

@media(min-width:768px){

    .founder-gallery{
        overflow:visible;
    }

    .founder-gallery img{
        width:130px;
        height:150px;
    }

}
.desktop-only{
    display:block;
    margin-top:25px;
}

@media(max-width:768px){
    .desktop-only{
        display:none;
    }

    .mobile-only{
        display:block;
    }
}

.achievements{

    padding:80px 0;
    background:#f8f8f8;

}

.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}

.achievements h2{

    text-align:center;
    font-size:40px;
    margin-bottom:10px;

}

.subtitle{

    text-align:center;
    color:#777;
    margin-bottom:50px;

}

.achievement-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}

.achievement-card{

    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;

}

.achievement-card:hover{

    transform:translateY(-8px);

}

.achievement-card img{

    width:100%;
    height:280px;
    object-fit:cover;

}

.achievement-card h3{

    text-align:center;
    margin:20px 15px 10px;
    font-size:22px;

}

.achievement-card p{

    padding:0 20px 25px;
    text-align:center;
    color:#666;
    line-height:1.7;

}

/* Mobile */

@media(max-width:992px){

.achievement-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.achievement-grid{

grid-template-columns:1fr;

}

.achievement-card img{

height:260px;

}

}

/* =========================
   MOBILE NAVBAR
========================= */

@media (max-width: 768px){

    nav.wrap{
        height:70px;
        padding:0 20px;
        position:relative;
    }

    /* Hide Call Now on mobile */
    .nav-cta{
        display:none;
    }

    /* Show hamburger */
    .burger{
        display:flex;
        flex-direction:column;
        gap:5px;
        cursor:pointer;
        z-index:1001;
    }

    .burger div{
        width:26px;
        height:2px;
        background:#012e1b;
    }

    /* Menu closed */
    .nav-links{
        display:none;
        position:absolute;

        top:70px;
        left:0;

        width:100%;

        background:#0F3D36;

        padding:25px 20px;

        flex-direction:column;
        align-items:flex-start;

        gap:18px;

        z-index:1000;

        box-shadow:0 10px 20px rgba(0,0,0,0.25);
    }

    /* Menu OPEN */
    .nav-links.open{
        display:flex;
    }

    .nav-links a{
        width:100%;
        font-size:16px;
        padding:8px 0;
         /* color:#1f2937 */
         color:#C49A5A;
    }

    .menu-buttons{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:10px;
        margin-top:10px;
    }

    .menu-buttons .btn{
        width:100%;
        text-align:center;
    }
}
/* ==========================
   GOOGLE FONT
========================== */

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

body{
    font-family:'Poppins',sans-serif;
    background:#FAF6EF;
    color:#1E1E1E;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}


/* ==========================
      ABOUT HERO
========================== */

.about-hero{
    padding:90px 0;
}

.about-wrapper{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:60px;
    align-items:center;
}

.about-image img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.about-content span{

    color:#C49A5A;
    letter-spacing:3px;
    font-size:14px;
    font-weight:600;

}

.about-content h2{

    font-family:'Fraunces',serif;
    font-size:55px;
    line-height:1.15;
    margin:18px 0;

}

.about-content p{

    color:#555;
    line-height:1.9;
    font-size:17px;
    margin-bottom:35px;

}

.about-btn{

    display:inline-block;
    background:#102A43;
    color:#fff;
    text-decoration:none;
    padding:15px 38px;
    border-radius:50px;
    transition:.3s;

}

.about-btn:hover{

    background:#145247;
    transform:translateY(-3px);

}


/* ==========================
      COMMON HEADING
========================== */

.heading{

    text-align:center;
    margin-bottom:60px;

}

.heading span{

    color:#C49A5A;
    letter-spacing:3px;
    font-size:14px;
    font-weight:600;

}

.heading h2{

    font-family:'Fraunces',serif;
    font-size:48px;
    margin-top:15px;

}

.heading p{

    margin-top:18px;
    color:#666;
    max-width:700px;
    margin-inline:auto;
    line-height:1.8;

}


/* ==========================
      WHY MARMM
========================== */

.why-marmm{

    padding:90px 0;
    background:#102A43;

}

.why-marmm .heading h2,
.why-marmm .heading p{

    color:#fff;

}

.why-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}

.why-card{

    background:#fff;
    border-radius:18px;
    padding:35px 25px;
    text-align:center;
    transition:.3s;

}

.why-card:hover{

    transform:translateY(-8px);

}

.why-card h3{

    margin-bottom:15px;
    color:#102A43;

}

.why-card p{

    color:#666;
    line-height:1.8;

}
/* ==========================
      PROCEDURE ROOMS
========================== */

.rooms{
    padding:90px 0;
    background:#FAF6EF;
}

.room-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin-top:40px;
}

.room-card{
    display:block;
    background:#fff;
    text-decoration:none;
    color:inherit;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s ease;
}

.room-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.15);
}

.room-card img{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.room-card:hover img{
    transform:scale(1.08);
}

.room-card h3{
    padding:18px;
    text-align:center;
    font-size:20px;
    color:#102A43;
    font-family:'Fraunces',serif;
}


/* ==========================
      TABLET
========================== */

@media (max-width:992px){

.about-wrapper{
    grid-template-columns:1fr;
}

.about-content{
    text-align:center;
}

.why-grid{
    grid-template-columns:repeat(2,1fr);
}

/* 2 cards */
.room-grid{
    grid-template-columns:repeat(2,1fr);
}

}


/* ==========================
      MOBILE
========================== */

@media (max-width:768px){

.about-hero{
    padding:60px 0;
}

.about-image img{
    height:280px;
}

.about-content h2{
    font-size:36px;
}

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

.why-grid{
    grid-template-columns:1fr;
}

/* 1 card */
.room-grid{
    grid-template-columns:1fr;
}

.room-card img{
    height:220px;
}

.room-card h3{
    font-size:18px;
}

}
/*==============================
        GLOBAL
==============================*/

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

body{
    font-family:'Poppins',sans-serif;
    background:#FAF6EF;
    color:#222;
}

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}


/*==============================
        HERO
==============================*/

.service-hero{
    background:#102A43;
    color:#fff;
    text-align:center;
    padding:90px 20px;
}

.service-hero h1{
    font-family:'Fraunces',serif;
    font-size:55px;
    color:#C49A5A;
    margin-bottom:20px;
}

.service-hero p{
    max-width:700px;
    margin:auto;
    line-height:1.9;
    font-size:18px;
}


/*==============================
     SERVICE SECTION
==============================*/

.service-section{
    padding:90px 0;
}

.light{
    background:#fff;
}

.service-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px;
    margin-bottom:60px;
}

.service-content.reverse{
    direction:rtl;
}

.service-content.reverse .service-text{
    direction:ltr;
}

.service-image img{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 15px 30px rgba(0,0,0,.15);
    transition:.4s;
}

.service-image img:hover{
    transform:scale(1.03);
}

.service-text span{
    color:#C49A5A;
    letter-spacing:3px;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
}

.service-text h2{
    font-family:'Fraunces',serif;
    font-size:46px;
    color:#102A43;
    margin:15px 0 20px;
}

.service-text p{
    color:#666;
    line-height:1.9;
    font-size:17px;
}


/*==============================
       CARDS
==============================*/

.service-cards{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.35s;
}

.card:hover{
    transform:translateY(-8px);
}

.card img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:.4s;
}

.card:hover img{
    transform:scale(1.08);
}

.card h3{
    text-align:center;
    padding:18px;
    color:#102A43;
    font-size:20px;
}


/*==============================
       MOBILE
==============================*/

@media(max-width:992px){

.service-content{
    grid-template-columns:1fr;
    gap:35px;
}

.service-content.reverse{
    direction:ltr;
}

.service-text{
    text-align:center;
}

.service-cards{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.service-hero{
    padding:70px 20px;
}

.service-hero h1{
    font-size:38px;
}

.service-hero p{
    font-size:16px;
}

.service-image img{
    height:260px;
}

.service-text h2{
    font-size:34px;
}

.service-text p{
    font-size:15px;
}

.service-cards{
    grid-template-columns:1fr;
}

.card img{
    height:220px;
}

}
.hero-video-section{
    width:100%;
    padding:20px 0;
    background:#f8f5ef;
}

.hero-video{
    width:100%;
    max-width:1200px;
    height:auto;
    display:block;
    margin:auto;
    border-radius:25px;
    object-fit:cover;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.hero-video{
    outline:none;
    border:none;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#FAF6EF;
    color:#222;
}

.achievements-section{
    padding:90px 20px;
}

.achievements-container{
    max-width:1200px;
    margin:auto;
}

.achievements-heading{
    text-align:center;
    margin-bottom:70px;
}

.achievements-heading span{
    color:#C49A5A;
    letter-spacing:3px;
    font-size:14px;
    font-weight:600;
}

.achievements-heading h1{
    font-family:'Fraunces',serif;
    color:#102A43;
    font-size:50px;
    margin:15px 0;
}

.achievements-heading p{
    color:#666;
    line-height:1.8;
}


/* =========================
   ACHIEVEMENT CARD
========================= */

.achievement-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:60px;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    width: 100%;
    display: block;
}


/* =========================
   SLIDER
========================= */

.achievement-slider{
    position:relative;
    width:100%;
    overflow:hidden;
    touch-action:pan-y;
}

.slides{
    display:flex;
    transition:transform .45s ease;
}

.slides img{
    min-width:100%;
    width:100%;
    height:500px;
    object-fit:contain;
    display:block;
    user-select:none;
}


/* =========================
   ARROWS
========================= */

.slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:45px;
    height:45px;

    border:none;
    border-radius:50%;

    background:rgba(15,61,54,.85);
    color:#fff;

    font-size:32px;
    line-height:40px;

    cursor:pointer;
    z-index:5;

    transition:.25s;
}

.slider-btn:hover{
    background:#C49A5A;
    color:#102A43;
}

.slider-btn.prev{
    left:18px;
}

.slider-btn.next{
    right:18px;
}


/* =========================
   DOTS
========================= */

.slider-dots{
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);

    display:flex;
    gap:8px;

    z-index:5;
}

.slider-dot{
    width:8px;
    height:8px;

    border-radius:50%;
    background:rgba(255,255,255,.6);

    cursor:pointer;
    transition:.25s;
}

.slider-dot.active{
    width:24px;
    border-radius:10px;
    background:#C49A5A;
}


/* =========================
   DESCRIPTION
========================= */

.achievement-info{
    padding:35px 40px 40px;
    text-align: center;
    float: none;
    margin-left: auto;
    margin-right: auto;
}


.achievement-number{
    color:#C49A5A;
    font-size:13px;
    letter-spacing:3px;
    font-weight:600;
    text-align: center;
}

.achievement-info h2{
    font-family:'Fraunces',serif;
    color:#102A43;
    font-size:34px;
    margin:12px 0 15px;
    text-align: center;
}

.achievement-info p{
    color:#666;
    line-height:1.9;
    max-width:850px;
    text-align: center;
    margin: 0 auto;
}


/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .achievements-section{
        padding:60px 15px;
    }

    .achievements-heading{
        margin-bottom:45px;
    }

    .achievements-heading h1{
        font-size:34px;
    }

    .achievement-card{
        margin-bottom:40px;
        border-radius:16px;
    }

    .slides img{
        height:300px;
    }

    .slider-btn{
        width:38px;
        height:38px;
        font-size:26px;
    }

    .slider-btn.prev{
        left:10px;
    }

    .slider-btn.next{
        right:10px;
    }

    .achievement-info{
        padding:25px 22px 30px;
    }

    .achievement-info h2{
        font-size:27px;
    }

    .achievement-info p{
        font-size:14px;
        line-height:1.8;
    }

}
/*  */
/* .founder-image{ */
    /* width:100%; */
    /* text-align:center; */
/* } */
/*  */
/* .founder-image img{ */
    /* width:100%; */
    /* max-width:450px; */
    /* height:auto; */
    /* display:block; */
    /* margin:0 auto; */
    /* border-radius:20px; */
/* } */
/*  */
/* .founder-caption{ */
    /* padding-top:18px; */
/* } */
/*  */
/* .founder-caption span{ */
    /* display:block; */
    /* color:#C49A5A; */
    /* font-size:12px; */
    /* letter-spacing:3px; */
    /* font-weight:600; */
    /* margin-bottom:8px; */
/* } */
/*  */
/* .founder-caption h1{ */
    /* font-family:'Fraunces',serif; */
    /* color:#102A43; */
    /* font-size:40px; */
    /* margin:0 0 8px; */
/* } */
/*  */
/* .founder-caption p{ */
    /* color:#555; */
    /* font-size:16px; */
    /* margin:0; */
/* } */
/*  */
/* @media(max-width:768px){ */
/*  */
    /* .founder-image img{ */
        /* max-width:100%; */
    /* } */
/*  */
    /* .founder-caption{ */
        /* padding:15px 10px 0; */
    /* } */
/*  */
    /* .founder-caption h1{ */
        /* font-size:32px; */
    /* } */
/*  */
    /* .founder-caption span{ */
        /* font-size:11px; */
        /* letter-spacing:2px; */
    /* } */
/*  */
    /* .founder-caption p{ */
        /* font-size:14px; */
    /* } */
/*  */
/* } */

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

body {
    font-family: "DM Sans", sans-serif;
    background: #faf9f6;
    color: #102a43;
}


/* =========================
   MAIN SECTION
========================= */

.doctor-section {
    padding: 80px 6%;
    overflow: hidden;
}

.doctor-container {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 80px;
    align-items: center;
}


/* =========================
   IMAGE
========================= */

.doctor-image-area {
    position: relative;
}

.image-wrapper {
    position: relative;

    width: 100%;
    max-width: 500px;

    border-radius: 28px;
    overflow: visible;
}

.image-wrapper img {
    width: 100%;
    height: 620px;

    object-fit: cover;

    border-radius: 28px;

    display: block;

    box-shadow:
        0 25px 60px rgba(16, 42, 67, 0.15);
}


/* GOLD DECORATION */

.image-wrapper::before {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    border: 1px solid #c49a5a;

    border-radius: 28px;

    top: 18px;
    left: 18px;

    z-index: -1;
}


/* EXPERIENCE BADGE */

.experience-badge {

    position: absolute;

    right: -30px;
    bottom: 40px;

    background: #102a43;

    color: white;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    border: 5px solid #faf9f6;

    box-shadow: 0 15px 35px rgba(16, 42, 67, 0.2);
}

.experience-badge span {
    font-family: "Playfair Display", serif;

    font-size: 40px;

    color: #c49a5a;

    font-weight: 700;
}

.experience-badge small {
    font-size: 12px;

    line-height: 1.4;

    color: #fff;
}


/* =========================
   VIDEO BUTTON
========================= */

.video-button {

    position: absolute;

    left: 25px;
    bottom: 25px;

    border: none;

    background: rgba(255, 255, 255, 0.95);

    padding: 12px 18px;

    border-radius: 50px;

    display: flex;
    align-items: center;

    gap: 12px;

    cursor: pointer;

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    transition: 0.3s;
}

.video-button:hover {
    transform: translateY(-4px);
}

.play-icon {

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: #c49a5a;

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
}

.video-button strong {
    display: block;

    color: #102a43;

    font-size: 14px;
}

.video-button small {
    display: block;

    color: #777;

    font-size: 11px;

    margin-top: 2px;
}


/* =========================
   CONTENT
========================= */

.small-heading {

    color: #c49a5a;

    letter-spacing: 3px;

    font-size: 12px;

    font-weight: 700;
}

.doctor-content h1 {

    font-family: "Playfair Display", serif;

    font-size: clamp(42px, 5vw, 65px);

    line-height: 1.05;

    margin-top: 15px;

    color: #102a43;
}

.doctor-content h1 span {
    color: #c49a5a;
}

.designation {

    font-size: 18px;

    font-weight: 600;

    margin-top: 12px;

    color: #555;
}

.intro {

    max-width: 620px;

    margin-top: 25px;

    color: #596777;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================
   STATS
========================= */

.stats {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;
 width: 100%;
    margin-top: 30px;
}

.stat-box {
    width: 100%;
    min-width: 0;

    height: 100px;

    padding: 18px 16px;

    background: #fff;

    border: 1px solid #e5ded2;

    border-radius: 14px;

    box-sizing: border-box;
}

.stat-box:hover {

    transform: translateY(-5px);

    border-color: #c49a5a;

    box-shadow: 0 10px 30px rgba(16,42,67,0.08);
}

.stat-box h3 {

    font-family: "Playfair Display", serif;

    color: #c49a5a;

    font-size: 25px;

    margin: 0;
}

.stat-box p {

    font-size: 11px;

    color: #687685;

    line-height: 1.4;

    margin-top: 5px;
}


/* =========================
   TRAINING CARD
========================= */

.training-card {

    margin-top: 30px;

    display: flex;

    gap: 18px;

    padding: 22px;

    background: #fff;

    border-radius: 18px;

    border-left: 4px solid #c49a5a;

    box-shadow: 0 10px 30px rgba(16,42,67,0.06);
}

.training-icon {

    font-size: 35px;

    min-width: 45px;
}

.training-content span {

    font-size: 10px;

    letter-spacing: 2px;

    color: #c49a5a;

    font-weight: 700;
}

.training-content h2 {

    font-family: "Playfair Display", serif;

    font-size: 20px;

    margin-top: 5px;

    color: #102a43;
}

.training-content h4 {

    color: #c49a5a;

    margin-top: 4px;

    font-size: 13px;
}

.training-content p {

    font-size: 13px;

    line-height: 1.6;

    color: #687685;

    margin-top: 8px;
}


/* =========================
   BUTTONS
========================= */

.buttons {

    display: flex;

    gap: 15px;

    margin-top: 28px;

    align-items: center;
}

.primary-btn {

    text-decoration: none;

    background: #102a43;

    color: white;

    padding: 14px 24px;

    border-radius: 50px;

    font-weight: 600;

    font-size: 14px;

    transition: 0.3s;
}

.primary-btn span {
    color: #c49a5a;

    margin-left: 10px;

    font-size: 18px;
}

.primary-btn:hover {

    background: #c49a5a;

    transform: translateY(-3px);
}

.primary-btn:hover span {
    color: white;
}

.secondary-btn {

    border: none;

    background: transparent;

    color: #102a43;

    font-weight: 600;

    cursor: pointer;

    font-size: 14px;
}

.secondary-btn:hover {
    color: #c49a5a;
}


/* =========================
   GALLERY
========================= */

.gallery-section {

    max-width: 1200px;

    margin: 100px auto 0;

    text-align: center;
}

.gallery-heading span {

    color: #c49a5a;

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 700;
}

.gallery-heading h2 {

    font-family: "Playfair Display", serif;

    font-size: 38px;

    margin-top: 10px;

    color: #102a43;
}

.gallery {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 35px;
}

.gallery-item {

    height: 260px;

    position: relative;

    overflow: hidden;

    border-radius: 18px;

    cursor: pointer;
}

.gallery-item img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 0.5s;
}

.gallery-item:hover img {

    transform: scale(1.08);
}

.gallery-overlay {

    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;

    padding: 25px 20px 18px;

    color: white;

    text-align: left;

    background: linear-gradient(
        transparent,
        rgba(16,42,67,0.9)
    );
}

.gallery-overlay h3 {

    font-size: 16px;
}

.gallery-overlay p {

    font-size: 12px;

    margin-top: 4px;

    opacity: 0.8;
}


/* =========================
   VIDEO MODAL
========================= */

.video-modal {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.8);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 9999;

    padding: 20px;
}

.video-modal.active {
    display: flex;
}

.video-container {

    position: relative;

    width: 900px;

    max-width: 95%;

    background: black;

    border-radius: 15px;

    overflow: hidden;
}

.video-container video {

    width: 100%;

    display: block;
}

.close-video {

    position: absolute;

    right: 15px;
    top: 10px;

    z-index: 10;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    border: none;

    background: rgba(0,0,0,0.7);

    color: white;

    font-size: 25px;

    cursor: pointer;
}


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

@media (max-width: 900px) {

    .doctor-container {

        grid-template-columns: 1fr;

        gap: 60px;
    }

    .doctor-image-area {

        max-width: 600px;

        margin: auto;
    }

    .image-wrapper img {

        height: 550px;
    }

    .doctor-content {

        text-align: center;
    }

    .intro {
        margin-left: auto;
        margin-right: auto;
    }

    .training-card {

        text-align: left;
    }

    .buttons {

        justify-content: center;
    }
}


@media (max-width: 600px) {

    .doctor-section {

        padding: 50px 20px;
    }

    .image-wrapper img {

        height: 450px;
    }

    .experience-badge {

        width: 115px;
        height: 115px;

        right: -5px;

        bottom: 25px;
    }

    .experience-badge span {

        font-size: 30px;
    }

    .experience-badge small {

        font-size: 9px;
    }

    .video-button {

        left: 15px;
        bottom: 15px;
    }

    .doctor-content h1 {

        font-size: 42px;
    }

    .stats {

        grid-template-columns: 1fr;

    }

    .stat-box {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 15px;
    }

    .training-card {

        flex-direction: column;

        text-align: center;
    }

    .buttons {

        flex-direction: column;

    }

    .primary-btn {

        width: 100%;

        text-align: center;
    }

    .gallery {

        grid-template-columns: 1fr;
    }

    .gallery-heading h2 {

        font-size: 30px;
    }
}
.training-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 30px;
}

.training-card {
    display: flex;
    gap: 16px;

    padding: 22px;

    background: #fff;

    border-radius: 18px;

    border-left: 4px solid #c49a5a;

    box-shadow: 0 10px 30px rgba(16, 42, 67, 0.06);

    transition: 0.3s ease;
}

.training-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(16, 42, 67, 0.10);
}

.training-icon {
    font-size: 30px;
    min-width: 40px;
}

.training-content span {
    font-size: 9px;

    letter-spacing: 2px;

    color: #c49a5a;

    font-weight: 700;
}

.training-content h2 {
    font-family: "Playfair Display", serif;

    font-size: 18px;

    margin-top: 6px;

    color: #102a43;

    line-height: 1.3;
}

.training-content h4 {
    color: #c49a5a;

    margin-top: 5px;

    font-size: 12px;
}

.training-content p {
    font-size: 12px;

    line-height: 1.6;

    color: #687685;

    margin-top: 8px;
}
@media (max-width: 900px) {

    .training-section {
        grid-template-columns: 1fr;
    }

}
/*  */
/* .achievement-button { */
    /* text-decoration: none; */
    /* color: inherit; */
/* } */
/*  */
/* .achievement-button:hover { */
    /* transform: translateY(-4px); */
/* } */
/*  */
/* .achievement-button .play-icon { */
    /* font-size: 18px; */
/* } */

/* =====================================================
/* =====================================================
   INTERNATIONAL EXPERTISE SECTION
===================================================== */

.international-section {
    width: 100%;
    max-width: 1400px;

    margin: 45px auto 0;

    padding: 0 40px 80px;
}


/* =====================================================
   HEADING
===================================================== */

.international-heading {
    width: 100%;
    max-width: 900px;

    margin: 0 auto 35px;

    text-align: center;
}

.international-heading span {
    color: #c49a5a;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;
}

.international-heading h2 {
    font-family: "Playfair Display", serif;

    color: #102a43;

    font-size: clamp(35px, 4vw, 52px);

    line-height: 1.15;

    margin-top: 10px;
}

.international-heading p {
    color: #687685;

    font-size: 15px;

    line-height: 1.7;

    margin-top: 15px;
}


/* =====================================================
   TRAINING ROW
===================================================== */

.training-row {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    height: 360px;

    margin: 0 auto 35px;

    background: #ffffff;

    border-radius: 28px;

    overflow: hidden;

    border: 1px solid #eee9df;

    box-shadow:
        0 15px 45px rgba(16, 42, 67, 0.08);
}


/* =====================================================
   SECOND TRAINING - IMAGE RIGHT
===================================================== */

.training-row.reverse .training-slider {
    order: 2;
}

.training-row.reverse .training-info {
    order: 1;
}


/* =====================================================
   IMAGE SLIDER
===================================================== */

.training-slider {

    position: relative;

    width: 100%;

    height: 360px;

    overflow: hidden;

    background: #eeeae2;
}


.slider-track {

    display: flex;

    width: 100%;

    height: 100%;

    transition:
        transform 0.8s cubic-bezier(.65, 0, .35, 1);
}


.slider-track img {

    width: 100%;

    min-width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;

    display: block;

    background: #eeeae2;
}


/* =====================================================
   SLIDER ARROWS
===================================================== */

.slider-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 42px;

    height: 42px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.7);

    background: rgba(16,42,67,0.65);

    color: white;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: 0.3s;
}

.slider-arrow:hover {

    background: #c49a5a;

    border-color: #c49a5a;

}

.slider-arrow.prev {

    left: 18px;
}

.slider-arrow.next {

    right: 18px;
}


/* =====================================================
   SLIDER DOTS
===================================================== */

.slider-dots {

    position: absolute;

    left: 50%;

    bottom: 15px;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    gap: 7px;

    z-index: 5;
}

.slider-dot {

    width: 7px;

    height: 7px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,0.65);

    cursor: pointer;

    transition: 0.3s;
}

.slider-dot.active {

    width: 24px;

    border-radius: 10px;

    background: #c49a5a;
}


/* =====================================================
   TRAINING CONTENT
===================================================== */

.training-info {

    height: 360px;

    padding: 40px 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.training-number {

    font-family: "Playfair Display", serif;

    color: #c49a5a;

    font-size: 20px;

    margin-bottom: 8px;
}


.training-label {

    color: #c49a5a;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;
}


.training-info h3 {

    font-family: "Playfair Display", serif;

    color: #102a43;

    font-size: clamp(26px, 2.7vw, 36px);

    line-height: 1.18;

    margin-top: 10px;

    max-width: 500px;
}


.training-info h4 {

    color: #c49a5a;

    font-size: 14px;

    font-weight: 600;

    margin-top: 8px;
}


.gold-line {

    width: 50px;

    height: 2px;

    background: #c49a5a;

    margin: 15px 0;
}


.training-info p {

    color: #687685;

    font-size: 13px;

    line-height: 1.65;

    max-width: 520px;

    margin-bottom: 6px;
}


.training-tag {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    margin-top: 12px;

    padding: 7px 14px;

    border-radius: 30px;

    background: #f7f1e7;

    color: #9b763f;

    font-size: 10px;

    font-weight: 600;
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1400px) {

    .international-section {

        max-width: 1450px;

        padding-left: 20px;

        padding-right: 20px;
    }

    .training-row {

        height: 380px;
    }

    .training-slider {

        height: 380px;
    }

    .training-info {

        height: 380px;

        padding: 45px 65px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .international-section {

        padding: 0 30px 70px;
    }

    .training-row {

        height: 340px;
    }

    .training-slider {

        height: 340px;
    }

    .training-info {

        height: 340px;

        padding: 35px;
    }

    .training-info h3 {

        font-size: 28px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    .international-section {

        padding: 0 18px 60px;

        margin-top: 60px;
    }


    .international-heading {

        margin-bottom: 30px;
    }


    .international-heading span {

        font-size: 9px;

        letter-spacing: 3px;
    }


    .international-heading h2 {

        font-size: 34px;
    }


    .international-heading p {

        font-size: 13px;
    }


    /* Training becomes vertical */

    .training-row,
    .training-row.reverse {

        display: flex;

        flex-direction: column;

        width: 100%;

        height: auto;

        margin-bottom: 25px;
    }


    /* Image first */

    .training-row .training-slider,
    .training-row.reverse .training-slider {

        order: 1;

        width: 100%;

        height: 280px;

        min-height: 280px;
    }


    /* Content second */

    .training-row .training-info,
    .training-row.reverse .training-info {

        order: 2;

        width: 100%;

        height: auto;

        min-height: 300px;

        padding: 30px 25px;
    }


    .slider-track {

        height: 100%;
    }


    .slider-track img {

        width: 100%;

        min-width: 100%;

        height: 100%;

        object-fit: contain;
    }


    .slider-arrow {

        width: 38px;

        height: 38px;

        font-size: 24px;
    }


    .slider-arrow.prev {

        left: 12px;
    }


    .slider-arrow.next {

        right: 12px;
    }


    .slider-dots {

        bottom: 12px;
    }


    .training-info h3 {

        font-size: 27px;
    }


    .training-info p {

        font-size: 13px;
    }


}

.doctor-buttons {
    display: flex;
    gap: 14px;

    margin-top: 22px;

    align-items: center;
}

.doctor-buttons a {
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 13px 22px;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 600;

    transition: all 0.3s ease;
}


/* View Achievements */

.achievement-btn {
    color: #102a43;

    background: #f7f1e7;

    border: 1px solid #c49a5a;
}

.achievement-btn span {
    color: #c49a5a;
}

.achievement-btn:hover {
    background: #c49a5a;
    color: white;

    transform: translateY(-2px);
}

.achievement-btn:hover span {
    color: white;
}


/* Book Consultation */

.consultation-btn {
    background: #102a43;

    color: white;

    border: 1px solid #102a43;
}

.consultation-btn span {
    color: #c49a5a;
}

.consultation-btn:hover {
    background: #c49a5a;

    border-color: #c49a5a;

    transform: translateY(-2px);
}

.consultation-btn:hover span {
    color: white;
}
/* ===== FORCE ALL 3 STAT CARDS EQUAL ===== */

.doctor-content .stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 30px !important;
}

.doctor-content .stats .stat-box {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100px !important;

    padding: 18px 14px !important;

    box-sizing: border-box !important;

    display: block !important;
    flex: none !important;
}
.doctor-buttons {
    width: 100%;
    display: flex;
    gap: 14px;
    margin-top: 20px;
}
/* =================================
   ACHIEVEMENT PAGE BUTTONS
================================= */

.achievement-navigation {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 15px;

    margin-top: 45px;
    margin-bottom: 20px;
}


/* VIEW SERVICES */

.services-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    padding: 14px 26px;

    background: #102a43;
    color: #fff;

    border: 1px solid #102a43;
    border-radius: 50px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: 0.3s ease;
}

.services-btn span {
    color: #c49a5a;
    font-size: 17px;
}

.services-btn:hover {
    background: #c49a5a;
    border-color: #c49a5a;

    transform: translateY(-3px);
}

.services-btn:hover span {
    color: #fff;
}


/* BACK TO HOME */

.home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 26px;

    background: #f7f1e7;
    color: #102a43;

    border: 1px solid #c49a5a;
    border-radius: 50px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: 0.3s ease;
}

.home-btn:hover {
    background: #c49a5a;
    color: #fff;

    transform: translateY(-3px);
}
@media (max-width: 600px) {

    .achievement-navigation {
        flex-direction: column;

        gap: 12px;

        margin-top: 35px;
    }

    .achievement-navigation a {
        width: 100%;
        max-width: 280px;
    }

}
/* ================= BACK TO ABOUT ================= */

.back-about-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 0;
}

.back-about {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    transition: 0.3s ease;
}

.back-about:hover {
    transform: translateX(-4px);
    color: #9b6b43;
}
/* =========================================
   COSMETIC SURGERY PAGE
========================================= */

.back-about-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 20px 10px;
}

.back-about {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 700;

    color: #333;

    transition: all 0.3s ease;
}

.back-about:hover {
    color: #9b6b43;
    transform: translateX(-5px);
}


/* =========================================
   COSMETIC CTA
========================================= */

.cosmetic-cta {
    padding: 80px 20px;
    text-align: center;
    background: #f7f4ef;
}

.cosmetic-cta h2 {
    margin: 0 0 15px;

    font-family: "Fraunces", serif;
    font-size: 42px;
    font-weight: 600;

    color: #252525;
}

.cosmetic-cta p {
    max-width: 650px;
    margin: 0 auto 30px;

    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 1.8;

    color: #666;
}

.cosmetic-btn {
    display: inline-block;

    padding: 14px 30px;

    border-radius: 5px;

    background: #222;
    color: #fff;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 700;

    transition: all 0.3s ease;
}

.cosmetic-btn:hover {
    background: #9b6b43;
    transform: translateY(-2px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .back-about-wrap {
        padding: 16px 18px 8px;
    }

    .service-hero h1 {
        font-size: 36px;
    }

    .service-hero p {
        font-size: 15px;
    }

    .cosmetic-cta {
        padding: 60px 20px;
    }

    .cosmetic-cta h2 {
        font-size: 32px;
    }

    .cosmetic-cta p {
        font-size: 14px;
    }

    .cosmetic-btn {
        width: auto;
        padding: 13px 25px;
    }

}
/* =========================================
   SERVICE RESULTS & REVIEWS
========================================= */

.results-section {
    padding: 90px 20px;
    background: #fff;
}

.results-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 45px;
}

.results-heading span,
.reviews-heading span {
    display: block;
    margin-bottom: 10px;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;

    color: #9b6b43;
}

.results-heading h2,
.reviews-heading h2 {
    margin: 0 0 15px;

    font-family: "Fraunces", serif;
    font-size: 40px;
    font-weight: 600;

    color: #252525;
}

.results-heading p {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    line-height: 1.8;

    color: #666;
}


/* =========================================
   BEFORE / AFTER
========================================= */

.before-after-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;

    max-width: 1150px;
    margin: 0 auto 90px;
}

.before-after-card {
    overflow: hidden;

    background: #fff;

    border: 1px solid #e9e5df;
    border-radius: 10px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

.ba-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.ba-images > div {
    position: relative;
    overflow: hidden;
}

.ba-images img {
    display: block;

    width: 100%;
    height: 250px;

    object-fit: cover;
}

.ba-images span {
    position: absolute;

    left: 10px;
    bottom: 10px;

    padding: 6px 10px;

    background: rgba(0,0,0,0.75);
    color: #fff;

    border-radius: 3px;

    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}


/* =========================================
   REVIEWS
========================================= */

.reviews-heading {
    text-align: center;
    margin-bottom: 40px;
}

.service-reviews {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;

    max-width: 1150px;
    margin: 0 auto;
}

.service-review {
    padding: 30px;

    background: #f8f6f2;

    border-radius: 10px;

    text-align: center;
}

.stars {
    margin-bottom: 15px;

    font-size: 18px;
    letter-spacing: 3px;

    color: #9b6b43;
}

.service-review p {
    margin: 0 0 20px;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.8;

    color: #555;
}

.service-review h4 {
    margin: 0;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 700;

    color: #333;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .results-section {
        padding: 65px 18px;
    }

    .results-heading h2,
    .reviews-heading h2 {
        font-size: 32px;
    }

    .before-after-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 65px;
    }

    .ba-images img {
        height: 220px;
    }

    .service-reviews {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .service-review {
        padding: 25px 20px;
    }

}
/* =========================================
   SURGERY DOCTORS VIDEO SECTION
========================================= */

.surgery-video-section {
    width: 100%;
    padding: 75px 20px;
    background: linear-gradient(
        to bottom,
        #7d2c54 0%,
        #8f4568 45%,
        #f7e9ee 100%
    );
}

.surgery-video-container {
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: 55px;
}


/* LEFT SIDE */

.surgery-video-content {
    color: #fff;
}

.video-line {
    width: 52px;
    height: 3px;

    background: #fff;

    margin-bottom: 22px;
}

.surgery-video-content h2 {
    margin: 0 0 32px;

    font-family: "Manrope", sans-serif;
    font-size: 30px;
    font-weight: 500;

    letter-spacing: 0.3px;

    color: #fff;
}

.surgery-video-content p {
    max-width: 550px;

    margin: 0 0 18px;

    font-family: "Manrope", sans-serif;
    font-size: 15px;
    line-height: 1.85;

    color: #fff;
}


/* PHONE */

.video-phone {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    margin: 5px 0 38px;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 38px;
    font-weight: 800;

    color: #fff;
}

.video-phone span {
    font-size: 38px;
}


/* BUTTONS */

.video-buttons {
    display: flex;
    gap: 35px;
    align-items: center;
}

.video-result-btn,
.video-appointment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 145px;
    height: 52px;

    padding: 0 25px;

    background: #fff;
    color: #333;

    text-decoration: none;

    font-family: "Manrope", sans-serif;
    font-size: 14px;
    font-weight: 500;

    transition: all 0.3s ease;
}

.video-appointment-btn {
    min-width: 215px;
}

.video-result-btn:hover,
.video-appointment-btn:hover {
    background: #222;
    color: #fff;

    transform: translateY(-2px);
}


/* RIGHT VIDEO */

.surgery-video {
    width: 100%;

    border: 1px solid rgba(0,0,0,0.5);

    background: #000;

    overflow: hidden;
}

.surgery-video video {
    display: block;

    width: 100%;
    height: 320px;

    object-fit: cover;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .surgery-video-section {
        padding: 55px 18px;
    }

    .surgery-video-container {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .surgery-video-content h2 {
        font-size: 25px;
        margin-bottom: 22px;
    }

    .surgery-video-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .video-phone {
        font-size: 28px;
        margin-bottom: 28px;
    }

    .video-phone span {
        font-size: 28px;
    }

    .video-buttons {
        gap: 12px;
        flex-wrap: wrap;
    }

    .video-result-btn,
    .video-appointment-btn {
        min-width: 140px;
        height: 48px;
    }

    .surgery-video video {
        height: 240px;
    }

}
/* ================= BUTTON COLOR OVERRIDE ================= */

.menu-buttons .btn-primary,
.menu-buttons .btn-wa {
    background: #0d4f4a !important;
    background-color: #0d4f4a !important;
    color: #d9b56d !important;
    border: 1px solid #0d4f4a !important;
    box-shadow: none !important;
}

.menu-buttons .btn-primary:hover,
.menu-buttons .btn-wa:hover {
    background: #123f3b !important;
    background-color: #123f3b !important;
    color: #ffffff !important;
    border-color: #123f3b !important;
}

/* Mobile menu buttons */
@media (max-width: 768px) {

    .menu-buttons .btn-primary,
    .menu-buttons .btn-wa {
        background: #0d4f4a !important;
        background-color: #0d4f4a !important;
        color: #d9b56d !important;
        border: 1px solid #0d4f4a !important;
    }

    .menu-buttons .btn-primary:hover,
    .menu-buttons .btn-wa:hover {
        background: #123f3b !important;
        background-color: #123f3b !important;
        color: #ffffff !important;
    }
}

/* ===== HERO PARAGRAPH WIDTH OVERRIDE ===== */
/* .hero-content p { */
    /* width: 100% !important; */
    /* max-width: 950px !important; */
    /* margin-right: 0 !important; */
/* } */
/*  */
/* .hero-content { */
    /* width: 100% !important; */
    /* max-width: 1100px !important; */
/* } */
/*  */
Desktop
/* @media (min-width: 768px) { */
    /* .hero-content p { */
        /* max-width: 950px !important; */
    /* } */
/* } */
/* ===== REMOVE NARROW TEXT COLUMN ===== */

.hero-content,
.hero-text,
.hero-content p {
    width: 100% !important;
    max-width: none !important;
}

.hero-content p {
    display: block !important;
    white-space: normal !important;
}

/* Agar kisi parent ne width/column limit lagayi hai */
.hero-content > div,
.hero-text > div {
    max-width: none !important;
    width: 100% !important;
}

/* ===== HERO PARAGRAPH FULL WIDTH FIX ===== */

.hero-grid {
    grid-template-columns: 1fr !important;
}

.hero-grid > div {
    width: 100% !important;
    max-width: none !important;
}

.hero-grid .lead {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-right: 0 !important;
}

/* Desktop par paragraph ko poori available width do */
@media (min-width: 768px) {
    .hero-grid .lead {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* FULL SCREEN-WIDTH VIDEO */

.hero-video-section {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.hero-video {
    width: 100% !important;
    height: 550px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

/* ===== FIX SPACE BETWEEN VIDEO & HERO CONTENT ===== */

.hero-video-section {
    margin-bottom: 0 !important;
}

/* Hero content ko video ke neeche proper spacing do */
.hero-grid {
    margin-top: 45px !important;
    padding-top: 0 !important;
}

/* Eyebrow ko upar chipakne se roko */
.hero-grid .eyebrow {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Desktop spacing */
@media (min-width: 768px) {
    .hero-grid {
        margin-top: 45px !important;
    }
}

/* ===== MOBILE HERO VIDEO FIX ===== */

@media (max-width: 767px) {

    .hero-video-section {
        width: 100% !important;
        max-width: 100% !important;
        height: 220px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
    }

    .hero-video {
        width: 100% !important;
        height: 220px !important;
        max-width: none !important;
        display: block !important;
        object-fit: cover !important;
        object-position: center center !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Video ke baad content ko proper gap */
    .hero-grid {
        margin-top: 30px !important;
        padding-top: 0 !important;
    }

}
/* ===== ACHIEVEMENTS MOBILE TOP SPACE FIX ===== */

@media (max-width: 767px) {

    .achievements,
    .achievements-section,
    #achievements {
        margin-top: 0 !important;
        padding-top: 35px !important;
    }

    .achievements .wrap,
    .achievements-section .wrap,
    #achievements .wrap {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

}

/* =========================================
   ACHIEVEMENTS BUTTONS — HOME PAGE STYLE
========================================= */

.achievement-actions {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

/* Common Home Page Button Style */
.achievement-actions a {
    height: 48px !important;
    border-radius: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* View Achievements — Ghost Button */
.achievement-actions a:first-child {
    width: 225px !important;
    background: transparent !important;
    color: #0d3f3b !important;
    border: 1px solid #0d3f3b !important;
}

/* Book Consultation — Primary Button */
.achievement-actions a:last-child {
    width: 225px !important;
    background: #0d3f3b !important;
    color: #ffffff !important;
    border: 1px solid #0d3f3b !important;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .achievement-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 14px !important;
    }

    .achievement-actions a:first-child,
    .achievement-actions a:last-child {
        width: 100% !important;
        height: 50px !important;
        border-radius: 28px !important;
    }

}

/* =========================================
   FOUNDER PAGE BUTTONS ONLY
   HOME PAGE STYLE
========================================= */

.doctor-buttons {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* View Achievements - Outline */
.doctor-buttons .achievement-btn {
    width: 225px !important;
    height: 48px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
    color: #0d3f3b !important;
    border: 1px solid #0d3f3b !important;
    border-radius: 28px !important;

    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Book Consultation - Filled */
.doctor-buttons .consultation-btn {
    width: 225px !important;
    height: 48px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #0d3f3b !important;
    color: #ffffff !important;
    border: 1px solid #0d3f3b !important;
    border-radius: 28px !important;

    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .doctor-buttons {
        width: 100% !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .doctor-buttons .achievement-btn,
    .doctor-buttons .consultation-btn {
        width: 100% !important;
        height: 50px !important;
        min-width: 100% !important;
        border-radius: 28px !important;
        white-space: nowrap !important;
    }

}
/* ===== FOUNDER BUTTONS - SAME COLOR ===== */

.doctor-buttons .achievement-btn,
.doctor-buttons .consultation-btn {
    background: #102f4a !important;
    color: #ffffff !important;
    border: 1px solid #102f4a !important;
    border-radius: 28px !important;
}

/* Hover - both same golden */
.doctor-buttons .achievement-btn:hover,
.doctor-buttons .consultation-btn:hover {
    background: #c9a15b !important;
    color: #ffffff !important;
    border-color: #c9a15b !important;
}

/* =========================================
   ACHIEVEMENTS PAGE NAV BUTTONS
   SAME STYLE FOR BOTH
========================================= */

.achievement-navigation {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

.achievement-navigation .about-btn,
.achievement-navigation .home-btn {
    width: 225px !important;
    height: 48px !important;
    min-width: 225px !important;
    padding: 0 22px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #102f4a !important;
    color: #ffffff !important;
    border: 1px solid #102f4a !important;
    border-radius: 28px !important;

    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    transition: all 0.25s ease !important;
}

/* BOTH → GOLDEN ON HOVER */
.achievement-navigation .about-btn:hover,
.achievement-navigation .home-btn:hover {
    background: #c9a15b !important;
    color: #ffffff !important;
    border-color: #c9a15b !important;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .achievement-navigation {
        width: 100% !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .achievement-navigation .about-btn,
    .achievement-navigation .home-btn {
        width: 100% !important;
        min-width: 100% !important;
        height: 50px !important;
    }

}

/* =========================================
   BACK BUTTON - PHONE STYLE
========================================= */

.fab-back {
    background: #102f4a !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
}

.fab-back:hover {
    background: #c9a15b !important;
    transform: translateY(-2px) !important;
}
/* =====================================================
   MARMM — GLOBAL FOUNDER THEME
   NAVY BLUE + GOLDEN
===================================================== */

:root {
    --theme-navy: #102f4a;
    --theme-gold: #c9a15b;
    --theme-bg: #faf9f6;
    --theme-white: #ffffff;
}


/* =====================================================
   GLOBAL
===================================================== */

body {
    background: var(--theme-bg) !important;
    color: var(--theme-navy) !important;
}


/* =====================================================
   HEADER
===================================================== */

header {
    background: var(--theme-bg) !important;
    border-bottom: 1px solid rgba(16, 47, 74, 0.15) !important;
}

header .logo b,
.logo b {
    color: var(--theme-navy) !important;
}

header .logo span,
.logo span {
    color: var(--theme-gold) !important;
}

.nav-links a {
    color: var(--theme-navy) !important;
}

.nav-links a:hover {
    color: var(--theme-gold) !important;
}

.nav-cta {
    background: var(--theme-navy) !important;
    color: #fff !important;
    border-color: var(--theme-navy) !important;
}

.nav-cta:hover {
    background: var(--theme-gold) !important;
    color: #fff !important;
    border-color: var(--theme-gold) !important;
}


/* =====================================================
   COMMON BUTTONS
===================================================== */

.btn-primary {
    background: var(--theme-navy) !important;
    color: #fff !important;
    border-color: var(--theme-navy) !important;
}

.btn-primary:hover {
    background: var(--theme-gold) !important;
    color: #fff !important;
    border-color: var(--theme-gold) !important;
}

.btn-ghost {
    background: transparent !important;
    color: var(--theme-navy) !important;
    border-color: var(--theme-navy) !important;
}

.btn-ghost:hover {
    background: var(--theme-navy) !important;
    color: #fff !important;
    border-color: var(--theme-navy) !important;
}


/* =====================================================
   HEADINGS
===================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--theme-navy) !important;
}

.eyebrow,
.small-heading,
.section-label {
    color: var(--theme-gold) !important;
}


/* =====================================================
   LINKS
===================================================== */

a {
    color: var(--theme-navy);
}

a:hover {
    color: var(--theme-gold);
}


/* =====================================================
   CARDS / BOXES
===================================================== */

.stat-box,
.card,
.service-card,
.achievement-card,
.feature-card {
    border-color: rgba(201, 161, 91, 0.35) !important;
    background: #fff !important;
}

.stat-box h3,
.card h3,
.service-card h3 {
    color: var(--theme-gold) !important;
}


/* =====================================================
   GOLD ACCENTS
===================================================== */

.gold-line {
    background: var(--theme-gold) !important;
}

.gold-text,
.highlight,
.accent {
    color: var(--theme-gold) !important;
}


/* =====================================================
   FOOTER
===================================================== */

footer {
    background: var(--theme-navy) !important;
    color: #fff !important;
}

footer h4,
footer .flogo {
    color: var(--theme-gold) !important;
}

footer p,
footer li,
footer span {
    color: rgba(255, 255, 255, 0.85) !important;
}

footer a {
    color: #fff !important;
}

footer a:hover {
    color: var(--theme-gold) !important;
}

.foot-bottom {
    border-top-color: rgba(201, 161, 91, 0.35) !important;
}


/* =====================================================
   FLOATING BUTTONS
===================================================== */

.fab {
    background: var(--theme-navy) !important;
    color: #fff !important;
}

.fab:hover {
    background: var(--theme-gold) !important;
}


/* =====================================================
   MOBILE BOTTOM CTA
===================================================== */

.mobile-cta {
    background: var(--theme-navy) !important;
}

.mobile-cta .call {
    background: var(--theme-gold) !important;
    color: #fff !important;
}

.mobile-cta .wa {
    background: #fff !important;
    color: var(--theme-navy) !important;
}


/* =====================================================
   FORM / INPUT FOCUS
===================================================== */

input:focus,
textarea:focus,
select:focus {
    border-color: var(--theme-gold) !important;
    outline-color: var(--theme-gold) !important;
}


/* =====================================================
   SELECTION
===================================================== */

::selection {
    background: var(--theme-gold) !important;
    color: #fff !important;
}

/* ===== WHY MARMm SECTION ===== */

.why-marmm .heading h2 {
    color: #C9A15A !important;
}

.why-marmm .heading p {
    color: #ffffff !important;
}
/* =========================================
   HOME HERO - BALANCED COLOURS
========================================= */

.hero-grid .eyebrow {
    color: #C9A15A !important;
}

.hero-grid h1,
.hero-grid h2 {
    color: #102A43 !important;
}

/* Main paragraph - blue kam */
.hero-grid .lead {
    color: #4F5558 !important;
    font-weight: 400 !important;
}

/* Paragraph ke andar bold text */
.hero-grid .lead b {
    color: #4F5558 !important;
    font-weight: 700 !important;
}


/* Buttons */
.hero-grid .hero-cta .btn-ghost {
    color: #102A43 !important;
    border-color: #102A43 !important;
    background: transparent !important;
}

.hero-grid .hero-cta .btn-primary {
    background: #102A43 !important;
    color: #fff !important;
    border-color: #102A43 !important;
}

.hero-grid .hero-cta .btn-ghost:hover {
    background: #102A43 !important;
    color: #fff !important;
}

.hero-grid .hero-cta .btn-primary:hover {
    background: #C9A15A !important;
    border-color: #C9A15A !important;
}


/* Reviews / timings */
.hero-grid .hero-meta b {
    color: #102A43 !important;
}

.hero-grid .hero-meta span {
    color: #59605F !important;
}
/* NAVIGATION - GOLDEN THEME */

.nav-links a {
    color: #C9A15A !important;
}

.nav-links a:hover {
    color: #102A43 !important;
}
/* =========================================
   FLOATING SIDE BUTTONS - LIGHT THEME
========================================= */

.floating-actions .fab {
    background: #FAF6EF !important;
    color: #102A43 !important;
    border: 1px solid #C9A15A !important;

    box-shadow: 0 5px 16px rgba(16, 42, 67, 0.14) !important;

    transition: all 0.25s ease !important;
}

/* ALL FOUR - HOVER */
.floating-actions .fab:hover {
    background: #C9A15A !important;
    color: #FFFFFF !important;
    border-color: #C9A15A !important;

    transform: translateY(-3px) !important;
}

/* Icons */
.floating-actions .fab-call,
.floating-actions .fab-wa,
.floating-actions .fab-back,
.floating-actions .fab-top {
    color: #102A43 !important;
}

/* White icons on hover */
.floating-actions .fab:hover {
    color: #FFFFFF !important;
}


/* =========================================
   MOBILE MENU — NAVY PREMIUM
========================================= */

@media (max-width: 768px) {

    .nav-links {
        background: #102A43 !important;
        color: #FFFFFF !important;
    }

    .nav-links a {
        color: #FFFFFF !important;
    }

    .nav-links a:hover {
        color: #C9A15A !important;
    }

    /* Logo area */
    header {
        background: #FAF6EF !important;
    }

    .logo b {
        color: #102A43 !important;
    }

    .logo span {
        color: #C9A15A !important;
    }

    /* Menu buttons */
    .menu-buttons .btn-primary {
        background: #C9A15A !important;
        color: #FFFFFF !important;
        border-color: #C9A15A !important;
    }

    .menu-buttons .btn-wa {
        background: transparent !important;
        color: #FFFFFF !important;
        border: 1px solid #C9A15A !important;
    }

    .menu-buttons .btn-wa:hover {
        background: #C9A15A !important;
        color: #FFFFFF !important;
    }

}
/* =========================================
   SIDE FLOATING BUTTONS
   SOFT GOLD FILLED - OPTION 3
   DESKTOP + MOBILE
========================================= */

.floating-actions .fab {
    background: #C9A15A !important;
    color: #FFFFFF !important;
    border: 1px solid #C9A15A !important;
    box-shadow: 0 6px 16px rgba(16, 42, 67, 0.18) !important;

    transition: all 0.25s ease !important;
}

/* Hover */
.floating-actions .fab:hover {
    background: #B4893F !important;
    color: #FFFFFF !important;
    border-color: #B4893F !important;
    transform: translateY(-3px) !important;
}


/* Make all icons white */
.floating-actions .fab-call,
.floating-actions .fab-wa,
.floating-actions .fab-back,
.floating-actions .fab-top {
    color: #FFFFFF !important;
}


/* =========================================
   MOBILE - SLIGHTLY SMALLER
========================================= */

@media (max-width: 767px) {

    .floating-actions .fab {
        width: 48px !important;
        height: 48px !important;
        box-shadow: 0 5px 14px rgba(16, 42, 67, 0.16) !important;
    }


}

/* =========================================
   FOUNDER BUTTONS - MOBILE ALIGNMENT FIX
========================================= */

@media (max-width: 767px) {

    .doctor-buttons {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 12px !important;

        margin-top: 22px !important;
    }

    .doctor-buttons .achievement-btn,
    .doctor-buttons .consultation-btn {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        height: 50px !important;
        min-height: 50px !important;

        padding: 0 20px !important;
        margin: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        font-size: 14px !important;
        line-height: 1 !important;
        white-space: nowrap !important;

        border-radius: 28px !important;
    }

}

/* =========================================
   MAIN CTA BUTTONS
   OPTION 1 - NAVY OUTLINE + GOLD HOVER
========================================= */

.hero-cta .btn-ghost,
.hero-cta .btn-primary,
.doctor-buttons .achievement-btn,
.doctor-buttons .consultation-btn,
.achievement-navigation .about-btn,
.achievement-navigation .home-btn {

    background: transparent !important;
    color: #102A43 !important;
    border: 1px solid #102A43 !important;
    border-radius: 28px !important;

    transition: all 0.25s ease !important;
}


/* HOVER - GOLD */
.hero-cta .btn-ghost:hover,
.hero-cta .btn-primary:hover,
.doctor-buttons .achievement-btn:hover,
.doctor-buttons .consultation-btn:hover,
.achievement-navigation .about-btn:hover,
.achievement-navigation .home-btn:hover {

    background: transparent !important;
    color: #C9A15A !important;
    border-color: #C9A15A !important;
}


/* ACTIVE / CLICK - NAVY FILLED */
.hero-cta .btn-ghost:active,
.hero-cta .btn-primary:active,
.doctor-buttons .achievement-btn:active,
.doctor-buttons .consultation-btn:active,
.achievement-navigation .about-btn:active,
.achievement-navigation .home-btn:active {

    background: #102A43 !important;
    color: #FFFFFF !important;
    border-color: #102A43 !important;
}
@media (max-width: 767px) {

    .doctor-buttons {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .doctor-buttons .achievement-btn,
    .doctor-buttons .consultation-btn {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 50px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 18px !important;
        margin: 0 !important;

        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

}
/* =========================================
   MAIN CTA BUTTONS
   NAVY OUTLINE + GOLD HOVER
========================================= */

/* OUTLINE / SECONDARY */
.hero-cta .btn-ghost,
.doctor-buttons .achievement-btn,
.achievement-navigation .about-btn,
.achievement-navigation .home-btn {

    background: transparent !important;
    color: #102A43 !important;
    border: 1px solid #102A43 !important;
    border-radius: 28px !important;

    transition: all 0.25s ease !important;
}

/* OUTLINE HOVER → GOLD */
.hero-cta .btn-ghost:hover,
.doctor-buttons .achievement-btn:hover,
.achievement-navigation .about-btn:hover,
.achievement-navigation .home-btn:hover {

    background: transparent !important;
    color: #C9A15A !important;
    border-color: #C9A15A !important;
}


/* =========================================
   PRIMARY BUTTON
   SOFT GOLD FILLED
========================================= */

.hero-cta .btn-primary,
.doctor-buttons .consultation-btn {

    background: #C9A15A !important;
    color: #FFFFFF !important;
    border: 1px solid #C9A15A !important;
    border-radius: 28px !important;

    transition: all 0.25s ease !important;
}

/* PRIMARY HOVER → DARKER GOLD */

.hero-cta .btn-primary:hover,
.doctor-buttons .consultation-btn:hover {

    background: #B78E45 !important;
    color: #FFFFFF !important;
    border-color: #B78E45 !important;
}
/* ==========================================
   FOUNDER BUTTONS - HOME PAGE LIKE MOBILE
========================================== */

@media (max-width: 767px) {

    /* Buttons ko 3 stat cards ke niche full row do */
    .doctor-content .stats .doctor-buttons {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;

        gap: 12px !important;
        margin: 18px 0 0 0 !important;
        padding: 0 !important;
    }


    /* BOTH BUTTONS */
    .doctor-content .stats .doctor-buttons .achievement-btn,
    .doctor-content .stats .doctor-buttons .consultation-btn {

        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        height: 50px !important;
        min-height: 50px !important;

        margin: 0 !important;
        padding: 0 15px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

        box-sizing: border-box !important;
        border-radius: 28px !important;

        font-size: 13px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }


    /* VIEW ACHIEVEMENTS */
    .doctor-content .stats .doctor-buttons .achievement-btn {
        background: transparent !important;
        color: #102A43 !important;
        border: 1px solid #102A43 !important;
    }


    /* BOOK CONSULTATION */
    .doctor-content .stats .doctor-buttons .consultation-btn {
        background: #102A43 !important;
        color: #FFFFFF !important;
        border: 1px solid #102A43 !important;
    }


    /* ARROWS */
    .doctor-content .stats .doctor-buttons a span {
        margin-left: 5px !important;
    }
}

/* TOP UTILITY BAR */
.utility {
    background: #102A43 !important;
}

.utility span,
.utility a {
    color: #C9A15A !important;
}

.utility a:hover {
    color: #FFFFFF !important;
}
.utility .wrap > a {
    color: #C9A15A !important;
}
.service-cards .card p {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    text-align: center;
    padding: 0 18px 20px;
    margin: 8px 0 0;
}

.service-cards .card h3 {
    margin-bottom: 0;
}
.service-hero h1 {
    color: #D4AF6A !important;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #17263c;
    background: #ffffff;
    line-height: 1.6;
}

img {
    width: 100%;
    display: block;
}

a {
    text-decoration: none;
}


/* ================= HEADER ================= */

.treatment-header {
    height: 82px;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #17263c;
    color: #fff;
    gap: 30px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo > span {
    width: 42px;
    height: 42px;
    border: 1px solid #c49a52;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c49a52;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
}

.logo strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 18px;
}

.logo small {
    display: block;
    font-size: 7px;
    letter-spacing: 1px;
    color: #c49a52;
}

.treatment-header nav {
    display: flex;
    gap: 25px;
}

.treatment-header nav a {
    color: #fff;
    font-size: 11px;
    letter-spacing: .5px;
}

.treatment-header nav a:hover,
.treatment-header nav a.active {
    color: #c49a52;
}

.header-btn,
.gold-btn,
.cta-btn {
    background: #c49a52;
    color: #17263c;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 4px;
    font-size: 12px;
}


/* ================= COMMON ================= */

.section {
    padding: 80px 6%;
}

.section-title {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 50px;
}

.section-title span,
.small-heading,
.gold-label {
    color: #b4863d;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}

.section-title h2 {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    margin: 8px 0 12px;
    color: #17263c;
}

.section-title p {
    color: #687180;
}


/* ================= HERO ================= */

.treatment-hero {
    min-height: 580px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #10243a;
    color: #fff;
}

.hero-text {
    padding: 65px 8%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.breadcrumb {
    font-size: 11px;
    color: #b9c2cd;
    margin-bottom: 35px;
}

.hero-text h1 {
    font-family: 'Playfair Display', serif;
    font-size: 58px;
    line-height: 1.1;
    margin: 10px 0;
}

.hero-text h2 {
    color: #c49a52;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 18px;
}

.hero-text p {
    max-width: 570px;
    color: #d5dbe1;
    font-size: 15px;
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 28px 0;
}

.hero-points span {
    font-size: 11px;
    border: 1px solid rgba(196,154,82,.5);
    padding: 7px 11px;
    border-radius: 20px;
}

.hero-image {
    min-height: 580px;
}

.hero-image img {
    height: 100%;
    object-fit: cover;
}


/* ================= OVERVIEW ================= */

.overview-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.overview-image {
    border-radius: 12px;
    overflow: hidden;
}

.overview-image img {
    height: 430px;
    object-fit: cover;
}

.overview-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    margin-bottom: 18px;
}

.overview-content p {
    color: #667080;
    margin-bottom: 15px;
}

.info-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 25px;
}

.info-boxes div {
    border: 1px solid #e5dccd;
    padding: 15px;
    border-radius: 7px;
}

.info-boxes strong,
.info-boxes span {
    display: block;
}

.info-boxes strong {
    font-size: 11px;
    color: #9a7235;
}

.info-boxes span {
    font-size: 13px;
    font-weight: 600;
}


/* ================= PROCESS ================= */

.process-section {
    background: #f8f6f1;
}

.process-grid {
    max-width: 1250px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.process-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ebe4d9;
    position: relative;
}

.process-card img {
    height: 180px;
    object-fit: cover;
}

.step-number {
    position: absolute;
    top: 158px;
    left: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #c49a52;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    border: 4px solid #fff;
}

.process-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    padding: 30px 18px 5px;
}

.process-card p {
    padding: 0 18px 22px;
    color: #6b7280;
    font-size: 13px;
}


/* ================= TECHNIQUES ================= */

.techniques-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.technique-card {
    border: 1px solid #e6dfd4;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: .3s;
}

.technique-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

.technique-card > img {
    height: 210px;
    object-fit: cover;
}

.technique-content {
    padding: 25px;
}

.technique-number {
    color: #b4863d;
    font-size: 11px;
    font-weight: 600;
}

.technique-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    margin: 5px 0 12px;
}

.technique-content p {
    font-size: 13px;
    color: #697281;
}

.technique-content ul {
    margin-top: 18px;
    list-style: none;
}

.technique-content li {
    font-size: 12px;
    margin-bottom: 8px;
}

.technique-content li::first-letter {
    color: #b4863d;
}


/* ================= BENEFITS ================= */

.benefits-section {
    background: #f8f6f1;
}

.benefits-grid {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.benefit-card {
    background: #fff;
    padding: 28px 20px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #ebe4d9;
}

.benefit-card > span {
    width: 45px;
    height: 45px;
    border: 1px solid #c49a52;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    color: #b4863d;
}

.benefit-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    margin: 15px 0 8px;
}

.benefit-card p {
    font-size: 12px;
    color: #707785;
}


/* ================= SUITABLE ================= */

.suitable-grid {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.suitable-grid h2 {
    font-family: 'Playfair Display', serif;
    font-size: 38px;
    margin: 10px 0 15px;
}

.suitable-grid p {
    color: #697281;
}

.check-list {
    list-style: none;
    margin-top: 25px;
}

.check-list li {
    margin-bottom: 12px;
    font-size: 14px;
}

.suitable-image {
    border-radius: 12px;
    overflow: hidden;
}

.suitable-image img {
    height: 380px;
    object-fit: cover;
}


/* ================= FAQ ================= */

.faq-section {
    background: #f8f6f1;
}

.faq-container {
    max-width: 850px;
    margin: auto;
}

details {
    background: #fff;
    border: 1px solid #e5dfd5;
    margin-bottom: 10px;
    border-radius: 6px;
    padding: 18px 22px;
}

summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    list-style: none;
    display: flex;
    justify-content: space-between;
}

details p {
    margin-top: 15px;
    color: #6d7480;
    font-size: 13px;
}


/* ================= CTA ================= */

.consultation-cta {
    max-width: 1150px;
    margin: 70px auto;
    padding: 45px 50px;
    background: #10243a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-radius: 10px;
}

.consultation-cta span {
    color: #c49a52;
    font-size: 11px;
    letter-spacing: 2px;
}

.consultation-cta h2 {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    margin: 8px 0;
}

.consultation-cta p {
    color: #cbd2da;
    font-size: 13px;
}


/* ================= FOOTER ================= */

footer {
    background: #10243a;
    color: #fff;
    text-align: center;
    padding: 40px 20px;
}

.footer-logo {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: #c49a52;
}

footer p {
    color: #aeb7c2;
    font-size: 12px;
    margin-top: 5px;
}

.copyright {
    margin-top: 25px !important;
}


/* ==================================================
                    MOBILE
================================================== */

@media (max-width: 768px) {

    .treatment-header {
        height: 70px;
        padding: 0 18px;
    }

    .treatment-header nav,
    .header-btn {
        display: none;
    }

    .logo strong {
        font-size: 16px;
    }


    /* HERO */

    .treatment-hero {
        grid-template-columns: 1fr;
    }

    .hero-text {
        padding: 40px 20px;
    }

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

    .hero-text h2 {
        font-size: 20px;
    }

    .hero-text p {
        font-size: 13px;
    }

    .hero-points {
        gap: 8px;
    }

    .hero-points span {
        font-size: 9px;
    }

    .hero-image {
        min-height: 300px;
    }

    .hero-image img {
        height: 300px;
    }


    /* COMMON */

    .section {
        padding: 55px 18px;
    }

    .section-title {
        margin-bottom: 30px;
    }

    .section-title h2 {
        font-size: 30px;
    }


    /* OVERVIEW */

    .overview-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .overview-image img {
        height: 280px;
    }

    .overview-content h3 {
        font-size: 26px;
    }

    .info-boxes {
        grid-template-columns: 1fr 1fr;
    }


    /* PROCESS */

    .process-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .process-card img {
        height: 220px;
    }

    .step-number {
        top: 198px;
    }

    .process-card h3 {
        font-size: 21px;
        padding-top: 30px;
    }


    /* TECHNIQUES */

    .techniques-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .technique-card > img {
        height: 220px;
    }

    .technique-content {
        padding: 22px;
    }


    /* BENEFITS */

    .benefits-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .benefit-card {
        padding: 22px 12px;
    }


    /* SUITABLE */

    .suitable-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .suitable-grid h2 {
        font-size: 30px;
    }

    .suitable-image img {
        height: 280px;
    }


    /* CTA */

    .consultation-cta {
        margin: 30px 18px 50px;
        padding: 30px 22px;
        flex-direction: column;
        align-items: flex-start;
    }

    .consultation-cta h2 {
        font-size: 25px;
    }

}
/* =====================================================
   HERO SECTION OVERRIDE
   Paste this at the VERY END of your CSS file
   ===================================================== */

.treatment-hero {
    min-height: 620px !important;

    display: grid !important;
    grid-template-columns: 48% 52% !important;

    align-items: center !important;

    background: #f8f5ef !important;

    padding: 24px 38px !important;

    gap: 35px !important;

    box-sizing: border-box !important;
}


/* LEFT SIDE */

.treatment-hero .hero-text {
    max-width: 620px !important;

    padding: 35px 20px 35px 0 !important;

    color: #122d45 !important;
}


/* BREADCRUMB */

.treatment-hero .breadcrumb {
    color: #687681 !important;

    font-size: 11px !important;

    margin-bottom: 32px !important;
}


/* SMALL HEADING */

.treatment-hero .small-heading {
    color: #b88b3d !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    letter-spacing: 2.5px !important;

    margin-bottom: 12px !important;
}


/* MAIN HEADING */

.treatment-hero .hero-text h1 {
    color: #122d45 !important;

    font-family: 'Playfair Display', serif !important;

    font-size: clamp(48px, 5vw, 70px) !important;

    line-height: 1.05 !important;

    margin: 0 0 10px !important;

    font-weight: 700 !important;
}


/* SUB HEADING */

.treatment-hero .hero-text h2 {
    color: #b88b3d !important;

    font-family: 'Playfair Display', serif !important;

    font-size: 24px !important;

    font-weight: 500 !important;

    margin: 0 0 22px !important;
}


/* DESCRIPTION */

.treatment-hero .hero-text > p {
    color: #4d5963 !important;

    font-size: 15px !important;

    line-height: 1.8 !important;

    max-width: 570px !important;

    margin-bottom: 27px !important;
}


/* POINTS */

.treatment-hero .hero-points {
    display: flex !important;

    flex-wrap: wrap !important;

    gap: 9px !important;

    margin-bottom: 30px !important;
}


.treatment-hero .hero-points span {
    color: #30485b !important;

    background: rgba(255,255,255,0.75) !important;

    border: 1px solid #d4b16a !important;

    border-radius: 30px !important;

    padding: 8px 14px !important;

    font-size: 10px !important;
}


/* BOOK BUTTON */

.treatment-hero .gold-btn {
    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: #c49a4a !important;

    color: #ffffff !important;

    min-width: 220px !important;

    padding: 14px 28px !important;

    border-radius: 4px !important;

    text-decoration: none !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    transition: all .3s ease !important;
}


.treatment-hero .gold-btn:hover {
    background: #a98038 !important;

    transform: translateY(-2px) !important;
}


/* =====================================================
   IMAGE
   ===================================================== */

.treatment-hero .hero-image {
    height: 570px !important;

    width: 100% !important;

    overflow: hidden !important;

    border-radius: 4px !important;
}


.treatment-hero .hero-image img {
    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 768px) {

    .treatment-hero {
        display: flex !important;

        flex-direction: column !important;

        min-height: auto !important;

        padding: 18px 16px 35px !important;

        gap: 20px !important;

        background: #f8f5ef !important;
    }


    .treatment-hero .hero-image {
        order: -1 !important;

        width: 100% !important;

        height: 320px !important;

        border-radius: 8px !important;
    }


    .treatment-hero .hero-text {
        width: 100% !important;

        max-width: none !important;

        padding: 5px 3px 10px !important;
    }


    .treatment-hero .breadcrumb {
        margin-bottom: 20px !important;

        font-size: 10px !important;
    }


    .treatment-hero .small-heading {
        font-size: 10px !important;

        letter-spacing: 2px !important;
    }


    .treatment-hero .hero-text h1 {
        font-size: 42px !important;

        line-height: 1.1 !important;
    }


    .treatment-hero .hero-text h2 {
        font-size: 20px !important;
    }


    .treatment-hero .hero-text > p {
        font-size: 13px !important;

        line-height: 1.7 !important;
    }


    .treatment-hero .hero-points {
        gap: 7px !important;
    }


    .treatment-hero .hero-points span {
        font-size: 9px !important;

        padding: 7px 10px !important;
    }


    .treatment-hero .gold-btn {
        width: 100% !important;

        min-width: 0 !important;
    }

}
/* =========================================
   SKIN TREATMENT PAGE
   MARMM KLINIK
========================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    background: #faf8f3;
    color: #142c42;
    line-height: 1.6;
}

img {
    width: 100%;
    display: block;
}

a {
    text-decoration: none;
}


/* =========================================
   HEADER
========================================= */

.site-header {
    height: 76px;
    padding: 0 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #ffffff;
    border-bottom: 1px solid #e7e1d6;

    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-family: "Playfair Display", serif;
    font-size: 23px;
    font-weight: 700;
    color: #132d45;
}

.logo span {
    color: #bd9145;
    font-size: 14px;
    letter-spacing: 2px;
    margin-left: 4px;
}

.header-btn {
    background: #b5284f;
    color: white;
    padding: 11px 25px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
}


/* =========================================
   COMMON
========================================= */

section {
    padding: 90px 7%;
}

.eyebrow {
    display: block;
    color: #a8663c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

h1,
h2,
h3 {
    font-family: "Playfair Display", serif;
    color: #142c42;
}

h1 em,
h2 em {
    color: #a62d4d;
    font-style: italic;
}

.section-heading {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-heading h2 {
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.15;
    margin-bottom: 17px;
}

.section-heading p {
    color: #5d6870;
    font-size: 16px;
}


/* =========================================
   HERO
========================================= */

.skin-hero {
    padding: 60px 7%;
    min-height: 620px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;

    background: #f4f0e8;
}

.hero-content {
    max-width: 620px;
}

.hero-content h1 {
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.05;
    margin-bottom: 25px;
}

.hero-content p {
    color: #52616c;
    max-width: 560px;
    font-size: 17px;
    margin-bottom: 32px;
}

.hero-image {
    height: 520px;
    overflow: hidden;
    border-radius: 3px;
}

.hero-image img {
    height: 100%;
    object-fit: cover;
}

.primary-btn {
    display: inline-block;
    padding: 14px 27px;
    background: #bd9145;
    color: white;
    font-size: 13px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: .5px;
}


/* =========================================
   SPECIALIST
========================================= */

.specialist-section {
    background: #ffffff;
}

.doctor-card {
    max-width: 1000px;
    margin: auto;

    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 50px;
    align-items: center;

    padding: 35px;

    border: 1px solid #ddd6c9;
    border-radius: 24px;
    background: #fbfaf7;
}

.doctor-image {
    height: 380px;
    border-radius: 18px;
    overflow: hidden;
}

.doctor-image img {
    height: 100%;
    object-fit: cover;
}

.doctor-info h3 {
    font-size: 34px;
    margin-bottom: 5px;
}

.doctor-info h4 {
    color: #a62d4d;
    font-size: 15px;
    margin-bottom: 22px;
}

.doctor-info p {
    color: #59646c;
    margin-bottom: 17px;
    font-size: 15px;
}

.doctor-highlights {
    margin-top: 25px;
    display: grid;
    gap: 10px;
}

.doctor-highlights div {
    background: #edf2ef;
    padding: 9px 15px;
    border-radius: 30px;
    color: #304d55;
    font-size: 13px;
    font-weight: 600;
}

.doctor-highlights strong {
    color: #bd9145;
    margin-right: 7px;
}


/* =========================================
   TREATMENT MENU
========================================= */

.treatment-menu {
    background: #f8f5ee;
}

.treatment-category {
    max-width: 900px;
    margin: 0 auto 45px;
}

.category-title {
    font-size: 25px;
    margin-bottom: 18px;
}

.treatment-card {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 18px;
    align-items: start;

    padding: 24px;
    margin-bottom: 14px;

    background: rgba(255,255,255,.7);
    border: 1px solid #ddd8ce;
    border-radius: 20px;

    transition: .3s ease;
}

.treatment-card:hover {
    transform: translateY(-3px);
    border-color: #c39b57;
    box-shadow: 0 10px 30px rgba(30, 40, 50, .07);
}

.treatment-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f7e9e8;
    color: #a62d4d;

    border-radius: 15px;

    font-size: 20px;
}

.treatment-card h4 {
    font-size: 17px;
    color: #172f43;
    margin-bottom: 4px;
}

.treatment-card p {
    color: #68727a;
    font-size: 14px;
    line-height: 1.6;
}


/* Doctor note */

.doctor-note {
    max-width: 900px;
    margin: 35px auto 0;

    padding: 19px 25px;

    text-align: center;

    background: #e8f1ed;
    border-radius: 16px;

    color: #36545a;
    font-size: 14px;
}

.doctor-note span {
    color: #bd9145;
    margin-right: 8px;
}


/* =========================================
   OFFER BUTTON
========================================= */

.offer-link-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.offer-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    padding: 15px 30px;

    border-radius: 50px;

    background: #b5284f;
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;

    box-shadow: 0 10px 25px rgba(181, 40, 79, .18);

    transition: .3s ease;
}

.offer-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(181, 40, 79, .25);
}

.offer-link strong {
    font-size: 18px;
}


/* =========================================
   GLOW OFFER
========================================= */

.glow-offer {
    background: #fffdf9;
}

.offer-card {
    max-width: 680px;
    margin: auto;

    padding: 45px;

    background: #f8f7f2;

    border: 1px solid #ddd6c8;
    border-radius: 28px;

    box-shadow: 0 15px 45px rgba(40,40,30,.06);
}

.offer-price {
    width: 135px;
    height: 135px;

    margin: 0 auto 35px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border: 2px solid #c39b57;
    border-radius: 50%;
}

.offer-price span {
    font-family: "Playfair Display", serif;
    font-size: 31px;
    font-weight: 700;
}

.offer-price small {
    color: #a8663c;
    letter-spacing: 1px;
    font-size: 9px;
    font-weight: 700;
}

.offer-step {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 15px;

    padding: 19px 0;

    border-bottom: 1px solid #ddd8ce;
}

.offer-step > span {
    width: 28px;
    height: 28px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;

    background: #f4e4e3;
    color: #a62d4d;

    font-size: 12px;
    font-weight: 700;
}

.offer-step h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

.offer-step p {
    color: #69727a;
    font-size: 14px;
}

.offer-saving {
    text-align: center;
    padding: 30px 0 20px;
}

.offer-saving del {
    display: block;
    color: #777;
    font-size: 14px;
}

.offer-saving strong {
    display: block;
    color: #a62d4d;
    font-family: "Playfair Display", serif;
    font-size: 27px;
}

.offer-saving span {
    color: #b8863b;
    font-size: 13px;
    font-weight: 700;
}

.offer-btn {
    display: block;
    text-align: center;

    padding: 15px;

    border-radius: 40px;

    background: #b5284f;
    color: white;

    font-size: 14px;
    font-weight: 700;
}


/* =========================================
   MEDICAL FACIALS
========================================= */

.medical-facials {
    background: #f4f0e8;
}

.facial-card {
    max-width: 900px;
    margin: 0 auto 25px;

    padding: 35px;

    background: rgba(255,255,255,.75);

    border: 1px solid #d8d1c6;
    border-radius: 22px;
}

.facial-card.signature {
    border-color: #b5284f;
}

.card-label {
    color: #a8663c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.facial-card h3 {
    font-size: 30px;
    margin-top: 7px;
}

.session {
    color: #747b7f;
    font-size: 14px;
    margin-bottom: 10px;
}

.price {
    color: #a62d4d;
    font-family: "Playfair Display", serif;
    font-size: 34px;
    font-weight: 700;
    margin: 12px 0 20px;
}

.price small {
    color: #657078;
    font-family: "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 400;
}

.facial-step {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 15px;

    padding: 15px 0;

    border-bottom: 1px solid #ddd8ce;
}

.facial-step > span {
    width: 27px;
    height: 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f4e5e4;
    color: #a62d4d;

    font-size: 11px;
    font-weight: 700;
}

.facial-step h4 {
    font-size: 15px;
    margin-bottom: 3px;
}

.facial-step p {
    color: #68727a;
    font-size: 13px;
}

.facial-btn {
    display: block;

    margin-top: 25px;
    padding: 14px;

    text-align: center;

    background: #b5284f;
    color: white;

    border-radius: 35px;

    font-weight: 700;
    font-size: 13px;
}

.medical-note {
    text-align: center;
    margin-top: 30px;
    color: #667078;
    font-size: 13px;
}


/* =========================================
   FINAL CTA
========================================= */

.final-cta {
    text-align: center;
    background: #142c42;
    color: white;
}

.final-cta h2 {
    color: white;
    font-size: clamp(35px, 5vw, 55px);
    margin-bottom: 17px;
}

.final-cta h2 em {
    color: #d4aa5e;
}

.final-cta p {
    max-width: 600px;
    margin: auto;
    color: #d4dbe0;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

.cta-primary,
.cta-secondary {
    padding: 14px 27px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
}

.cta-primary {
    background: #bd9145;
    color: white;
}

.cta-secondary {
    border: 1px solid #bd9145;
    color: white;
}


/* =========================================
   FOOTER
========================================= */

footer {
    text-align: center;
    padding: 25px;
    background: #102638;
    color: #aeb9c1;
    font-size: 12px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    section {
        padding: 65px 20px;
    }


    /* HEADER */

    .site-header {
        height: 68px;
        padding: 0 20px;
    }

    .logo {
        font-size: 18px;
    }

    .logo span {
        font-size: 10px;
    }

    .header-btn {
        padding: 9px 18px;
        font-size: 12px;
    }


    /* HERO */

    .skin-hero {
        display: flex;
        flex-direction: column;
        padding: 0 20px 60px;
        gap: 35px;
    }

    .hero-image {
        order: -1;

        width: calc(100% + 40px);
        margin-left: -20px;

        height: 300px;

        border-radius: 0;
    }

    .hero-content {
        text-align: center;
    }

    .hero-content h1 {
        font-size: 39px;
    }

    .hero-content p {
        font-size: 15px;
    }

    .primary-btn {
        width: 100%;
    }


    /* SECTION HEADINGS */

    .section-heading {
        margin-bottom: 35px;
    }

    .section-heading h2 {
        font-size: 34px;
    }

    .section-heading p {
        font-size: 14px;
    }


    /* DOCTOR */

    .doctor-card {
        display: block;
        padding: 18px;
        border-radius: 20px;
    }

    .doctor-image {
        height: 310px;
        margin-bottom: 25px;
    }

    .doctor-info {
        text-align: center;
    }

    .doctor-info h3 {
        font-size: 29px;
    }

    .doctor-info h4 {
        font-size: 13px;
    }

    .doctor-info p {
        font-size: 14px;
        text-align: left;
    }

    .doctor-highlights {
        text-align: left;
    }


    /* TREATMENTS */

    .category-title {
        font-size: 22px;
    }

    .treatment-card {
        grid-template-columns: 45px 1fr;
        gap: 13px;
        padding: 18px;
        border-radius: 17px;
    }

    .treatment-icon {
        width: 42px;
        height: 42px;
    }

    .treatment-card h4 {
        font-size: 15px;
    }

    .treatment-card p {
        font-size: 13px;
    }


    /* OFFER */

    .offer-link {
        width: 90%;
        justify-content: center;
        padding: 14px 18px;
        font-size: 11px;
    }

    .offer-card {
        padding: 25px 18px;
        border-radius: 22px;
    }

    .offer-price {
        width: 120px;
        height: 120px;
    }


    /* FACIALS */

    .facial-card {
        padding: 23px 18px;
        border-radius: 20px;
    }

    .facial-card h3 {
        font-size: 25px;
    }

    .price {
        font-size: 30px;
    }

    .facial-step {
        grid-template-columns: 30px 1fr;
        gap: 10px;
    }

    .facial-step p {
        font-size: 12px;
    }


    /* CTA */

    .cta-buttons {
        flex-direction: column;
    }

    .cta-primary,
    .cta-secondary {
        width: 100%;
    }

}
.skin-treatment-grid {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.skin-treatment-card {
    display: block;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;

    text-decoration: none;
    color: #102b46;

    border: 1px solid #e4ddd1;

    transition: 0.3s ease;
}

.skin-treatment-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.10);
}

.skin-treatment-card > img {
    width: 100%;
    height: 220px;
    display: block;
    object-fit: cover;
}

.skin-card-content {
    padding: 20px;
}

.skin-card-content h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-family: Georgia, serif;
}

.skin-card-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #596979;
}


/* TABLET */
@media (max-width: 1000px) {
    .skin-treatment-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* MOBILE */
@media (max-width: 600px) {
    .skin-treatment-grid {
        grid-template-columns: 1fr;
        padding: 0 15px;
        gap: 18px;
    }

    .skin-treatment-card > img {
        height: 210px;
    }

    .skin-card-content {
        padding: 18px;
    }

    .skin-card-content h3 {
        font-size: 19px;
    }

    .skin-card-content p {
        font-size: 13.5px;
    }
}
/* =========================================
   SKIN EXTRA TREATMENTS
========================================= */

.skin-extra-treatments {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0 25px;
}


/* SECTION */

.extra-section {
    margin-bottom: 65px;
}


/* HEADING */

.extra-heading {
    margin: 0 0 25px;

    font-family: Georgia, serif;
    font-size: 28px;
    font-weight: 700;

    color: #102b46;
}

.extra-heading span {
    color: #102b46;
    margin-right: 7px;
}


/* =========================================
   LASER HAIR REDUCTION
========================================= */

.laser-treatment-card {
    display: grid;
    grid-template-columns: 1fr 1fr;

    min-height: 300px;

    background: #fff;

    border: 1px solid #ddd6ca;
    border-radius: 20px;

    overflow: hidden;

    text-decoration: none;
    color: inherit;

    transition: all 0.3s ease;
}

.laser-treatment-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(16, 43, 70, 0.10);

    border-color: #c49a4b;
}


/* LASER IMAGE */

.laser-image {
    width: 100%;
    height: 100%;
    min-height: 300px;
    overflow: hidden;
}

.laser-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;
}

.laser-treatment-card:hover .laser-image img {
    transform: scale(1.05);
}


/* LASER CONTENT */

.laser-content {
    padding: 45px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.treatment-icon {
    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f8e9e9;

    border-radius: 14px;

    color: #bd3e61;

    font-size: 23px;

    margin-bottom: 20px;
}

.laser-content h3,
.wellness-content h3 {
    margin: 0 0 12px;

    font-size: 23px;

    color: #102b46;
}

.laser-content p,
.wellness-content p {
    margin: 0;

    font-size: 15px;

    line-height: 1.7;

    color: #536477;
}

.learn-more {
    display: inline-block;

    margin-top: 20px;

    font-size: 14px;
    font-weight: 700;

    color: #a57729;
}


/* =========================================
   ANTI AGEING / WELLNESS
========================================= */

.wellness-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;
}


/* CARD */

.wellness-card {
    background: #fff;

    border: 1px solid #ddd6ca;

    border-radius: 20px;

    overflow: hidden;

    text-decoration: none;
    color: inherit;

    transition: all 0.3s ease;
}

.wellness-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 15px 35px rgba(16, 43, 70, 0.10);

    border-color: #c49a4b;
}


/* IMAGE */

.wellness-image {
    width: 100%;
    height: 240px;

    overflow: hidden;
}

.wellness-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;
}

.wellness-card:hover .wellness-image img {
    transform: scale(1.05);
}


/* CONTENT */

.wellness-content {
    padding: 25px;
}

.wellness-content .treatment-icon {
    margin-bottom: 15px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .laser-treatment-card {
        grid-template-columns: 1fr;
    }

    .laser-image {
        height: 300px;
        min-height: auto;
    }

    .laser-content {
        padding: 30px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .skin-extra-treatments {
        margin: 50px auto;
        padding: 0 16px;
    }

    .extra-section {
        margin-bottom: 45px;
    }

    .extra-heading {
        font-size: 24px;
        margin-bottom: 20px;
    }


    /* Laser */

    .laser-treatment-card {
        display: flex;
        flex-direction: column;

        border-radius: 16px;
    }

    .laser-image {
        height: 220px;
    }

    .laser-content {
        padding: 22px;
    }

    .laser-content h3,
    .wellness-content h3 {
        font-size: 20px;
    }

    .laser-content p,
    .wellness-content p {
        font-size: 14px;
    }


    /* Wellness */

    .wellness-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .wellness-card {
        border-radius: 16px;
    }

    .wellness-image {
        height: 220px;
    }

    .wellness-content {
        padding: 20px;
    }

    .treatment-icon {
        width: 45px;
        height: 45px;
    }

}

/* =================================
   SKIN CTA - LIGHT PREMIUM VERSION
================================= */

.skin-cta {
    background: #f8f5ef;
    padding: 75px 25px;
    text-align: center;
    border-top: 1px solid #e8dfd2;
    border-bottom: 1px solid #e8dfd2;
}

.skin-cta .cta-label {
    color: #b88932;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 22px;
    text-transform: uppercase;
}

.skin-cta h2 {
    color: #102b46;
    font-family: Georgia, serif;
    font-size: 44px;
    line-height: 1.15;
    margin: 0 0 25px;
}

.skin-cta h2 span {
    color: #c49a4b;
    font-style: italic;
}

.skin-cta p {
    color: #536477;
    font-size: 16px;
    line-height: 1.7;
    margin: 0 auto 30px;
    max-width: 700px;
}

.skin-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 14px;
}

.skin-cta-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 125px;
    padding: 14px 25px;

    border-radius: 30px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 700;

    transition: 0.3s ease;
}

/* Call */

.skin-call-btn {
    background: #c49a4b;
    color: #fff;
}

.skin-call-btn:hover {
    background: #aa813b;
    transform: translateY(-2px);
}

/* WhatsApp */

.skin-whatsapp-btn {
    background: transparent;
    color: #102b46;
    border: 1px solid #c49a4b;
}

.skin-whatsapp-btn:hover {
    background: #102b46;
    color: #fff;
}


/* MOBILE */

@media (max-width: 600px) {

    .skin-cta {
        padding: 55px 20px;
    }

    .skin-cta h2 {
        font-size: 32px;
    }

    .skin-cta p {
        font-size: 14px;
    }

    .skin-cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .skin-cta-buttons a {
        width: 100%;
        max-width: 280px;
    }
}
@media (max-width: 600px) {
    .doctor-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
        object-position: center;
        display: block;
    }

    .doctor-image {
        height: auto;
        overflow: hidden;
    }
}
/* =================================
   HAIR TREATMENT CTA - LIGHT STYLE
================================= */

.ht-cta {
    background: #f8f5ef !important;
    border: 1px solid #e8dfd2;
    border-radius: 18px;
    padding: 55px 35px;
    text-align: left;
    color: #102b46;
}

/* Small heading */

.ht-cta .cta-label {
    color: #b88932 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* Main heading */

.ht-cta h2 {
    color: #102b46 !important;
    font-family: Georgia, serif;
    font-size: 32px;
    line-height: 1.25;
    margin: 0 0 15px;
}

/* Description */

.ht-cta p {
    color: #536477 !important;
    font-size: 14px;
    line-height: 1.7;
    max-width: 650px;
    margin-bottom: 25px;
}

/* Button */

.ht-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #c49a4b !important;
    color: #fff !important;

    padding: 14px 22px;
    border-radius: 5px;

    text-decoration: none;
    font-size: 12px;
    font-weight: 700;

    transition: 0.3s ease;
}

.ht-cta a:hover {
    background: #aa813b !important;
    transform: translateY(-2px);
}


/* MOBILE */

@media (max-width: 600px) {

    .ht-cta {
        padding: 35px 22px;
        border-radius: 14px;
    }

    .ht-cta h2 {
        font-size: 27px;
    }

    .ht-cta p {
        font-size: 13px;
    }

    .ht-cta a {
        width: auto;
        padding: 13px 18px;
    }
}
/* ==============================
   HEADER / LOGO
============================== */

.site-header {
    width: 100%;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding: 0 35px;

    background: #f8f5ef;

    box-sizing: border-box;
}

.site-logo {
    display: flex;
    align-items: center;

    text-decoration: none;
}

.site-logo img {
    display: block;

    width: 135px;
    height: auto;

    max-height: 55px;

    object-fit: contain;
}


/* MOBILE */

@media (max-width: 600px) {

    .site-header {
        height: 62px;
        padding: 0 18px;
    }

    .site-logo img {
        width: 115px;
        max-height: 48px;
    }
}

/* =====================================================
   COSMETIC SURGERY PAGE
   ADD AT THE VERY END OF style.css
===================================================== */

/* HERO */
.cosmetic-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 70px 25px 90px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    background: #faf8f4;
}

.cosmetic-hero .hero-content {
    padding: 20px 0;
}

.cosmetic-hero .breadcrumb {
    font-size: 12px;
    color: #78838b;
    margin-bottom: 28px;
}

.cosmetic-hero .eyebrow {
    display: block;
    color: #b88a3d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 17px;
}

.cosmetic-hero .hero-content h1 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 58px;
    line-height: 1.08;
    color: #17324a;
    margin: 0 0 24px;
}

.cosmetic-hero .hero-content h1 span {
    display: block;
    color: #b88a3d;
    font-style: italic;
}

.cosmetic-hero .hero-content p {
    max-width: 570px;
    color: #5d6c77;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.cosmetic-hero .gold-btn {
    display: inline-block;
    background: #bd9147;
    color: #fff;
    padding: 14px 24px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    transition: .3s ease;
}

.cosmetic-hero .gold-btn:hover {
    background: #a77c36;
    transform: translateY(-2px);
}

.cosmetic-hero .hero-image {
    height: 520px;
    overflow: hidden;
    border-radius: 18px;
}

.cosmetic-hero .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =====================================================
   SURGEON
===================================================== */

.surgeon-section {
    padding: 90px 25px;
    background: #fff;
}

.surgeon-section .section-heading {
    max-width: 850px;
    margin: 0 auto 45px;
}

.surgeon-section .section-heading > span {
    color: #b88a3d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.surgeon-section .section-heading h2 {
    font-family: Georgia, serif;
    font-size: 40px;
    line-height: 1.2;
    color: #17324a;
    margin: 15px 0;
}

.surgeon-section .section-heading h2 em {
    color: #b88a3d;
}

.surgeon-card {
    max-width: 1050px;
    margin: auto;
    display: grid;
    grid-template-columns: 40% 60%;
    background: #fff;
    border: 1px solid #e1dbd1;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(23,50,74,.07);
}

.surgeon-photo {
    min-height: 500px;
}

.surgeon-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.surgeon-info {
    padding: 50px;
}

.doctor-initial {
    width: 85px;
    height: 85px;
    border: 1px solid #bd9147;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bd9147;
    font-family: Georgia, serif;
    font-size: 32px;
    margin-bottom: 22px;
}

.surgeon-info h3 {
    font-family: Georgia, serif;
    font-size: 32px;
    color: #17324a;
    margin-bottom: 7px;
}

.surgeon-info h4 {
    color: #b88a3d;
    font-size: 13px;
    margin-bottom: 22px;
}

.surgeon-info blockquote {
    border-left: 3px solid #bd9147;
    padding-left: 16px;
    color: #687681;
    font-family: Georgia, serif;
    font-size: 17px;
    font-style: italic;
    margin-bottom: 22px;
}

.surgeon-info p {
    color: #5e6d78;
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 25px;
}

.doctor-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.doctor-points span {
    background: #f5efe5;
    color: #526473;
    padding: 8px 13px;
    border-radius: 20px;
    font-size: 11px;
}


/* =====================================================
   PROCEDURES
===================================================== */

.procedures-section {
    padding: 90px 25px;
    background: #faf8f4;
}

.procedures-section .section-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 50px;
}

.procedures-section .section-heading > span {
    color: #b88a3d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.procedures-section .section-heading h2 {
    font-family: Georgia, serif;
    font-size: 40px;
    color: #17324a;
    margin: 15px 0;
}

.procedures-section .section-heading h2 em {
    color: #b88a3d;
}

.procedures-section .section-heading p {
    color: #66737d;
    font-size: 15px;
}


/* GROUP */

.procedure-group {
    max-width: 1100px;
    margin: 0 auto 65px;
}

.group-title {
    font-family: Georgia, serif;
    color: #17324a;
    font-size: 28px;
    margin-bottom: 25px;
}


/* GRID */

.procedure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* CARD */

.procedure-card {
    background: #fff;
    border: 1px solid #e1dbd1;
    border-radius: 15px;
    overflow: hidden;
    transition: .3s ease;
}

.procedure-card:hover {
    transform: translateY(-5px);
    border-color: #c9a15d;
    box-shadow: 0 12px 30px rgba(23,50,74,.09);
}

.procedure-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #eeeae3;
}

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

.procedure-card:hover .procedure-image img {
    transform: scale(1.04);
}

.procedure-content {
    padding: 22px;
}

.procedure-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5e9e6;
    color: #b88a3d;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 12px;
}

.procedure-content h3 {
    color: #17324a;
    font-family: Georgia, serif;
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 10px;
}

.procedure-content h3 small {
    display: block;
    color: #7b858c;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    margin-top: 3px;
}

.procedure-content p {
    color: #63717b;
    font-size: 13px;
    line-height: 1.7;
}


/* =====================================================
   DOCTOR NOTE
===================================================== */

.doctor-note {
    max-width: 1050px;
    margin: 0 auto 75px;
    padding: 22px 25px;
    background: #f3ede2;
    border: 1px solid #ded1b8;
    border-radius: 12px;
    text-align: center;
    color: #596b78;
    font-size: 13px;
}

.doctor-note strong {
    color: #17324a;
}


/* =====================================================
   FAQ
===================================================== */

.faq-section {
    padding: 90px 25px;
    background: #fff;
}

.faq-section .section-heading {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 45px;
}

.faq-section .section-heading > span {
    color: #b88a3d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.faq-section .section-heading h2 {
    font-family: Georgia, serif;
    font-size: 40px;
    color: #17324a;
}

.faq-section .section-heading h2 em {
    color: #b88a3d;
}

.faq-container {
    max-width: 850px;
    margin: auto;
}

.faq-container details {
    background: #fff;
    border: 1px solid #e0dbd2;
    border-radius: 11px;
    margin-bottom: 12px;
    overflow: hidden;
}

.faq-container summary {
    list-style: none;
    cursor: pointer;
    padding: 19px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #17324a;
    font-size: 14px;
    font-weight: 700;
}

.faq-container summary::-webkit-details-marker {
    display: none;
}

.faq-container summary span {
    color: #bd9147;
    font-size: 22px;
}

.faq-container details p {
    padding: 0 22px 20px;
    color: #63717b;
    font-size: 13px;
    line-height: 1.7;
}


/* =====================================================
   FINAL CTA
===================================================== */

.cosmetic-cta {
    max-width: 1050px;
    margin: 70px auto;
    padding: 65px 25px;
    text-align: center;
    background: #f3ede2;
    border: 1px solid #ded1b8;
    border-radius: 18px;
}

.cosmetic-cta > span {
    color: #b88a3d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.cosmetic-cta h2 {
    font-family: Georgia, serif;
    color: #17324a;
    font-size: 42px;
    margin: 17px 0;
}

.cosmetic-cta h2 em {
    color: #bd9147;
}

.cosmetic-cta p {
    color: #60717d;
    font-size: 14px;
    margin-bottom: 25px;
}

.cosmetic-cta a {
    display: inline-block;
    background: #bd9147;
    color: #fff;
    padding: 14px 25px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .cosmetic-hero {
        display: flex;
        flex-direction: column;
        padding: 35px 18px 60px;
        gap: 25px;
    }

    .cosmetic-hero .hero-content {
        padding: 0;
    }

    .cosmetic-hero .hero-content h1 {
        font-size: 39px;
    }

    .cosmetic-hero .hero-content p {
        font-size: 14px;
    }

    .cosmetic-hero .gold-btn {
        width: 100%;
        text-align: center;
    }

    .cosmetic-hero .hero-image {
        height: 320px;
        border-radius: 15px;
    }


    .surgeon-section,
    .procedures-section,
    .faq-section {
        padding: 65px 16px;
    }

    .surgeon-section .section-heading h2,
    .procedures-section .section-heading h2,
    .faq-section .section-heading h2 {
        font-size: 31px;
    }


    /* SURGEON MOBILE */

    .surgeon-card {
        display: block;
        border-radius: 15px;
    }

    .surgeon-photo {
        height: auto;
        min-height: 0;
    }

    .surgeon-photo img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .surgeon-info {
        padding: 30px 20px;
    }

    .doctor-initial {
        margin-left: auto;
        margin-right: auto;
    }

    .surgeon-info h3 {
        text-align: center;
        font-size: 28px;
    }

    .surgeon-info h4 {
        text-align: center;
    }

    .doctor-points {
        justify-content: center;
    }


    /* PROCEDURE MOBILE */

    .procedure-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .procedure-image {
        height: 220px;
    }

    .procedure-content {
        padding: 20px;
    }


    /* FAQ */

    .faq-container summary {
        padding: 17px;
        font-size: 13px;
    }

    .faq-container details p {
        padding: 0 17px 18px;
        font-size: 12px;
    }


    /* CTA */

    .cosmetic-cta {
        margin: 35px 16px 50px;
        padding: 50px 20px;
        border-radius: 15px;
    }

    .cosmetic-cta h2 {
        font-size: 32px;
    }

    .cosmetic-cta a {
        width: 100%;
        text-align: center;
    }
}

/* =========================================================
   MARMM OFFERS PAGE
========================================================= */

.offer-header {
    min-height: 76px;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: #fffdf9;
    border-bottom: 1px solid #e8e0d4;
    position: relative;
    z-index: 10;
}

.offer-logo {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.offer-logo span {
    font-family: "Playfair Display", serif;
    font-size: 25px;
    font-weight: 600;
    color: #172f46;
}

.offer-logo small {
    margin-top: 5px;
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
    color: #bd8b38;
}

.offer-nav {
    display: flex;
    align-items: center;
    gap: 27px;
}

.offer-nav a {
    color: #243444;
    text-decoration: none;
    font-size: 13px;
    transition: .3s ease;
}

.offer-nav a:hover {
    color: #b9822c;
}

.header-book-btn {
    text-decoration: none;
    background: #bd8b38;
    color: #fff;
    padding: 13px 22px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   HERO
========================================================= */

.offers-hero {
    min-height: 520px;
    display: grid;
    grid-template-columns: 43% 57%;
    background: #f7f1e8;
}

.offers-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 9%;
}

.offer-label,
.section-heading > span,
.limited-offer span,
.offers-final-cta > span {
    color: #b67e28;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.offers-hero h1 {
    margin: 20px 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(48px, 5vw, 76px);
    line-height: 1.03;
    font-weight: 600;
    color: #142c43;
}

.offers-hero h1 em {
    display: block;
    color: #bd8b38;
    font-weight: 600;
}

.offers-hero p {
    max-width: 500px;
    color: #4c5964;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 28px;
}

.gold-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 14px 23px;
    border-radius: 4px;
    background: #bd8b38;
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: .3s ease;
}

.gold-btn:hover {
    background: #a97320;
    transform: translateY(-2px);
}

.offers-hero-image {
    min-height: 520px;
}

.offers-hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* =========================================================
   PACKAGES
========================================================= */

.packages-section {
    padding: 90px 5%;
    background: #fffdf9;
}

.section-heading {
    max-width: 750px;
    margin: 0 auto 55px;
    text-align: center;
}

.section-heading h2 {
    margin: 14px 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.15;
    color: #172f46;
}

.section-heading h2 em {
    color: #bd8b38;
}

.section-heading p {
    color: #65707a;
    line-height: 1.7;
    max-width: 620px;
    margin: auto;
}

.package-grid {
    max-width: 1250px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.package-card {
    background: #fff;
    border: 1px solid #e4dbce;
    border-radius: 10px;
    overflow: hidden;
    transition: .35s ease;
}

.package-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(32, 45, 57, .10);
}

.package-image {
    height: 220px;
    position: relative;
    overflow: hidden;
}

.package-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: .5s ease;
}

.package-card:hover .package-image img {
    transform: scale(1.04);
}

.package-no {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #bd8b38;
    color: white;
    font-size: 12px;
    font-weight: 700;
}

.package-content {
    padding: 24px 20px 20px;
}

.package-tag {
    display: inline-block;
    margin-bottom: 9px;
    color: #b67e28;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.package-content h3 {
    margin: 0 0 10px;
    color: #162e45;
    font-family: "Playfair Display", serif;
    font-size: 21px;
    line-height: 1.25;
}

.package-content p {
    min-height: 67px;
    margin: 0 0 15px;
    color: #66717b;
    font-size: 13px;
    line-height: 1.6;
}

.package-price {
    margin-top: 10px;
    color: #b67e28;
    font-family: "Playfair Display", serif;
    font-size: 28px;
    font-weight: 600;
}

.package-price small {
    font-family: "DM Sans", sans-serif;
    color: #66717b;
    font-size: 12px;
    font-weight: 400;
}

.package-saving {
    display: block;
    margin: 5px 0 17px;
    color: #68737c;
    font-size: 11px;
}

.package-btn,
.details-btn {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.package-btn {
    text-decoration: none;
    background: #bd8b38;
    color: white;
    margin-bottom: 9px;
}

.details-btn {
    background: white;
    border: 1px solid #bd8b38;
    color: #273747;
    gap: 10px;
}

.details-btn span {
    color: #bd8b38;
    font-size: 15px;
}

.details-btn:hover {
    background: #faf3e8;
}

.featured-package {
    border: 1px solid #c99542;
}


/* =========================================================
   MODAL
========================================================= */

body.modal-open {
    overflow: hidden;
}

.offer-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    visibility: hidden;
    opacity: 0;
    transition: .3s ease;
}

.offer-modal.active {
    visibility: visible;
    opacity: 1;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(25, 31, 37, .70);
    backdrop-filter: blur(5px);
}

.offer-modal-card {
    position: relative;
    z-index: 2;
    width: min(920px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    background: #fffdf9;
    border-radius: 13px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .25);
    transform: translateY(25px) scale(.97);
    transition: .3s ease;
}

.offer-modal.active .offer-modal-card {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    right: 18px;
    top: 16px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #172f46;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

.modal-top {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 30px;
    padding: 42px 42px 35px;
    border-bottom: 1px solid #e8dfd3;
}

.modal-top h2 {
    margin: 8px 0 13px;
    font-family: "Playfair Display", serif;
    color: #172f46;
    font-size: 38px;
    line-height: 1.15;
}

.modal-top p {
    max-width: 550px;
    color: #626d76;
    line-height: 1.7;
    font-size: 14px;
}

.modal-top > img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 8px;
}

.modal-price {
    margin-top: 18px;
    color: #b67e28;
    font-family: "Playfair Display", serif;
    font-size: 34px;
    font-weight: 600;
}

.modal-price small {
    color: #66717b;
    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
}

.advanced-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 7px 11px;
    border: 1px solid #d4ae6c;
    border-radius: 5px;
    color: #9a6a20;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.modal-details {
    padding: 30px 42px 10px;
}

.modal-details > h4 {
    margin: 0 0 20px;
    color: #b67e28;
    font-size: 11px;
    letter-spacing: 2px;
}

.step-item {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid #e9e2d8;
}

.step-item:last-child {
    border-bottom: none;
}

.step-item img {
    width: 88px;
    height: 70px;
    object-fit: cover;
    border-radius: 7px;
}

.step-item > div {
    position: relative;
}

.step-item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin-right: 9px;
    border-radius: 50%;
    background: #f4e9d8;
    color: #a87224;
    font-size: 10px;
    font-weight: 700;
}

.step-item h3 {
    display: inline;
    margin: 0;
    color: #172f46;
    font-size: 15px;
}

.step-item p {
    margin: 7px 0 0;
    color: #66717b;
    font-size: 12px;
    line-height: 1.55;
}

.modal-book-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 42px 35px;
    padding: 15px 20px;
    border-radius: 5px;
    background: #bd8b38;
    color: white;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   LIMITED OFFER
========================================================= */

.limited-offer {
    max-width: 1250px;
    margin: 0 auto 80px;
    padding: 35px 40px;
    border: 1px solid #e4d5be;
    border-radius: 10px;
    background: #fbf5eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.limited-offer h2 {
    margin: 8px 0;
    color: #172f46;
    font-family: "Playfair Display", serif;
    font-size: 30px;
}

.limited-offer p {
    margin: 0;
    color: #68727b;
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================================
   TRUST
========================================================= */

.trust-section {
    padding: 80px 5%;
    background: #f8f3eb;
}

.trust-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.trust-item {
    text-align: center;
    padding: 25px 15px;
}

.trust-icon {
    width: 45px;
    height: 45px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #bd8b38;
    border: 1px solid #e1d3bd;
}

.trust-item h3 {
    margin: 0 0 8px;
    color: #172f46;
    font-family: "Playfair Display", serif;
    font-size: 18px;
}

.trust-item p {
    margin: 0;
    color: #69737b;
    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   FINAL CTA
========================================================= */

.offers-final-cta {
    padding: 90px 20px;
    text-align: center;
    background: #f7f1e8;
}

.offers-final-cta h2 {
    margin: 15px 0;
    color: #172f46;
    font-family: "Playfair Display", serif;
    font-size: clamp(38px, 5vw, 58px);
}

.offers-final-cta h2 em {
    color: #bd8b38;
}

.offers-final-cta p {
    margin: 0 auto 25px;
    max-width: 600px;
    color: #66717b;
    line-height: 1.7;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 23px;
    border: 1px solid #bd8b38;
    border-radius: 4px;
    color: #172f46;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 1000px) {

    .offer-nav {
        display: none;
    }

    .package-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .offers-hero {
        grid-template-columns: 1fr;
    }

    .offers-hero-content {
        padding: 60px 7%;
    }

    .offers-hero-image {
        min-height: 360px;
    }

    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 650px) {

    .offer-header {
        min-height: 65px;
        padding: 0 18px;
    }

    .offer-logo span {
        font-size: 21px;
    }

    .header-book-btn {
        padding: 10px 13px;
        font-size: 11px;
    }

    .offers-hero-content {
        padding: 50px 22px;
    }

    .offers-hero h1 {
        font-size: 43px;
    }

    .offers-hero p {
        font-size: 14px;
    }

    .offers-hero-image {
        min-height: 280px;
    }

    .packages-section {
        padding: 65px 18px;
    }

    .package-grid {
        grid-template-columns: 1fr;
    }

    .package-image {
        height: 230px;
    }

    .section-heading {
        margin-bottom: 35px;
    }

    .section-heading h2 {
        font-size: 34px;
    }

    .limited-offer {
        margin: 0 18px 60px;
        padding: 28px 22px;
        flex-direction: column;
        align-items: flex-start;
    }

    .trust-section {
        padding: 60px 18px;
    }

    .trust-grid {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .offer-modal {
        padding: 10px;
    }

    .offer-modal-card {
        max-height: 94vh;
        border-radius: 10px;
    }

    .modal-top {
        grid-template-columns: 1fr;
        padding: 35px 22px 25px;
    }

    .modal-top h2 {
        font-size: 29px;
    }

    .modal-top > img {
        height: 190px;
        order: -1;
    }

    .modal-details {
        padding: 25px 22px 5px;
    }

    .step-item {
        grid-template-columns: 65px 1fr;
        gap: 12px;
    }

    .step-item img {
        width: 65px;
        height: 65px;
    }

    .step-item h3 {
        font-size: 14px;
    }

    .step-item p {
        font-size: 11px;
    }

    .modal-book-btn {
        margin: 18px 22px 25px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .gold-btn,
    .cta-buttons .outline-btn {
        width: 200px;
    }

}
/* =====================================================
   TREATMENTS LANDING PAGE
===================================================== */

.treatment-header {
    min-height: 76px;
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    background: #faf;
    border-bottom: 1px solid #e8e0d4;
    position: relative;
    z-index: 1000;
}

.treatment-logo {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.treatment-logo span {
    font-family: "Playfair Display", serif;
    font-size: 25px;
    color: #172f46;
}

.treatment-logo small {
    margin-top: 5px;
    color: #bd8b38;
    font-size: 9px;
    letter-spacing: 3px;
}

.treatment-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.treatment-nav > a,
.treatment-nav-link {
    color: #263746;
    text-decoration: none;
    font-size: 13px;
}

.treatment-nav > a:hover,
.treatment-nav-link:hover {
    color: #bd8b38;
}


/* DROPDOWN */

.treatment-dropdown {
    position: relative;
    height: 76px;
    display: flex;
    align-items: center;
}

.treatment-nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
}

.treatment-nav-link span {
    color: #bd8b38;
    font-size: 15px;
}

.treatment-dropdown-menu {
    position: absolute;
    top: 68px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);

    width: 360px;
    padding: 18px;

    background: #fffdf9;
    border: 1px solid #e5dccf;
    border-radius: 10px;

    box-shadow: 0 18px 45px rgba(30, 40, 50, .13);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: .25s ease;
}

.treatment-dropdown:hover .treatment-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.dropdown-heading {
    padding: 5px 8px 13px;
    border-bottom: 1px solid #e8dfd4;
}

.dropdown-heading span {
    color: #bd8b38;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.dropdown-heading p {
    margin: 5px 0 0;
    color: #777f85;
    font-size: 11px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 8px;
    text-decoration: none;
    border-bottom: 1px solid #eee8df;
    transition: .25s ease;
}

.dropdown-item:hover {
    background: #faf4eb;
}

.dropdown-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #f5ead8;
    color: #b67e28;
}

.dropdown-item strong {
    display: block;
    color: #1d3348;
    font-size: 13px;
}

.dropdown-item small {
    display: block;
    margin-top: 3px;
    color: #788087;
    font-size: 10px;
}

.dropdown-all {
    display: block;
    padding: 13px 8px 3px;
    color: #b67e28;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}


.treatment-book-btn {
    padding: 13px 20px;
    background: #bd8b38;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}


/* HERO */

.treatments-page-hero {
    min-height: 470px;
    padding: 70px 9%;
    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(248,243,235,.98) 0%,
            rgba(248,243,235,.92) 50%,
            rgba(248,243,235,.45) 100%
        ),
        url("../images/treatments-hero.jpg");

    background-size: cover;
    background-position: center;
}

.treatments-page-hero > div {
    max-width: 650px;
}

.treatments-page-hero span,
.treatments-heading > span,
.treatments-bottom-cta > span {
    color: #b67e28;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}

.treatments-page-hero h1 {
    margin: 18px 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(46px, 5vw, 70px);
    line-height: 1.05;
    color: #172f46;
}

.treatments-page-hero h1 em {
    color: #bd8b38;
}

.treatments-page-hero p {
    max-width: 580px;
    color: #5f6b74;
    line-height: 1.7;
    font-size: 15px;
    margin-bottom: 28px;
}

.treatment-gold-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 23px;

    background: #bd8b38;
    color: white;
    text-decoration: none;

    border-radius: 4px;

    font-size: 12px;
    font-weight: 600;
}


/* TREATMENT CARDS */

.all-treatments {
    padding: 90px 5%;
    background: #fffdf9;
}

.treatments-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 55px;
}

.treatments-heading h2 {
    margin: 14px 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(35px, 4vw, 50px);
    color: #172f46;
}

.treatments-heading h2 em {
    color: #bd8b38;
}

.treatments-heading p {
    color: #6c757d;
    line-height: 1.7;
    font-size: 14px;
}

.treatment-cards {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.treatment-card {
    display: grid;
    grid-template-columns: 42% 58%;

    text-decoration: none;

    background: #fff;
    border: 1px solid #e4dbce;
    border-radius: 10px;

    overflow: hidden;

    transition: .3s ease;
}

.treatment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(25, 40, 55, .10);
}

.treatment-card-image {
    min-height: 270px;
    overflow: hidden;
}

.treatment-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: .5s ease;
}

.treatment-card:hover .treatment-card-image img {
    transform: scale(1.05);
}

.treatment-card-content {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.treatment-card-content > span {
    color: #bd8b38;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.treatment-card-content h3 {
    margin: 10px 0;
    color: #172f46;
    font-family: "Playfair Display", serif;
    font-size: 26px;
}

.treatment-card-content p {
    color: #6b747c;
    font-size: 12px;
    line-height: 1.65;
    margin: 0 0 18px;
}

.treatment-card-content strong {
    color: #b67e28;
    font-size: 11px;
}


/* BOTTOM CTA */

.treatments-bottom-cta {
    padding: 90px 20px;
    text-align: center;
    background: #f7f1e8;
}

.treatments-bottom-cta h2 {
    margin: 15px 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(37px, 5vw, 55px);
    color: #172f46;
}

.treatments-bottom-cta h2 em {
    color: #bd8b38;
}

.treatments-bottom-cta p {
    max-width: 600px;
    margin: 0 auto 25px;
    color: #66717b;
    line-height: 1.7;
    font-size: 14px;
}


/* MOBILE */

@media (max-width: 1000px) {

    .treatment-nav {
        display: none;
    }

    .treatment-cards {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .treatment-header {
        padding: 0 18px;
    }

    .treatment-logo span {
        font-size: 21px;
    }

    .treatment-book-btn {
        padding: 10px 13px;
        font-size: 10px;
    }

    .treatments-page-hero {
        min-height: 520px;
        padding: 55px 22px;

        background:
            linear-gradient(
                rgba(248,243,235,.88),
                rgba(248,243,235,.94)
            ),
            url("../images/treatments-hero.jpg");

        background-position: center;
    }

    .treatments-page-hero h1 {
        font-size: 43px;
    }

    .treatments-page-hero p {
        font-size: 13px;
    }

    .all-treatments {
        padding: 65px 18px;
    }

    .treatment-cards {
        gap: 18px;
    }

    .treatment-card {
        grid-template-columns: 1fr;
    }

    .treatment-card-image {
        height: 230px;
        min-height: 0;
    }

    .treatment-card-content {
        padding: 23px 20px 25px;
    }

    .treatment-card-content h3 {
        font-size: 23px;
    }

}
/* =========================================================
   FACIAL TREATMENTS — OFFER PAGE STYLE
   ========================================================= */

.skin-facial-menu {
    padding: 70px 5%;
    background: #faf9f6;
}


/* ================= HEADING ================= */

.facial-heading {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

.facial-heading h2 {
    margin: 10px 0 12px;
    color: #092d54;
}

.facial-heading p {
    max-width: 650px;
    margin: 0 auto;
    color: #31516f;
    line-height: 1.7;
}


/* ================= CARD GRID ================= */

.facial-card-grid {
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 16px;
}


/* ================= CARD ================= */

.facial-offer-card {
    background: #ffffff;

    border: 1px solid #e3d9c8;
    border-radius: 10px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    min-width: 0;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.facial-offer-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(20, 35, 55, 0.12);
}


/* ================= IMAGE ================= */

.facial-card-image {
    position: relative;

    width: 100%;
    height: 200px;

    overflow: hidden;
}


.facial-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.4s ease;
}


.facial-offer-card:hover
.facial-card-image img {
    transform: scale(1.04);
}


/* ================= NUMBER CIRCLE ================= */

.facial-number {
    position: absolute;

    top: 14px;
    left: 14px;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background: #c28c32;
    color: #ffffff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: Manrope, sans-serif;
    font-size: 12px;
    font-weight: 700;
}


/* ================= CARD CONTENT ================= */

.facial-card-body {
    padding: 26px 18px 18px;

    display: flex;
    flex-direction: column;

    flex: 1;
}


/* CATEGORY */

.facial-category {
    display: block;

    margin-bottom: 12px;

    color: #b8781c;

    font-family: Manrope, sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
    text-transform: uppercase;
}


/* TITLE */

.facial-card-body h3 {
    margin: 0 0 10px;

    color: #092d54;

    font-family: Fraunces, serif;
    font-size: 20px;
    font-weight: 600;

    line-height: 1.3;
}


/* DESCRIPTION */

.facial-card-body p {
    margin: 0 0 20px;

    color: #31516f;

    font-family: Manrope, sans-serif;
    font-size: 14px;

    line-height: 1.65;
}


/* ================= VIEW DETAILS BUTTON ================= */

.facial-details-btn {
    width: 100%;

    margin-top: auto;

    padding: 12px 14px;

    background: #ffffff;

    border: 1px solid #c28c32;
    border-radius: 4px;

    color: #092d54;

    font-family: Manrope, sans-serif;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        0.25s ease,
        color 0.25s ease;
}


.facial-details-btn:hover {
    background: #c28c32;
    color: #ffffff;
}


.facial-details-btn span {
    margin-left: 7px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .facial-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .skin-facial-menu {
        padding: 50px 15px;
    }


    .facial-heading {
        margin-bottom: 30px;
    }


    .facial-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }


    .facial-card-image {
        height: 155px;
    }


    .facial-card-body {
        padding: 18px 13px 13px;
    }


    .facial-category {
        font-size: 8px;
        letter-spacing: 1.5px;

        margin-bottom: 9px;
    }


    .facial-card-body h3 {
        font-size: 17px;
        line-height: 1.25;

        margin-bottom: 8px;
    }


    .facial-card-body p {
        font-size: 12px;
        line-height: 1.5;

        margin-bottom: 15px;
    }


    .facial-details-btn {
        padding: 10px 6px;

        font-size: 11px;
    }


    .facial-number {
        top: 10px;
        left: 10px;

        width: 31px;
        height: 31px;

        font-size: 10px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .facial-card-grid {
        gap: 10px;
    }


    .facial-card-image {
        height: 135px;
    }


    .facial-card-body {
        padding: 15px 10px 10px;
    }


    .facial-card-body h3 {
        font-size: 15px;
    }


    .facial-card-body p {
        font-size: 11px;
    }

}
@media (max-width: 768px) {
    .nav-cta {
        display: none !important;
    }
}
/* ================================
   MARMM HEADER
================================ */

:root {
  /* --navy: #071b52; */
  /* --navy-light: #12347A; */
  /* --gold: #F2A900; */
  /* --gold-light: #FFD34A; */
  /* --white: #ffffff; */
  /* --border: #E8E8E8; */
  oot{
--forest:#102A43;
--forest-deep:#0B2235;
--ivory:#FffffF;
--gold:#C9A15F;
--gold-soft:#E4CFA0;
--blush:#E8C9BC;
--ink:#1C2422;
 --line:rgba(16,42,67,0.14);
}

}
/* HEADER */

.main-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(7, 25, 79, 0.10);
}

.header-container {
  width: 94%;
  max-width: 1500px;
  min-height: 52px;
  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}


/* LOGO */

.brand-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo img {
  width: 190px;
  height: auto;
  display: block;
}


/* DESKTOP NAV */

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  flex: 1;
}

.nav-link {
  position: relative;

  color: var(--navy);
  text-decoration: none;

  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;

  padding: 34px 0;
  transition: 0.3s ease;
}

.nav-link:hover {
  color: var(--gold);
}

.nav-link.active {
  color: var(--gold);
}

.nav-link.active::after {
  content: "";

  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;

  height: 3px;
  border-radius: 5px;

  background: var(--gold);
}


/* DROPDOWN */

.nav-dropdown {
  position: relative;
}

.dropdown-arrow {
  font-size: 18px;
  margin-left: 3px;
}

.dropdown-menu {
  position: absolute;
  top: 75px;
  left: -20px;

  min-width: 220px;

  background: #ffffff;

  border-radius: 12px;
  padding: 10px;

  box-shadow: 0 12px 35px rgba(7, 25, 79, 0.15);

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition: 0.25s ease;
}

.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: block;

  padding: 12px 15px;

  color: var(--navy);
  text-decoration: none;

  font-size: 15px;
  font-weight: 600;

  border-radius: 8px;

  transition: 0.2s ease;
}

.dropdown-menu a:hover {
  background: #fff5d9;
  color: var(--gold);
}


/* APPOINTMENT BUTTON */

.appointment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  background-color:  #f5a900,
  color#FFFFFF
    /* #ffbd24 */
  /* --gold:#C9A15F; */
  /* background: #F5A900; */
  
  
  ;

  color:#102A43;

  text-decoration: none;

  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;

  border-radius: 10px;

  box-shadow: 0 7px 18px rgba(245, 169, 0, 0.25);

  transition: 0.3s ease;
}


.appointment-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(245, 169, 0, 0.35);
}

.desktop-appointment {
  min-width: 260px;
  min-height: 58px;
}

.appointment-btn span {
  font-size: 21px;
}
@media (min-width: 769px) {
    .appointment-btn {
        background: #0B3B70 !important;
        color: #fff !important;
    }

    .appointment-btn:hover {
        background: #0B3B70 !important;
        color: #fff !important;
    }
}

/* MOBILE BUTTON */

.mobile-menu-btn {
  display: none;

  width: 52px;
  height: 52px;

  border: none;
  border-radius: 10px;

  background: linear-gradient(
    135deg,
    #ffd76a,
    #f5a900
  );

  cursor: pointer;

  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;

  flex-shrink: 0;
}

.mobile-menu-btn span {
  width: 24px;
  height: 3px;

  background: var(--navy);

  border-radius: 5px;

  transition: 0.3s ease;
}


/* ================================
   MOBILE MENU
================================ */

.mobile-menu {
  display: none;

  position: absolute;

  top: 100%;
  left: 0;

  width: 100%;

  background: #ffffff;

  box-shadow: 0 15px 30px rgba(7, 25, 79, 0.12);

  max-height: calc(100vh - 80px);
  overflow-y: auto;

}
.mobile-service-link {
    display: flex;
    align-items: center;
    gap: 15px;
    color: inherit;
    text-decoration: none;
    flex: 1;
}
.mobile-menu-btn {
    background: white !important;
}

.mobile-menu-btn span {
    background: #0B3B70 !important;
}
.appointment-btn.mobile-appointment {
    background: #0B3B70 !important;
    color: #fff !important;
}

.appointment-btn.mobile-appointment:hover {
    background: #0B3B70 !important;
    color: #fff !important;
}
.mobile-menu-inner {
  padding: 10px 18px 20px;
}


/* MOBILE NAV ITEM */

.mobile-nav-link {
  width: 100%;

  min-height: 58px;

  display: flex;
  align-items: center;

  gap: 15px;

  padding: 0 12px;

  box-sizing: border-box;

  background: #ffffff;

  border: none;
  border-bottom: 1px solid #eeeeee;

  color: var(--navy);

  text-decoration: none;

  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;

  cursor: pointer;

  text-align: left;

  transition: 0.25s ease;
}

.mobile-nav-link:hover {
  color: var(--gold);
  background: #fffaf0;
}

.mobile-nav-link.active {
  color: var(--gold);

  background: #fff9e9;

  border-radius: 7px;

  border-bottom-color: transparent;
}


/* MOBILE ICON */

.mobile-icon {
  width: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--navy);

  font-size: 22px;
  font-weight: 700;
}

.mobile-nav-link.active .mobile-icon {
  color: var(--gold);
}


/* ARROW */

.mobile-arrow {
  margin-left: auto;

  font-size: 25px;

  color: var(--navy);

  transition: 0.3s ease;
}

.mobile-nav-link.active .mobile-arrow {
  color: var(--gold);
}


/* TREATMENTS */

.mobile-treatment {
  width: 100%;
}

.treatment-toggle {
  font-family: inherit;
}

.treatment-arrow {
  font-size: 20px;
}

.treatment-toggle.open .treatment-arrow {
  transform: rotate(180deg);
}


/* SUBMENU */

.mobile-submenu {
  display: none;

  background: #fafafa;

  padding: 5px 0 5px 57px;

  border-bottom: 1px solid #eeeeee;
}

.mobile-submenu.open {
  display: block;
}

.mobile-submenu a {
  display: block;

  padding: 11px 10px;

  color: var(--navy);

  text-decoration: none;

  font-size: 15px;
  font-weight: 600;

  border-radius: 6px;
}

.mobile-submenu a:hover {
  color: var(--gold);
  background: #fff5d9;
}


/* MOBILE APPOINTMENT */

.mobile-appointment {
  width: 100%;
  min-height: 55px;

  margin-top: 18px;

  border-radius: 9px;
}


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

@media (max-width: 1000px) {

  .header-container {
    min-height: 78px;
    width: 92%;
  }

  .brand-logo img {
    width: 165px;
  }

  .desktop-nav,
  .desktop-appointment {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .mobile-menu {
    display: none;
  }

  .mobile-menu.open {
    display: block;
  }
}


/* SMALL MOBILE */

@media (max-width: 480px)
 {

  .header-container {
    min-height: 72px;
  }

  .brand-logo img {
    width: 145px;
  }

  .mobile-menu-btn {
    width: 48px;
    height: 48px;
  }

  .mobile-menu-inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .mobile-nav-link {
    min-height: 55px;
    font-size: 16px;
  }

  .mobile-appointment {
    font-size: 14px;
  }
 }
 .modal-book {
    display: inline-block;
    margin-top: 20px;
    padding: 13px 22px;
    background: #0B3B70;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.modal-bottom {
    padding: 30px 42px 40px;
}

.modal-bottom li {
    margin: 10px 0;
    color: #626d76;
}
/* ================= RESET ================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    background: #fbfaf7;
    color: #17253d;
    overflow-x: hidden;
}

img {
    width: 100%;
    display: block;
}

a {
    text-decoration: none;
}


/* =====================================================
   NEW MARMM FOOTER
===================================================== */

.main-footer {
    /* background: #F4F0DF !important; */
    /* color: #111 !important; */
    background: var(--theme-navy) !important;
    color: #fff !important;
    padding: 45px 0 35px !important;
    margin-top: 60px;
    border-top: 1px solid #ddd6bd;
}

/* FOOTER WRAPPER */

.footer-wrap {
    width: min(1180px, 92%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.25fr 1.25fr;
    gap: 45px;

    align-items: start;
}


/* ALL COLUMNS */

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


/* HEADINGS */

.main-footer h3 {
    font-family: Arial, sans-serif !important;
    font-size: 23px !important;
    font-weight: 400 !important;
    color: var(--theme-gold) !important;

    margin: 0 0 32px !important;
    line-height: 1.25;
}


/* PARAGRAPH */

.main-footer p {
    font-family: Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
       color: rgba(255, 255, 255, 0.85) !important;
    /* color: #111 !important; */

    margin: 0 0 17px !important;
}
.main-footer a {
     color: var(--theme-gold) !important;
}

.main-footer a:hover {
    color: var(--theme-gold) !important;
}

.main-footer b {
    color: var(--theme-gold) !important;
}

/* ABOUT */

.footer-about p {
    max-width: 290px;
}


/* DENTAL VISIT */

.footer-visit {
    display: flex;
    align-items: center;
    gap: 22px;

    margin-top: 48px;
    margin-bottom: 38px;

    font-size: 16px;
}

.footer-visit span {
    font-size: 16px;
}

.footer-visit a {
    color: #111 !important;
    text-decoration: none;
}


/* SOCIAL ICONS */
.social-icons {
    display: flex;
    align-items: center;
    gap: 22px;
}

.social-icons a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    width: auto !important;
    height: auto !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    text-decoration: none;
}

.social-icons a i {
    font-family: "Font Awesome 6 Brands" !important;
    font-size: 24px !important;
    color: #ffffff !important;
    line-height: 1;
    transition: all .3s ease;
}

.social-icons a:hover i {
    color: var(--theme-gold) !important;
    transform: translateY(-3px);
}
/* .social-icons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.social-icons a {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 5px;
    text-decoration: none;

    color: #fff !important;
    font-size: 17px;
    transition: 0.3s;
}

.social-icons a:nth-child(1) {
    background: #1877F2;
}

.social-icons a:nth-child(2) {
    background: #000;
}

.social-icons a:nth-child(3) {
    background: #E4405F;
}

.social-icons a:nth-child(4) {
    background: #BD081C;
}

.social-icons a:nth-child(5) {
    background: #C62828;
}

.social-icons a:hover {
    transform: translateY(-3px);
    opacity: 0.8;
} */

/* .social-icons { */
    /* display: flex; */
    /* gap: 10px; */
    /* align-items: center; */
/* } */
/*  */
/* .social-icons a { */
    /* width: 32px; */
    /* height: 32px; */
/*  */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
/*  */
    /* border-radius: 5px; */
/*  */
    /* color: #fff !important; */
    /* text-decoration: none; */
/*  */
    /* font-family: Arial, sans-serif; */
    /* font-size: 20px; */
    /* font-weight: bold; */
/* } */
/*  */
/* .social-icons .facebook { */
    /* background: #1877f2; */
/* } */
/*  */
/* .social-icons .twitter { */
    /* background: #1da1f2; */
/* } */
/*  */
/* .social-icons .instagram { */
    /* background: #e4405f; */
/* } */
/*  */
/* .social-icons .pinterest { */
    /* background: #bd081c; */
/* } */
/*  */
/* .social-icons .youtube { */
    /* background: #ff0000; */
/* } */
/*  */

/* LOCATION PIN */

.location-icon {
    display: block;

    font-size: 35px;

    margin-top: 32px;

    text-decoration: none;
}


/* LOCATION HEADINGS */

.footer-location h3,
.footer-other h3 {
    color: var(--theme-gold) !important;
    font-size: 22px !important;
    font-weight: 400 !important;

    margin-bottom: 20px !important;
}


/* BOLD LABELS */

.main-footer b {
    font-style: italic;
    font-weight: 700;
}


/* PHONE / EMAIL */

.footer-location p,
.footer-other p {
    margin-bottom: 18px !important;
}


/* BHOPAL */

.footer-other .location-block:first-child {
    margin-bottom: 30px;
}


/* BENGALURU */

.footer-other .bengaluru {
    margin-top: 20px;
}


/* LINKS */

.main-footer a {
     color: var(--theme-gold) !important;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 960px) {

    .footer-wrap {
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
    }

}


@media (max-width: 600px) {

    .main-footer {
        padding: 40px 20px 30px !important;
    }

    .footer-wrap {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .main-footer h3 {
        font-size: 21px !important;
        margin-bottom: 20px !important;
    }

    .footer-about p {
        max-width: 100%;
    }

    .footer-visit {
        margin-top: 0;
    }

}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "DM Sans", sans-serif;
  color: #14283b;
  background: #faf9f6;
}


/* ================= HEADER ================= */

.header {
  height: 74px;
  background: rgba(255,255,255,0.96);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid #eee;
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  color: #14283b;
}

.logo span {
  font-family: "Playfair Display", serif;
  font-size: 25px;
  letter-spacing: 3px;
}

.logo small {
  font-size: 9px;
  letter-spacing: 3px;
  text-align: center;
  margin-top: 4px;
}


.nav {
  display: flex;
  align-items: center;
  gap: 27px;
}

.nav a {
  text-decoration: none;
  color: #24384a;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  padding: 28px 0;
}

.nav a:hover,
.nav a.active {
  color: #b47b25;
}

.nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 2px;
  background: #d6a23b;
}


.appointment-btn {
  text-decoration: none;
  color: white;
  background: linear-gradient(
    135deg,
    #f5a900,
    #d89a26
  );
  padding: 13px 24px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(218, 163, 53, 0.22);
}

.menu-btn {
  display: none;
  border: none;
  background: none;
  font-size: 27px;
  color: #14283b;
  cursor: pointer;
}


/* ================= HERO ================= */

.hero {
  min-height: 330px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 70px 20px 55px;
  background:
    radial-gradient(
      circle at 10% 50%,
      rgba(214,162,59,0.08),
      transparent 25%
    ),
    #faf9f6;
}

.hero-content {
  text-align: center;
  max-width: 800px;
  position: relative;
  z-index: 2;
}

.eyebrow {
  color: #b17c35;
  font-size: 12px;
  letter-spacing: 4px;
  font-weight: 600;
  margin-bottom: 17px;
}

.hero h1 {
  font-family: "Playfair Display", serif;
  font-size: clamp(42px, 5vw, 67px);
  line-height: 1.1;
  font-weight: 600;
  color: #14283b;
}

.hero h1 span {
  color: #b48a52;
}

.hero-text {
  margin: 20px auto 0;
  max-width: 590px;
  color: #536273;
  font-size: 16px;
  line-height: 1.7;
}

.gold-line {
  width: 45px;
  height: 2px;
  background: #d69e32;
  margin: 23px auto 0;
}

.quote-mark {
  position: absolute;
  left: 4%;
  top: 45px;
  font-family: Georgia, serif;
  font-size: 130px;
  color: rgba(195, 151, 80, 0.13);
}

.hero-note {
  position: absolute;
  right: 7%;
  bottom: 65px;
  transform: rotate(-8deg);
  display: flex;
  flex-direction: column;
  font-family: "Playfair Display", serif;
  font-size: 22px;
  color: #3e4e5d;
}


/* ================= SECTION ================= */

.testimonials-section {
  padding: 30px 6% 80px;
  max-width: 1250px;
  margin: auto;
}

.section-heading {
  text-align: center;
  margin-bottom: 40px;
}

.section-heading p {
  color: #b17c35;
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 10px;
}

.section-heading h2 {
  font-family: "Playfair Display", serif;
  font-size: 38px;
  color: #14283b;
}

.section-heading h2 span {
  color: #b48a52;
}


/* ================= VIDEO GRID ================= */

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 27px;
}

.video-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 7px 25px rgba(23, 40, 55, 0.08);
  border: 1px solid #eee;
  transition: 0.35s ease;
  cursor: pointer;
}

.video-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 15px 35px rgba(23, 40, 55, 0.14);
}


/* Thumbnail */

.video-thumbnail {
  height: 215px;
  position: relative;
  overflow: hidden;
  background: #dfe3e5;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.05);
}


/* Dark overlay */

.thumbnail-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.08);
  transition: 0.3s;
}

.video-card:hover .thumbnail-overlay {
  background: rgba(0,0,0,0.18);
}


/* Play button */

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #f32929;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.25);
  transition: 0.3s ease;
}

.play-button::after {
  content: "";
  margin-left: 4px;
  border-left: 19px solid white;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.video-card:hover .play-button {
  transform: translate(-50%, -50%) scale(1.1);
}


/* Duration */

.duration {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: rgba(0,0,0,0.78);
  color: white;
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 4px;
}


/* Card content */

.video-info {
  padding: 17px 18px 19px;
}

.video-info h3 {
  font-size: 16px;
  color: #14283b;
  margin-bottom: 7px;
  font-weight: 700;
}

.patient-name {
  font-size: 13px;
  color: #536273;
  margin-bottom: 5px;
}

.patient-label {
  font-size: 11px;
  color: #b1844a;
  letter-spacing: 0.5px;
}


/* ================= TRUST ================= */

.trust-section {
  max-width: 1050px;
  margin: 0 auto;
  padding: 50px 20px 70px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #e7e3dc;
  background: #F8F4EC;
}


.trust-item {
  text-align: center;
  padding: 10px 30px;
  border-right: 1px solid #dedbd4;
}

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

.trust-icon {
  font-size: 34px;
  color: #c08c3e;
  margin-bottom: 7px;
}

.trust-item h3 {
  font-family: "Playfair Display", serif;
  font-size: 31px;
  color: #14283b;
}

.trust-item p {
  color: #687582;
  font-size: 13px;
  margin-top: 5px;
}


/* ================= CTA ================= */

.cta {
  margin: 0 6% 50px;
  border-radius: 17px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background:
    radial-gradient(
      circle at 90% 20%,
      rgba(218,170,78,0.15),
      transparent 25%
    ),
    #14283b;

  color: white;
}

.cta h2 {
  font-family: "Playfair Display", serif;
  font-size: 30px;
  margin-bottom: 10px;
  color: #ffffff;
}

.cta p {
    color: #ffffff;
  font-size: 14px;
  margin-bottom: 23px;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #14283b;
  background: #f1b941;
  padding: 13px 25px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  transition: 0.3s;
}

.cta-btn:hover {
  transform: translateY(-2px);
  background: #ffc94f;
}


/* ================= MODAL ================= */

.video-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.video-modal.show {
  display: flex;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
}

.modal-content {
  position: relative;
  width: min(900px, 92%);
  z-index: 2;
}

.iframe-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: black;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0,0,0,0.4);
}

.iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.close-modal {
  position: absolute;
  right: -12px;
  top: -45px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: none;
  background: white;
  color: #14283b;
  font-size: 26px;
  line-height: 30px;
  cursor: pointer;
  z-index: 5;
}


/* ================= MOBILE ================= */

@media (max-width: 900px) {

  .nav {
    display: none;
    position: absolute;
    top: 74px;
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
    gap: 0;
    padding: 10px 25px 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  }

  .nav.show {
    display: flex;
  }

  .nav a {
    padding: 13px 0;
    width: 100%;
  }

  .nav a.active::after {
    display: none;
  }

  .appointment-btn {
    display: none;
  }

  .menu-btn {
    display: block;
  }

  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 600px) {

  .header {
    height: 68px;
    padding: 0 20px;
  }

  .logo span {
    font-size: 22px;
  }

  .hero {
    min-height: 310px;
    padding: 55px 20px 45px;
  }

  .hero h1 {
    font-size: 39px;
  }

  .hero-text {
    font-size: 14px;
  }

  .quote-mark,
  .hero-note {
    display: none;
  }

  .testimonials-section {
    padding: 20px 18px 60px;
  }

  .section-heading h2 {
    font-size: 31px;
  }

  .video-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .video-thumbnail {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .trust-section {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 40px 20px;
  }

  .trust-item {
    border-right: none;
    border-bottom: 1px solid #dedbd4;
    padding-bottom: 25px;
  }

  .trust-item:last-child {
    border-bottom: none;
  }

  .cta {
    margin: 0 15px 35px;
    padding: 40px 20px;
  }

  .cta h2 {
    font-size: 25px;
  }

  .close-modal {
    right: 0;
    top: -45px;
  }

}
.cta .cta-content h2 {
  color: #ffffff !important;
}

.cta .cta-content p {
  color: #ffffff !important;
}

/* =========================================================
   MARMM THE KLINIK
   SKIN TREATMENTS
   GOLD + NAVY BLUE + WHITE
========================================================= */

:root {

    --navy: #0b1f3a;
    --navy-dark: #07172c;

    --gold: #c9972b;
    --gold-light: #e1b64c;
    --gold-dark: #a87916;

    --white: #ffffff;
    --cream: #faf8f3;

    --text: #26344a;
    --muted: #687384;

    --border: #e8e0d0;

}


/* =========================================================
   RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family: "DM Sans", sans-serif;

    color: var(--text);

    background: #ffffff;

    line-height: 1.6;

}


body.modal-open {
    overflow: hidden;
}


img {
    display: block;
    max-width: 100%;
}


a {
    text-decoration: none;
    color: inherit;
}


button {
    font-family: inherit;
}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar {

    background: var(--navy);

    color: white;

    font-size: 12px;

}


.top-bar-inner {

    max-width: 1400px;

    margin: auto;

    padding: 9px 5%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.top-left {

    display: flex;

    gap: 25px;

}


.top-bar a {

    color: white;

}


.top-bar a:hover {

    color: var(--gold-light);

}


/* =========================================================
   HEADER
========================================================= */

.main-header {

    position: sticky;

    top: 0;

    z-index: 900;

    background: rgba(255,255,255,0.98);

    border-bottom: 1px solid #eeeeee;

}


.header-inner {

    max-width: 1400px;

    min-height: 82px;

    margin: auto;

    padding: 0 5%;

    display: flex;

    align-items: center;

    gap: 30px;

}


.brand-logo {

    width: 145px;

    flex-shrink: 0;

}


.brand-logo img {

    width: 100%;

}


/* =========================================================
   DESKTOP NAV
========================================================= */

.desktop-nav {

    flex: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 24px;

}


.desktop-nav > a,
.nav-dropdown > a {

    color: var(--navy);

    font-size: 13px;

    font-weight: 600;

    transition: 0.25s;

}


.desktop-nav > a:hover,
.nav-dropdown > a:hover {

    color: var(--gold-dark);

}


/* =========================================================
   DESKTOP DROPDOWN
========================================================= */

.nav-dropdown {

    position: relative;

}


.nav-dropdown > a {

    display: flex;

    align-items: center;

    gap: 5px;

}


.dropdown-menu {

    position: absolute;

    top: calc(100% + 20px);

    left: 50%;

    transform: translateX(-50%);

    width: 215px;

    padding: 10px;

    background: white;

    border: 1px solid var(--border);

    border-radius: 12px;

    box-shadow:
        0 20px 50px rgba(0,0,0,0.12);

    opacity: 0;

    visibility: hidden;

    transition: 0.25s;

}


.nav-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    top: calc(100% + 10px);

}


.dropdown-menu a {

    display: block;

    padding: 11px 13px;

    color: var(--navy);

    font-size: 13px;

    border-radius: 8px;

}


.dropdown-menu a:hover {

    background: var(--cream);

    color: var(--gold-dark);

}


/* =========================================================
   HEADER APPOINTMENT
========================================================= */

.header-appointment {

    padding: 13px 20px;

    border-radius: 50px;

    white-space: nowrap;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );

    color: white;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(201,151,43,0.25);

}


.header-appointment span {

    margin-right: 5px;

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-btn {

    display: none;

    width: 45px;

    height: 45px;

    margin-left: auto;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: transparent;

    cursor: pointer;

}


.mobile-menu-btn span {

    display: block;

    width: 21px;

    height: 2px;

    margin: 5px auto;

    background: var(--navy);

}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {

    display: none;

    background: white;

    border-top: 1px solid #eeeeee;

}


.mobile-menu-inner {

    padding: 12px 20px 25px;

}


.mobile-link {

    width: 100%;

    padding: 15px 4px;

    display: flex;

    align-items: center;

    gap: 13px;

    border: none;

    border-bottom: 1px solid #eeeeee;

    background: transparent;

    color: var(--navy);

    font-size: 14px;

    font-weight: 600;

    text-align: left;

}


.mobile-link b {

    margin-left: auto;

    font-size: 20px;

    font-weight: 400;

}


.mobile-services-btn {

    cursor: pointer;

}


.mobile-submenu {

    display: none;

    margin: 4px 0 8px;

    overflow: hidden;

    background: var(--cream);

    border-radius: 10px;

}


.mobile-submenu.open {

    display: block;

}


.mobile-submenu a {

    display: block;

    padding: 12px 20px;

    color: var(--navy);

    font-size: 13px;

    border-bottom: 1px solid #e8e1d4;

}


.mobile-book-btn {

    display: block;

    margin-top: 18px;

    padding: 14px;

    text-align: center;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );

    color: white;

    font-weight: 700;

}


/* =========================================================
   HERO
========================================================= */

.skin-hero {

    max-width: 1400px;

    min-height: 570px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    background: var(--cream);

}


.hero-content {

    padding: 80px 7%;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.section-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: var(--gold-dark);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

}


.section-label::before {

    content: "";

    width: 32px;

    height: 1px;

    background: var(--gold);

}


.hero-content h1 {

    margin-bottom: 24px;

    color: var(--navy);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(42px,5vw,72px);

    line-height: 1.05;

}


.hero-content h1 em {

    display: block;

    color: var(--gold-dark);

    font-style: normal;

}


.hero-content p {

    max-width: 570px;

    margin-bottom: 30px;

    color: var(--muted);

    font-size: 16px;

}


.hero-buttons {

    display: flex;

    gap: 13px;

    flex-wrap: wrap;

}


.gold-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 24px;

    border: none;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );

    color: white;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 10px 25px rgba(201,151,43,0.22);

    transition: 0.3s;

}


.gold-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(201,151,43,0.30);

}


.outline-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 13px 24px;

    border: 1px solid var(--navy);

    border-radius: 50px;

    color: var(--navy);

    font-size: 13px;

    font-weight: 700;

    transition: 0.3s;

}


.outline-btn:hover {

    background: var(--navy);

    color: white;

}


.hero-image {

    min-height: 570px;

    overflow: hidden;

}


.hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =========================================================
   TREATMENTS
========================================================= */

.treatments-section {

    max-width: 1450px;

    margin: auto;

    padding: 90px 5%;

}


.section-heading {

    max-width: 720px;

    margin: 0 auto 50px;

    text-align: center;

}


.section-heading .section-label {

    justify-content: center;

}


.section-heading h2 {

    margin-bottom: 13px;

    color: var(--navy);

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(34px,4vw,50px);

    line-height: 1.15;

}


.section-heading h2 em {

    color: var(--gold);

    font-style: normal;

}


.section-heading p {

    color: var(--muted);

    font-size: 15px;

}


/* =========================================================
   TREATMENT GRID
========================================================= */

.treatment-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 26px;

    align-items: stretch;

}


/* =========================================================
   IMPORTANT: VERTICAL TREATMENT CARD
========================================================= */

.treatment-card {

    width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: white;

    border: 1px solid var(--border);

    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(11,31,58,0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

}


.treatment-card:hover {

    transform: translateY(-7px);

    border-color: var(--gold);

    box-shadow:
        0 22px 50px rgba(11,31,58,0.14);

}


/* =========================================================
   CARD IMAGE - FULL WIDTH ABOVE CONTENT
========================================================= */

.treatment-card .card-image {

    width: 100%;

    height: 235px;

    flex-shrink: 0;

    overflow: hidden;

    background: #f5f3ee;

}


.treatment-card .card-image img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.5s ease;

}


.treatment-card:hover
.card-image img {

    transform: scale(1.05);

}


/* =========================================================
   CARD CONTENT - BELOW IMAGE
========================================================= */

.treatment-card .card-content {

    width: 100%;

    padding: 22px;

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    text-align: left;

}


.card-number {

    display: block;

    margin-bottom: 6px;

    color: var(--gold);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.card-content h3 {

    margin-bottom: 10px;

    color: var(--navy);

    font-family:
        "Playfair Display",
        serif;

    font-size: 22px;

    line-height: 1.2;

}


.card-content p {

    margin-bottom: 22px;

    flex-grow: 1;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.65;

}


/* =========================================================
   VIEW DETAILS BUTTON
========================================================= */

.view-details-btn {

    width: 100%;

    min-height: 46px;

    margin-top: auto;

    padding: 12px 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border: none;

    border-radius: 30px;

    background: var(--navy);

    color: white;

    font-size: 12px;

    font-weight: 700;

    cursor: pointer;

    transition: 0.3s;

}


.view-details-btn b {

    color: var(--gold-light);

    font-size: 17px;

    font-weight: 500;

    transition: 0.3s;

}


.view-details-btn:hover {

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(201,151,43,0.25);

}


.view-details-btn:hover b {

    color: white;

    transform: translateX(4px);

}


/* =========================================================
   SPECIAL OFFERS
========================================================= */

.offers-section {

    max-width: 1450px;

    margin: auto;

    padding: 20px 5% 90px;

}


.offers-inner {

    min-height: 310px;

    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    overflow: hidden;

    border-radius: 25px;

    background: var(--navy);

}


.offers-content {

    position: relative;

    z-index: 2;

    padding: 55px 7%;

}


.offers-label {

    color: var(--gold-light);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.offers-content h2 {

    margin: 10px 0 14px;

    color: white;

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(35px,4vw,52px);

    line-height: 1.1;

}


.offers-content h2 em {

    color: var(--gold-light);

    font-style: normal;

}


.offers-content p {

    max-width: 520px;

    margin-bottom: 22px;

    color: rgba(255,255,255,0.72);

    font-size: 14px;

}


.offers-image {

    position: relative;

    overflow: hidden;

}


.offers-image::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            var(--navy) 0%,
            rgba(11,31,58,0.15) 55%,
            transparent 100%
        );

}


.offers-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* =========================================================
   POPUP
========================================================= */

.treatment-modal {

    position: fixed;

    inset: 0;

    z-index: 2000;

    padding: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    visibility: hidden;

    transition: 0.3s;

}


.treatment-modal.active {

    opacity: 1;

    visibility: visible;

}


.modal-overlay {

    position: absolute;

    inset: 0;

    background:
        rgba(4,14,28,0.82);

    backdrop-filter:
        blur(5px);

}


.modal-box {

    position: relative;

    z-index: 2;

    width:
        min(950px,100%);

    max-height: 90vh;

    overflow-y: auto;

    border-radius: 22px;

    background: white;

    box-shadow:
        0 30px 90px rgba(0,0,0,0.35);

    transform:
        translateY(25px)
        scale(0.97);

    transition: 0.3s;

}


.treatment-modal.active
.modal-box {

    transform:
        translateY(0)
        scale(1);

}


/* CLOSE */

.modal-close {

    position: absolute;

    top: 15px;

    right: 15px;

    z-index: 5;

    width: 42px;

    height: 42px;

    border: 1px solid #dddddd;

    border-radius: 50%;

    background: white;

    color: var(--navy);

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 6px 20px rgba(0,0,0,0.12);

    transition: 0.25s;

}


.modal-close:hover {

    background: var(--gold);

    border-color: var(--gold);

    color: white;

    transform: rotate(90deg);

}


/* POPUP GRID */

.modal-grid {

    display: grid;

    grid-template-columns:
        45% 55%;

}


.modal-image {

    min-height: 560px;

}


.modal-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.modal-content {

    padding:
        55px 45px 40px;

}


.modal-label {

    color: var(--gold-dark);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.modal-content h2 {

    margin: 7px 0 15px;

    color: var(--navy);

    font-family:
        "Playfair Display",
        serif;

    font-size: 38px;

}


.modal-description {

    margin-bottom: 25px;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.75;

}


.benefits-heading {

    margin-bottom: 12px;

    padding-bottom: 9px;

    border-bottom:
        1px solid var(--border);

    color: var(--navy);

    font-size: 15px;

    font-weight: 800;

}


.benefits-list {

    margin-bottom: 24px;

    list-style: none;

}


.benefits-list li {

    margin-bottom: 9px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: var(--text);

    font-size: 13px;

}


.benefits-list li::before {

    content: "✓";

    width: 20px;

    height: 20px;

    min-width: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #f4e7c4;

    color: var(--gold-dark);

    font-size: 11px;

    font-weight: 800;

}


.modal-note {

    margin-bottom: 20px;

    padding: 14px 16px;

    border-radius: 10px;

    background: var(--cream);

}


.modal-note strong {

    color: var(--navy);

    font-size: 12px;

}


.modal-note p {

    margin-top: 2px;

    color: var(--muted);

    font-size: 11px;

}


.modal-book-btn {

    width: 100%;

    padding: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            var(--gold),
            var(--gold-light)
        );

    color: white;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 10px 25px rgba(201,151,43,0.25);

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    background: var(--navy);

    color: white;

}


.footer-container {

    max-width: 1400px;

    margin: auto;

    padding:
        70px 5%
        50px;

    display: grid;

    grid-template-columns:
        1.4fr
        0.8fr
        1fr
        1fr;

    gap: 50px;

}


.footer-logo {

    display: block;

    width: 150px;

    margin-bottom: 18px;

}


.footer-logo img {

    width: 100%;

    filter:
        brightness(0)
        invert(1);

}


.footer-brand p {

    max-width: 300px;

    color:
        rgba(255,255,255,0.65);

    font-size: 13px;

    line-height: 1.8;

}


.social-links {

    margin-top: 20px;

    display: flex;

    gap: 9px;

}


.social-links a {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(255,255,255,0.25);

    border-radius: 50%;

}


.social-links a:hover {

    background: var(--gold);

    border-color: var(--gold);

}


.footer-column {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


.footer-column h3 {

    margin-bottom: 18px;

    color: var(--gold-light);

    font-family:
        "Playfair Display",
        serif;

    font-size: 18px;

}


.footer-column a,
.footer-column p {

    margin-bottom: 10px;

    color:
        rgba(255,255,255,0.68);

    font-size: 12px;

}


.footer-column a:hover {

    color: var(--gold-light);

}


.footer-book-btn {

    margin-top: 10px;

    padding: 11px 17px;

    border-radius: 25px;

    background:
        var(--gold) !important;

    color:
        white !important;

    font-weight: 700;

}


.footer-bottom {

    max-width: 1400px;

    margin: auto;

    padding: 18px 5%;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid rgba(255,255,255,0.12);

    color:
        rgba(255,255,255,0.5);

    font-size: 11px;

}


.footer-bottom div {

    display: flex;

    gap: 20px;

}


/* =========================================================
   MOBILE BOTTOM BAR
========================================================= */

.mobile-bottom-bar {

    display: none;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1150px) {

    .desktop-nav {

        gap: 13px;

    }


    .desktop-nav > a,
    .nav-dropdown > a {

        font-size: 11px;

    }


    .header-appointment {

        padding: 11px 15px;

        font-size: 10px;

    }


    .treatment-grid {

        grid-template-columns:
            repeat(3, minmax(0,1fr));

    }


    .footer-container {

        grid-template-columns:
            repeat(2,1fr);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {


    body {

        padding-bottom: 62px;

    }


    .top-bar {

        display: none;

    }


    .header-inner {

        min-height: 72px;

        padding:
            0 18px;

    }


    .brand-logo {

        width: 125px;

    }


    .desktop-nav,
    .header-appointment {

        display: none;

    }


    .mobile-menu-btn {

        display: block;

    }


    .mobile-menu.active {

        display: block;

    }


    /* HERO */

    .skin-hero {

        min-height: auto;

        grid-template-columns: 1fr;

    }


    .hero-content {

        padding:
            50px 22px 40px;

        order: 1;

    }


    .hero-image {

        min-height: 330px;

        height: 330px;

        order: 2;

    }


    .hero-content h1 {

        font-size: 42px;

    }


    .hero-content p {

        font-size: 14px;

    }


    .hero-buttons {

        flex-direction: column;

    }


    .gold-btn,
    .outline-btn {

        width: 100%;

    }


    /* TREATMENTS */

    .treatments-section {

        padding:
            65px 18px;

    }


    .section-heading {

        margin-bottom: 35px;

    }


    .section-heading h2 {

        font-size: 34px;

    }


    .treatment-grid {

        grid-template-columns: 1fr;

        gap: 22px;

    }


    .treatment-card {

        width: 100%;

        display: flex;

        flex-direction: column;

    }


    .treatment-card
    .card-image {

        width: 100%;

        height: 250px;

    }


    .treatment-card
    .card-content {

        width: 100%;

        padding: 21px;

    }


    .card-content h3 {

        font-size: 23px;

    }


    /* OFFERS */

    .offers-section {

        padding:
            0 18px 65px;

    }


    .offers-inner {

        grid-template-columns: 1fr;

    }


    .offers-content {

        padding:
            40px 25px;

        order: 1;

    }


    .offers-image {

        min-height: 220px;

        height: 220px;

        order: 2;

    }


    /* POPUP */

    .treatment-modal {

        padding: 12px;

    }


    .modal-box {

        max-height: 94vh;

        border-radius: 17px;

    }


    .modal-grid {

        grid-template-columns: 1fr;

    }


    .modal-image {

        min-height: 250px;

        height: 250px;

    }


    .modal-content {

        padding:
            25px 22px;

    }


    .modal-content h2 {

        font-size: 30px;

    }


    .modal-description {

        font-size: 13px;

    }


    .modal-close {

        top: 10px;

        right: 10px;

        width: 38px;

        height: 38px;

    }


    /* FOOTER */

    .footer-container {

        padding:
            50px 22px 35px;

        grid-template-columns: 1fr;

        gap: 35px;

    }


    .footer-brand p {

        max-width: 100%;

    }


    .footer-column {

        padding-top: 25px;

        border-top:
            1px solid rgba(255,255,255,0.1);

    }


    .footer-bottom {

        padding:
            18px 22px 85px;

        flex-direction: column;

    }


    .footer-bottom div {

        flex-wrap: wrap;

    }


    /* FIXED MOBILE CTA */

    .mobile-bottom-bar {

        position: fixed;

        left: 0;

        right: 0;

        bottom: 0;

        z-index: 1500;

        height: 62px;

        display: grid;

        grid-template-columns:
            1fr 1fr 1.25fr;

        background: white;

        box-shadow:
            0 -5px 25px rgba(0,0,0,0.13);

    }


    .mobile-bottom-bar a {

        display: flex;

        align-items: center;

        justify-content: center;

        border-right:
            1px solid #eeeeee;

        font-size: 11px;

        font-weight: 800;

    }


    .mobile-call {

        color: var(--navy);

    }


    .mobile-whatsapp {

        color: #218c50;

    }


    .mobile-appointment {

        background: var(--gold);

        color: white;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {


    .hero-content h1 {

        font-size: 36px;

    }


    .section-heading h2 {

        font-size: 30px;

    }


    .treatment-card
    .card-image {

        height: 220px;

    }


    .card-content {

        padding: 19px;

    }

}

/* =========================================================
   FINAL FOOTER + CTA ALIGNMENT OVERRIDE
========================================================= */


/* =========================================================
   CTA BUTTONS - DESKTOP + MOBILE
   ========================================================= */

.floating-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


/* Every CTA circle */

.floating-actions a,
.floating-actions button {

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    min-width: 48px;
    min-height: 48px;

    padding: 0;
    margin: 0;

    border-radius: 50%;

    box-sizing: border-box;

    line-height: 1;

    text-align: center;

}


/* CTA icons */

.floating-actions a i,
.floating-actions button i,
.floating-actions a svg,
.floating-actions button svg {

    display: block;

    width: 20px;
    height: 20px;

    margin: 0;
    padding: 0;

    position: static;

    transform: none;

    line-height: 1;

}


/* Back to top */

.floating-actions .back-to-top {

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    line-height: 1;

}

/* =========================================================
   MOBILE ONLY
   FOOTER SOCIAL ICONS - FORCE CENTER
========================================================= */

@media (max-width: 800px) {

    /* Footer brand area */
    .site-footer .footer-brand {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: flex-start !important;

        text-align: center !important;
    }


    /* Footer description */
    .site-footer .footer-brand p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto !important;

        text-align: center !important;
    }


    /* =========================================
       SOCIAL ICONS CONTAINER
    ========================================= */

    .site-footer .footer-brand .social-links {

        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 14px !important;

        margin: 20px 0 0 0 !important;

        padding: 0 !important;

        /* Important */
        align-self: center !important;

        float: none !important;

        position: static !important;

        left: auto !important;
        right: auto !important;
    }


    /* =========================================
       INDIVIDUAL SOCIAL ICON
    ========================================= */

    .site-footer .footer-brand .social-links a {

        width: 36px !important;
        height: 36px !important;

        min-width: 36px !important;
        max-width: 36px !important;

        min-height: 36px !important;
        max-height: 36px !important;

        flex: 0 0 36px !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        margin: 0 !important;

        padding: 0 !important;

        position: static !important;

        transform: none !important;

        text-align: center !important;

        line-height: 1 !important;
    }


    /* =========================================
       ICON ITSELF
    ========================================= */

    .site-footer .footer-brand .social-links a i,
    .site-footer .footer-brand .social-links a svg,
    .site-footer .footer-brand .social-links a img {

        display: block !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        position: static !important;

        transform: none !important;

        line-height: 1 !important;
    }

}


    /* =====================================================
       MOBILE FLOATING CTA
       RIGHT SIDE ONLY
    ===================================================== */

    .floating-actions {

        position: fixed !important;

        right: 14px !important;

        bottom: 95px !important;

        display: flex !important;

        flex-direction: column !important;

        align-items: center !important;

        justify-content: center !important;

        gap: 10px !important;

        z-index: 1500 !important;

    }


    .floating-actions a,
    .floating-actions button {

        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;
        min-height: 48px !important;

        padding: 0 !important;
        margin: 0 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;

        line-height: 1 !important;

    }


    .floating-actions a i,
    .floating-actions button i,
    .floating-actions a svg,
    .floating-actions button svg {

        width: 20px !important;
        height: 20px !important;

        margin: 0 !important;
        padding: 0 !important;

        position: static !important;

        transform: none !important;

        display: block !important;

        line-height: 1 !important;

    }


/* =========================================================
   MARMM THE KLINIK
   DOCTOR TEAM PAGE
========================================================= */

:root {
    --navy: #0b1f3a;
    --navy-dark: #07182d;
    --gold: #f5a900;
    --gold-dark: #c98a00;
    --cream: #fbf8f1;
    --white: #ffffff;
    --text: #17263b;
    --muted: #667085;
    --border: #e9e4d9;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background: var(--white);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}


/* =========================================================
   HEADER
========================================================= */

.main-header {
    background: rgba(255,255,255,0.98);
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-container {
    max-width: 1280px;
    min-height: 78px;
    margin: auto;
    padding: 0 35px;

    display: flex;
    align-items: center;
    gap: 28px;
}

.logo {
    width: 155px;
    color: var(--navy);
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo span {
    font-family: Georgia, serif;
    font-size: 27px;
    letter-spacing: 7px;
}

.logo small {
    font-size: 8px;
    letter-spacing: 4px;
    margin-top: 5px;
    text-align: center;
}

.desktop-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

.desktop-nav > a,
.nav-dropdown > a {
    font-size: 13px;
    color: var(--navy);
    transition: 0.3s;
}

.desktop-nav a:hover,
.desktop-nav .active {
    color: var(--gold-dark);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown i {
    font-size: 9px;
}

.dropdown-menu {
    position: absolute;
    top: 25px;
    left: -15px;
    width: 190px;
    background: white;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    border-top: 2px solid var(--gold);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: 0.25s;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 10px;
    font-size: 13px;
}

.header-btn {
    background: var(--gold);
    color: var(--navy);
    padding: 13px 23px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.menu-toggle {
    display: none;
    border: none;
    background: none;
    font-size: 23px;
    color: var(--navy);
}

.mobile-menu {
    display: none;
}


/* =========================================================
   HERO
========================================================= */

.doctors-hero {
    position: relative;
    background:
        radial-gradient(circle at 90% 20%, rgba(245,169,0,0.10), transparent 25%),
        linear-gradient(135deg, #ffffff 0%, #faf7ef 100%);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.hero-container {
    max-width: 1180px;
    margin: auto;
    padding: 75px 35px 60px;
}

.hero-content {
    max-width: 850px;
}

.small-heading {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 5px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 12px;
}

.hero-content h1 {
    font-family: Georgia, serif;
    font-size: clamp(48px, 6vw, 76px);
    line-height: 1;
    color: var(--navy);
    margin-bottom: 18px;
}

.hero-content h1 span {
    color: var(--gold-dark);
}

.hero-subtitle {
    font-size: 20px;
    line-height: 1.5;
    max-width: 650px;
    color: var(--navy);
    margin-bottom: 14px;
}

.hero-description {
    color: var(--muted);
    line-height: 1.8;
    max-width: 700px;
}

.hero-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 850px;
    margin-top: 45px;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-right: 25px;
    border-right: 1px solid #dfd7c6;
}

.hero-feature:not(:first-child) {
    padding-left: 25px;
}

.hero-feature:last-child {
    border-right: none;
}

.feature-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 1px solid var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-dark);
}

.hero-feature span {
    font-size: 12px;
    line-height: 1.45;
}


/* =========================================================
   DOCTORS SECTION
========================================================= */

.doctors-section {
    background: var(--white);
    padding: 45px 0;
}

.doctor-row {
    max-width: 1180px;
    margin: 0 auto 75px;
    padding: 0 35px;

    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 60px;
    align-items: center;

    position: relative;
}

.doctor-row:last-child {
    margin-bottom: 25px;
}

/* alternate */

.doctor-row.reverse {
    grid-template-columns: 1fr 320px;
}

.doctor-row.reverse .doctor-image {
    order: 2;
}

.doctor-row.reverse .doctor-info {
    order: 1;
}


/* image */

.doctor-image {
    position: relative;
}

.doctor-image::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--gold);
    border-radius: 24px;
    top: 12px;
    left: 12px;
    z-index: 0;
}

.doctor-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    aspect-ratio: 0.95;
    object-fit: cover;

    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(11,31,58,0.10);
}


/* information */

.doctor-info h2 {
    font-family: Georgia, serif;
    font-size: 34px;
    color: var(--navy);
    margin-bottom: 7px;
}

.qualification {
    color: #5d6878;
    font-size: 14px;
}

.gold-line {
    width: 60px;
    height: 3px;
    background: var(--gold);
    margin: 20px 0;
}

.doctor-description {
    max-width: 690px;
    color: #596579;
    line-height: 1.75;
    font-size: 14px;
}

.doctor-details {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 25px;
}

.specialization h4 {
    color: var(--gold-dark);
    font-size: 14px;
    margin-bottom: 12px;
}

.specialization span {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: #39465a;
}

.specialization i {
    color: var(--gold);
    margin-right: 8px;
}

.experience {
    border-left: 1px solid #ddd2bd;
    padding-left: 30px;
    min-width: 115px;
}

.experience strong {
    display: block;
    font-family: Georgia, serif;
    font-size: 38px;
    color: var(--gold-dark);
}

.experience span {
    font-size: 12px;
    color: #667085;
    line-height: 1.4;
}


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

.doctor-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    margin-top: 25px;
}

.doctor-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.doctor-contact > a > i {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy);

    display: flex;
    align-items: center;
    justify-content: center;
}

.doctor-contact span {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.doctor-contact strong {
    font-size: 13px;
    color: var(--navy);
}

.doctor-contact small {
    font-size: 10px;
    color: #7b8492;
}


/* =========================================================
   STAFF SECTION
========================================================= */

.staff-section {
    background: var(--cream);
    border-top: 1px solid #eee6d7;
    border-bottom: 1px solid #eee6d7;
    padding: 85px 0;
}

.staff-container {
    max-width: 1180px;
    margin: auto;
    padding: 0 35px;

    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 70px;
    align-items: center;
}

.staff-content h2 {
    font-family: Georgia, serif;
    font-size: 48px;
    color: var(--navy);
    line-height: 1.1;
    margin-bottom: 22px;
}

.staff-content h2 span {
    color: var(--gold-dark);
}

.staff-content > p {
    color: #626d7c;
    line-height: 1.8;
    font-size: 15px;
    max-width: 480px;
}

.staff-points {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.staff-points div {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--navy);
}

.staff-points i {
    width: 35px;
    height: 35px;
    border: 1px solid var(--gold);
    color: var(--gold-dark);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.staff-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(11,31,58,0.12);
}


/* =========================================================
   FINAL CTA
========================================================= */
/* =========================================================
   FINAL CTA - PREMIUM MARMM STYLE
========================================================= */

.final-cta {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(245, 169, 0, 0.08),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #07182d 0%,
            #0b1f3a 50%,
            #081a31 100%
        );

    padding: 85px 25px;
    text-align: center;
    color: #ffffff;
}


/* subtle gold glow */

.final-cta::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(245, 169, 0, 0.16);
    border-radius: 50%;

    left: -250px;
    bottom: -300px;
}

.final-cta::after {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(245, 169, 0, 0.16);
    border-radius: 50%;

    right: -250px;
    top: -300px;
}


/* content */

.cta-content {
    position: relative;
    z-index: 2;

    max-width: 850px;
    margin: auto;
}


/* small heading */

.cta-content span {
    display: inline-block;

    color: #f5c451;

    letter-spacing: 5px;
    font-size: 11px;
    font-weight: 600;

    margin-bottom: 12px;
}


/* main heading */

.cta-content h2 {
    font-family: Georgia, "Times New Roman", serif;

    color: #fffaf0;

    font-size: clamp(34px, 4vw, 48px);

    line-height: 1.2;

    margin: 12px 0 20px;

    font-weight: 500;
}


/* gold word effect */

.cta-content h2::after {
    content: "";
color: #fffaf0;
    display: block;

    width: 65px;
    height: 3px;

    margin: 22px auto 0;

    background: linear-gradient(
        90deg,
        #d99a18,
        #ffd76a,
        #d99a18
    );

    border-radius: 10px;
}


/* paragraph */

.cta-content p {
    max-width: 620px;

    margin: 25px auto 0;

    color: #e8edf4;

    line-height: 1.8;

    font-size: 14px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    .final-cta {
        padding: 65px 22px;
    }

    .cta-content span {
        font-size: 9px;
        letter-spacing: 3px;
    }

    .cta-content h2 {
        font-size: 31px;
        line-height: 1.25;
    }

    .cta-content p {
        font-size: 13px;
        line-height: 1.7;
        margin-top: 22px;
    }

    .cta-content h2::after {
        margin-top: 18px;
        width: 50px;
    }

}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    background: #07182d;
    color: white;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
    padding: 65px 35px 45px;

    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 50px;
}

.footer-logo {
    font-family: Georgia, serif;
    font-size: 25px;
    letter-spacing: 6px;
}

.footer-logo small {
    display: block;
    font-family: Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 4px;
    margin-top: 5px;
}

.footer-brand p {
    margin-top: 18px;
    color: #bfc8d5;
    line-height: 1.7;
    max-width: 300px;
    font-size: 13px;
}

.social-links {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 35px;
    height: 35px;

    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 13px;
    transition: 0.3s;
}

.social-links a:hover {
    background: var(--gold);
    color: var(--navy);
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-column h4 {
    color: var(--gold);
    margin-bottom: 8px;
    font-size: 15px;
}

.footer-column a,
.footer-column p {
    color: #c2cad5;
    font-size: 12px;
}

.footer-column a:hover {
    color: var(--gold);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 35px;

    display: flex;
    justify-content: space-between;

    color: #8e99a8;
    font-size: 11px;
}


/* =========================================================
   MOBILE BOTTOM BAR
========================================================= */

.mobile-bottom-bar {
    display: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 800px) {

    /* header */

    .header-container {
        min-height: 65px;
        padding: 0 18px;
        justify-content: space-between;
    }

    .logo {
        width: auto;
    }

    .logo span {
        font-size: 23px;
    }

    .desktop-nav,
    .header-btn {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .mobile-menu {
        position: absolute;
        left: 0;
        right: 0;
        top: 65px;

        background: white;
        border-top: 1px solid #eee;
        box-shadow: 0 15px 30px rgba(0,0,0,0.10);

        display: none;
        flex-direction: column;

        padding: 10px 20px;
    }

    .mobile-menu.show {
        display: flex;
    }

    .mobile-menu a {
        padding: 13px 5px;
        border-bottom: 1px solid #eee;
        color: var(--navy);
        font-size: 14px;
    }


    /* hero */

    .hero-container {
        padding: 48px 22px 42px;
    }

    .hero-content h1 {
        font-size: 47px;
    }

    .hero-subtitle {
        font-size: 17px;
    }

    .hero-description {
        font-size: 13px;
        line-height: 1.7;
    }

    .hero-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 35px;
    }

    .hero-feature {
        border-right: none;
        padding: 0 !important;
    }

    .feature-icon {
        width: 38px;
        height: 38px;
    }


    /* doctors */

    .doctors-section {
        padding: 30px 0;
    }

    .doctor-row,
    .doctor-row.reverse {
        display: flex;
        flex-direction: column;

        gap: 30px;

        margin: 0 auto 55px;
        padding: 0 22px;
    }

    .doctor-row.reverse .doctor-image,
    .doctor-row.reverse .doctor-info {
        order: initial;
    }

    .doctor-image {
        width: 88%;
        align-self: center;
    }

    .doctor-image img {
        aspect-ratio: 1 / 1;
    }

    .doctor-info h2 {
        font-size: 29px;
    }

    .qualification {
        font-size: 12px;
        line-height: 1.5;
    }

    .doctor-description {
        font-size: 13px;
    }

    .doctor-details {
        gap: 20px;
        align-items: flex-start;
    }

    .specialization {
        flex: 1;
    }

    .experience {
        padding-left: 20px;
    }

    .experience strong {
        font-size: 32px;
    }

    .doctor-contact {
        flex-direction: column;
        gap: 13px;
    }


    /* staff */

    .staff-section {
        padding: 60px 0;
    }

    .staff-container {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 0 22px;
    }

    .staff-content h2 {
        font-size: 38px;
    }

    .staff-content > p {
        font-size: 13px;
    }

    .staff-points {
        grid-template-columns: 1fr;
    }

    .staff-image img {
        height: 280px;
    }


    /* CTA */

    .final-cta {
        padding: 55px 22px;
    }

    .cta-content h2 {
        font-size: 31px;
    }

    .cta-content p {
        font-size: 13px;
    }


    /* footer */

    .footer-container {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 50px 22px 35px;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-brand p {
        margin-left: auto;
        margin-right: auto;
    }

    .social-links {
        justify-content: center;
    }

    .footer-column {
        padding-top: 25px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .footer-bottom {
        padding: 18px 22px 85px;
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }


    /* mobile bottom */

    .mobile-bottom-bar {
        position: fixed;
        display: grid;
        grid-template-columns: repeat(3, 1fr);

        bottom: 0;
        left: 0;
        right: 0;

        height: 65px;

        background: white;
        border-top: 1px solid #ddd;

        z-index: 2000;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.08);
    }

    .mobile-bottom-bar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;

        color: var(--navy);
        font-size: 10px;
    }

    .mobile-bottom-bar i {
        font-size: 18px;
        color: var(--gold-dark);
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

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

    .hero-features {
        gap: 16px;
    }

    .hero-feature span {
        font-size: 10px;
    }

    .doctor-image {
        width: 92%;
    }

    .doctor-info h2 {
        font-size: 26px;
    }

    .doctor-details {
        flex-direction: column;
    }

    .experience {
        border-left: none;
        border-top: 1px solid #ddd2bd;
        padding: 15px 0 0;
        width: 100%;
    }

    .staff-content h2 {
        font-size: 34px;
    }

}
/* QUICK FIX - POPUP IMAGE */

.treatment-modal .modal-image {
    overflow: hidden;
}

.treatment-modal .modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* =========================================================
   SPECIALIZED HAIR TRANSPLANT
   BEARD + EYEBROW
========================================================= */

.specialized-transplant-section {
    background: #ffffff;
    padding: 90px 0;
}


/* SECTION TITLE */

.specialized-transplant-section .section-title {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 55px;
}

.specialized-transplant-section .section-title span {
    display: inline-block;
    color: #f5a900;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.specialized-transplant-section .section-title h2 {
    color: #0b2345;
    font-size: 42px;
    line-height: 1.2;
    margin: 0 0 15px;
}

.specialized-transplant-section .section-title p {
    color: #666;
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}


/* GRID */

.specialized-transplant-grid {
    width: min(1200px, 92%);
    margin: auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 30px;
}


/* CARD */

.specialized-transplant-card {
    background: #ffffff;

    border: 1px solid #e8e8e8;
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 10px 35px rgba(11, 35, 69, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.specialized-transplant-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(11, 35, 69, 0.13);
}


/* IMAGE */

.specialized-card-image {
    height: 300px;

    position: relative;
    overflow: hidden;

    background: #eef2f6;
}

.specialized-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* NUMBER */

.specialized-badge {
    position: absolute;

    top: 18px;
    left: 18px;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: #f5a900;
    color: #0b2345;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    font-weight: 800;
}


/* CONTENT */

.specialized-card-content {
    padding: 32px;
}


/* LABEL */

.specialized-label {
    display: inline-block;

    color: #f5a900;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 8px;
}


/* TITLE */

.specialized-card-content h3 {
    color: #0b2345;

    font-size: 30px;

    margin: 0 0 10px;
}


/* SUBTITLE */

.specialized-subtitle {
    color: #555;

    font-size: 15px;
    font-weight: 600;

    margin: 0 0 15px;
}


/* DESCRIPTION */

.specialized-intro {
    color: #666;

    font-size: 14px;

    line-height: 1.75;

    margin-bottom: 25px;
}


/* SUB HEADINGS */

.specialized-card-content h4 {
    color: #0b2345;

    font-size: 17px;

    margin: 28px 0 13px;

    padding-left: 12px;

    border-left: 3px solid #f5a900;
}


/* BENEFIT LIST */

.specialized-list {
    list-style: none;

    padding: 0;
    margin: 0;
}

.specialized-list li {
    position: relative;

    color: #555;

    font-size: 14px;

    line-height: 1.6;

    padding: 7px 0 7px 25px;
}

.specialized-list li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 7px;

    color: #f5a900;

    font-weight: 800;
}


/* AREAS */

.specialized-area-list {
    display: grid;

    gap: 10px;
}

.specialized-area-item {
    background: #f8f9fb;

    border-radius: 10px;

    padding: 13px 15px;

    border-left: 2px solid #f5a900;
}

.specialized-area-item strong {
    display: block;

    color: #0b2345;

    font-size: 14px;

    margin-bottom: 4px;
}

.specialized-area-item span {
    display: block;

    color: #666;

    font-size: 13px;

    line-height: 1.55;
}


/* QUICK FACTS */

.specialized-facts {
    border: 1px solid #e6e6e6;

    border-radius: 10px;

    overflow: hidden;
}

.fact-row {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;

    padding: 11px 14px;

    border-bottom: 1px solid #eeeeee;
}

.fact-row:last-child {
    border-bottom: none;
}

.fact-row span {
    color: #666;

    font-size: 13px;
}

.fact-row strong {
    color: #0b2345;

    font-size: 13px;

    text-align: right;
}


/* BUTTON */

.specialized-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 28px;

    padding: 13px 22px;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #f5a900,
            #ffbd24
        );

    color: #0b2345;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    transition: all 0.3s ease;
}

.specialized-btn span {
    font-size: 18px;

    transition: transform 0.3s ease;
}

.specialized-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(245, 169, 0, 0.25);
}

.specialized-btn:hover span {
    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .specialized-transplant-grid {
        grid-template-columns: 1fr;

        max-width: 700px;
    }

    .specialized-transplant-section .section-title h2 {
        font-size: 36px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .specialized-transplant-section {
        padding: 60px 0;
    }

    .specialized-transplant-section .section-title {
        width: 90%;

        margin-bottom: 35px;
    }

    .specialized-transplant-section .section-title h2 {
        font-size: 30px;
    }

    .specialized-transplant-section .section-title p {
        font-size: 14px;
    }

    .specialized-transplant-grid {
        width: 92%;

        gap: 22px;
    }

    .specialized-card-image {
        height: 230px;
    }

    .specialized-card-content {
        padding: 23px 20px;
    }

    .specialized-card-content h3 {
        font-size: 25px;
    }

    .specialized-intro {
        font-size: 13.5px;
    }

    .specialized-card-content h4 {
        font-size: 16px;

        margin-top: 23px;
    }

    .fact-row {
        align-items: flex-start;

        padding: 10px 12px;
    }

    .fact-row span,
    .fact-row strong {
        font-size: 12px;
    }

    .specialized-btn {
        width: 100%;
    }

}
/* =========================================================
   MARMM THE KLINIK
   BEFORE & AFTER GALLERY
========================================================= */


/* =========================================================
   GLOBAL
========================================================= */

.gallery-header,
.gallery-header *,
.before-after-gallery,
.before-after-gallery *,
.gallery-bottom-section,
.gallery-bottom-section *,
.gallery-footer,
.gallery-footer * {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Manrope", sans-serif;
    background: #ffffff;
    color: #0b2345;
}


/* =========================================================
   HEADER
========================================================= */

.gallery-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    position: relative;
    z-index: 1000;
}

.gallery-header-inner {
    width: min(1250px, 92%);
    min-height: 82px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


/* Logo */

.gallery-logo {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.gallery-logo span {
    color: #0b2345;
    font-family: "Fraunces", serif;
    font-size: 27px;
    font-weight: 700;
    letter-spacing: 1px;
}

.gallery-logo small {
    color: #f5a900;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-top: 6px;
}


/* Navigation */

.gallery-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.gallery-nav a {
    color: #26364c;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: 0.3s ease;
}

.gallery-nav a:hover,
.gallery-nav a.active {
    color: #f5a900;
}

.gallery-nav .nav-appointment {
    background: linear-gradient(
        135deg,
        #f5a900,
        #ffbd24
    );

    color: #0b2345;

    padding: 12px 18px;

    border-radius: 6px;

    font-weight: 800;
}

.gallery-nav .nav-appointment:hover {
    color: #0b2345;
    transform: translateY(-2px);
}


/* Mobile button */

.gallery-menu-btn {
    display: none;

    width: 42px;
    height: 42px;

    border: none;
    background: transparent;

    cursor: pointer;

    padding: 8px;
}

.gallery-menu-btn span {
    display: block;

    width: 25px;
    height: 2px;

    background: #0b2345;

    margin: 5px auto;

    transition: 0.3s ease;
}


/* Mobile Menu */

.gallery-mobile-menu {
    display: none;

    position: absolute;

    top: 82px;
    left: 0;

    width: 100%;

    background: #ffffff;

    border-top: 1px solid #eeeeee;

    box-shadow: 0 15px 30px rgba(0,0,0,0.08);

    padding: 15px 25px 25px;
}

.gallery-mobile-menu.active {
    display: flex;
    flex-direction: column;
}

.gallery-mobile-menu a {
    color: #0b2345;
    text-decoration: none;

    padding: 14px 0;

    border-bottom: 1px solid #eeeeee;

    font-size: 14px;
    font-weight: 700;
}

.gallery-mobile-menu a:last-child {
    color: #f5a900;
}


/* =========================================================
   HERO
========================================================= */

.gallery-hero {
    position: relative;

    min-height: 360px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            rgba(255,255,255,0.88),
            rgba(255,255,255,0.94)
        ),
        url("../assets/videos/images/gallery/gallery-bg.jpg")
        center / cover no-repeat;
}

.gallery-hero-content {
    width: min(850px, 90%);
}

.gallery-eyebrow {
    display: inline-block;

    color: #f5a900;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 14px;
}

.gallery-hero h1 {
    margin: 0;

    color: #0b2345;

    font-family: "Fraunces", serif;

    font-size: clamp(42px, 6vw, 68px);

    line-height: 1.08;
}

.gallery-hero p {
    max-width: 650px;

    margin: 18px auto 0;

    color: #667085;

    font-size: 16px;
    line-height: 1.7;
}

.gallery-hero-line {
    width: 70px;
    height: 3px;

    background: #f5a900;

    margin: 25px auto 0;
}


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

.before-after-gallery {
    padding: 90px 0 100px;

    background: #ffffff;
}

.gallery-container {
    width: min(1400px, 94%);
    margin: auto;
}


/* Heading */

.gallery-section-heading {
    text-align: center;

    max-width: 750px;

    margin: 0 auto 50px;
}

.gallery-section-heading span {
    color: #f5a900;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;
}

.gallery-section-heading h2 {
    margin: 10px 0 13px;

    color: #0b2345;

    font-family: "Fraunces", serif;

    font-size: 40px;

    line-height: 1.2;
}

.gallery-section-heading p {
    margin: 0;

    color: #687386;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   GRID
========================================================= */

.gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 28px;
}


/* =========================================================
   RESULT CARD
========================================================= */

.result-card {
    background: #ffffff;

    border: 1px solid #e8ebef;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(11, 35, 69, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.result-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 40px rgba(11, 35, 69, 0.13);
}


/* Image */

.result-image {
    position: relative;

    width: 100%;

    aspect-ratio: 1.45 / 1;

    overflow: hidden;

    cursor: pointer;

    background: #eef1f4;
}

.result-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.result-card:hover .result-image img {
    transform: scale(1.035);
}


/* Before / After labels */

.before-label,
.after-label {
    position: absolute;

    bottom: 12px;

    padding: 6px 12px;

    border-radius: 5px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.5px;

    z-index: 3;
}

.before-label {
    left: 12px;

    background: rgba(20, 20, 20, 0.78);

    color: #ffffff;
}

.after-label {
    right: 12px;

    background: #f5a900;

    color: #0b2345;
}


/* Center divider */

.result-image::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 2px;

    background: rgba(255,255,255,0.9);

    transform: translateX(-50%);

    z-index: 2;

    box-shadow:
        0 0 4px rgba(0,0,0,0.2);
}


/* Expand */

.image-view-btn {
    position: absolute;

    top: 12px;
    right: 12px;

    width: 34px;
    height: 34px;

    border: none;

    border-radius: 50%;

    background: rgba(255,255,255,0.92);

    color: #0b2345;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 5;

    opacity: 0;

    transform: translateY(-5px);

    transition: 0.3s ease;
}

.result-card:hover .image-view-btn {
    opacity: 1;

    transform: translateY(0);
}

.image-view-btn:hover {
    background: #f5a900;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.result-content {
    position: relative;

    padding: 19px 52px 20px 18px;

    min-height: 105px;
}

.result-content h3 {
    margin: 0 0 7px;

    color: #0b2345;

    font-family: "Fraunces", serif;

    font-size: 20px;

    line-height: 1.2;
}

.result-content p {
    margin: 0;

    color: #687386;

    font-size: 12.5px;

    line-height: 1.55;
}


/* Arrow */

.result-arrow {
    position: absolute;

    right: 16px;
    bottom: 18px;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    border: 1px solid #f5a900;

    background: #ffffff;

    color: #0b2345;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: 0.3s ease;
}

.result-arrow:hover {
    background: #f5a900;

    transform: translateX(3px);
}


/* =========================================================
   BOTTOM TRANSFORMATION SECTION
========================================================= */

.gallery-bottom-section {
    padding: 0 0 90px;

    background: #ffffff;
}

.gallery-bottom-inner {
    width: min(1400px, 94%);

    margin: auto;

    display: grid;

    grid-template-columns:
        0.85fr 1.75fr;

    overflow: hidden;

    border-radius: 28px;

    background: #f8f9fb;

    box-shadow:
        0 12px 40px rgba(11,35,69,0.06);
}


/* Left */

.gallery-bottom-intro {
    padding: 45px 45px;

    background:
        linear-gradient(
            135deg,
            #fff1c9,
            #f5c75e
        );
}

.gallery-bottom-intro span {
    color: #0b2345;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.gallery-bottom-intro h2 {
    margin: 12px 0 12px;

    color: #0b2345;

    font-family: "Fraunces", serif;

    font-size: 34px;

    line-height: 1.08;
}

.gallery-bottom-intro p {
    max-width: 360px;

    margin: 0;

    color: #3c4654;

    font-size: 13px;

    line-height: 1.6;
}


/* Right */

.gallery-bottom-details {
    padding: 35px 40px;

    display: flex;

    align-items: center;

    gap: 28px;
}


/* Stats */

.gallery-stat {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 125px;
}

.gallery-stat i {
    color: #f5a900;

    font-size: 25px;
}

.gallery-stat strong {
    display: block;

    color: #0b2345;

    font-size: 14px;

    font-weight: 800;
}

.gallery-stat span {
    display: block;

    color: #697386;

    margin-top: 3px;

    font-size: 10px;
}


/* Buttons */

.gallery-cta-buttons {
    margin-left: auto;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 10px;
}

.gallery-book-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 22px;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #f5a900,
            #ffbd24
        );

    color: #0b2345;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    white-space: nowrap;

    transition: 0.3s ease;
}

.gallery-book-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(245,169,0,0.25);
}

.gallery-book-btn span,
.gallery-know-btn span {
    font-size: 17px;
}

.gallery-know-btn {
    color: #0b2345;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    border-bottom: 1px solid #f5a900;

    padding-bottom: 3px;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox {
    position: fixed;

    inset: 0;

    background: rgba(5, 15, 28, 0.92);

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    opacity: 0;

    visibility: hidden;

    transition: 0.3s ease;

    z-index: 9999;
}

.gallery-lightbox.active {
    opacity: 1;

    visibility: visible;
}

.lightbox-content {
    width: min(1000px, 95vw);

    max-height: 90vh;

    display: flex;

    align-items: center;
    justify-content: center;
}

.lightbox-content img {
    max-width: 100%;

    max-height: 85vh;

    object-fit: contain;

    border-radius: 8px;

    box-shadow:
        0 20px 70px rgba(0,0,0,0.35);
}

.lightbox-close {
    position: absolute;

    top: 25px;
    right: 30px;

    width: 45px;
    height: 45px;

    border: none;

    border-radius: 50%;

    background: #f5a900;

    color: #0b2345;

    cursor: pointer;

    font-size: 18px;

    z-index: 10;
}


/* =========================================================
   FOOTER
========================================================= */

.gallery-footer {
    background: #0b2345;

    color: #ffffff;

    padding-top: 65px;
}

.gallery-footer-inner {
    width: min(1200px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    gap: 60px;

    padding-bottom: 50px;
}

.gallery-footer-brand h3 {
    margin: 0;

    font-family: "Fraunces", serif;

    font-size: 32px;

    letter-spacing: 1px;
}

.gallery-footer-brand > span {
    display: block;

    color: #f5a900;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-top: 4px;
}

.gallery-footer-brand p {
    max-width: 360px;

    color: #c7d0dc;

    font-size: 13px;

    line-height: 1.7;

    margin-top: 18px;
}

.gallery-footer-links {
    display: flex;

    flex-direction: column;

    gap: 11px;
}

.gallery-footer-links h4 {
    color: #ffffff;

    font-size: 15px;

    margin: 0 0 8px;
}

.gallery-footer-links a {
    color: #bfcbd9;

    text-decoration: none;

    font-size: 12px;

    transition: 0.3s ease;
}

.gallery-footer-links a:hover {
    color: #f5a900;
}

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

    text-align: center;

    padding: 20px;

    color: #9eabba;

    font-size: 11px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1150px) {

    .gallery-nav {
        gap: 15px;
    }

    .gallery-nav a {
        font-size: 11px;
    }

    .gallery-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .gallery-bottom-details {
        flex-wrap: wrap;
    }

}


/* =========================================================
   MOBILE NAV
========================================================= */

@media (max-width: 900px) {

    .gallery-nav {
        display: none;
    }

    .gallery-menu-btn {
        display: block;
    }

    .gallery-header-inner {
        min-height: 72px;
    }

    .gallery-mobile-menu {
        top: 72px;
    }


    .gallery-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }


    .gallery-bottom-inner {
        grid-template-columns: 1fr;
    }

    .gallery-bottom-details {
        padding: 30px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

    .gallery-hero {
        min-height: 300px;
    }

    .gallery-hero h1 {
        font-size: 39px;
    }

    .gallery-hero p {
        font-size: 13px;
    }


    .before-after-gallery {
        padding: 60px 0 70px;
    }

    .gallery-section-heading {
        margin-bottom: 35px;
    }

    .gallery-section-heading h2 {
        font-size: 30px;
    }


    .gallery-grid {
        grid-template-columns: 1fr;

        width: 94%;

        margin: auto;
    }


    .result-content {
        min-height: 95px;
    }


    .image-view-btn {
        opacity: 1;

        transform: none;
    }


    .gallery-bottom-section {
        padding-bottom: 60px;
    }

    .gallery-bottom-intro {
        padding: 35px 25px;
    }

    .gallery-bottom-intro h2 {
        font-size: 30px;
    }

    .gallery-bottom-details {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 22px;

        padding: 28px 22px;
    }

    .gallery-stat {
        min-width: 0;
    }

    .gallery-cta-buttons {
        grid-column: 1 / -1;

        align-items: stretch;

        margin-left: 0;

        margin-top: 8px;
    }

    .gallery-book-btn {
        width: 100%;
    }


    .gallery-footer-inner {
        grid-template-columns: 1fr;

        gap: 35px;

        padding-bottom: 40px;
    }

}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media (max-width: 380px) {

    .gallery-bottom-details {
        grid-template-columns: 1fr;
    }

    .gallery-stat {
        padding-bottom: 8px;
    }

    .gallery-cta-buttons {
        grid-column: auto;
    }

}
/* =========================================================
   GALLERY ZOOM OVERRIDE
========================================================= */

.result-card .image-view-btn {
    position: absolute !important;

    top: 12px !important;
    right: 12px !important;

    width: 36px !important;
    height: 36px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    opacity: 1 !important;
    visibility: visible !important;

    z-index: 20 !important;

    cursor: pointer !important;

    border: none !important;
    border-radius: 50% !important;

    background: rgba(255,255,255,0.96) !important;

    color: #0b2345 !important;

    transition: 0.25s ease !important;
}

.result-card .image-view-btn:hover {
    background: #f5a900 !important;
    transform: scale(1.08) !important;
}


/* POPUP */

.gallery-lightbox {
    position: fixed !important;

    inset: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 30px !important;

    background: rgba(5,15,28,0.90) !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    z-index: 999999 !important;

    transition: opacity 0.25s ease !important;
}

.gallery-lightbox.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


.lightbox-content {
    position: relative !important;

    width: min(1000px, 92vw) !important;

    max-height: 90vh !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;
}


.lightbox-content img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 92vw !important;
    max-height: 85vh !important;

    object-fit: contain !important;

    border-radius: 10px !important;

    box-shadow:
        0 20px 70px rgba(0,0,0,0.45) !important;
}


.lightbox-close {
    position: fixed !important;

    top: 22px !important;
    right: 25px !important;

    width: 44px !important;
    height: 44px !important;

    border: none !important;
    border-radius: 50% !important;

    background: #f5a900 !important;

    color: #0b2345 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;

    z-index: 1000000 !important;
}


body.gallery-popup-open {
    overflow: hidden !important;
}

/* =========================
   MARMM TOP TRUST BAR
========================= */

.marmm-topbar {
    width: 100%;
    min-height: 46px;
    background: #062b52;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 7px 45px;
    box-sizing: border-box;

    font-size: 13px;
    position: relative;
    z-index: 9999;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 25px;
}

.topbar-left span,
.topbar-right span {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

/* Icons */
.marmm-topbar i {
    color: #f5a900;
    font-size: 14px;
}

.marmm-topbar .fa-whatsapp {
    color: #25d366;
    font-size: 17px;
}

/* NABH */
.nabh-item {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #fff;
    text-decoration: none;

    padding-right: 20px;
    border-right: 1px solid rgba(255,255,255,0.35);
}

.nabh-item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    background: #fff;
    border-radius: 50%;
}

.nabh-item span {
    color: #fff;
}

/* Trust icons */
.trust-item i {
    background: #f5a900;
    color: #fff !important;

    width: 23px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    font-size: 11px !important;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1100px) {

    .marmm-topbar {
        padding: 7px 20px;
        font-size: 12px;
    }

    .topbar-left,
    .topbar-right {
        gap: 15px;
    }

    .topbar-right .trust-item:last-child {
        display: none;
    }
}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .marmm-topbar {
        display: none;
    }

}

/* ===== TOPBAR ALIGNMENT OVERRIDE ===== */

.marmm-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 18px !important;
    box-sizing: border-box !important;
}

.marmm-topbar .topbar-left,
.marmm-topbar .topbar-right {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

.marmm-topbar .topbar-left {
    gap: 22px !important;
}

.marmm-topbar .topbar-right {
    gap: 0 !important;
}

.marmm-topbar .topbar-left > span,
.marmm-topbar .topbar-right > span,
.marmm-topbar .nabh-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* NABH */
.marmm-topbar .nabh-item {
    gap: 9px !important;
    border-right: 1px solid rgba(255,255,255,.35) !important;
}

.marmm-topbar .nabh-item img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    display: block !important;
    margin: 0 !important;
}

/* Icons */
.marmm-topbar i {
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Vertical separators */
.marmm-topbar .topbar-right > .trust-item {
    border-right: 1px solid rgba(255,255,255,.35);
}

.marmm-topbar .topbar-right > .trust-item:last-child {
    border-right: none;
}
/* ===== WHATSAPP ICON FIX ===== */

.marmm-topbar .fa-whatsapp {
    background: transparent !important;
    color: #25D366 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 18px !important;
    display: inline-block !important;
    box-shadow: none !important;
}

/* WhatsApp wale text ko properly align karo */
.marmm-topbar .topbar-left span:has(.fa-whatsapp) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =========================================
   FINAL TOPBAR - EQUAL SPACING + ALIGNMENT
========================================= */

.marmm-topbar {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    align-items: center !important;
    width: 100% !important;
    height: 54px !important;
    min-height: 54px !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    gap: 0 !important;
}

/* Remove old left/right flex grouping */
.marmm-topbar .topbar-left,
.marmm-topbar .topbar-right {
    display: contents !important;
}

/* Every item gets equal space */
.marmm-topbar .topbar-left > span,
.marmm-topbar .topbar-right > span,
.marmm-topbar .nabh-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    width: 100% !important;
    height: 54px !important;

    padding: 0 8px !important;
    margin: 0 !important;

    box-sizing: border-box !important;
    white-space: nowrap !important;
}

/* =========================================
   NABH
========================================= */

.marmm-topbar .nabh-item {
    border-right: 1px solid rgba(255,255,255,.35) !important;
}

.marmm-topbar .nabh-item img {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    object-fit: contain !important;
    border-radius: 50% !important;
    margin: 0 !important;
}

/* =========================================
   SEPARATORS
========================================= */

.marmm-topbar .topbar-right > .trust-item {
    border-right: 1px solid rgba(255,255,255,.35) !important;
}

.marmm-topbar .topbar-right > .trust-item:last-child {
    border-right: none !important;
}

/* =========================================
   PHONE ICON - FLIP
========================================= */

.marmm-topbar .fa-phone-alt,
.marmm-topbar .fa-phone {
    transform: rotate(180deg) !important;
    display: inline-block !important;
    color: #f5a900 !important;
}

/* =========================================
   WHATSAPP
========================================= */

.marmm-topbar .fa-whatsapp {
    background: transparent !important;
    color: #25D366 !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    border-radius: 0 !important;
    box-shadow: none !important;

    font-size: 18px !important;
    display: inline-block !important;
}

/* Remove unwanted old spacing */
.marmm-topbar span {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =========================================
   MOBILE TOPBAR - CLEAN & PROPER
========================================= */

@media (max-width: 768px) {

    .marmm-topbar {
        display: grid !important;
        grid-template-columns: 1fr 1fr 0.9fr !important;
        align-items: center !important;

        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;

        padding: 0 8px !important;
        gap: 0 !important;

        overflow: hidden !important;
    }

    /* Remove desktop grouping */
    .marmm-topbar .topbar-left,
    .marmm-topbar .topbar-right {
        display: contents !important;
    }

    /* ---------------------------------
       PHONE
    --------------------------------- */

    .marmm-topbar .topbar-left > span:nth-child(1) {
        display: none !important;
    }

    .marmm-topbar .topbar-left > span:nth-child(2) {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 48px !important;

        padding: 0 4px !important;
        gap: 5px !important;

        font-size: 10px !important;
        white-space: nowrap !important;
    }

    /* ---------------------------------
       WHATSAPP
    --------------------------------- */

    .marmm-topbar .topbar-left > span:nth-child(3) {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 48px !important;

        padding: 0 4px !important;
        gap: 5px !important;

        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .marmm-topbar .fa-whatsapp {
        font-size: 16px !important;
        color: #25D366 !important;
        background: transparent !important;
    }

    /* ---------------------------------
       NABH
    --------------------------------- */

    .marmm-topbar .nabh-item {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 48px !important;

        padding: 0 4px !important;
        gap: 5px !important;

        border-right: none !important;

        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .marmm-topbar .nabh-item img {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;

        object-fit: contain !important;
        margin: 0 !important;
    }

    /* ---------------------------------
       HIDE OTHER TRUST ITEMS
    --------------------------------- */

    .marmm-topbar .topbar-right > .trust-item {
        display: none !important;
    }

    /* ---------------------------------
       PHONE ICON
    --------------------------------- */

    .marmm-topbar .fa-phone-alt,
    .marmm-topbar .fa-phone {
        transform: rotate(180deg) !important;
        font-size: 13px !important;
        color: #f5a900 !important;
    }

    /* Remove unwanted borders */
    .marmm-topbar .topbar-left > span,
    .marmm-topbar .topbar-right > span,
    .marmm-topbar .nabh-item {
        border: none !important;
        margin: 0 !important;
    }
}

/* ===== FINAL MOBILE NABH FIX ===== */
@media (max-width: 768px) {

    /* NABH ko forcefully visible rakho */
    .marmm-topbar .topbar-right .nabh-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: 48px !important;

        padding: 0 4px !important;
        margin: 0 !important;

        gap: 5px !important;
        border: none !important;
        white-space: nowrap !important;
    }

    /* NABH logo */
    .marmm-topbar .topbar-right .nabh-item img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;

        object-fit: contain !important;
        margin: 0 !important;
    }

    /* NABH text */
    .marmm-topbar .topbar-right .nabh-item span {
        display: block !important;
        visibility: visible !important;

        font-size: 10px !important;
        white-space: nowrap !important;
    }

}
/* =================================================
   FINAL MOBILE TOPBAR FIX
================================================= */

@media (max-width: 768px) {

    /* TOP BAR */
    .marmm-topbar {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;

        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;

        padding: 0 6px !important;
        margin: 0 !important;

        background: #062f55 !important;

        overflow: hidden !important;
        box-sizing: border-box !important;

        align-items: center !important;
    }

    /* Remove desktop flex grouping */
    .marmm-topbar .topbar-left,
    .marmm-topbar .topbar-right {
        display: contents !important;
    }

    /* =================================================
       LOCATION - HIDE ON MOBILE
    ================================================= */

    .marmm-topbar .topbar-left > span:nth-child(1) {
        display: none !important;
    }

    /* =================================================
       PHONE
    ================================================= */

    .marmm-topbar .topbar-left > span:nth-child(2) {
        display: flex !important;

        width: 100% !important;
        height: 46px !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        gap: 5px !important;

        color: #fff !important;
        font-size: 10px !important;
        white-space: nowrap !important;

        border: none !important;
    }

    .marmm-topbar .topbar-left > span:nth-child(2) i {
        color: #f5a900 !important;
        font-size: 13px !important;
        transform: rotate(180deg) !important;
    }

    /* =================================================
       WHATSAPP
    ================================================= */

    .marmm-topbar .topbar-left > span:nth-child(3) {
        display: flex !important;

        width: 100% !important;
        height: 46px !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        gap: 5px !important;

        color: #fff !important;
        font-size: 10px !important;
        white-space: nowrap !important;

        border: none !important;
    }

    .marmm-topbar .fa-whatsapp {
        display: inline-block !important;

        width: auto !important;
        height: auto !important;
        min-width: 0 !important;

        padding: 0 !important;
        margin: 0 !important;

        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;

        color: #25D366 !important;
        font-size: 16px !important;
    }

    /* =================================================
       NABH - ONLY THIS TRUST ITEM SHOW
    ================================================= */

    .marmm-topbar .topbar-right .nabh-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;

        width: 100% !important;
        height: 46px !important;

        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        gap: 5px !important;

        border: none !important;

        color: #fff !important;
        font-size: 10px !important;

        white-space: nowrap !important;
        overflow: hidden !important;
    }

    /* IMPORTANT: NABH IMAGE SIZE */
    .marmm-topbar .topbar-right .nabh-item img {
        display: block !important;

        width: 30px !important;
        height: 30px !important;

        min-width: 30px !important;
        max-width: 30px !important;

        min-height: 30px !important;
        max-height: 30px !important;

        object-fit: contain !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 50% !important;
    }

    .marmm-topbar .topbar-right .nabh-item span {
        display: inline !important;

        width: auto !important;
        height: auto !important;

        font-size: 10px !important;
        color: #fff !important;

        white-space: nowrap !important;
    }

    /* =================================================
       HIDE OTHER TRUST ITEMS
    ================================================= */

    .marmm-topbar .topbar-right .trust-item:not(.nabh-item) {
        display: none !important;
    }

    /* Extra protection */
    .marmm-topbar .topbar-right > span:not(.nabh-item) {
        display: none !important;
    }

    /* =================================================
       REMOVE ALL OLD MOBILE SPACING
    ================================================= */

    .marmm-topbar span,
    .marmm-topbar a {
        box-sizing: border-box !important;
    }

}