@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap");

:root{
  --ink:#17251f;
  --ink-soft:#52635b;
  --forest:#173f35;
  --forest-2:#24594b;
  --sage:#dce9df;
  --mint:#edf5ef;
  --cream:#f8f5ee;
  --paper:#fffdf8;
  --gold:#b88a43;
  --gold-soft:#ead8b6;
  --line:#e5e4dc;
  --white:#fff;
  --danger:#9a403c;
  --shadow:0 24px 70px rgba(23,63,53,.12);
  --shadow-soft:0 12px 35px rgba(23,63,53,.08);
  --radius:28px;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:"DM Sans",sans-serif;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

body::selection{
  background:var(--forest);
  color:#fff;
}

img,video{max-width:100%}
a{text-decoration:none}
button,input,select,textarea{font:inherit}

.container{max-width:1240px}

/* announcement */
.topbar{
  background:var(--forest);
  color:#dce8e1;
  min-height:42px;
  padding:9px 0;
  font-size:12px;
  letter-spacing:.15px;
}

.topbar strong{
  color:#fff;
  font-weight:700;
}

.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}

/* navigation */
.navbar{
  position:sticky;
  top:0;
  z-index:1050;
  background:rgba(255,253,248,.94)!important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(23,63,53,.09);
  padding:14px 0!important;
}

.navbar .container{max-width:1240px}

.navbar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink)!important;
  font-size:18px;
  font-weight:700;
  letter-spacing:-.4px;
}

.navbar-brand img{
  width:46px!important;
  height:46px!important;
  object-fit:cover;
  border-radius:50%;
  border:2px solid #fff;
  outline:1px solid var(--gold-soft);
}

.navbar-nav{
  gap:4px;
}

.navbar-nav .nav-link{
  color:#52625c!important;
  font-size:13px;
  font-weight:600;
  padding:9px 12px!important;
  border-radius:10px;
  transition:.25s ease;
}

.navbar-nav .nav-link:hover{
  color:var(--forest)!important;
  background:var(--mint);
}

.animated-toggler{
  width:27px;
  height:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.animated-toggler span{
  height:2px;
  width:100%;
  border-radius:5px;
  background:var(--forest);
}

.navbar-toggler:focus{box-shadow:none}

.btn-primary,
.btn-primary.custom,
.view-all-btn{
  border:1px solid var(--forest)!important;
  background:var(--forest)!important;
  color:#fff!important;
  border-radius:12px!important;
  padding:11px 20px!important;
  font-weight:700!important;
  box-shadow:none!important;
  transition:.25s ease;
}

.btn-primary:hover,
.btn-primary.custom:hover,
.view-all-btn:hover{
  background:var(--gold)!important;
  border-color:var(--gold)!important;
  transform:translateY(-2px);
}

.btn-outline.custom{
  border:1px solid #cdd6d0!important;
  background:transparent!important;
  color:var(--forest)!important;
  border-radius:12px!important;
  padding:10px 19px!important;
  font-weight:700!important;
}

.btn-outline.custom:hover{
  border-color:var(--forest)!important;
  background:var(--mint)!important;
}

/* hero */
.hero{
  position:relative;
  padding:54px 0 85px;
  background:var(--cream);
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  border-radius:50%;
  right:-290px;
  top:-290px;
  border:1px solid rgba(184,138,67,.18);
  box-shadow:0 0 0 70px rgba(184,138,67,.035),0 0 0 140px rgba(184,138,67,.02);
}

.hero-inner{
  position:relative;
  z-index:2;
}

.hero-card{
  min-height:650px;
  display:grid!important;
  grid-template-columns:1.02fr .98fr;
  background:var(--paper);
  border:1px solid #e8e3d8;
  border-radius:34px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.hero-left{
  min-height:650px;
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:
    linear-gradient(135deg,#dce9df 0%,#eef4ec 46%,#d7e5dc 100%);
  overflow:hidden;
}

.hero-left::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border:1px solid rgba(23,63,53,.12);
  border-radius:50%;
  top:52px;
  left:50%;
  transform:translateX(-50%);
}

.hero-left::after{
  content:"";
  position:absolute;
  width:370px;
  height:370px;
  border-radius:50%;
  background:rgba(255,255,255,.45);
  top:126px;
  left:50%;
  transform:translateX(-50%);
}

.hero-left > div{
  position:relative;
  z-index:4;
  height:100%;
  width:100%;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.doctor-img{
  position:relative;
  z-index:5;
  height:610px;
  width:auto;
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(15px 25px 25px rgba(23,63,53,.15));
}

.plus-wrap{
  position:absolute!important;
  left:35px!important;
  bottom:35px!important;
  width:70px!important;
  height:70px!important;
  z-index:7;
  background:rgba(255,255,255,.78);
  border-radius:50%;
  padding:9px;
  box-shadow:0 15px 35px rgba(23,63,53,.12);
}

.plus{
  width:100%!important;
  height:100%!important;
  animation:spin 16s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.hero-left .doctor-stamp{
  position:absolute;
  right:28px;
  top:28px;
  z-index:8;
  width:126px;
  height:126px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:15px;
  background:var(--paper);
  color:var(--forest);
  border:1px solid var(--gold-soft);
  font-size:10px;
  font-weight:800;
  line-height:1.35;
  text-transform:uppercase;
  letter-spacing:1px;
}

.hero-right{
  padding:68px 64px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}

.hero-right::after{
  content:"01";
  position:absolute;
  right:28px;
  bottom:20px;
  color:rgba(23,63,53,.045);
  font-family:"Playfair Display",serif;
  font-size:130px;
  line-height:1;
}

.intro-tag{
  width:max-content;
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--forest);
  background:var(--mint);
  border:1px solid #d2e1d5;
  border-radius:999px;
  padding:7px 13px;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.hero h1{
  position:relative;
  z-index:2;
  margin:22px 0 21px;
  max-width:650px;
  color:var(--ink);
  font-family:"Playfair Display",serif;
  font-size:clamp(2.7rem,4.5vw,4.6rem);
  line-height:1.06;
  letter-spacing:-2px;
  font-weight:700;
}

.hero h1 .text-danger{
  color:var(--gold)!important;
}

.hero p.lead{
  position:relative;
  z-index:2;
  max-width:600px;
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.9;
  margin:0;
}

.hero-right .d-flex{
  position:relative;
  z-index:3;
  margin-top:30px!important;
}

.hero-right .btn{
  min-width:155px;
}

.hero-meta{
  position:relative;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:32px;
}

.hero-meta span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:11px;
  color:var(--ink-soft);
  background:#fff;
  font-size:11px;
  font-weight:700;
}

.hero-meta i{color:var(--gold)}

/* floating contact */
.social-floating{
  position:fixed!important;
  right:20px!important;
  bottom:24px!important;
  top:auto!important;
  transform:none!important;
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:7px!important;
  background:rgba(255,253,248,.94)!important;
  border:1px solid #deded5;
  border-radius:16px!important;
  box-shadow:0 16px 40px rgba(23,63,53,.13);
}

.social-floating .social-icon{
  width:38px!important;
  height:38px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px!important;
  background:#f1f3ed!important;
  color:var(--forest)!important;
  font-size:14px!important;
  transition:.2s ease;
}

.social-floating .social-icon:hover{
  background:var(--forest)!important;
  color:#fff!important;
  transform:translateY(-2px);
}

/* common */
section{position:relative}

.section-title{
  margin:0;
  color:var(--ink)!important;
  font-family:"Playfair Display",serif;
  font-size:clamp(2.2rem,3.5vw,3.5rem)!important;
  font-weight:700!important;
  line-height:1.15;
  letter-spacing:-1.3px;
}

.muted{color:var(--ink-soft)!important}

.section-kicker,
.section-header span,
.section-badge,
.highlight-header{
  display:inline-flex!important;
  align-items:center;
  width:max-content;
  color:var(--forest)!important;
  background:var(--mint)!important;
  border:1px solid #d5e3d8!important;
  border-radius:999px!important;
  padding:7px 13px!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:1.1px;
  text-transform:uppercase;
}

/* about */
.about{
  padding:120px 0!important;
  background:var(--paper)!important;
}

.about .container{max-width:1160px}

.about .row{align-items:stretch!important}

.about-copy{
  height:100%;
  padding:15px 30px 15px 0;
}

.about .section-title{margin:17px 0 20px}

.about p.muted{
  max-width:590px;
  font-size:15px;
}

.about ul{
  list-style:none;
  padding:0!important;
  margin:27px 0 0!important;
}

.about li{
  position:relative;
  padding:10px 0 10px 31px;
  color:#45584f;
  font-size:14px;
}

.about li::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  width:17px;
  height:17px;
  border-radius:50%;
  border:4px solid #d6e6da;
  background:var(--forest);
}

.about .p-3{
  margin-top:28px;
  padding:21px!important;
  border:1px solid var(--line);
  border-radius:18px!important;
  background:#f5f4ee!important;
}

.about .p-3 strong{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.8px;
  color:var(--forest);
}

.about .p-3 ul{margin:0!important}

.map-card{
  height:100%;
  padding:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.map-card img{
  width:100%;
  height:100%;
  min-height:480px;
  display:block;
  object-fit:cover;
  border-radius:23px!important;
}

/* services */
.service{
  padding:120px 0!important;
  background:var(--forest)!important;
  color:#fff;
}

.service::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.35;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:54px 54px;
}

.service .container{position:relative;z-index:2}

.service .section-header{
  max-width:760px;
  margin:0 auto 58px!important;
  text-align:center;
}

.service .section-header span{
  color:#e8c98e!important;
  background:rgba(255,255,255,.07)!important;
  border-color:rgba(234,216,182,.2)!important;
}

.service .section-header h2{
  margin:19px 0 0!important;
  color:#fff!important;
  font-family:"Playfair Display",serif;
  font-size:clamp(2.2rem,3.5vw,3.4rem)!important;
  line-height:1.15;
}

.service-card{
  height:100%;
  position:relative;
  background:#f9fbf8!important;
  color:var(--ink);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px!important;
  padding:31px 27px!important;
  text-align:left!important;
  box-shadow:none!important;
  transition:.3s ease!important;
  overflow:hidden;
}

.service-card::before{
  content:"";
  position:absolute;
  width:95px;
  height:95px;
  right:-35px;
  top:-35px;
  border-radius:50%;
  background:rgba(184,138,67,.11);
}

.service-card:hover{
  transform:translateY(-8px)!important;
  box-shadow:0 24px 50px rgba(0,0,0,.18)!important;
}

.service-icon{
  width:58px!important;
  height:58px!important;
  margin:0 0 24px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:17px!important;
  background:var(--sage)!important;
  color:var(--forest)!important;
}

.svgi{
  width:36px!important;
  height:36px!important;
}

.service-title{
  color:var(--ink)!important;
  font-family:"Playfair Display",serif;
  font-size:20px!important;
  font-weight:700!important;
  line-height:1.25;
  margin-bottom:11px!important;
}

.service-text{
  color:var(--ink-soft)!important;
  font-size:13px!important;
  line-height:1.75;
  margin:0!important;
}

/* credentials */
.qualification-section{
  padding:115px 0;
  background:var(--cream);
}

.qualification-content{max-width:1080px}

.qualification-section .section-badge{margin-bottom:15px}

.qualification-section .section-title{
  margin-bottom:48px!important;
}

.qualification-card{
  position:relative;
  height:100%;
  padding:28px 28px 28px 38px!important;
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  box-shadow:none!important;
  transition:.25s ease!important;
  overflow:hidden;
}

.qualification-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  background:var(--forest);
}

.qualification-card::after{
  content:"";
  position:absolute;
  right:20px;
  top:17px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gold);
}

.qualification-card:hover{
  transform:translateY(-5px)!important;
  border-color:#ccd8cf!important;
  box-shadow:var(--shadow-soft)!important;
}

.qualification-title{
  color:var(--ink)!important;
  font-family:"Playfair Display",serif;
  font-size:18px!important;
  font-weight:700!important;
  line-height:1.35;
  margin:0 0 7px!important;
}

.qualification-sub{
  color:var(--ink-soft)!important;
  font-size:13px!important;
}

.award-icons img{
  width:78px!important;
  height:78px!important;
  object-fit:cover;
  border-radius:50%!important;
  border:5px solid #fff;
  outline:1px solid var(--gold-soft);
  box-shadow:none!important;
}

/* blogs */
.blog-section{
  padding:115px 0!important;
  background:#fff!important;
}

.blog-card{
  height:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:none;
  transition:.3s ease;
}

.blog-card:hover{
  transform:translateY(-7px);
  box-shadow:var(--shadow-soft);
}

.glass-card{
  height:100%;
  background:var(--paper)!important;
  border:1px solid var(--line);
  border-radius:22px!important;
  overflow:hidden;
  backdrop-filter:none!important;
  box-shadow:none!important;
  transition:.3s ease!important;
}

.glass-card:hover{
  transform:translateY(-7px)!important;
  box-shadow:var(--shadow-soft)!important;
}

.card-img{
  height:230px;
  overflow:hidden;
  background:#e8eee9;
}

.card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.55s ease;
}

.glass-card:hover .card-img img{transform:scale(1.06)}

.card-body-content{padding:25px!important}

.card-body-content h5{
  color:var(--ink);
  font-family:"Playfair Display",serif;
  font-size:21px;
  line-height:1.3;
  font-weight:700;
}

.card-body-content .meta{
  color:#829087!important;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size:11px!important;
}

.card-body-content p{
  color:var(--ink-soft)!important;
  font-size:13px!important;
}

/* feedback */
.feedback-wrap{
  padding:95px 0!important;
  background:var(--cream);
}

.card.mb-4.shadow{
  max-width:760px;
  margin:40px auto!important;
  border:1px solid var(--line)!important;
  border-radius:25px!important;
  box-shadow:var(--shadow-soft)!important;
  overflow:hidden;
  background:var(--paper);
}

.card.mb-4.shadow .card-header{
  background:var(--forest)!important;
  color:#fff!important;
  padding:19px 25px;
  border:0;
  font-weight:700;
}

.card.mb-4.shadow .card-body{padding:29px}

.card.mb-4.shadow .form-control{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 15px;
  min-height:48px;
  background:#fff;
}

.card.mb-4.shadow .form-control:focus{
  border-color:#9ab4a2;
  box-shadow:0 0 0 4px rgba(23,63,53,.07);
}

.testimonial-card,
.testimonial-slider .card{
  border:1px solid var(--line)!important;
  border-radius:20px!important;
  background:var(--paper)!important;
  box-shadow:none!important;
}

.testimonial-slider .col-md-4{padding:0!important}

.arrow-btn{
  width:42px!important;
  height:42px!important;
  border:1px solid #cfd8d2!important;
  background:#fff!important;
  color:var(--forest)!important;
  border-radius:50%!important;
  transition:.2s ease;
}

.arrow-btn:hover{
  background:var(--forest)!important;
  color:#fff!important;
  border-color:var(--forest)!important;
}

#slider{
  gap:18px!important;
}

/* videos */
.video-section{
  padding:105px 0!important;
  background:#fff;
}

.video-section .section-heading{
  color:var(--ink)!important;
  font-family:"Playfair Display",serif;
  font-size:clamp(2.2rem,3vw,3.2rem);
}

.video-card{
  height:100%;
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:22px!important;
  overflow:hidden;
  box-shadow:none!important;
  transition:.3s ease!important;
}

.video-card:hover{
  transform:translateY(-7px)!important;
  box-shadow:var(--shadow-soft)!important;
}

.video-card video{
  width:100%;
  height:210px!important;
  object-fit:cover;
  background:#dce7df;
}

.video-card .card-body{padding:22px!important}

.video-title{
  color:var(--ink)!important;
  font-family:"Playfair Display",serif;
  font-size:18px;
  font-weight:700!important;
}

.video-meta{
  display:flex;
  color:#839089!important;
  font-size:11px!important;
  gap:10px!important;
  flex-wrap:wrap;
  margin:8px 0;
}

.video-desc{
  color:var(--ink-soft)!important;
  font-size:12px!important;
}

.read-btn{
  display:inline-flex;
  margin-top:13px;
  color:var(--forest)!important;
  background:var(--mint)!important;
  border-radius:10px!important;
  padding:8px 13px!important;
  font-weight:700;
  font-size:12px;
}

.read-btn:hover{
  background:var(--forest)!important;
  color:#fff!important;
}

/* appointment */
#appointment{
  padding:115px 0!important;
  background:var(--cream);
}

#appointment > .row{
  align-items:stretch;
}

.card-form{
  height:100%;
  padding:39px!important;
  border-radius:28px!important;
  background:var(--paper)!important;
  color:var(--ink)!important;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft)!important;
  position:relative;
  overflow:hidden;
}

.card-form::before{
  content:"APPOINTMENT";
  position:absolute;
  right:-12px;
  top:22px;
  color:rgba(23,63,53,.045);
  font-family:"Playfair Display",serif;
  font-size:55px;
  font-weight:700;
  transform:rotate(90deg);
  transform-origin:right top;
}

.card-form h4{
  position:relative;
  font-family:"Playfair Display",serif;
  color:var(--ink);
  font-size:29px;
  font-weight:700;
}

.card-form p{
  position:relative;
  color:var(--ink-soft)!important;
  opacity:1!important;
  font-size:13px;
}

.card-form .form-control,
.card-form .form-select,
.card-form textarea{
  width:100%;
  min-height:51px;
  border-radius:11px!important;
  border:1px solid var(--line)!important;
  background:#fff!important;
  color:var(--ink)!important;
  padding:12px 14px!important;
  box-shadow:none!important;
}

.card-form .form-control:focus,
.card-form .form-select:focus{
  border-color:#98b2a1!important;
  box-shadow:0 0 0 4px rgba(23,63,53,.07)!important;
}

.card-form .btn-primary{
  min-height:51px;
  padding:0 28px!important;
}

.btn-gradient{
  background:var(--forest)!important;
  border-radius:11px!important;
}

/* schedule */
.card-schedule{
  height:100%;
  padding:38px!important;
  border-radius:28px!important;
  background:var(--forest)!important;
  color:#fff!important;
  box-shadow:var(--shadow-soft)!important;
  overflow:hidden;
  position:relative;
}

.card-schedule::before{
  content:"";
  position:absolute;
  width:310px;
  height:310px;
  right:-180px;
  top:-180px;
  border:70px solid rgba(255,255,255,.045);
  border-radius:50%;
}

.card-schedule h2{
  position:relative;
  z-index:2;
  color:#fff!important;
  font-family:"Playfair Display",serif;
  font-size:28px;
  font-weight:700;
}

.card-schedule .schedule-note{
  color:#c8d9d1;
  font-size:12px;
}

.card-schedule .table{
  position:relative;
  z-index:2;
  margin-top:23px;
  color:#dce8e2;
  border-color:rgba(255,255,255,.1)!important;
}

.card-schedule .table thead{
  background:rgba(255,255,255,.08)!important;
}

.card-schedule .table thead th{
  border:0!important;
  color:#fff;
  font-size:11px;
  padding:12px 9px;
}

.card-schedule .table td{
  background:transparent!important;
  color:#cadbd3!important;
  border-color:rgba(255,255,255,.1)!important;
  font-size:11px;
  padding:12px 8px;
}

.card-schedule .table td strong{color:#fff}

.schedule-list{
  list-style:none;
  padding:0;
  margin:0;
}

.schedule-list li{
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
}

/* contact */
#contact{
  padding:115px 0!important;
  background:#fff!important;
}

.contact-copy{
  padding-right:30px;
}

.contact-detail{
  display:flex;
  gap:13px;
  align-items:flex-start;
  margin-top:23px;
}

.contact-icon{
  flex:0 0 43px;
  width:43px;
  height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:var(--forest);
  background:var(--mint);
}

.contact-detail strong{
  display:block;
  color:var(--ink);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.contact-detail span{
  color:var(--ink-soft);
  font-size:13px;
}

#contact iframe{
  width:100%;
  min-height:410px;
  border:0;
  border-radius:22px;
}

/* footer */
footer{
  background:#102e27!important;
  color:#aebfb7!important;
  border:0!important;
  padding:38px 0!important;
}

footer strong,
footer a{color:#fff}

footer a:hover{color:#e3c68e}

/* mobile */
@media(max-width:991px){
  .topbar .container{
    flex-wrap:wrap;
    justify-content:center;
  }

  .navbar-collapse{padding:14px 0 4px}

  .navbar-nav{gap:2px}

  .navbar .btn-primary.custom{
    display:inline-block;
    margin:10px 0 0;
  }

  .hero{padding:28px 0 60px}

  .hero-card{
    min-height:auto;
    grid-template-columns:1fr;
    display:grid!important;
    border-radius:28px;
  }

  .hero-left{
    min-height:500px;
  }

  .doctor-img{height:470px}

  .hero-right{padding:50px 36px}

  .hero h1{
    font-size:clamp(2.5rem,7vw,4rem);
  }

  .about,
  .service,
  .qualification-section,
  .blog-section,
  .feedback-wrap,
  .video-section,
  #appointment,
  #contact{
    padding-top:80px!important;
    padding-bottom:80px!important;
  }

  .about-copy{padding:0}

  .map-card{min-height:450px}

  .map-card img{min-height:430px}

  .contact-copy{padding-right:0}
}

@media(max-width:767px){
  .topbar{font-size:10px}

  .topbar .container div:nth-child(2){display:none!important}

  .navbar-brand{font-size:15px}

  .navbar-brand img{
    width:40px!important;
    height:40px!important;
  }

  .hero{padding-top:15px}

  .hero-card{border-radius:21px}

  .hero-left{min-height:370px}

  .doctor-img{height:350px}

  .hero-left .doctor-stamp{
    width:90px;
    height:90px;
    right:15px;
    top:15px;
    font-size:7px;
  }

  .plus-wrap{
    left:17px!important;
    bottom:17px!important;
    width:56px!important;
    height:56px!important;
  }

  .hero-right{padding:37px 24px 40px}

  .hero h1{
    font-size:2.35rem;
    letter-spacing:-1px;
  }

  .hero p.lead{font-size:14px}

  .hero-right .d-flex{
    flex-direction:column;
  }

  .hero-right .btn{width:100%}

  .hero-meta span{width:100%}

  .social-floating{
    right:9px!important;
    bottom:9px!important;
  }

  .social-floating .social-icon{
    width:34px!important;
    height:34px!important;
  }

  .section-title{font-size:2.25rem!important}

  .service .section-header h2{font-size:2.2rem!important}

  .card-form,
  .card-schedule{padding:26px!important}

  .card.mb-4.shadow{
    margin:30px 15px!important;
  }

  .card.mb-4.shadow .card-body{padding:20px}

  .contact-copy{padding-right:0}

  #contact iframe{min-height:310px}
}

@media(max-width:480px){
  .hero-left{min-height:315px}

  .doctor-img{height:300px}

  .hero h1{font-size:2.05rem}

  .hero-right{padding:30px 20px}

  .intro-tag{font-size:9px}

  .service-card,
  .qualification-card{padding:23px!important}

  .card-img{height:190px}

  .video-card video{height:180px!important}
}

@media(prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}
/* =========================================
   GALLERY PAGE - NO BOOTSTRAP
========================================= */

.site-container {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
}


/* =========================================
   TOPBAR
========================================= */

.topbar-inner {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}


/* =========================================
   NAVBAR
========================================= */

.site-navbar {
  position: sticky;
  top: 0;
  z-index: 1050;

  background: rgba(255, 253, 248, .94);
  backdrop-filter: blur(18px);

  border-bottom: 1px solid rgba(23, 63, 53, .09);

  padding: 14px 0;
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}


/* Logo */

.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;

  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.4px;
}

.site-logo:hover {
  color: var(--forest);
}

.site-logo img {
  width: 46px;
  height: 46px;

  object-fit: cover;

  border-radius: 50%;

  border: 2px solid #fff;
  outline: 1px solid var(--gold-soft);
}


/* Navigation */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 4px;
}

.site-nav > a:not(.nav-button) {
  color: #52625c;

  font-size: 13px;
  font-weight: 600;

  padding: 9px 12px;

  border-radius: 10px;

  transition: .25s ease;
}

.site-nav > a:not(.nav-button):hover,
.site-nav > a.active {
  color: var(--forest);

  background: var(--mint);
}


/* Book appointment */

.nav-button {
  margin-left: 10px;

  border: 1px solid var(--forest);

  background: var(--forest);
  color: #fff;

  border-radius: 12px;

  padding: 11px 20px;

  font-size: 13px;
  font-weight: 700;

  transition: .25s ease;
}

.nav-button:hover {
  background: var(--gold);
  border-color: var(--gold);

  color: #fff;

  transform: translateY(-2px);
}


/* Mobile menu button */

.menu-toggle {
  display: none;

  width: 44px;
  height: 44px;

  padding: 10px;

  border: 0;
  background: transparent;

  cursor: pointer;
}

.menu-toggle span {
  display: block;

  width: 26px;
  height: 2px;

  margin: 5px auto;

  border-radius: 10px;

  background: var(--forest);

  transition: .25s ease;
}


/* =========================================
   GALLERY
========================================= */

.gallery-section {
  position: relative;

  padding: 105px 0 115px;

  background: var(--paper);

  overflow: hidden;
}

.gallery-section::before {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  right: -260px;
  top: -250px;

  border-radius: 50%;

  border: 1px solid rgba(184, 138, 67, .16);

  box-shadow:
    0 0 0 70px rgba(184, 138, 67, .035),
    0 0 0 140px rgba(184, 138, 67, .02);
}

.gallery-heading {
  position: relative;
  z-index: 2;

  max-width: 760px;

  margin: 0 auto 55px;

  text-align: center;
}

.gallery-badge {
  display: inline-flex;

  align-items: center;
  gap: 8px;

  color: var(--forest);

  background: var(--mint);

  border: 1px solid #d5e3d8;

  border-radius: 999px;

  padding: 8px 14px;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 1.1px;

  text-transform: uppercase;
}

.gallery-heart {
  color: var(--gold);

  font-size: 17px;

  line-height: 1;
}

.gallery-heading h1 {
  margin: 18px 0 12px;

  color: var(--ink);

  font-family: "Playfair Display", serif;

  font-size: clamp(2.4rem, 4vw, 3.6rem);

  font-weight: 700;

  line-height: 1.15;

  letter-spacing: -1.3px;
}

.gallery-heading p {
  max-width: 620px;

  margin: 0 auto;

  color: var(--ink-soft);

  font-size: 14px;

  line-height: 1.8;
}


/* =========================================
   MASONRY GALLERY
========================================= */

.masonry {
  position: relative;
  z-index: 2;

  column-count: 4;

  column-gap: 18px;
}

.masonry-item {
  position: relative;

  margin-bottom: 18px;

  break-inside: avoid;
  -webkit-column-break-inside: avoid;

  overflow: hidden;

  background: var(--paper);

  border: 1px solid var(--line);

  border-radius: 20px;

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.masonry-item::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(23, 63, 53, .13)
  );

  opacity: 0;

  transition: opacity .3s ease;

  pointer-events: none;
}

.masonry-item img {
  width: 100%;
  height: auto;

  display: block;

  border-radius: 19px;

  transition:
    transform .55s ease,
    filter .35s ease;
}

.masonry-item:hover {
  transform: translateY(-6px);

  border-color: #ccd8cf;

  box-shadow: var(--shadow-soft);
}

.masonry-item:hover img {
  transform: scale(1.045);
}

.masonry-item:hover::after {
  opacity: 1;
}


/* =========================================
   CONTACT
========================================= */

.gallery-contact {
  padding: 110px 0;

  background: var(--cream);
}

.contact-grid {
  display: grid;

  grid-template-columns: .85fr 1.15fr;

  gap: 50px;

  align-items: center;
}

.contact-copy {
  padding-right: 20px;
}

.contact-copy .section-kicker {
  margin-bottom: 17px;
}

.contact-intro {
  max-width: 520px;

  font-size: 14px;

  margin: 18px 0 30px;
}

.contact-detail {
  display: flex;

  align-items: flex-start;

  gap: 13px;

  margin-top: 23px;
}

.contact-icon {
  flex: 0 0 43px;

  width: 43px;
  height: 43px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 12px;

  color: var(--forest);

  background: var(--mint);

  font-size: 17px;
}

.contact-detail strong {
  display: block;

  color: var(--ink);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: .7px;
}

.contact-detail span {
  display: block;

  color: var(--ink-soft);

  font-size: 13px;

  line-height: 1.7;
}


/* Map */

.gallery-contact .map-card {
  width: 100%;

  padding: 10px;

  background: #fff;

  border: 1px solid var(--line);

  border-radius: 30px;

  box-shadow: var(--shadow-soft);

  overflow: hidden;
}

.gallery-contact iframe {
  width: 100%;
  height: 420px;

  display: block;

  border: 0;

  border-radius: 23px;
}


/* =========================================
   FOOTER
========================================= */

.gallery-footer {
  background: #102e27;

  color: #aebfb7;

  padding: 38px 0;
}

.footer-inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}

.footer-links {
  display: flex;

  gap: 25px;
}

.footer-links a {
  color: #fff;

  font-size: 13px;

  transition: .2s ease;
}

.footer-links a:hover {
  color: #e3c68e;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

  .site-container {
    width: min(100% - 32px, 1000px);
  }

  .site-nav {
    gap: 0;
  }

  .site-nav > a:not(.nav-button) {
    padding: 8px 9px;

    font-size: 12px;
  }

  .masonry {
    column-count: 3;
  }

}


/* =========================================
   MOBILE NAVBAR
========================================= */

@media (max-width: 900px) {

  .topbar-inner {
    justify-content: center;

    font-size: 11px;
  }

  .topbar-time {
    display: none;
  }

  .navbar-inner {
    position: relative;
  }

  .menu-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;

    left: 0;
    right: 0;

    top: calc(100% + 1px);

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 4px;

    padding: 14px;

    background: rgba(255, 253, 248, .98);

    border: 1px solid var(--line);

    border-top: 0;

    box-shadow: var(--shadow-soft);

    border-radius: 0 0 18px 18px;
  }

  .site-nav.open {
    display: flex;
  }

  .site-nav > a:not(.nav-button) {
    width: 100%;

    padding: 11px 13px;

    font-size: 13px;
  }

  .nav-button {
    width: 100%;

    margin: 8px 0 0;

    text-align: center;
  }

  .gallery-section {
    padding: 80px 0 85px;
  }

  .gallery-contact {
    padding: 80px 0;
  }

  .contact-grid {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .contact-copy {
    padding-right: 0;
  }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 700px) {

  .site-container {
    width: min(100% - 28px, 100%);
  }

  .site-logo {
    font-size: 15px;
  }

  .site-logo img {
    width: 40px;
    height: 40px;
  }

  .gallery-heading {
    margin-bottom: 35px;
  }

  .gallery-heading h1 {
    font-size: 2.4rem;
  }

  .gallery-heading p {
    font-size: 13px;
  }

  .masonry {
    column-count: 2;

    column-gap: 13px;
  }

  .masonry-item {
    margin-bottom: 13px;

    border-radius: 15px;
  }

  .masonry-item img {
    border-radius: 14px;
  }

  .gallery-contact iframe {
    height: 330px;
  }

  .footer-inner {
    flex-direction: column;

    text-align: center;
  }

}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 480px) {

  .topbar {
    font-size: 10px;
  }

  .gallery-section {
    padding: 60px 0 65px;
  }

  .gallery-heading h1 {
    font-size: 2.15rem;

    letter-spacing: -.8px;
  }

  .gallery-badge {
    font-size: 9px;

    padding: 7px 11px;
  }

  .masonry {
    column-count: 1;
  }

  .masonry-item {
    margin-bottom: 15px;

    border-radius: 18px;
  }

  .masonry-item img {
    border-radius: 17px;
  }

  .gallery-contact {
    padding: 65px 0;
  }

  .gallery-contact iframe {
    height: 300px;
  }

  .footer-links {
    gap: 18px;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

  .masonry-item,
  .masonry-item img,
  .site-nav,
  .nav-button {
    transition: none !important;
  }

}