.bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
 background: rgba(12, 27, 42, 1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 0;
  box-shadow: 0 -5px 20px rgba(0,0,0,0.08); 
  z-index: 999;
}

.menu-item {
  text-decoration: none;
  color: #00c9a7;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  transition: 0.3s;
}

.menu-item i {
  font-size: 20px; 
}

.menu-item.active,
.menu-item:hover {
  color: rgba(255, 255, 255, 0.8);
  transform: translateY(-3px);
}
.server-tile-scroll{ overflow: auto; display: none;}
.splash-screen { display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: #0d1b2a;
    z-index: 9999;
    display:inline-block;
    /* justify-content: center; */
    /* align-items: center; */    padding-top: 45%;
    transition: opacity 0.8s ease, visibility 0.8s ease;
  }
   .splash-screen h4{    margin: 15%;    text-align: center;}
 .splash-screen .logos{ width: 100%;    margin: 15%;     display: flex;    align-items: center;    gap: 12px;}
 .splash-screen  .logo-name{ font-size: 25px;}

  /* Hide class */
  .splash-screen.hide {
    opacity: 0;
    visibility: hidden;
  }

  /* Logo animation */
  .logos {
    width: 180px;
    animation: zoomFade 2s ease-in-out infinite;
  }

  @keyframes zoomFade {
    0% {
      transform: scale(0.8);
      opacity: 0;
    }
    50% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(1.1);
      opacity: 0.8;
    }
  }
 
  

/* ============================================================
   RESPONSIVE  — desktop layout is untouched
   ============================================================ */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .doctor-inner        { grid-template-columns: 1fr; }
  .doctor-img-wrap     { max-width: 500px; margin-inline: auto; }
  .faq-inner           { grid-template-columns: 1fr; gap: 36px; }
  .footer-main         { grid-template-columns: 1fr 1fr; gap: 36px; }
  /* sub-dropdown flips LEFT on narrow desktop so it doesn't clip */
  .sub-dropdown        { left: auto; right: 100%; margin-left: 0; margin-right: 6px; transform: translateX(8px); }
  .has-sub:hover > .sub-dropdown,
  .dropdown-item:hover > .sub-dropdown { transform: none; }
}

/* ── Tablet portrait + large phones (≤ 768px) — web-app feel ── */
@media (max-width: 768px) {

  /* Root */
  :root {
    --header-h: 62px;
    --radius:   16px;
  }

  /* ── Header: slim app bar ── */
  .nav, .header-cta  { display: none; }
  .hamburger         { display: flex; }
  .mobile-nav        { display: flex; }

  .logo-icon         { width: 40px; height: 40px; font-size: 1.1rem; border-radius: 10px; }
  .logo-name         { font-size: 1.05rem; }
  .logo-tagline      { display: none; }

  /* ── Mobile nav drawer: polished sheet ── */
  .mobile-nav {
    padding: 16px 16px 40px;
    gap: 2px;
    border-top: 1px solid var(--border);
  }
  .mob-link {
    padding: 14px 18px;
    font-size: 1rem;
    border-radius: 13px;
    border: 1px solid transparent;
  }
  .mob-link:active  { background: var(--primary-light); color: var(--primary); }
  .mob-submenu      { padding-left: 8px; gap: 2px; }
  .mob-sub-link     { font-size: .92rem; padding: 11px 18px; border-radius: 10px; }
  /* Chevron rotation when submenu is open */
  .mob-chevron.open { transform: rotate(180deg); }

  /* Book appointment btn in drawer */
  .mobile-nav .btn-primary {
    border-radius: 13px;
    padding: 14px 20px;
    font-size: .95rem;
    margin-top: 14px;
  }

  /* ── Hero: card anchored to bottom ── */
  .hero {
    min-height: 100svh;
    align-items: flex-end;
    padding-bottom: 90px;   /* stat bar height */
  }
  .hero-content {
    max-width: 100%;
    background: rgba(5,18,40,.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 20px;
    padding: 26px 22px 22px;
    margin-bottom: 6px;
  }
  .hero-badge    { font-size: .72rem; padding: 6px 14px; margin-bottom: 16px; }
  .hero-title    { font-size: clamp(1.9rem, 6vw, 2.8rem); margin-bottom: 18px; }
  .hero-bullets  { gap: 8px; margin-bottom: 22px; }
  .hero-bullets li { font-size: .93rem; }
  .hero-ctas     { gap: 10px; }
  .hero-ctas .btn {
    flex: 1 1 140px; justify-content: center;
    font-size: .9rem; padding: 12px 18px;
  }

  /* Stat bar */
  .hero-stat-bar {
    background: rgba(5,18,40,.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255,255,255,.10);
  }
  .hero-stats { gap: 0; padding: 10px 0; }
  .stat {
    padding: 6px 14px;
    border-right: 1px solid rgba(255,255,255,.10);
  }
  .stat:last-child { border-right: none; }
  .stat-num   { font-size: 1.45rem; }
  .stat-label { font-size: .65rem; }

  /* ── Sections: tighter vertical rhythm ── */
  .services      { padding: 60px 0; }
  .doctor        { padding: 60px 0; }
  .reviews       { padding: 60px 0; }
  .video-section { padding: 60px 0; }
  .blog          { padding: 60px 0; }
  .faq           { padding: 60px 0; }

  /* ── Services: 2-col grid ── */
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .service-card  { padding: 24px 18px; }
  .svc-icon      { width: 48px; height: 48px; font-size: 1.3rem; margin-bottom: 14px; }
  .svc-title     { font-size: 1.05rem; }
  .svc-desc      { font-size: .85rem; }

  /* ── Doctor ── */
  .doctor-img-wrap { max-width: 420px; }

  /* ── Reviews: 2-col ── */
  .reviews-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .review-card  { padding: 20px; }

  /* ── Video: 1-col ── */
  .video-grid { grid-template-columns: 1fr; gap: 20px; }

  /* ── Blog: 2-col ── */
  .blog-grid   { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .blog-header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }

  /* ── FAQ ── */
  .faq-q { padding: 16px 18px; font-size: .92rem; }
  .faq-a, .faq-item.open .faq-a { padding-inline: 18px; }

  /* ── Footer ── */
  .footer-main   { grid-template-columns: 1fr 1fr; gap: 32px; padding: 44px 0 36px; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }

  /* ── CTA band ── */
  section[aria-label="Book appointment call to action"] { padding: 48px 0; }
}

/* ── Mobile (≤ 480px) — native app feel ── */
@media (max-width: 480px) {

  :root { --header-h: 58px; }

  .container  { width: 92%; }
  .logo-name  { font-size: .98rem; }

  /* ── Hero: full-bleed, content card ── */
  .hero          { padding-bottom: 15px; }
  .hero-content  { border-radius: 16px; padding: 20px 16px 18px; }
  .hero-badge    { font-size: .68rem; padding: 5px 12px; margin-bottom: 12px; }
  .hero-title    { font-size: clamp(1.65rem, 7.5vw, 2.2rem); margin-bottom: 14px; }
  .hero-bullets  { gap: 7px; margin-bottom: 18px; }
  .hero-bullets li { font-size: .88rem; }

  /* CTA buttons — full width stacked */
  .hero-ctas     { flex-direction: column; gap: 10px; }
  .hero-ctas .btn {
    width: 100%; justify-content: center;
    padding: 14px 20px; font-size: .85rem; border-radius: 14px;
  }

  /* Stat bar — 2 × 2 grid */
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0; gap: 0;
  }
  .stat {
    padding: 12px 8px;
    border-right:  1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .stat:nth-child(even)           { border-right: none; }
  .stat:nth-child(3),.stat:nth-child(4) { border-bottom: none; }
  .stat-num   { font-size: 1.55rem; }
  .stat-label { font-size: .67rem; }

  /* ── Sections ── */
  .services      { padding: 15px 0; }
  .doctor        { padding: 15px 0; }
  .reviews       { padding: 15px 0; }
  .video-section { padding: 15px 0; }
  .blog          { padding: 15px 0; }
  .faq           { padding: 15px 0; }

  .section-title { font-size: clamp(1.55rem, 6vw, 2rem); }
  .section-sub   { font-size: .95rem; }

  /* ── Services: single col app cards ── */
  .services-grid { grid-template-columns: 1fr; gap: 14px; }
  .service-card  { padding: 20px 18px; border-radius: 16px; }
  .svc-icon      { width: 46px; height: 46px; border-radius: 12px; font-size: 1.2rem; }

  /* ── Doctor ── */
  .doctor-img-wrap { max-width: 100%; border-radius: 16px; }
  .doctor-img-wrap img { aspect-ratio: 3/2; border-radius: 16px; }
  .doc-badge        { bottom: 14px; left: 14px; padding: 9px 13px; border-radius: 10px; }
  .doc-badge-num    { font-size: 1.2rem; }
  .chip             { font-size: .75rem; padding: 5px 12px; }
  .doc-bio          { font-size: .92rem; }

  /* ── Reviews: single col ── */
  .reviews-grid { grid-template-columns: 1fr; gap: 14px; }
  .review-card  { padding: 18px; border-radius: 14px; }

  /* ── Video: single col ── */
  .video-grid { grid-template-columns: 1fr; gap: 16px; }

  /* ── Blog: single col ── */
  .blog-grid   { grid-template-columns: 1fr; gap: 16px; }
  .blog-header { margin-bottom: 24px; }
  .blog-body   { padding: 18px; }

  /* ── FAQ ── */
  .faq-inner { gap: 24px; }
  .faq-item  { border-radius: 14px; }
  .faq-q     { padding: 15px 16px; font-size: .9rem; }
  .faq-a, .faq-item.open .faq-a { padding-inline: 16px; font-size: .87rem; }

  /* ── Footer ── */
  .footer-main           { grid-template-columns: 1fr; gap: 28px; padding: 36px 0 28px; }
  .footer-bottom         { flex-direction: column; text-align: center; }
  .footer-bottom-links   { flex-wrap: wrap; justify-content: center; gap: 14px; }
  .social-btn            { width: 42px; height: 42px; font-size: 1.05rem; }

  /* ── CTA band ── */
  section[aria-label="Book appointment call to action"] { padding: 40px 0; }
  section[aria-label="Book appointment call to action"] > .container > div { flex-direction: column; }
  section[aria-label="Book appointment call to action"] .btn {
    width: 100%; justify-content: center; border-radius: 14px;
  }

  /* ── WhatsApp FAB ── */
  .whatsapp-float { width: 50px; height: 50px; font-size: 1.45rem; bottom: 20px; right: 18px; }
}

/* ================================
   MOBILE MENU IMPROVEMENT (APP UI)
   ================================ */

@media (max-width: 768px) {

  /* Overlay background */
  .mobile-nav::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease;
  }

  .mobile-nav.open::before {
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer style (right slide panel) */
  .mobile-nav {
    width: 85%;
    max-width: 320px;
    right: 0;
    left: auto;
    top: 0;
    height: 100vh;
    border-top: none;
    border-left: 1px solid var(--border);
    box-shadow: -10px 0 40px rgba(0,0,0,0.12);
    border-radius: 18px 0 0 18px;

    transform: translateX(100%);
  }

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

  /* Menu items spacing */
  .mob-link {
    padding: 16px 18px;
    font-size: 1rem;
    border-radius: 12px;
  }

  /* Submenu animation */
  .mob-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .mob-submenu.open {
    max-height: 500px;
  }

  /* Sub links */
  .mob-sub-link {
    padding: 12px 18px;
    font-size: 0.9rem;
  }

  /* Active touch feedback */
  .mob-link:active,
  .mob-sub-link:active {
    transform: scale(0.98);
  }

  /* Smooth hamburger animation feel */
  .hamburger {
    z-index: 1100;
  }
} 

/* Default (Desktop) */
.footer-content {
  display: block;
}

.toggle-icon {
  display: none;
}

/* Mobile Only */
@media (max-width: 768px) {
  .footer-toggle { margin:0rem 1rem 0rem 0;   margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }

  .toggle-icon {
    display: inline-block;
    font-size: 18px;
    transition: transform 0.3s ease;
  }

  .footer-content {
    display: none;
    margin-top: 10px;
  }

  .footer-toggle.active + .footer-content {
    display: block;
  }

  .footer-toggle.active .toggle-icon {
    transform: rotate(45deg); /* + becomes × */
  }
}
 
@media only screen and (min-width: 320px) and (max-width: 480px) { 
  .carousel-control-prev { left: 0%!important; opacity: 0!important; }
 .carousel-control-next { right: 0%!important; opacity: 0!important;}
 /* .site-header {background: rgba(5, 18, 40, .58);    border-bottom: none;} */
 .logo-name{ color: #fff;}
 .container {        width: 100%;    }
 .hero-content{ margin:10px 0px 0px 0px;}
 .hero-badge {        font-size: .60rem;        padding: 5px 12px;     }
 .hero-bullets{ padding: 0px;}
    .whatsapp-float{ bottom:70px;}
    .hero{ min-height: auto;}
    .hero-ctas{         flex-direction: unset;}
    .hero-ctas .btn{ width: 45%; padding: 5px 10px;}
    .hero-stats{  display: flex;}
    .stat-label { font-size: 0.48rem;    }
    .section-title {  font-size: clamp(1.2rem, 5vw, 1rem);  }
    .services{    padding: 15px 0;}
        .section-sub {
        font-size: .90rem;
    }
    .server-tile-scroll{ overflow: auto; display: flex;         padding-bottom: 10px;}
    .server-tile-scroll .svc-icon { position: relative;   top: 0px;       width: 40px;        height: 40px;        border-radius: 12px;        font-size: 1.1rem;        margin-left: 15px;
        margin-bottom: 5px; background: none; box-shadow: none;    }
    .server-tile-scroll .svc-icon  img{position: relative; height: 25px; top: 5px;  }
    .server-tile-scroll b{ font-size: 0.7rem;        text-align: center;        display: flex;        line-height: 1.0rem; }
    .svc-link{         display: block;  width: 150px;                margin-top: 5px;               margin-bottom: 5px;
        text-align: center;
        padding: 5px;   margin-bottom: 5px;}
    .server-tile-scroll .row {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.services-header{margin-bottom:0px}
.doctor-content {  gap: 0px; }
.doctor-inner{    gap: 4px;}
.btn{padding: 8px 15px;     font-size: .75rem;}
.reviews-header{ margin-bottom: 10px;}
.footer-main{        gap: 2px;}
.nav-pills .nav-link {    padding: 10px 15px;    font-size: 16px;}
.contact-us .svc-icon{ margin-left: 0;}

header .logo img{      height: 50px;  margin-left: 65%;}
.service-card{  margin-top: 10px;}
.footer-desc{ padding-right: 15px;}
.footer-copy{ display: none;  }
.doc-list{ padding: 0;}
}