@media(max-width:768px){

  @media(max-width:768px){

  .navbar{
    padding:18px 20px;
  }

  .logo span{
    font-size:22px;
  }

  .logo img{
    width:45px;
    height:45px;
  }

  .nav-links{
    position:absolute;
    top:100px;
    right:-100%;
    width:270px;
    background:#c8a97e;
    flex-direction:column;
    align-items:flex-start;
    padding:30px;
    border-radius:15px;
    transition:0.4s;
  }

  .nav-links.active{
    right:20px;
  }

  .dropdown-menu{
    position:static;
    opacity:1;
    visibility:visible;
    background:rgba(255,255,255,0.15);
    box-shadow:none;
    width:100%;
    margin-top:10px;
    display:none;
  }

  .dropdown-menu a{
    color:white;
  }

  .dropdown.active .dropdown-menu{
    display:block;
  }

}

  .nav-links a{
    color:#222;
  }

  .menu-toggle{
    display:block;
  }

  .hero-content h1{
    font-size:42px;
  }

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

  .hero-btn{
    padding:14px 28px;
  }

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

  section{
    padding:70px 20px;
  }

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

  .welcome-content h2{
    font-size:36px;
  }

  .section-header h2{
    font-size:32px;
  }

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

  .booking-section{
    grid-template-columns:1fr;
  }

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

  .booking-hero-content h1{
    font-size:40px;
  }

}
html{
  scroll-behavior:smooth;
}

@media(max-width:768px){
  .room-related{
    padding:58px 20px;
  }

  .related-room-links{
    grid-template-columns:1fr;
  }
}
@media(max-width:768px){

  .room-details{
    grid-template-columns:1fr;
  }

  .room-hero-content h1{
    font-size:42px;
  }

  .room-description h2,
  .room-amenities h2{
    font-size:30px;
  }

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

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

  .contact-hero-content h1{
    font-size:42px;
  }

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

  .close-room-lightbox{
    top:15px;
    right:20px;
    font-size:40px;
  }

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

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

  .about-hero-content h1{
    font-size:42px;
  }

  .about-content h2{
    font-size:34px;
  }

  .cta-content h2{
    font-size:36px;
  }

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

  .about-info-card{
    flex-direction:column;
  }

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

  .popup-content{
    width:95%;
    max-height:85vh;
  }

  .popup-content img{
    max-height:85vh;
  }
  .close-popup{
    width:40px;
    height:40px;
    font-size:24px;
  }

}