@media (max-width: 1100px){
  .hero-content,
  .about-grid,
  .appointment-grid,
  .contact-grid{
    grid-template-columns:1fr;
  }

  .hero-text h1{
    font-size:46px;
  }

  .hero-card{
    max-width:650px;
  }
}

@media (max-width: 900px){
  .top-bar-content,
  .top-left,
  .top-right{
    flex-direction:column;
    gap:8px;
    text-align:center;
  }

  .nav-wrapper{
    height:auto;
    padding:14px 0;
  }

  .navbar{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    flex-direction:column;
    align-items:flex-start;
    padding:20px 5%;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
    display:none;
  }

  .navbar.active{
    display:flex;
  }

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

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

  .logo-text h2{
    font-size:22px;
  }

  .logo-text p{
    font-size:11px;
  }

  .logo-img{
    width:54px;
    height:54px;
  }
}

@media (max-width: 768px){
  .section{
    padding:65px 0;
  }

  .hero{
    min-height:auto;
  }

  .hero-content{
    padding:60px 0;
    gap:35px;
  }

  .hero-text h1{
    font-size:36px;
  }

  .hero-text p{
    font-size:16px;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:stretch;
  }

  .btn{
    justify-content:center;
    width:100%;
  }

  .hero-stats{
    grid-template-columns:1fr;
    display:grid;
  }

  .hero-card{
    padding:22px;
  }

  .building-img{
    border-radius:14px;
  }

  .about-points,
  .appointment-form,
  .footer-grid{
    grid-template-columns:1fr;
  }

  .section-title h2,
  .about-content h2,
  .appointment-grid h2,
  .contact-info h2{
    font-size:30px;
  }

  .appointment-grid{
    padding:30px 22px;
    border-radius:24px;
  }

  .float-btn{
    right:15px;
    width:50px;
    height:50px;
  }
}

@media (max-width: 480px){
  .container{
    width:92%;
  }

  .top-bar{
    font-size:12px;
  }

  .nav-wrapper{
    gap:10px;
  }

  .logo{
    gap:8px;
  }

  .logo-img{
    width:48px;
    height:48px;
  }

  .logo-text h2{
    font-size:19px;
  }

  .logo-text p{
    font-size:10px;
  }

  .hero-text h1{
    font-size:30px;
  }

  .hero-badge{
    font-size:12px;
    padding:8px 14px;
  }

  .hero-stats div{
    min-width:100%;
  }

  .service-card,
  .doctor-card,
  .contact-info{
    padding:24px 18px;
  }

  .about-building-img{
    min-height:260px;
  }

  .map-box{
    min-height:300px;
  }
}