/* ============================================
   Dr. KKR Website - Layout
   Container, grid, header, footer, responsiveness
   ============================================ */

:root {
    /* Colors - Figma palette */
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #3b82f6;
    --color-dark: #0f172a;
    --color-dark-blue: #1e3a5f;
    --color-text: #334155;
    --color-text-muted: #64748b;
    --color-bg: #ffffff;
    --color-bg-light: #f8fafc;
    --color-bg-blue: #eff6ff;
    --color-border: #e2e8f0;
    --color-white: #ffffff;
    /* Typography */
    --font-sans: "public-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: var(--font-sans);
    --text-xs: 1rem; /* increased 14px -> 16px */
    --text-sm: 1.125rem; /* increased 16px -> 18px */
    --text-base: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-5xl: 3.75rem;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    /* Layout */
    --container-max: 1200px;
    --header-height: 72px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
/* ============================
   FORCE LOGO VISIBILITY RESET
=============================*/
* {
    font-family: 'Public Sans', sans-serif;
}

/* RESET */
.logo img{
  height: auto;
  width: auto;
  
    opacity:1 !important;
    visibility:visible !important;
}
.site-header {
    background: #ffffff;
}
.site-header.gradient-header {
    background: linear-gradient(270deg, #1946DA 0.36%, #7BA1CD 99.64%);
}
/* Default (white pages) */
.logo-dark {
    display: block;
}

.logo-white {
    display: none;
}

/* Gradient pages */
.site-header.gradient-header .logo-dark {
    display: none;
}

.site-header.gradient-header .logo-white {
    display: block;
}

/* Default = WHITE HEADER */
.logo-dark{
    display:block !important;
}

.logo-white{
    display:none !important;
}

/* GRADIENT HEADER */
.site-header.gradient-header{
    background: linear-gradient(270deg, #1946DA 0.36%, #7BA1CD 99.64%);
}

.site-header.gradient-header .logo-dark{
    display:none !important;
}

.site-header.gradient-header .logo-white{
    display:block !important;
}


@media (max-width: 768px) {
    .logo img {
        height: 52px;
    }
}

.container {
    width: 100%;
    height: auto;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

@media (min-width: 768px) {
    .container {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }
}


/* Header / Navbar */

.site-header {
    margin-top: 35px;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: transparent;
    box-shadow: none;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    width: 100%;
    max-width: none; /* allow full-width navbar */
    margin: 0; /* stretch to edges */
    padding: 0 var(--space-6);
    gap: var(--space-6);
    
}

.navbar .logo {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-dark-blue);
    white-space: nowrap;
}

.navbar .nav-links {
    display: none;
}

@media (min-width: 768px) {
    .navbar .nav-links {
        display: flex;
        align-items: center;
        gap: var(--space-8);
    }
}

.navbar .nav-links a {
    font-weight: var(--font-light);
    color: var(--color-text);
    transition: all 0.2s;
    position: relative;
    padding-bottom: 4px;
}
.site-header.gradient-header .navbar .nav-links a {
    color: var(--color-white);
    transition: all 0.2s;

}

.navbar .nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}
.site-header.gradient-header.navbar .nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width 0.3s ease;
}

.navbar .nav-links a:hover::after,
.navbar .nav-links a.active::after {
    width: 100%;
}

.navbar .nav-links a:hover,
.navbar .nav-links a.active {
    color: var(--color-black);
}
/* .site-header.gradient-header .navbar .nav-links a:hover, */
.site-header.gradient-header .navbar .nav-links a.active {
    color: var(--color-primary);
}

.navbar .btn-primary {
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    white-space: nowrap;
}
/* .navbar .nav-links a:hover, */
.navbar .btn-primary{
    transform: scale(1.05);
    color: white;
    border: 1px solid white;
} 

@media (max-width: 768px) {
    .navbar .btn-primary {
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-sm);
    }
}


/* Mobile menu toggle */

.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-dark);
    transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 768px) {
    .nav-toggle {
        display: none;
    }
}


/* Mobile nav overlay */

.nav-mobile {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white);
    padding: var(--space-6);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
}

.nav-mobile.is-open {
    transform: translateX(0);
}

.nav-mobile .nav-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    font-size: var(--text-lg);
}

.nav-mobile .nav-links a {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.nav-mobile .btn-primary {
    margin-top: var(--space-6);
    width: 100%;
}

@media (min-width: 768px) {
    .nav-mobile {
        display: none;
    }
}


/* Footer */

.site-footer {
    background: var(--color-bg-blue);
    color: var(--color-text);
    min-height: 250px;
}

.footer-top {
    padding: var(--space-12) 0;
}

.footer-logo {
    margin-top: var(--space-4);
}

.footer-logo img {
    height: 56px;
    width: auto;
}

@media (max-width: 768px) {
    .footer-logo img {
        height: 48px;
    }
}

.footer-embed {
    display: none;
}

.footer-top .container {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .footer-top .container {
        grid-template-columns: 1fr auto auto;
        align-items: start;
        gap: var(--space-12);
    }
}

.footer-heading {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-dark-blue);
    margin-bottom: var(--space-4);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    line-height: 1.4;
}

.footer-links a:hover {
    color: var(--color-primary);
}

.footer-cta .btn-primary {
    margin-top: var(--space-4);
}

.footer-social {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #1946DA;
    
    transition: background-color 0.2s;
}

.footer-social a:hover {
    background: var(--color-primary-dark);
}

.footer-bottom {
    padding: var(--space-4) 0;
    background: var(--color-dark-blue);
  
}

.footer-bottom .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom .container {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.footer-bottom a {
    color: var(--color-white);
    opacity: 0.9;
}

.footer-bottom a:hover {
    opacity: 1;
}

.footer-map {
    padding: var(--space-8) 0;
    background: var(--color-bg-light);
}

.map-wrapper {
    max-width: 100%;
    margin: 0 auto;
}

.map-wrapper iframe {
    width: 100%;
    height: 300px;
    border-radius: var(--radius-lg);
    border: none;
}


/* Grid utilities */

.section {
    padding: var(--space-12) 0;
}

@media (min-width: 768px) {
    .section {
        padding: var(--space-16) 0;
    }
}

.section-title {
    text-align: center;
    margin-bottom: var(--space-10);
}

.section-title h2 {
    margin-bottom: var(--space-3);
    font-size: var(--text-2xl);
}

.section-title p {
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto;
    font-size: var(--text-base);
}

@media (min-width: 768px) {
    .section-title h2 {
        font-size: var(--text-3xl);
    }
    .section-title p {
        font-size: var(--text-lg);
    }
}

.grid-3 {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.grid-2 {
    display: flex;
    flex-direction: row;
    text-align: start;
    gap: var(--space-8);
    grid-template-columns: 1fr;
    width: 1300px;
    margin-left: 10px;
    align-items: flex-start;
}

@media (min-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr 1fr;
        align-items: flex-start;
        gap: var(--space-12);
    }
}

.grid-4 {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-12);
    }
}

@media (min-width: 1024px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-12);
    }
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}


/* ================================
   HIDE HERO IMAGES ON MOBILE
================================ */
/* ================================
   MOBILE RESPONSIVE FIXES
================================ */

@media (max-width: 768px) {

  /* Global */
  body {
    overflow-x: hidden;
  }

  .container {
    padding: 0 16px;
  }

  h1 {
    font-size: 26px;
    line-height: 1.25;
  }

  h2 {
    font-size: 22px;
  }

  p {
    font-size: 15px;
  }

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

  /* Hide all hero images & big hero card */
  .hero-home img,
  .hero-section-card {
    display: none !important;
  }

  /* Stack & center hero text */
  .hero-home .container > div {
    flex-direction: column !important;
    text-align: center;
  }

  .hero-title {
    padding: 40px 0 20px;
  }

  .hero-title h1 {
    margin-bottom: 12px;
  }

  /* Remove empty spacing */
  .hero-home {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* ================= GRID FIXES ================= */

  /* AREAS OF EXPERTISE GRID */
  .social-grid {
    grid-template-columns: 1fr !important;
  }

  /* STATS BLUE SECTION */
  section[style*="background:#dfefff"] img {
    position: static !important;
    display: block;
    margin: 20px auto 0;
    width: 200px;
  }

  section[style*="background:#dfefff"] > div > div {
    padding: 35px 22px !important;
  }

  /* PATIENT CARE GRID */
  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* ================= TESTIMONIAL ================= */

  .testimonial-content {
    flex-direction: column;
    text-align: center;
  }

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

  #floating-actions {
    right: 15px;
    bottom: 90px;
  }

  #whatsappBtn {
    left: 15px;
    bottom: 20px;
  }

  /* ================= COOKIE BOX ================= */

  #cookie-box {
    width: 90%;
    right: 5%;
    bottom: 10px;
  }

}
/* ================================
   MOBILE HEADER FIX
================================ */
@media (max-width: 768px){

  header .container,
  .header-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:12px 16px !important;
  }

  .logo img{
    max-width:140px !important;
    height:auto !important;
  }

  .menu-toggle,
  .hamburger{
    font-size:26px;
  }

  /* Hide desktop book button */
  .header-cta{
    display:none !important;
  }

}

/* ================================
   DOCTOR IMAGE MOBILE FIX
================================ */
@media (max-width: 768px){

  section[style*="background:#dfefff"] img{
    width:220px !important;
    max-width:90%;
    margin:20px auto 0 !important;
    display:block !important;
    position:static !important;
  }

}
/* =====================================
   FIX DOCTOR IMAGE OVERLAP (MOBILE ONLY)
===================================== */
@media (max-width: 768px){

  /* Target ONLY the light-blue section */
  section[style*="background:#dfefff"] {
    padding-bottom: 40px !important;
  }

  /* Hide doctor image on mobile */
  section[style*="background:#dfefff"] > div > img {
    display: none !important;
  }

  /* Center & clean text content */
  section[style*="background:#dfefff"] h2,
  section[style*="background:#dfefff"] p {
    text-align: center;
  }

  /* Stack stats nicely */
  section[style*="background:#dfefff"] div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 20px !important;
    align-items: center;
    text-align: center;
  }

}
/* =====================================
   FORCE HIDE DOCTOR IMAGE (MOBILE ONLY)
===================================== */
@media (max-width: 768px){

  /* Force-hide the floating doctor image */
  img[src*="node-98"] {
    display: none !important;
    visibility: hidden !important;
  }

}
/* =====================================
   FIX BLUE CARD CONTENT ALIGNMENT (MOBILE)
===================================== */
@media (max-width: 768px){

  /* Target the light-blue card */
  section[style*="background:#dfefff"] > div > div {
    padding: 40px 24px !important;
    min-height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Keep all text inside card */
  section[style*="background:#dfefff"] h2,
  section[style*="background:#dfefff"] p {
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Stack stats properly */
  section[style*="background:#dfefff"] div[style*="display:flex"] {
    flex-direction: row !important;
    justify-content: space-around !important;
    gap: 20px !important;
    margin-top: 30px;
  }

  /* Ensure section itself doesn't overflow */
  section[style*="background:#dfefff"] {
    overflow: hidden;
  }

}
/* =====================================
   HIDE DECORATIVE SECTION IMAGES (MOBILE)
===================================== */
@media (max-width: 768px){

  .deco-img,
  .deco-cube,
  .deco-wave,
  .deco-large {
    display: none !important;
  }

}
@media (max-width: 768px){

  * {
    max-width: 100vw;
  }

  body {
    position: relative;
  }

}
/* =========================================
   FORCE BLUE CARD TEXT TO FIT (MOBILE ONLY)
========================================= */
@media (max-width: 768px){

  /* Lock blue card width */
  section[style*="background:#dfefff"]{
    width: 100% !important;
  }

  section[style*="background:#dfefff"] > div{
    max-width: 100% !important;
  }

  section[style*="background:#dfefff"] > div > div{
    padding: 28px 20px !important;
    min-height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Heading */
  section[style*="background:#dfefff"] h2{
    font-size: 20px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  /* Paragraph */
  section[style*="background:#dfefff"] p{
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    word-break: break-word !important;
  }

  /* Stats numbers */
  section[style*="background:#dfefff"] h3{
    font-size: 28px !important;
  }

  /* Stats wrapper */
  section[style*="background:#dfefff"] div[style*="display:flex"]{
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

}
/* =====================================
   REDUCE BLUE CARD SIDE PADDING (MOBILE)
===================================== */
@media (max-width: 768px){

  section[style*="background:#dfefff"] > div > div{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

}
/* =====================================
   REMOVE EMPTY WHITE SPACE (MOBILE)
===================================== */
@media (max-width: 768px){

  section{
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }

  .hero-home,
  .section,
  .section-areas-expertise,
  .testimonials-section{
    min-height: auto !important;
    height: auto !important;
  }

}
/* =====================================
   FOOTER MOBILE CENTER ALIGNMENT
===================================== */
@media (max-width: 768px){

  footer,
  footer *{
    text-align: center !important;
  }

  footer .container{
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  /* Book appointment button */
  footer .btn{
    margin: 20px auto;
  }

  /* Quick links spacing */
  footer ul{
    padding:0;
    margin:15px 0;
  }

  footer li{
    list-style:none;
    margin:8px 0;
  }

}
@media (max-width: 768px){

  .footer-social,
  .social-icons{
    margin-top: 25px !important;
    margin-bottom: 15px !important;
  }

}
@media (max-width: 768px){

  footer::after{
    content:"drkrishnakiran.com";
    display:block;
    margin-top:15px;
    font-size:13px;
    color:#777;
  }

}
/* =========================================
   FINAL FIX: BLUE CARD LEFT ALIGN + NO X SCROLL
========================================= */
@media (max-width: 768px){

  /* Kill any horizontal scroll globally */
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Fix outer wrapper causing offset */
  section[style*="background:#dfefff"] > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* Force blue card fully left-aligned */
  section[style*="background:#dfefff"] > div > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure text never pushes width */
  section[style*="background:#dfefff"] h2,
  section[style*="background:#dfefff"] p {
    max-width: 100% !important;
    word-break: break-word !important;
  }

}
/* =====================================
   SHOW FOOTER SOCIAL ICONS (MOBILE)
===================================== */
@media (max-width: 768px){

  .footer-social,
  .social-icons,
  footer .social,
  footer .icons{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 18px;
    margin-top: 25px;
    margin-bottom: 20px;
  }

  .footer-social img,
  .social-icons img{
    width: 28px;
    height: auto;
  }

}
/* =====================================
   GLOBAL MOBILE SAFETY
===================================== */
@media (max-width: 768px){
  html, body{
    width:100%;
    overflow-x:hidden !important;
  }

  img{
    max-width:100% !important;
    height:auto !important;
  }

  .container{
    max-width:100% !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
}
/* =====================================
   FOOTER LINK HOVER EFFECT
===================================== */

.site-footer a{
  color:#1946DA;
  text-decoration:none;
  transition:all 0.5s ease;
}

/* Hover animation */
.site-footer a:hover{
  color:#1a4fd8;
  padding-left:6px;

}

/* Optional underline */
/* .site-footer a::after{
  content:"";
  display:block;
  width:0%;
  height:2px;
  background:#1a4fd8;
  transition:width 0.3s ease;
} */

.site-footer a:hover::after{
  width:100%;
}
/* =====================================
   AREAS OF EXPERTISE - RECTANGLE CARDS
===================================== */

/* Card image container */
.blog-card .blog-image,
.expertise-card .card-image{
  width:100%;
  height:200px;           /* rectangle height */
  overflow:hidden;
  border-radius:12px 12px 0 0;
}

/* Image inside card */
.blog-card .blog-image img,
.expertise-card .card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* =====================================
   FOOTER HEADING LEFT LINE
===================================== */

.site-footer h4{
  position:relative;
  padding-left:14px;
  font-weight:700;
  color:#1a4fd8;
}

/* Vertical line */
.site-footer h4::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:4px;
  height:18px;
  background:#1a4fd8;
  border-radius:2px;
}
/* =====================================
   ABOUT SECTION – MOBILE LAYOUT FIX
===================================== */

@media (max-width: 768px) {

  /* Wrapper (blue card) */
  .about-highlight,
  .about-section,
  .about-card,
  section[style*="#dfefff"] {
    padding: 28px 20px !important;
    border-radius: 28px !important;
    overflow: hidden;
  }

  /* Title */
  .about-section h2,
  .about-card h2 {
    font-size: 22px !important;
    line-height: 1.3;
    margin-bottom: 20px;
  }

  /* Stats container */
  .about-stats,
  .stats-grid {
    display: flex !important;
    justify-content: space-between;
    margin: 24px 0;
    gap: 20px;
  }

  /* Each stat */
  .about-stat h3,
  .stats-grid h3 {
    font-size: 34px !important;
    margin: 0;
  }

  .about-stat p,
  .stats-grid p {
    font-size: 16px;
    margin-top: 4px;
  }

  /* Doctor image */
  .about-image,
  .doctor-image,
  section[style*="#dfefff"] img {
    position: static !important;
    display: block;
    margin: 30px auto 0;
    width: 85% !important;
    max-width: 320px;
  }

  /* Remove any absolute positioning */
  .about-image img {
    position: static !important;
  }

  /* Kill X scroll */
  body {
    overflow-x: hidden;
  }
}
/* ======================================
   ABOUT SECTION – MOVE TEXT DOWN (MOBILE)
====================================== */

@media (max-width:768px){

  /* push all content downward */
  section[style*="#dfefff"] > div{
    padding-top: 40px !important;
  }

  /* reduce title size slightly */
  section[style*="#dfefff"] h2{
    margin-top: 20px !important;
    font-size: 22px !important;
    line-height: 1.3;
  }

  /* spacing below paragraph */
  section[style*="#dfefff"] p{
    margin-top: 14px !important;
  }

}
/* ===============================
   LOGO COLOR SWITCH
================================ */

/* Default */


/* Size consistency */
/* .site-logo{
  height:60px;
} */
/* Box sizing fix */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent horizontal scroll */
html, body {
  width: 100%;
  overflow-x: hidden;
}

/* Better font scaling */
body {
  font-size: 16px;
  line-height: 1.6;
}
header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #ffffff;
}

/* Logo clickable */
.logo {
  cursor: pointer;
}

/* Navigation spacing */
nav ul {
  display: flex;
  gap: 20px;
}

/* Mobile menu */
@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    padding: 20px;
  }
}
.hero {
  min-height: auto;        /* let content define height */
  height: auto;
  display: flex;
  align-items: center;
  padding: 80px 20px;      /* visual spacing instead of vh */
}


.hero h1 {
  font-size: clamp(1.8rem, 4vw, 3rem);
}

.hero p {
  max-width: 600px;
}

@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    text-align: center;
  }
}
button,
.btn {

  border: 1px solid white;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s ease;
}

button:hover,
.btn:hover {
  transform: scale(1.05);
color: white;}

/* Mobile tap size */
@media (max-width: 768px) {
  button,
  .btn {
    width: 100%;
  }
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.about-content {
  max-width: 900px;
  margin: auto;
  padding: 20px;
}

.about-content p {
  margin-bottom: 15px;
}
.testimonial {
  max-width: 700px;
  margin: auto;
  padding: 20px;
}

.testimonial p {
  word-wrap: break-word;
}
form input,
form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

form input:focus,
form textarea:focus {
  border-color: #0077ff;
  outline: none;
}
footer {
  padding-top: 40px;
  text-align: left;
}

footer .social-icons a {
  font-size: 22px;
  margin: 0 10px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a:focus,
button:focus,
input:focus {
  outline: 2px solid #0077ff;
  outline-offset: 2px;
}
body {
  color: #222;
}

/* section {
  background: #ffffff;
} */
/* Card container */
.service-card {
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

/* Hidden content */
.service-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: 
    max-height 0.7s ease-in-out,
    opacity 0.5s ease-in-out,
    padding 0.3s ease;
  padding: 0 20px;
}

/* When card is active */
.service-card.active .service-content {
  max-height: 600px;   /* enough to fit content */
  opacity: 1;
  padding: 20px;
}
@media(max-width:576px){
  .footer-bottom-inner{
    flex-direction:column;
    text-align:center;
  }
}
hr {
    display: none;
}
.footer-social-wrap,
.footer-social-wrap * {
    border: none !important;
}

.footer-social-wrap::before,
.footer-social-wrap::after {
    display: none !important;
}
.footer-bottom{
    border:none !important;
}
.footer-social-wrap {
    border-top: 1px solid #ddd;
}
.footer-social-wrap,
.footer-top {
    border-top: none !important;
}
.footer-divider{
    border: none;
    border-top: 1px solid #ddd;
    margin: 20px 0;
}
.footer-social-wrap,
.footer-top {
    border-top: none !important;
}
/* ===== FOOTER DIVIDER FIX ===== */

/* Remove top line above social icons */
.footer-social-wrap,
.footer-top{
    border-top: none !important;
}

/* Remove any automatic footer borders */
.site-footer .footer-bottom{
    border-top: none !important;
}

/* Enable ONLY copyright divider */
.footer-divider{
    display:block !important;
    height:1px;
    background:#ddd;
    border:none;
    width:100%;
    margin:20px 0;
}

/* Allow hr everywhere */
hr{
    display:block !important;
}
.logo-alt{
  display:none;
}
/* Show by default */


/* Hide on white background */
.white-bg .logo-white {
  display: none;
}

/* Show on dark background */
.treatment-page-bg .logo-white {
  display: block;
}
.logo-white {
    display: none;
}

.treatment-page-bg .logo-white {
    display: block;
}

#book-treatment{
  color: white;
}


@media (max-width: 768px) {

  .testimonial-prev,
  .testimonial-next {
    bottom: -25px;   /* move outside card */
  }

  .testimonial-content {
    padding-bottom: 60px;
  }

}
/* Prevent zoom white gaps anywhere */
section,
.hero,
.hero-home {
  height: auto !important;
  min-height: auto !important;
}
/* ============================
   HERO MOBILE FIX
   ============================ */
@media (max-width: 768px) {

  /* Hide 20,000+ blue card */
  .hide-on-mobile {
    display: none !important;
  }

  /* Stack hero title & images vertically */
  .hero-home .container > div {
    flex-direction: column !important;
    text-align: center;
  }

  /* Make hero side images smaller */
  .hero-home img.deco-large {
    width: 160px;
    max-width: 90%;
    height: auto;
  }

  /* Full-width hero main image */


  .hero-cta-content img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
  }

  /* Better spacing for title */
  .hero-title h1 {
    font-size: 26px;
    line-height: 1.3;
  }

  .hero-title p {
    font-size: 15px;
  }
}
@media (max-width: 768px) {
  .hero-home {
    padding-top: 30px;
    padding-bottom: 40px;
  }
}


/* Hide blue 20,000+ card on mobile */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}


/* ============================
   PROFILE HERO MOBILE FIX
   ============================ */
@media (max-width: 768px) {

  /* Hide hero image */
  .profile-hero-img {
    display: none !important;
  }

  /* Make hero single column */
  .hero .grid-2 {
    grid-template-columns: 1fr !important;
  }

  /* Center text nicely */
  .hero h3 {
    font-size: 26px;
    line-height: 1.3;
    text-align: center;
  }

  .hero p {
    text-align: center;
    font-size: 15px;
  }
}
@media (max-width: 768px){
  .hero {
    padding-top: 30px;
    padding-bottom: 40px;
  }
}



/* ===================================
   PROFILE PAGE – MOBILE EXPERTISE FIX
   Same as Home Page Style
   =================================== */
@media (max-width: 768px) {

  /* Wrapper */
  .expertise-carousel-wrapper {
    position: relative;
    margin-left: 0 !important;
  }

  /* Viewport becomes scrollable */
  .expertise-viewport {
    overflow-x: auto;
    scroll-behavior: smooth;
  }

  /* Track horizontal */
  .expertise-track {
    display: flex;
    gap: 18px;
    width: max-content !important;
  }

  /* Card same style as home */
  .expertise-card {
    min-width: 260px !important;
    background: #f9fbff;
    border-radius: 14px;
    padding: 14px;
    height: auto !important;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  }

  .expertise-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 12px;
  }

  .expertise-card h3 {
    font-size: 16px !important;
    margin-top: 12px;
    margin-bottom: 10px;
  }

  .expertise-card .btn {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 20px;
  }

  /* Arrow buttons */
  .exp-btn {
    display: flex !important;
    width: 40px;
    height: 40px;
    font-size: 18px;
    position: absolute;
    top: 40%;
    z-index: 10;
  }

  .prev-btn { left: -10px; }
  .next-btn { right: -10px; }

}


/* =====================================
   MOBILE ONLY – AREAS OF EXPERTISE CARDS
   ===================================== */
@media (max-width: 768px) {

  .expertise-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 90% !important;
    height: auto !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    border: 1px solid #eef2ff;
  }

  /* Text side */
  .expertise-card .card-content {
    width: 65% !important;
  }

  .expertise-card h3 {
    font-size: 18px !important;
    line-height: 1.3;
    margin-bottom: 10px;
    color: #0b2a55 !important;
  }

  /* Button */
  .expertise-card .btn {
    padding: 7px 18px;
    font-size: 13px;
    border-radius: 20px;
  }

  /* Image side */
  .expertise-card img {
    width: 70px !important;
    opacity: 0.9;
  }

  /* Carousel alignment */
  .expertise-carousel-wrapper {
    margin-left: 0 !important;
  }

  /* Arrow buttons */
  .exp-btn {
    display: flex !important;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

}
@media (max-width:768px){
  .expertise-viewport{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}