* {
       margin: 0;
       padding: 0;
       /* box-sizing: border-box; */
   }

   html,
   body {
       width: 100%;
       overflow-x: hidden;
       margin: 0;
       padding: 0;
       height: 100%;
   }

   /* ============================================================
   SHREE CHAKRA RESIDENCY — Main Stylesheet
   ============================================================ */

   /* CSS Variables & Theme */
   :root {
       --primary-gold: #FF9644;
       --primary-gold-hover: #FFCE99;
       --dark-bg: #562F00;
       --darker-bg: #3b2000;
       --text-dark: #562F00;
       --text-light: #a37d5c;
       --text-white: #FFFDF1;
       --bg-light: #ffebce;
       --border-color: #e5cdb4;

       --font-heading: 'Playfair Display', serif;
       --font-body: 'Outfit', sans-serif;

       --transition-fast: 0.3s ease;
       --transition-slow: 0.5s ease;
   }

   /* ── Reset & Base ── */
   *,
   *::before,
   *::after {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   html {
       scroll-behavior: smooth;
       font-size: 16px;
   }

   body {
       font-family: var(--font-body) !important;
       background: white;
       height: 100%;
       line-height: 1.6;
       overflow-x: hidden;
       padding: 0;
       margin: 0;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-family: var(--font-heading) !important;
       font-weight: 600;
       letter-spacing: 0.5px;
       color: white;
       line-height: 1.3;
       margin-bottom: 1rem;
   }

   h1 {
       font-size: clamp(2.4rem, 5vw, 3.5rem);
   }

   h2 {
       font-size: clamp(2rem, 4vw, 2.8rem);
   }

   h3 {
       font-size: clamp(1.4rem, 3vw, 1.8rem);
   }

   section {
       overflow: hidden;
   }

   a {
       text-decoration: none;
       color: inherit;
   }

   ul {
       list-style: none;
   }

   img {
       display: block;
       max-width: 100%;
   }

   /* ── Layout ── */
   .container {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 40px;
   }

   .rooms-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 30px;
   }



   @media (max-width: 1200px) {
       .container {
           max-width: 1000px;
           padding: 0 30px;
       }
   }

   @media (max-width: 992px) {
       .container {
           max-width: 750px;
           padding: 0 25px;
       }
   }

   @media (max-width: 768px) {
       .container {
           max-width: 100%;
           /* padding: 0 20px; */
       }
   }

   /* .site-wrapper {
       display: flex;
       min-height: 100vh;
   }

  .main-content, .page-content, .container, .content-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}  */
   /* ────────────────────────────
   NAVBAR
──────────────────────────── */
   .navbar {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       z-index: 900;
       background: transparent;
       transition: var(--transition-fast);
       padding: 20px 0;
       background:#b1824a;

   }

   .nav-container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 0 40px;
       display: flex;
       justify-content: space-between;
       align-items: center;
        /* position:fixed;
       background-color: #a37d5c; */
   }

   .navbar.sticky,
   .navbar.nav-solid {
       position: fixed;
       background: #ecd5b8;
       backdrop-filter: blur(10px);
       padding: 15px 0;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
       color:black;
   }

   .nav-logo {
       display: flex;
       align-items: center;
       gap: 15px;
   }

   .nav-logo>i {
       font-size: 2rem;
       color: var(--primary-gold);
   }

   .nav-brand {
       display: flex;
       flex-direction: column;
   }

   .nav-brand .brand-name {
       font-family: var(--font-heading) !important;
       font-weight: 700;
       font-size: 1.2rem;
       letter-spacing: 1px;
       color:black;
       line-height: 1.1;
   }

   .nav-logo-img {
       height: 80px;
       width: auto;
       object-fit: contain;
       margin-right: 10px;
   }

   .navbar.sticky .brand-name,
   .navbar.nav-solid .brand-name {
       color: var(--text-dark);
   }

   .nav-brand .brand-sub {
       font-size: 0.6rem;
       letter-spacing: 2px;
       color: var(--primary-gold);
       font-weight: 600;
   }

   .nav-links {
       display: flex;
       gap: 30px;
       align-items: center;
      
   }

   .nav-links li a {
       font-size: 1.1rem;
       font-weight: 500;
       letter-spacing: 1.5px;
       color: black;
       padding: 10px 15px;
       border-radius: 4px;
       transition: var(--transition-fast);
       text-decoration: none;
   }

   .navbar.sticky .nav-links li a,
   .navbar.nav-solid .nav-links li a {
       color: var(--text-dark);
   }

   .nav-links li a:hover,
   .nav-links li a.active {
       background: var(--primary-gold);
       color: var(--dark-bg) !important;
       text-decoration: none;
   }

   /* Dropdown */
   .dropdown {
       position: relative;
   }

   .dropdown-menu {
       position: absolute;
       top: 100%;
       left: 0;
       background: var(--text-white);
       min-width: 150px;
       padding: 10px 0;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
       opacity: 0;
       visibility: hidden;
       transform: translateY(10px);
       transition: var(--transition-fast);
       display: block;
   }

   .dropdown:hover .dropdown-menu {
       opacity: 1;
       visibility: visible;
       transform: translateY(0);
   }

   .dropdown-menu li a {
       color: var(--text-dark) !important;
       display: block;
       padding: 10px 20px;
   }

   .dropdown-menu li a:hover {
       background: rgba(255, 204, 0, 0.1);
       color: var(--primary-gold) !important;
   }

   .nav-socials {
       display: flex;
       gap: 15px;
   }

   .nav-socials .social-btn {
       width: 35px;
       height: 35px;
       border-radius: 50%;
       border: 1px dashed rgba(255, 255, 255, 0.5);
       display: flex;
       justify-content: center;
       align-items: center;
       color: var(--text-white);
       transition: var(--transition-fast);
       font-size: 0.9rem;
   }

   .navbar.sticky .social-btn {
       border-color: var(--border-color);
       color: var(--text-light);
   }

   .social-btn:hover {
       color: var(--primary-gold);
       border-color: var(--primary-gold);
       transform: scale(1.1);
   }

   .hamburger {
       display: none;
       font-size: 1.8rem;
       color: var(--primary-gold);
       cursor: pointer;
       z-index: 1100;
   }

   /* ────────────────────────────
   HERO
──────────────────────────── */
   .hero {
       height: 100vh;
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
       overflow: hidden;
   }

   .hero-slider-container {
       position: absolute;
       inset: 0;
       overflow: hidden;
   }

   .hero-slider {
       display: flex;
       width: 300%;
       height: 100%;
       transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
   }

   .slider-slide {
       width: 33.3333%;
       height: 100%;
       background-size: cover;
       background-position: center;
       transform: scale(1.05);
       flex-shrink: 0;
   }

   .slider-slide.active {
       animation: zoomOut 20s infinite alternate;
   }

   .hero-overlay {
       position: absolute;
       inset: 0;
       /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.5) 100%); */
   }

   .hero-content {
       position: relative;
       z-index: 10;
       text-align: center;
       max-width: 1200px;
       padding: 0 20px;
   }

   .hero-title {
       color: var(--text-white);
       font-size: 3.5rem;
       line-height: 1.2;
       text-transform: uppercase;
       text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
       animation: fadeInUp 1s ease 0.5s both;
   }

   .hero-controls {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 100%;
       display: flex;
       justify-content: space-between;
       padding: 0 40px;
       z-index: 15;
       pointer-events: none;
   }

   .slide-btn {
       pointer-events: auto;
       background: #FF9644;
       color: var(--text-white);
       border: 1px solid rgba(255, 255, 255, 0.3);
       width: 60px;
       height: 60px;
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 1.5rem;
       cursor: pointer;
       transition: var(--transition-fast);
       backdrop-filter: blur(5px);
   }

   .slide-btn:hover {
       background: var(--primary-gold);
       border-color: var(--primary-gold);
       transform: scale(1.1);
   }

   /* ────────────────────────────
   BOOKING BAR
──────────────────────────── */
   .booking-wrapper {
       position: relative;
       z-index: 20;
       display: flex;
       justify-content: center;
       padding: 0 20px;
       margin-top: -40px;
   }

   .booking-bar {
       background: var(--bg-light);
       display: flex;
       align-items: flex-end;
       padding: 25px 35px;
       box-shadow: 0 15px 50px rgba(86, 47, 0, 0.15);
       border: 1px solid var(--border-color);
       gap: 20px;
       width: 100%;
       max-width: 1000px;
   }

   .booking-field {
       display: flex;
       flex-direction: column;
       gap: 5px;
       flex: 1;
   }

   .booking-field label {
       font-size: 0.8rem;
       color: var(--text-light);
       font-weight: 500;
   }

   .booking-field input,
   .booking-field select {
       border: 1px solid var(--primary-gold);
       border-radius: 4px;
       padding: 10px 15px;
       font-size: 1rem;
       font-family: var(--font-body) !important;
       color: var(--text-dark);
       background: transparent;
       outline: none;
       cursor: pointer;
       width: 100%;
       transition: var(--transition-fast);
   }

   .booking-action {
       flex: 1;
       flex-shrink: 0;
   }

   .btn-reserve {
       background: var(--primary-gold);
       color: var(--text-dark);
       border: none;
       padding: 11px 15px;
       font-size: 0.9rem;
       font-weight: 600;
       letter-spacing: 1px;
       cursor: pointer;
       transition: var(--transition-fast);
       /* font-family: var(--font-body); */
       font-family: 'Montserrat', Arial, sans-serif;
       white-space: nowrap;
       width: 100%;
   }

   .btn-reserve:hover {
       background: var(--primary-gold-hover);
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(176, 151, 90, 0.4);
   }

   /* ────────────────────────────
   ABOUT
──────────────────────────── */
   .about-section {
       padding: 50px 0;
       background: var(--text-white);
   }

   .about-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 60px;
       align-items: center;
   }

   .section-title {
       font-size: 2.5rem;
       color: rgb(31, 0, 0);
       /* margin-bottom: 15px; */
       line-height: 1.3;
   }

   .section-title span {
       display: block;
       font-size: 1.5rem;
       font-family: var(--font-heading) !important;
       font-style: italic;
       margin-top: 5px;
   }

   .about-content .section-title {
       text-align: left !important;
       margin-bottom: 10px !important;
   }

   .section-desc {
       color: #6d4120ff;
       /* margin-bottom: 10px; */
       font-size: 1.2rem;
   }

   .btn-outline {
       display: inline-block;
       background: var(--primary-gold);
       border: 2px solid var(--primary-gold);
       color: var(--text-dark);
       padding: 12px 30px;
       font-weight: 600;
       letter-spacing: 1px;
       margin-top: 20px;
       transition: var(--transition-fast);
   }

   .btn-outline:hover {
       background: var(--primary-gold-hover);
       color: var(--text-dark);
       text-decoration: none;
   }

   .about-image {
       position: relative;
   }

   .image-frame {
       position: relative;
       z-index: 2;
   }

   .image-frame img {
       width: 100%;
       height: auto;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   }

   @media (max-width: 768px) {
       .about-section-wrapper {
           display: flex !important;
           flex-direction: column !important;
       }

       .about-image-container {
           order: 1 !important;
           margin-bottom: 20px;
       }

       .about-text-container {
           order: 2 !important;
       }

       .about-button-container,
       .read-more-btn {
           order: 3 !important;
           margin-top: 15px;
       }
   }

   /* ────────────────────────────
   ROOMS
──────────────────────────── */
   .rooms-section {
       padding: 30px 0 60px;
       background: var(--bg-light);
       width: 100%;
       margin-top: 5px;
       margin-bottom: 60px;
   }

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

   .rooms-section .section-title {
       margin-bottom: 5px;
   }

   .section-subtitle {
       color: var(--text-light);
       
       margin-top: 0;
       font-size: 1.1rem;
   }

   .rooms-grid {
       display: grid;
       grid-template-columns: (3, 1fr);
       gap: 30px;
   }

   .room-card {
       background: var(--text-white);
       border-radius: 4px;
       overflow: hidden;
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
       transition: var(--transition-slow);
   }

   .room-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
   }

   .room-img {
       height: 250px;
       background-size: cover;
       background-position: center;
       transition: var(--transition-slow);
       margin: 10%;
   }

   .room-card:hover .room-img {
       transform: scale(1.05);
   }

   .room-info {
       padding: 30px 20px;
       text-align: center;
       background: var(--text-white);
   }

   .room-info h3 {
       color: var(--text-dark);
       margin-bottom: 15px;
       font-size: 1.3rem;
   }

   .room-info p {
       color: var(--text-light);
       font-size: 0.95rem;
       margin-bottom: 25px;
       line-height: 1.5;
       height: 3em;
       /* Exactly 2 lines */

       /* display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;

       text-align: center;
       width: 100%; */
   }

   .btn-outline-small {
       background: var(--primary-gold);
       border: 1px solid var(--primary-gold);
       color: var(--text-dark);
       padding: 8px 20px;
       font-size: 0.8rem;
       font-weight: 600;
       transition: var(--transition-fast);
       display: inline-block;
   }

   .btn-outline-small:hover {
       background: var(--primary-gold-hover);
       color: var(--text-dark);
       text-decoration: none;
   }

   /* ────────────────────────────
   AMENITIES
──────────────────────────── */
   .amenities-section {
       padding: 60px;
       background: var(--dark-bg);
       color: white;
   }

   .text-white {
       color: white !important;
   }

   .amenities-marquee {
       width: 100%;
       overflow: hidden;
       margin-top: 50px;
       padding: 20px 0;
       position: relative;
   }

   .amenities-marquee::before,
   .amenities-marquee::after {
       content: "";
       position: absolute;
       top: 0;
       width: 150px;
       height: 100%;
       z-index: 2;
       pointer-events: none;
   }

   .amenities-marquee::before {
       left: 0;
       background: linear-gradient(to right, var(--dark-bg), transparent);
   }

   .amenities-marquee::after {
       right: 0;
       background: linear-gradient(to left, var(--dark-bg), transparent);
   }

   .amenities-track {
       display: flex;
       gap: 60px;
       width: max-content;
       will-change: transform;
       transition: transform 0.5s ease;
   }

   .amenity-control {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background: rgba(255, 204, 0, 0.2);
       color: white;
       border: 1px solid var(--primary-gold);
       height: 50px;
       width: auto;
       height: 40px;
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
       z-index: 10;
       transition: var(--transition-fast);
   }

   .amenity-control:hover {
       background: var(--primary-gold);
       color: var(--dark-bg);
   }

   .amenity-control.prev {
       left: 20px;
   }

   .amenity-control.next {
       right: 20px;
   }

   .amenity-card {
       min-width: 150px;
       text-align: center;
       flex-shrink: 0;
   }

   .amenity-card i {
       font-size: 2.5rem;
       color: var(--primary-gold);
       margin-bottom: 20px;
       transition: var(--transition-fast);
   }

   .amenity-card:hover i {
       transform: scale(1.1);
   }

   .amenity-card h4 {
       /* font-family: var(--font-body); */
       font-family: 'Montserrat', Arial, sans-serif;
       font-weight: 500;
       font-size: 1rem;
       color: rgb(212, 196, 184);
   }

   /* ────────────────────────────
   ATTRACTIONS
──────────────────────────── */
   .attractions-section {
       padding: 70px 0;
       background: var(--text-white);
   }

   .attractions-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 40px;
       margin-top: 50px;
   }

   .attraction-img-card {
       display: flex;
       flex-direction: column;
       background: var(--text-white);
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
       border: 1px solid var(--border-color);
       transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease;
       cursor: pointer;
   }

   .attraction-img-card:hover {
       transform: translateY(-12px) scale(1.02);
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
   }

   .attr-img {
       height: 220px;
       background-size: cover;
       background-position: center;
       transition: transform 0.8s ease;
       overflow: hidden;
   }

   .attraction-img-card:hover .attr-img {
       transform: scale(1.08);
   }

   .attr-text {
       padding: 25px;
       background: var(--text-white);
   }

   .attr-text h4 {
       /* font-family: var(--font-heading); */
       font-family: 'Montserrat', Arial, sans-serif;
       color: var(--text-dark);
       font-size: 1.3rem;
       margin-bottom: 10px;
   }

   .attr-text p {
       color: var(--text-light);
       font-size: 0.95rem;
       line-height: 1.5;
   }

   /* ────────────────────────────
   TESTIMONIALS
──────────────────────────── */
   .testimonials-section {
       padding: 10px 0;
       background: var(--bg-light);
   }

   .testimonial-slider-card {
       max-width: 900px;
       margin: 0 auto;
       background: var(--text-white);
       border-radius: 12px;
       box-shadow: 0 15px 40px rgba(255, 204, 0, 0.15);
       overflow: hidden;
       position: relative;
       padding: 50px 0;
       border: 2px solid var(--primary-gold);
   }

   .testimonial-track {
       display: flex;
       transition: transform 0.5s ease-in-out;
   }

   .testi-comment {
       min-width: 100%;
       flex-shrink: 0;
       text-align: center;
       padding: 0 60px;
   }

   .testimonial-dots {
       display: flex;
       justify-content: center;
       gap: 15px;
       margin-top: 30px;
   }

   .testimonial-dots .dot {
       width: 14px;
       height: 14px;
       border-radius: 50%;
       background: #ddd;
       cursor: pointer;
       transition: background 0.3s, transform 0.3s;
   }

   .testimonial-dots .dot.active,
   .testimonial-dots .dot:hover {
       background: var(--primary-gold);
       transform: scale(1.2);
   }

   .quote-icon {
       font-size: 3rem;
       color: var(--primary-gold);
       margin-bottom: 20px;
   }

   .testi-comment .quote {
       font-size: 1.25rem;
       font-style: italic;
       color: var(--text-dark);
       line-height: 1.6;
       margin-bottom: 25px;
   }

   .testi-comment .stars {
       color: #c7793d;
       margin-bottom: 15px;
       font-size: 1.1rem;
   }

   .testi-comment h4 {
       /* font-family: var(--font-heading); */
       font-family: 'Montserrat', Arial, sans-serif;
       color: var(--text-light);
       font-size: 1.1rem;
   }

   /* ────────────────────────────
   FOOTER
──────────────────────────── */
   .footer {
       background: #562F00;
       color: #FFFDF1;
       padding-top: 20px;

       border-top: 5px solid #FF9644;

   }

   .footer-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 40px;
       margin-bottom: 60px;
   }

   .footer-col h4 {
       font-family: var(--font-heading);
       font-size: 1.8rem;
       margin-bottom: 25px;
       color: black;
       text-transform: uppercase;
       letter-spacing: 1px;

   }

   .contact-info li,
   .footer-links li {
       margin-bottom: 15px;
       color: #FFFDF1;
       opacity: 0.9;
       display: flex;
       align-items: flex-start;
       gap: 15px;
       font-size: 1.15rem;
   }

   .footer-col:nth-child(2) {
       text-align: center;
   }

   .footer-links li {
       justify-content: center;
       text-align: center;
   }

   .contact-info i {
       color: #FF9644;
       margin-top: 5px;
   }

   .footer-links a,
   .contact-info a {
       transition: var(--transition-fast);
       color: #FFFDF1;
       text-decoration: none;
   }

   .footer-links a:hover,
   .contact-info a:hover {
       color: #FF9644;
   }

   .footer-links a:hover {
       padding-left: 8px;
   }

   .footer-logo {
       display: flex;
       align-items: center;
       gap: 10px;
       margin-bottom: 20px;
   }

   .footer-logo i {
       color: #FF9644;
       font-size: 2.5rem;
   }

   .footer-logo p {
       /* font-family: var(--font-heading); */
       font-family: 'Montserrat', Arial, sans-serif;
       letter-spacing: 2px;
       font-size: 1.4rem;
       color: #FF9644;
       margin: 10px 0;
   }

   .footer-desc {
       color: #FFFDF1;
       opacity: 0.8;
       line-height: 1.6;
       font-size: 1.15rem;
   }

   .footer-bottom {
       background: #562F00;
       text-align: center;
       padding: 5px 0;
       color: #FFFDF1;
       opacity: 0.7;
       font-size: 1.05rem;
       border-top: 1px solid rgba(255, 150, 68, 0.2);
   }

   /* ────────────────────────────
    POLICY HERO OVERRIDE EXTENSION
   ──────────────────────────── */
   .policy-hero {
       height: 450px !important;
       position: relative !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       text-align: center !important;
       color: white !important;
       padding: 0 !important;
       background-position: center !important;
       background-size: cover !important;
   }

   .policy-hero h1 {
       font-family: var(--font-heading) !important;
       font-size: 4rem !important;
       margin-bottom: 0.5rem !important;
       letter-spacing: 5px !important;
       text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4) !important;
       padding-top: 50px !important;
       /* Clears navbar */
   }

   @media (max-width: 768px) {
       .policy-hero {
           height: 350px !important;
       }

       .policy-hero h1 {
           font-size: 2.2rem !important;
           padding-top: 60px !important;
       }
   }

   @media (max-width: 480px) {
       .policy-hero h1 {
           font-size: 1.8rem !important;
           letter-spacing: 2px !important;
       }
   }

   /* ────────────────────────────
   FAB WhatsApp
──────────────────────────── */
   .fab-whatsapp {
       position: fixed;
       bottom: 30px;
       right: 30px;
       background: #25D366;
       color: white;
       width: 60px;
       height: 60px;
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 2rem;
       box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
       transition: var(--transition-fast);
       z-index: 1000;
   }

   .fab-whatsapp:hover {
       transform: scale(1.1);
   }

   /* ────────────────────────────
    SCROLL ANIMATIONS
    ──────────────────────────── */
   .fade-up {
       opacity: 0;
   }

   .fade-up.visible {
       animation: fadeUpAnim 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
   }

   /* ────────────────────────────
    KEYFRAMES
    ──────────────────────────── */
   @keyframes zoomOut {
       0% {
           transform: scale(1.1);
       }

       100% {
           transform: scale(1);
       }
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes fadeUpAnim {
       0% {
           opacity: 0;
           transform: translateY(60px) scale(0.95);
       }

       100% {
           opacity: 1;
           transform: translateY(0) scale(1);
       }
   }

   /* ────────────────────────────
    RESPONSIVE OVERRIDES
    ──────────────────────────── */
   @media (max-width: 1200px) {
       .hero-title {
           font-size: 3rem;
       }

       .rooms-grid,
       .attractions-grid {
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 25px;
       }
   }

   @media (max-width: 992px) {
       .hamburger {
           display: block;
       }

       .nav-socials {
           display: none !important;
       }

       .nav-links {
           position: absolute;
           top: 100%;
           left: 0;
           width: 100%;
           background: var(--text-white);
           flex-direction: column;
           align-items: center;
           padding: 0;
           max-height: 0;
           overflow: hidden;
           transition: max-height 0.4s ease, padding 0.4s ease;
           box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
           z-index: 1000;
       }

       .nav-links.active {
           padding: 10px 0;
           max-height: 600px;
       }

       .nav-links li {
           width: 100%;
           text-align: center;
       }

       .nav-links li a {
           display: block;
           padding: 5px 0;
           color: var(--text-dark) !important;
           font-size: 0.95rem;
       }

       .dropdown-menu {
           position: static;
           display: none;
           opacity: 1;
           visibility: visible;
           transform: none;
           box-shadow: none;
           background: #fafafa;
           width: 100%;
           text-align: center;
       }

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

       .about-grid {
           grid-template-columns: 1fr;
           gap: 40px;
           text-align: center;
       }

       .about-image {
           max-width: 600px;
           margin: 0 auto;
       }

       .booking-bar {
           flex-direction: column;
           align-items: stretch;
           margin-top: 20px;
       }
   }

   @media (max-width: 768px) {
       section {
           padding: 40px 0 !important;
       }

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

       .hero-title {
           font-size: 2.2rem;
       }

       .hero-controls {
           display: none;
       }

       .booking-wrapper {
           margin-top: 30px;
       }

       .booking-bar {
           padding: 20px;
           gap: 15px;
       }

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

       .contact-info li,
       .footer-links li {
           justify-content: center;
       }

       .footer-logo {
           justify-content: center;
       }

       .rooms-grid,
       .attractions-grid {
           grid-template-columns: 1fr;
       }

       .navbar {
           padding: 15px 0;
       }

       .brand-name {
           font-size: 1rem;
       }
   }

   @media (max-width: 480px) {
       .hero-title {
           font-size: 1.8rem;
       }

       .section-title {
           font-size: 2rem;
           color: white;
       }

       .btn-outline,
       .btn-reserve {
           width: 100%;
           text-align: center;
       }

       .testi-comment {
           padding: 0 25px;
       }

       .nav-brand .brand-sub {
           font-size: 0.5rem;
           letter-spacing: 1px;
       }
   }

   @media (max-width: 360px) {
       .hero-title {
           font-size: 1.5rem;
       }
   }


   /* Footer Social Icons */
   .footer-socials {
       display: flex;
       gap: 15px;
       align-items: center;
       margin-top: 25px;
   }

   .footer-socials .social-icon {
       width: 38px;
       height: 38px;
       border-radius: 50%;
       background: #FF9644;
       color: #562F00;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 1.1rem;
       transition: all 0.3s ease;
       text-decoration: none;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   }

   .footer-socials .social-icon:hover {
       background: #FFFDF1;
       color: #FF9644;
       transform: translateY(-3px) scale(1.05);
       box-shadow: 0 6px 15px rgba(255, 150, 68, 0.4);
   }

   @media (max-width: 768px) {
       .footer-socials {
           justify-content: center;
       }
   }