/* ============================================
   Responsive Styles
   ============================================ */

@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

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

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

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

  .doctor-card {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .doctor-card img {
    max-width: 280px;
    margin: 0 auto;
  }

  .doctor-card .specs {
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .bookingBtn.response {
    display: block;
  }

  .nav-links {
    position: fixed;
    top: 70px;
    right: -100%;
    width: 280px;
    height: calc(70vh - 70px);
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
    gap: 18px;
    box-shadow: var(--shadow-lg);
    transition: right .4s;
    overflow-y: auto;
    display: none !important;
  }




  .nav-links.open {
    right: 0;
    display: flex !important;
  }

  .nav-links a {
    width: 100%;
    padding: 10px 0;
  }

  .hamburger {
    display: flex;
  }

  .nav-actions .btn {
    display: none;
  }

  .nav-actions .lang-toggle {
    display: flex;
  }

  .hero {
    min-height: auto;
    padding: 60px 0;
  }

  .hero-stats {
    gap: 20px;
  }

  .hero-stat .num {
    font-size: 1.6rem;
  }

  section {
    padding: 60px 0;
  }
}

@media (max-width: 768px) {

  .branch-list {
    display: block;
  }

  .branch-item {
    border-bottom: 1px dashed #ddd;
    border-right: 0px dashed #ddd;

  }


  .page-banner {
    padding: 65px 0;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

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

  .emergency-banner .container {
    justify-content: center;
    text-align: center;
  }

  .emergency-banner .marquee {
    display: none;
  }

  .emergency-banner .contact-quick {
    display: flex;
    gap: 16px;
  }

  .appointment-form {
    padding: 28px 20px;
  }

  .sticky-contact-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    background: var(--white);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .1);
    padding: 10px;
    width: fit-content;
  }

  .sticky-contact-bar a {
    flex: 1;
    text-align: center;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .sticky-contact-bar a.call {
    background: var(--gradient);
    color: #fff;
  }

  .sticky-contact-bar a.whatsapp {
    background: #25D366;
    color: #fff;
  }

  .sticky-contact-bar a.book {
    background: var(--gradient-gold);
    color: #fff;
  }

  .floating-btns {
    bottom: 70px;
  }

  .scroll-top {
    bottom: 70px;
  }

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

  .hero-btns .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 580px) {
  .container {
    padding: 0 16px;
  }

  .nav-inner {
    padding: 12px 16px;
  }

  .logo {
    font-size: 1.05rem;
  }

  .logo-icon {
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
  }

  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero-stats {
    /* flex-direction: column; */
    gap: 14px;
  }

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

  .why-grid, .treatments-grid, .medicines-grid, .gallery-grid, .tips-grid {
    grid-template-columns: 1fr;
  }

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

  .gallery-item img {
    height: 160px;
  }

  .section-title h2 {
    font-size: 1.4rem;
  }

  .popup-box {
    padding: 28px 20px;
  }

  .doctor-card {
    padding: 20px;
  }

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

  .footer-bottom .links {
    gap: 12px;
    font-size: .8rem;
  }

  .lang-toggle span {
    padding: 4px 10px;
    font-size: .75rem;
  }

  .btn {
    padding: 10px 20px;
    font-size: .88rem;
  }
}

@media (max-width: 380px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 1.5rem;
  }

  .logo-text small {
    display: none;
  }

  .nav-actions {
    gap: 8px;
  }
}

/* Large screens */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* Print */
@media print {
  .navbar, .floating-btns, .scroll-top, .sticky-contact-bar, .emergency-banner, .footer {
    display: none;
  }
}