:root{
  --mc-bg: #f6f8ff;              /* soft clinic background */
  --mc-surface: #ffffff;         /* cards / surfaces */
  --mc-text: #1b2330;            /* headings / body */
  --mc-text-dim: #5d6a7a;        /* secondary text */
  --mc-primary: #4eb1cb;         /* brand primary (new teal-blue) */
  --mc-primary-600:#3a91a7;      /* darker shade for hover/active */
  --mc-accent: #FF914D;          /* secondary accent (orange) */
  --mc-border: rgba(20, 30, 50, 0.08);
  --radius-xl: 24px;
  --radius-lg: 16px;
}

html,body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  color: var(--mc-text);
  background: var(--mc-bg);
}

.navbar-brand img,
.site-footer .navbar-brand img {
  height: 64px;     
  width: auto;      /* scales the right way */
}

.fw-700{font-weight:700}
.fw-800{font-weight:800}

/* Navbar */
.site-header .navbar{
  background: var(--mc-surface);
  border-bottom: 1px solid var(--mc-border);
  padding: .75rem 0;
}
.navbar-brand .brand-text{font-size:1.25rem}
.nav-link{font-weight:600}
.nav-link.active, .nav-link:focus, .nav-link:hover{color: var(--mc-primary)}
.navbar-toggler{border: none}
.phone{color: var(--mc-text); text-decoration: none}
.btn-appointment{
  background: var(--mc-primary);
  color:#fff;
  border:1px solid var(--mc-primary);
  border-radius:999px;
  padding:.55rem 1.05rem;
}
.btn-appointment:hover{background: var(--mc-primary-600); border-color: var(--mc-primary-600)}

/* Hero */
.hero{
  position: relative;
  padding: clamp(3rem, 6vw, 6rem) 0;
  overflow: hidden;
  background: linear-gradient(180deg, #f8f9ff 0%, #eef2ff 60%, #f6f8ff 100%);
}
.hero .display-4{line-height:1.05}
.accent{color: var(--mc-primary)}
.hero .lead{max-width: 56ch}
.hero-portrait img{width:100%; height:100%}
.hero-bg-gradient{
  position:absolute; inset:auto -20% -30% -20%;
  height:60%;
  background: radial-gradient(60% 60% at 80% 0%, rgba(76,111,255,.18) 0%, rgba(76,111,255,0) 60%),
              radial-gradient(40% 40% at 95% 15%, rgba(90,208,170,.18) 0%, rgba(90,208,170,0) 60%);
  pointer-events:none;
}

/* Sections */
.section{padding: clamp(3rem, 6vw, 5rem) 0}
.section-alt{background: var(--mc-surface)}
.section-head{margin-bottom: 2rem}

/* Cards */
.card.service-card{
  border: 1px solid var(--mc-border);
  border-radius: var(--radius-lg);
  background: var(--mc-surface);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.service-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20,30,50,.06);
}
.icon-wrap .icon{font-size: 1.5rem}
.card a{color: var(--mc-primary); text-decoration: none}
.card a:hover{text-decoration: underline}

/* CTA */
.cta{
  background: linear-gradient(90deg, rgba(76,111,255,.08), rgba(90,208,170,.08));
  border-top: 1px solid var(--mc-border);
  border-bottom: 1px solid var(--mc-border);
}

/* Footer */
.site-footer{
  background: var(--mc-surface);
  border-top: 1px solid var(--mc-border);
  padding: 2.5rem 0;
}
.site-footer a{color: var(--mc-text); text-decoration: none}
.site-footer a:hover{color: var(--mc-primary); text-decoration: underline}

/* Buttons */
.btn-primary{
  --bs-btn-bg: var(--mc-primary);
  --bs-btn-border-color: var(--mc-primary);
  --bs-btn-hover-bg: var(--mc-primary-600);
  --bs-btn-hover-border-color: var(--mc-primary-600);
  --bs-btn-active-bg: var(--mc-primary-600);
  --bs-btn-active-border-color: var(--mc-primary-600);
  border-radius: 999px;
  padding: .7rem 1.25rem;
}
.btn-outline-primary{
  --bs-btn-color: var(--mc-primary);
  --bs-btn-border-color: var(--mc-primary);
  --bs-btn-hover-bg: var(--mc-primary);
  --bs-btn-hover-border-color: var(--mc-primary);
  --bs-btn-hover-color: #fff;
  border-radius: 999px;
  padding: .7rem 1.25rem;
}

.site-header .navbar.sticky-top{
  position: fixed;   /* <-- this is the key change */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1030;
  background: var(--mc-surface);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Prevent overlap with the fixed navbar */
body{
  padding-top: 80px;
}

/* Utilities */
.ratio img.object-fit-cover{object-fit: cover}
.rounded-4{border-radius: var(--radius-xl) !important}

/* Dropdown tweaks */
.dropdown-menu{border-radius: 12px; border:1px solid var(--mc-border)}

/* Hero buttons override */
.hero .btn-primary {
  background-color: #FF914D;       
  border-color: #FF914D;
  color: #fff;
  border-radius: 6px;             
}

.hero .btn-primary:hover {
  background-color: #e57f3e;       
  border-color: #e57f3e;
}

.hero .btn-outline-primary {
  color: #FF914D;
  border-color: #FF914D;
  border-radius: 6px;             
}

.hero .btn-outline-primary:hover {
  background-color: #FF914D;
  color: #fff;
  border-color: #FF914D;
}

/* Add more spacing above hero buttons */
.hero .d-flex.gap-3 {
  margin-top: 1.5rem;  /* increase space above buttons */
}


.hero .btn {
  padding: 0.9rem 1.75rem;  
  font-weight: 600;
}

/* Slide the hero buttons downward */
.hero .hero-cta { 
  margin-top: 2.25rem;           
}

@media (min-width: 992px){       
  .hero .hero-cta { 
    margin-top: 3rem;            
  }
}

/* Header Appointment button */
.btn-appointment {
  background: #4eb1cb;     
  color: #fff;
  border: 1px solid #4eb1cb;
  border-radius: 6px;      
  padding: .55rem 1.05rem;
  font-weight: 600;
}

.btn-appointment:hover,
.btn-appointment:focus {
  background: #ffffff;     /* white background on hover */
  color: #4eb1cb;          /* primary blue text */
  border-color: #4eb1cb;   /* border matches primary blue */
}

.hero-doctor {
  max-width: 420px;      
  border-radius: 12px;   
  box-shadow: 0 8px 24px rgba(0,0,0,0.08); 
}

/* Composition container */
.hero-figure{
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* White rounded card prevents halo from showing on gradients */
.hero-card{
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 24px;
  padding: 16px 16px 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  max-width: 440px;
  width: 100%;
  overflow: hidden;     /* <— ensures nothing shows through the edges */
}


/* Doctor image */
.hero-doc{
  display: block;            
  width: 100%;
  height: auto;
}



/* Tighter layout on smaller screens */
@media (max-width: 991.98px){
  .hero-figure{ min-height: 340px; }
  .hero-card{ max-width: 360px; border-radius: 20px; }
  .hero-blob{ right: -4%; bottom: -8%; width: 112%; height: 58%; }
}

/* Remove the blue band in the hero */
.hero-bg-gradient { display: none; }

/* New: About split section */
.about-split { background: #f7f8ff; border-top: 1px solid var(--mc-border); }
.about-split .badge { letter-spacing: .2px; }

/* New: soft cards */
.about-card{
  background: #fff;
  border: 1px solid var(--mc-border);
  border-radius: 24px;
  padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
}

/* New: big rounded image */
.about-figure{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.10);
}
.about-img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* New: responsive tweaks */
@media (max-width: 991.98px){
  .about-split { background: var(--mc-surface); }
  .about-card{ border-radius: 20px; }
}