:root {
   /* ================================
       HOTEL SONURAJ - COLOR SYSTEM
       ================================ */

   /* Primary Brand Colors */
   --primary: #6B4226;
   --primary-light: #9A6A45;
   --primary-dark: #3E2618;

   /* Cream Backgrounds */
   --cream: #F5EFE4;
   --cream-light: #FBF8F2;
   --cream-dark: #E8DCCB;

   /* White */
   --white: #FFFFFF;
   --off-white: #FEFCF8;

   /* Text Colors */
   --text-primary: #2F241D;
   --text-secondary: #6B625B;
   --text-light: #8A8179;

   /* Borders */
   --border-light: #E5D9C9;
   --border-dark: #CDBBA5;

   /* Accent */
   --accent: #B88652;
   --accent-light: #D6B58D;

   /* ================================
       BACKGROUNDS
       ================================ */

   --bg-primary: var(--white);
   --bg-secondary: var(--cream);
   --bg-soft: var(--cream-light);
   --bg-dark: var(--primary-dark);

   /* ================================
       BUTTONS
       ================================ */

   --btn-primary: var(--primary);
   --btn-primary-hover: var(--primary-dark);

   --btn-secondary: var(--cream);
   --btn-secondary-hover: var(--cream-dark);

   /* ================================
       TYPOGRAPHY
       ================================ */

   --font-heading: "Cormorant Garamond", serif;
   --font-body: "Inter", sans-serif;

   --fs-xs: 12px;
   --fs-sm: 14px;
   --fs-base: 16px;
   --fs-lg: 18px;
   --fs-xl: 22px;
   --fs-2xl: 28px;
   --fs-3xl: 36px;
   --fs-4xl: 48px;
   --fs-5xl: 60px;

   --fw-light: 300;
   --fw-regular: 400;
   --fw-medium: 500;
   --fw-semibold: 600;
   --fw-bold: 700;

   /* ================================
       SPACING
       ================================ */

   --space-xs: 5px;
   --space-sm: 10px;
   --space-md: 15px;
   --space-lg: 20px;
   --space-xl: 30px;
   --space-2xl: 40px;
   --space-3xl: 60px;
   --space-4xl: 80px;
   --space-5xl: 100px;

   /* ================================
       BORDER RADIUS
       ================================ */

   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 20px;
   --radius-round: 50%;

   /* ================================
       SHADOWS
       ================================ */

   --shadow-sm: 0 2px 8px rgba(62, 38, 24, 0.08);
   --shadow-md: 0 5px 20px rgba(62, 38, 24, 0.12);
   --shadow-lg: 0 10px 35px rgba(62, 38, 24, 0.16);

   /* ================================
       TRANSITIONS
       ================================ */

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

   /* ================================
       CONTAINER
       ================================ */

   --container-width: 1320px;
   --container-padding: 20px;

   /* ================================
       Z-INDEX
       ================================ */

   --z-dropdown: 1000;
   --z-navbar: 1100;
   --z-overlay: 1200;
   --z-modal: 1300;
   --z-toast: 1400;
}


*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 90px;
}

body {
   padding-top: 88px;
}



/* =========================================================
   HOTEL SONURAJ — NAVBAR
   Brown / Cream / White Theme
========================================================= */


/* =========================================================
   HEADER
========================================================= */

.site-header {
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
   z-index: var(--z-navbar);
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar {
   position: relative;
   width: 100%;

   background: var(--white);

   border-bottom: 1px solid var(--border-light);

   transition:
      background var(--transition),
      box-shadow var(--transition);
}


/* Top luxury accent */

.navbar::before {
   content: "";

   position: absolute;
   top: 0;
   left: 0;

   width: 100%;
   height: 2px;

   background: var(--primary);
}


/* =========================================================
   NAVBAR CONTAINER
========================================================= */

.navbar-container {
   position: relative;

   width: min(calc(100% - 60px),
         var(--container-width));

   min-height: 88px;

   margin-inline: auto;

   display: flex;
   align-items: center;
   justify-content: space-between;
}


/* =========================================================
   LOGO
========================================================= */

.navbar-logo {
   position: relative;

   z-index: 10;

   display: flex;
   align-items: center;

   flex-shrink: 0;

   text-decoration: none;
}

.navbar-logo img {
   display: block;

   width: auto;
   max-width: 175px;
   height: 58px;

   object-fit: contain;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.navbar-navigation {
   position: absolute;

   left: 50%;
   top: 50%;

   transform: translate(-50%, -50%);
}

.nav-list {
   display: flex;
   align-items: center;

   gap: 34px;

   margin: 0;
   padding: 0;

   list-style: none;
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.nav-link {
   position: relative;

   display: inline-flex;
   align-items: center;

   padding: 10px 20px;

   color: var(--text-primary);
   border-radius: 30px;

   font-family: var(--font-body);
   font-size: 14px;
   font-weight: var(--fw-medium);

   line-height: 1;

   text-decoration: none;
   white-space: nowrap;

   transition:
      color var(--transition),
      transform var(--transition);
}


/* Small elegant underline */

.nav-link::after {
   content: "";

   position: absolute;

   left: 50%;
   bottom: 5px;

   width: 50%;
   height: 1px;

   background: var(--primary);

   border-radius: 10px;

   transform:
      translateX(-50%) scaleX(0);

   transform-origin: center;

   transition:
      transform var(--transition);
}


/* Hover */

.nav-link:hover {
   color: var(--primary);
}


/* Active */

.nav-link.active {
   color: var(--primary);
   border: 1px solid var(--primary);
}


/* Hover + Active underline */

.nav-link:hover::after,
.nav-link.active::after {
   transform:
      translateX(-50%) scaleX(1);
}


/* =========================================================
   BOOK NOW BUTTON
========================================================= */

.navbar-book {
   position: relative;

   z-index: 10;

   display: inline-flex;
   align-items: center;
   justify-content: center;

   gap: 12px;

   min-width: 138px;

   padding: 13px 20px;

   border-radius: 30px;

   background: transparent;

   color: var(--primary);

   border: 1px solid var(--primary);

   font-family: var(--font-body);
   font-size: 13px;
   font-weight: var(--fw-semibold);

   line-height: 1;

   text-decoration: none;

   transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition),
      transform var(--transition);
}


/* Arrow */

.navbar-book i {
   font-size: 11px;

   transition:
      transform var(--transition);
}


/* Hover */

.navbar-book:hover {
   background: var(--primary);

   border-color: var(--primary);

   color: var(--white);

   transform: translateY(-2px);
}


.navbar-book:hover i {
   transform: translateX(4px);
}


/* =========================================================
   MOBILE TOGGLE
========================================================= */

.navbar-toggle {
   display: none;

   position: relative;

   width: 44px;
   height: 44px;

   padding: 0;

   background: transparent;

   border: 1px solid var(--border-light);

   cursor: pointer;

   align-items: center;
   justify-content: center;

   flex-direction: column;

   gap: 5px;

   z-index: 20;

   transition:
      background var(--transition),
      border-color var(--transition);
}


/* Hamburger lines */

.navbar-toggle span {
   display: block;

   width: 21px;
   height: 1.5px;

   background: var(--primary);

   transition:
      transform var(--transition),
      opacity var(--transition);
}


/* Toggle hover */

.navbar-toggle:hover {
   background: var(--cream);

   border-color: var(--primary);
}


/* =========================================================
   HAMBURGER → CLOSE
========================================================= */

.navbar-toggle.active span:nth-child(1) {
   transform:
      translateY(6.5px) rotate(45deg);
}

.navbar-toggle.active span:nth-child(2) {
   opacity: 0;
}

.navbar-toggle.active span:nth-child(3) {
   transform:
      translateY(-6.5px) rotate(-45deg);
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.mobile-navigation {
   display: none;

   width: 100%;

   background: var(--white);

   border-top: 1px solid var(--border-light);

   box-shadow: var(--shadow-md);
}


/* =========================================================
   MOBILE NAV LIST
========================================================= */

.mobile-nav-list {
   display: flex;
   flex-direction: column;

   margin: 0;
   padding: 10px 30px 0;

   list-style: none;
}


.mobile-nav-list li {
   border-bottom: 1px solid var(--border-light);
}


.mobile-nav-list a {
   display: flex;
   align-items: center;
   justify-content: space-between;

   padding: 16px 5px;

   color: var(--text-primary);

   font-family: var(--font-body);
   font-size: 15px;
   font-weight: var(--fw-medium);

   text-decoration: none;

   transition:
      color var(--transition),
      padding-left var(--transition);
}


/* Mobile arrow */

.mobile-nav-list a::after {
   content: "\f061";

   font-family: "Font Awesome 6 Free";
   font-weight: 900;

   font-size: 10px;

   opacity: 0;

   transform: translateX(-6px);

   transition:
      opacity var(--transition),
      transform var(--transition);
}


/* Hover */

.mobile-nav-list a:hover {
   color: var(--primary);

   padding-left: 12px;
}


/* Active */

.mobile-nav-list a.active {
   color: var(--primary);

   padding-left: 12px;
}


.mobile-nav-list a:hover::after,
.mobile-nav-list a.active::after {
   opacity: 1;

   transform: translateX(0);
}


/* =========================================================
   MOBILE BOOK BUTTON
========================================================= */

.mobile-book {
   display: flex;

   align-items: center;
   justify-content: space-between;

   margin: 20px 30px 30px;

   padding: 16px 20px;

   background: var(--primary);

   color: var(--white);

   font-family: var(--font-body);
   font-size: 14px;
   font-weight: var(--fw-semibold);

   text-decoration: none;

   transition:
      background var(--transition),
      transform var(--transition);
}


.mobile-book i {
   font-size: 12px;

   transition:
      transform var(--transition);
}


.mobile-book:hover {
   background: var(--primary-dark);

   color: var(--white);

   transform: translateY(-2px);
}


.mobile-book:hover i {
   transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

   .navbar-container {
      width: min(calc(100% - 40px),
            var(--container-width));
   }


   .nav-list {
      gap: 22px;
   }


   .nav-link {
      font-size: 13px;
   }


   .navbar-book {
      min-width: 120px;

      padding: 12px 15px;
   }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

   /* Container */

   .navbar-container {
      width: min(calc(100% - 30px),
            var(--container-width));

      min-height: 76px;
   }


   /* Logo */

   .navbar-logo img {
      max-width: 145px;

      height: 50px;
   }


   /* Hide desktop navigation */

   .navbar-navigation,
   .navbar-book {
      display: none;
   }


   /* Show hamburger */

   .navbar-toggle {
      display: flex;
   }


   /* Mobile menu */

   .mobile-navigation {
      display: block;

      max-height: 0;

      overflow: hidden;

      opacity: 0;

      transform: translateY(-10px);

      pointer-events: none;

      padding: 0;

      transition:
         max-height 0.45s ease,
         opacity 0.3s ease,
         transform 0.3s ease,
         padding 0.3s ease;
   }


   /* Open */

   .mobile-navigation.active {
      max-height: 600px;

      opacity: 1;

      transform: translateY(0);

      pointer-events: auto;
   }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

   .navbar-container {
      width: calc(100% - 24px);

      min-height: 72px;
   }


   .navbar-logo img {
      max-width: 130px;

      height: 46px;
   }


   .navbar-toggle {
      width: 42px;
      height: 42px;
   }


   .mobile-nav-list {
      padding-left: 20px;
      padding-right: 20px;
   }


   .mobile-book {
      margin-left: 20px;
      margin-right: 20px;
   }

}







/* =========================================================
    HOTEL SONURAJ — HERO SECTION
 ========================================================= */


/* =========================================================
    HERO WRAPPER
 ========================================================= */

.hero-section {

   position: relative;

   width: 100%;
   min-height: calc(100vh - 88px);

   display: flex;
   align-items: center;
   justify-content: center;

   overflow: hidden;

   background: var(--primary-dark);
}


/* =========================================================
    BACKGROUND IMAGE
 ========================================================= */

.hero-background {

   position: absolute;

   inset: 0;

   width: 100%;
   height: 100%;

   z-index: 0;
}


.hero-background img {

   width: 100%;
   height: 100%;

   display: block;

   object-fit: cover;
   object-position: center;

   transform: scale(1.02);

   animation: heroZoom 12s ease-out forwards;
}


/* Slow cinematic zoom */

@keyframes heroZoom {

   from {
      transform: scale(1.08);
   }

   to {
      transform: scale(1);
   }

}


/* =========================================================
    OVERLAY
 ========================================================= */

.hero-overlay {

   position: absolute;

   inset: 0;

   z-index: 1;

   background:
      linear-gradient(90deg,
         rgba(30, 18, 10, 0.78) 0%,
         rgba(30, 18, 10, 0.52) 45%,
         rgba(30, 18, 10, 0.28) 100%);
}


/* =========================================================
    HERO CONTAINER
 ========================================================= */

.hero-container {

   position: relative;

   z-index: 2;

   width: min(calc(100% - 60px),
         var(--container-width));

   margin-inline: auto;

   display: flex;
   align-items: center;

   min-height: calc(100vh - 88px);
}


/* =========================================================
    HERO CONTENT
 ========================================================= */

.hero-content {

   width: min(700px, 100%);

   padding: 80px 0;
}


/* =========================================================
    EYEBROW
 ========================================================= */

.hero-eyebrow {

   display: flex;

   align-items: center;

   gap: 14px;

   margin-bottom: 24px;

   color: var(--cream);

   font-family: var(--font-body);

   font-size: 11px;
   font-weight: var(--fw-semibold);

   letter-spacing: 3px;

   text-transform: uppercase;
}


.hero-line {

   display: block;

   width: 35px;
   height: 1px;

   background: var(--accent);
}


/* =========================================================
    HERO TITLE
 ========================================================= */

.hero-title {

   margin: 0;

   color: var(--white);

   font-family: var(--font-heading);

   font-size: clamp(52px,
         6vw,
         86px);

   font-weight: var(--fw-regular);

   line-height: 0.98;

   letter-spacing: -1px;
}


.hero-title span {

   display: block;

   color: var(--cream);

   font-style: italic;
}


/* =========================================================
    HERO DESCRIPTION
 ========================================================= */

.hero-description {

   max-width: 580px;

   margin: 28px 0 0;

   color: rgba(255, 255, 255, 0.88);

   font-family: var(--font-body);

   font-size: 16px;

   font-weight: var(--fw-regular);

   line-height: 1.8;
}


/* =========================================================
    HERO BUTTONS
 ========================================================= */

.hero-actions {

   display: flex;

   align-items: center;

   gap: 14px;

   margin-top: 36px;
}


.hero-btn {

   display: inline-flex;

   align-items: center;
   justify-content: center;

   gap: 12px;

   min-height: 52px;

   padding: 0 24px;

   font-family: var(--font-body);

   font-size: 13px;

   font-weight: var(--fw-semibold);

   text-decoration: none;

   transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition),
      transform var(--transition);
}


/* Primary */

.hero-btn-primary {

   background: var(--primary);

   color: var(--white);

   border: 1px solid var(--primary);
}


.hero-btn-primary:hover {

   background: var(--primary-dark);

   border-color: var(--primary-dark);

   color: var(--white);

   transform: translateY(-2px);
}


/* Outline */

.hero-btn-outline {

   background: rgba(255, 255, 255, 0.08);

   color: var(--white);

   border: 1px solid rgba(255, 255, 255, 0.6);

   backdrop-filter: blur(4px);
}


.hero-btn-outline:hover {

   background: var(--white);

   color: var(--primary);

   border-color: var(--white);

   transform: translateY(-2px);
}


.hero-btn i {

   font-size: 12px;

   transition:
      transform var(--transition);
}


.hero-btn:hover i {

   transform: translateX(4px);
}


/* WhatsApp icon should not move */

.hero-btn-outline:hover .fa-whatsapp {

   transform: none;
}


/* =========================================================
    SCROLL INDICATOR
 ========================================================= */

.hero-scroll {

   position: absolute;

   z-index: 3;

   right: 35px;
   bottom: 35px;

   display: flex;

   align-items: center;

   gap: 12px;

   color: rgba(255, 255, 255, 0.8);

   font-family: var(--font-body);

   font-size: 9px;

   font-weight: var(--fw-semibold);

   letter-spacing: 2px;

   text-decoration: none;

   writing-mode: vertical-rl;

   transition:
      color var(--transition);
}


.hero-scroll i {

   font-size: 11px;

   animation: scrollArrow 1.8s ease-in-out infinite;
}


.hero-scroll:hover {

   color: var(--white);
}


@keyframes scrollArrow {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(6px);
   }

}


/* =========================================================
    TABLET
 ========================================================= */

@media (max-width: 1100px) {

   .hero-container {

      width: min(calc(100% - 40px),
            var(--container-width));
   }


   .hero-title {

      font-size: clamp(50px,
            7vw,
            72px);
   }


   .hero-scroll {

      right: 20px;
   }

}


/* =========================================================
    MOBILE
 ========================================================= */

@media (max-width: 850px) {

   body {
      padding-top: 76px;
   }

   .hero-section {

      min-height: calc(100svh - 76px);

      align-items: flex-end;
   }


   .hero-container {

      width: min(calc(100% - 30px),
            var(--container-width));

      min-height: calc(100svh - 76px);

      align-items: flex-end;
   }


   .hero-content {

      padding: 70px 0 90px;
   }


   .hero-overlay {

      background:
         linear-gradient(180deg,
            rgba(30, 18, 10, 0.28) 0%,
            rgba(30, 18, 10, 0.58) 45%,
            rgba(30, 18, 10, 0.88) 100%);
   }


   .hero-eyebrow {

      gap: 10px;

      margin-bottom: 18px;

      font-size: 9px;

      letter-spacing: 2px;
   }


   .hero-line {

      width: 24px;
   }


   .hero-title {

      font-size: clamp(46px,
            13vw,
            64px);

      line-height: 0.98;

      letter-spacing: -0.5px;
   }


   .hero-description {

      max-width: 500px;

      margin-top: 22px;

      font-size: 14px;

      line-height: 1.7;
   }


   .hero-actions {

      width: 100%;

      flex-direction: column;

      align-items: stretch;

      gap: 10px;

      margin-top: 28px;
   }


   .hero-btn {

      width: 100%;

      min-height: 50px;
   }


   .hero-scroll {

      display: none;
   }

}


/* =========================================================
    SMALL MOBILE
 ========================================================= */

@media (max-width: 480px) {

   .hero-container {

      width: calc(100% - 24px);
   }


   .hero-content {

      padding-bottom: 65px;
   }


   .hero-title {

      font-size: 46px;
   }


   .hero-description {

      font-size: 13px;

      line-height: 1.65;
   }


   .hero-btn {

      min-height: 48px;

      padding: 0 18px;

      font-size: 12px;
   }

}







/* =========================================================
   HOTEL SONURAJ — ABOUT / WELCOME SECTION
   Brown / Cream / White Theme
========================================================= */


/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {

   position: relative;

   width: 100%;

   padding: var(--space-5xl) 0;

   background: var(--cream);

   overflow: hidden;
}


/* =========================================================
   ABOUT CONTAINER
========================================================= */

.about-container {

   width: min(calc(100% - 60px),
         var(--container-width));

   margin-inline: auto;

   display: grid;

   grid-template-columns:
      minmax(0, 1fr) minmax(0, 0.9fr);

   align-items: center;

   gap: 90px;
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.about-image-wrapper {

   position: relative;

   width: 100%;

   min-height: 580px;

   padding: 0;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.about-image-main {

   position: absolute;

   top: 0;
   left: 0;

   width: 78%;
   height: 88%;

   overflow: hidden;

   background: var(--cream-dark);

   z-index: 1;
}


.about-image-main img {

   display: block;

   width: 100%;
   height: 100%;

   object-fit: cover;

   transition:
      transform 0.8s ease;
}


.about-image-main:hover img {

   transform: scale(1.04);
}


/* =========================================================
   SMALL IMAGES
========================================================= */

.about-image-small {

   position: absolute;

   overflow: hidden;

   background: var(--cream-dark);

   border: 8px solid var(--cream);

   z-index: 3;
}


.about-image-small img {

   display: block;

   width: 100%;
   height: 100%;

   object-fit: cover;

   transition:
      transform 0.6s ease;
}


.about-image-small:hover img {

   transform: scale(1.06);
}


/* =========================================================
   SMALL IMAGE — ONE
========================================================= */

.about-image-small-one {

   top: 18%;
   right: 0;

   width: 38%;
   height: 190px;
}


/* =========================================================
   SMALL IMAGE — TWO
========================================================= */

.about-image-small-two {

   right: 12%;
   bottom: 0;

   width: 42%;
   height: 200px;
}


/* =========================================================
   DECORATIVE BORDER
========================================================= */

.about-image-decoration {

   position: absolute;

   top: 25px;
   left: 25px;

   width: 78%;
   height: 88%;

   border: 1px solid var(--accent);

   pointer-events: none;

   z-index: 2;
}


/* =========================================================
   BADGE
========================================================= */

.about-badge {

   position: absolute;

   left: -25px;
   bottom: 45px;

   width: 125px;
   min-height: 125px;

   display: flex;

   flex-direction: column;

   align-items: center;
   justify-content: center;

   gap: 8px;

   background: var(--primary);

   color: var(--white);

   z-index: 5;
}


.about-badge-number {

   font-family: var(--font-heading);

   font-size: 38px;

   font-weight: var(--fw-regular);

   line-height: 1;
}


.about-badge-text {

   font-family: var(--font-body);

   font-size: 8px;

   font-weight: var(--fw-medium);

   line-height: 1.5;

   letter-spacing: 1.5px;

   text-align: center;

   text-transform: uppercase;

   opacity: 0.85;
}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.about-content {

   max-width: 560px;
}


/* =========================================================
   SECTION EYEBROW
========================================================= */

.section-eyebrow {

   display: flex;

   align-items: center;

   gap: 12px;

   margin-bottom: 22px;

   color: var(--primary);

   font-family: var(--font-body);

   font-size: 10px;

   font-weight: var(--fw-semibold);

   letter-spacing: 2.5px;

   text-transform: uppercase;
}


.section-eyebrow-line {

   width: 32px;
   height: 1px;

   background: var(--accent);

   flex-shrink: 0;
}


/* =========================================================
   ABOUT TITLE
========================================================= */

.about-title {

   margin: 0;

   color: var(--text-primary);

   font-family: var(--font-heading);

   font-size: clamp(42px,
         4.5vw,
         64px);

   font-weight: var(--fw-regular);

   line-height: 1.02;

   letter-spacing: -0.5px;
}


.about-title span {

   display: block;

   color: var(--primary);

   font-style: italic;
}


/* =========================================================
   ABOUT DESCRIPTION
========================================================= */

.about-description {

   max-width: 540px;

   margin: 24px 0 0;

   color: var(--text-secondary);

   font-family: var(--font-body);

   font-size: 14px;

   font-weight: var(--fw-regular);

   line-height: 1.85;
}


/* =========================================================
   ABOUT HIGHLIGHTS
========================================================= */

.about-highlights {

   display: grid;

   grid-template-columns:
      repeat(2, minmax(0, 1fr));

   gap: 20px 25px;

   margin-top: 30px;

   padding-top: 25px;

   border-top: 1px solid var(--border-dark);
}


/* =========================================================
   SINGLE HIGHLIGHT
========================================================= */

.about-highlight {

   display: flex;

   align-items: center;

   gap: 14px;

   min-width: 0;
}


/* =========================================================
   HIGHLIGHT ICON
========================================================= */

.about-highlight-icon {

   width: 42px;
   height: 42px;

   display: flex;

   align-items: center;
   justify-content: center;

   flex-shrink: 0;

   background: var(--white);

   color: var(--primary);

   border: 1px solid var(--border-light);

   transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition);
}


.about-highlight:hover .about-highlight-icon {

   background: var(--primary);

   color: var(--white);

   border-color: var(--primary);
}


.about-highlight-icon i {

   font-size: 14px;
}


/* =========================================================
   HIGHLIGHT TEXT
========================================================= */

.about-highlight>div {

   display: flex;

   flex-direction: column;

   gap: 4px;

   min-width: 0;
}


.about-highlight strong {

   color: var(--text-primary);

   font-family: var(--font-body);

   font-size: 12px;

   font-weight: var(--fw-semibold);

   line-height: 1.3;
}


.about-highlight>div>span {

   color: var(--text-light);

   font-family: var(--font-body);

   font-size: 10px;

   line-height: 1.4;
}


/* =========================================================
   ABOUT BUTTON
========================================================= */

.about-button {

   display: inline-flex;

   align-items: center;
   justify-content: center;

   gap: 12px;

   margin-top: 35px;

   padding: 14px 22px;

   background: var(--primary);

   color: var(--white);

   border: 1px solid var(--primary);

   font-family: var(--font-body);

   font-size: 12px;

   font-weight: var(--fw-semibold);

   text-decoration: none;

   transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition),
      transform var(--transition);
}


.about-button i {

   font-size: 11px;

   transition:
      transform var(--transition);
}


.about-button:hover {

   background: var(--primary-dark);

   color: var(--white);

   border-color: var(--primary-dark);

   transform: translateY(-2px);
}


.about-button:hover i {

   transform: translateX(4px);
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1200px) {

   .about-container {

      gap: 60px;
   }


   .about-image-wrapper {

      min-height: 520px;
   }


   .about-image-small-one {

      height: 170px;
   }


   .about-image-small-two {

      height: 180px;
   }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

   .about-container {

      width: min(calc(100% - 40px),
            var(--container-width));

      gap: 45px;
   }


   .about-image-wrapper {

      min-height: 480px;
   }


   .about-image-main {

      width: 80%;

      height: 87%;
   }


   .about-image-small-one {

      width: 40%;

      height: 155px;
   }


   .about-image-small-two {

      width: 43%;

      height: 165px;

      right: 8%;
   }


   .about-image-decoration {

      width: 80%;

      height: 87%;

      top: 20px;
      left: 20px;
   }


   .about-badge {

      left: -15px;

      bottom: 35px;

      width: 110px;

      min-height: 110px;
   }


   .about-badge-number {

      font-size: 34px;
   }


   .about-title {

      font-size: clamp(40px,
            4.5vw,
            55px);
   }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

   .about-section {

      padding: 70px 0;
   }


   .about-container {

      width: min(calc(100% - 30px),
            var(--container-width));

      grid-template-columns: 1fr;

      gap: 55px;
   }


   /* Image composition */

   .about-image-wrapper {

      min-height: 480px;

      width: 100%;
   }


   .about-image-main {

      width: 82%;

      height: 82%;
   }


   .about-image-small {

      border-width: 6px;
   }


   .about-image-small-one {

      width: 42%;

      height: 145px;

      right: 0;

      top: 12%;
   }


   .about-image-small-two {

      width: 45%;

      height: 155px;

      right: 8%;

      bottom: 0;
   }


   .about-image-decoration {

      width: 82%;

      height: 82%;

      top: 18px;

      left: 18px;
   }


   .about-badge {

      left: -5px;

      bottom: 25px;

      width: 100px;

      min-height: 100px;
   }


   .about-badge-number {

      font-size: 30px;
   }


   .about-badge-text {

      font-size: 7px;

      letter-spacing: 1.2px;
   }


   /* Content */

   .about-content {

      max-width: 100%;
   }


   .about-title {

      font-size: clamp(40px,
            11vw,
            55px);
   }


   .about-description {

      font-size: 13px;

      line-height: 1.75;
   }


   /* Highlights */

   .about-highlights {

      gap: 18px 15px;
   }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

   .about-section {

      padding: 60px 0;
   }


   .about-container {

      width: calc(100% - 24px);

      gap: 45px;
   }


   .about-image-wrapper {

      min-height: 400px;
   }


   .about-image-main {

      width: 84%;

      height: 80%;
   }


   .about-image-small-one {

      width: 40%;

      height: 120px;
   }


   .about-image-small-two {

      width: 43%;

      height: 130px;

      right: 5%;
   }


   .about-image-decoration {

      width: 84%;

      height: 80%;

      top: 15px;

      left: 15px;
   }


   .about-badge {

      left: -2px;

      bottom: 20px;

      width: 90px;

      min-height: 90px;
   }


   .about-badge-number {

      font-size: 27px;
   }


   .about-badge-text {

      font-size: 6.5px;
   }


   .section-eyebrow {

      font-size: 9px;

      letter-spacing: 2px;
   }


   .section-eyebrow-line {

      width: 25px;
   }


   .about-title {

      font-size: 42px;
   }


   .about-description {

      font-size: 13px;
   }


   .about-highlights {

      grid-template-columns: 1fr;

      gap: 0;

      padding-top: 20px;
   }


   .about-highlight {

      padding: 14px 0;

      border-bottom: 1px solid var(--border-light);
   }


   .about-highlight:first-child {

      padding-top: 0;
   }


   .about-highlight:last-child {

      padding-bottom: 0;

      border-bottom: none;
   }


   .about-button {

      width: 100%;

      margin-top: 30px;
   }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

   .about-image-wrapper {

      min-height: 350px;
   }


   .about-image-small-one {

      height: 105px;
   }


   .about-image-small-two {

      height: 115px;
   }


   .about-badge {

      width: 82px;

      min-height: 82px;
   }


   .about-badge-number {

      font-size: 24px;
   }


   .about-title {

      font-size: 38px;
   }

}









/* =========================================================
   HOTEL SONURAJ — ROOMS SECTION
========================================================= */

.rooms-section {

   position: relative;

   width: 100%;

   padding: var(--space-5xl) 0;

   background: var(--white);

   overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.rooms-container {

   width: min(calc(100% - 60px),
         var(--container-width));

   margin-inline: auto;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.rooms-header {

   display: flex;

   align-items: flex-end;
   justify-content: space-between;

   gap: 50px;

   margin-bottom: 55px;
}


.rooms-heading {

   max-width: 650px;
}


.rooms-heading .section-eyebrow {

   margin-bottom: 20px;
}


.rooms-title {

   margin: 0;

   color: var(--text-primary);

   font-family: var(--font-heading);

   font-size: clamp(42px,
         4.5vw,
         64px);

   font-weight: var(--fw-regular);

   line-height: 1.02;
}


.rooms-title span {

   color: var(--primary);

   font-style: italic;
}


/* =========================================================
   HEADER INTRO
========================================================= */

.rooms-intro {

   max-width: 350px;

   padding-bottom: 5px;
}


.rooms-intro p {

   margin: 0 0 20px;

   color: var(--text-secondary);

   font-family: var(--font-body);

   font-size: 13px;

   line-height: 1.75;
}


.rooms-view-all {

   display: inline-flex;

   align-items: center;

   gap: 10px;

   color: var(--primary);

   font-family: var(--font-body);

   font-size: 12px;

   font-weight: var(--fw-semibold);

   text-decoration: none;
}


.rooms-view-all i {

   font-size: 10px;

   transition:
      transform var(--transition);
}


.rooms-view-all:hover i {

   transform: translateX(5px);
}


/* =========================================================
   ROOMS GRID
========================================================= */

.rooms-grid {

   display: grid;

   grid-template-columns:
      repeat(3, minmax(0, 1fr));

   gap: 25px;
}


/* =========================================================
   ROOM CARD
========================================================= */

.room-card {

   min-width: 0;

   background: var(--cream-light);

   border: 1px solid var(--border-light);

   transition:
      transform var(--transition),
      box-shadow var(--transition);
}


.room-card:hover {

   transform: translateY(-6px);

   box-shadow: var(--shadow-md);
}


/* =========================================================
   ROOM IMAGE
========================================================= */

.room-image {

   position: relative;

   width: 100%;

   aspect-ratio: 4 / 3;

   overflow: hidden;

   background: var(--cream-dark);
}


.room-image img {

   display: block;

   width: 100%;
   height: 100%;

   object-fit: cover;

   transition:
      transform 0.7s ease;
}


.room-card:hover .room-image img {

   transform: scale(1.05);
}


/* =========================================================
   ROOM TAG
========================================================= */

.room-tag {

   position: absolute;

   top: 15px;
   left: 15px;

   padding: 7px 10px;

   background: var(--primary);

   color: var(--white);

   font-family: var(--font-body);

   font-size: 8px;

   font-weight: var(--fw-semibold);

   letter-spacing: 1px;
}


/* =========================================================
   IMAGE LINK
========================================================= */

.room-image-link {

   position: absolute;

   right: 15px;
   bottom: 15px;

   width: 42px;
   height: 42px;

   display: flex;

   align-items: center;
   justify-content: center;

   background: var(--white);

   color: var(--primary);

   text-decoration: none;

   opacity: 0;

   transform: translateY(8px);

   transition:
      opacity var(--transition),
      transform var(--transition),
      background var(--transition),
      color var(--transition);
}


.room-card:hover .room-image-link {

   opacity: 1;

   transform: translateY(0);
}


.room-image-link:hover {

   background: var(--primary);

   color: var(--white);
}


.room-image-link i {

   font-size: 12px;
}


/* =========================================================
   ROOM CONTENT
========================================================= */

.room-content {

   padding: 24px;
}


/* =========================================================
   ROOM TOP
========================================================= */

.room-top {

   display: flex;

   align-items: flex-start;
   justify-content: space-between;

   gap: 15px;
}


.room-name {

   margin: 0;

   color: var(--text-primary);

   font-family: var(--font-heading);

   font-size: 28px;

   font-weight: var(--fw-semibold);

   line-height: 1.1;
}


.room-price {

   color: var(--primary);

   font-family: var(--font-body);

   font-size: 13px;

   font-weight: var(--fw-semibold);

   white-space: nowrap;
}


.room-price small {

   color: var(--text-light);

   font-size: 9px;

   font-weight: var(--fw-regular);
}


/* =========================================================
   ROOM DESCRIPTION
========================================================= */

.room-description {

   margin: 14px 0 20px;

   color: var(--text-secondary);

   font-family: var(--font-body);

   font-size: 12px;

   line-height: 1.7;
}


/* =========================================================
   ROOM DETAILS
========================================================= */

.room-details {

   display: flex;

   flex-wrap: wrap;

   gap: 10px 15px;

   padding-bottom: 20px;

   border-bottom: 1px solid var(--border-light);
}


.room-details span {

   display: inline-flex;

   align-items: center;

   gap: 6px;

   color: var(--text-light);

   font-family: var(--font-body);

   font-size: 9px;
}


.room-details i {

   color: var(--primary);

   font-size: 10px;
}


/* =========================================================
   ROOM FOOTER
========================================================= */

.room-footer {

   display: flex;

   align-items: center;
   justify-content: space-between;

   gap: 15px;

   padding-top: 18px;
}


.room-details-btn {

   color: var(--primary);

   font-family: var(--font-body);

   font-size: 11px;

   font-weight: var(--fw-semibold);

   text-decoration: none;

   transition:
      color var(--transition);
}


.room-details-btn:hover {

   color: var(--primary-dark);
}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.room-whatsapp {

   width: 38px;
   height: 38px;

   display: flex;

   align-items: center;
   justify-content: center;

   background: var(--primary);

   color: var(--white);

   text-decoration: none;

   transition:
      background var(--transition),
      transform var(--transition);
}


.room-whatsapp:hover {

   background: var(--primary-dark);

   color: var(--white);

   transform: translateY(-2px);
}


.room-whatsapp i {

   font-size: 15px;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1200px) {

   .rooms-container {

      width: min(calc(100% - 40px),
            var(--container-width));
   }


   .rooms-grid {

      gap: 20px;
   }


   .room-content {

      padding: 20px;
   }


   .room-name {

      font-size: 25px;
   }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

   .rooms-header {

      align-items: flex-start;

      flex-direction: column;

      gap: 20px;

      margin-bottom: 40px;
   }


   .rooms-intro {

      max-width: 550px;
   }


   .rooms-grid {

      grid-template-columns:
         repeat(2, minmax(0, 1fr));
   }


   .room-card:last-child {

      grid-column: 1 / -1;

      max-width: calc(50% - 10px);

      margin-inline: auto;
   }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

   .rooms-section {

      padding: 70px 0;
   }


   .rooms-container {

      width: min(calc(100% - 30px),
            var(--container-width));
   }


   .rooms-header {

      margin-bottom: 35px;
   }


   .rooms-title {

      font-size: clamp(40px,
            11vw,
            54px);
   }


   .rooms-intro p {

      font-size: 13px;
   }


   .rooms-grid {

      grid-template-columns: 1fr;

      gap: 25px;
   }


   .room-card:last-child {

      grid-column: auto;

      max-width: none;

      margin-inline: 0;
   }


   .room-image {

      aspect-ratio: 4 / 3;
   }


   .room-image-link {

      opacity: 1;

      transform: none;
   }


   .room-content {

      padding: 22px;
   }


   .room-name {

      font-size: 27px;
   }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

   .rooms-section {

      padding: 60px 0;
   }


   .rooms-container {

      width: calc(100% - 24px);
   }


   .rooms-title {

      font-size: 40px;
   }


   .room-content {

      padding: 20px;
   }


   .room-name {

      font-size: 25px;
   }


   .room-price {

      font-size: 12px;
   }


   .room-description {

      font-size: 11px;
   }

}





/* =========================================================
   HOTEL SONURAJ — DINING / MENU SECTION
   Cream Background
========================================================= */


/* =========================================================
   DINING SECTION
========================================================= */

.dining-section {

   position: relative;

   width: 100%;

   padding: var(--space-5xl) 0;

   background: var(--cream);

   overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.dining-container {

   width: min(calc(100% - 60px),
         var(--container-width));

   margin-inline: auto;

   display: grid;

   grid-template-columns:
      minmax(0, 1fr) minmax(0, 0.9fr);

   align-items: center;

   gap: 90px;
}


/* =========================================================
   IMAGE COMPOSITION
========================================================= */

.dining-images {

   position: relative;

   width: 100%;

   min-height: 560px;
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.dining-image-main {

   position: absolute;

   top: 0;
   left: 0;

   width: 78%;
   height: 88%;

   overflow: hidden;

   background: var(--cream-dark);

   z-index: 1;
}


.dining-image-main img {

   display: block;

   width: 100%;
   height: 100%;

   object-fit: cover;

   transition:
      transform 0.8s ease;
}


.dining-image-main:hover img {

   transform: scale(1.04);
}


/* =========================================================
   SMALL IMAGE
========================================================= */

.dining-image-small {

   position: absolute;

   right: 0;
   bottom: 0;

   width: 43%;
   height: 220px;

   padding: 8px;

   background: var(--cream);

   z-index: 3;
}


.dining-image-small img {

   display: block;

   width: 100%;
   height: 100%;

   object-fit: cover;

   transition:
      transform 0.6s ease;
}


.dining-image-small:hover img {

   transform: scale(1.05);
}


/* =========================================================
   DECORATIVE BORDER
========================================================= */

.dining-decoration {

   position: absolute;

   top: 25px;
   left: 25px;

   width: 78%;
   height: 88%;

   border: 1px solid var(--accent);

   pointer-events: none;

   z-index: 2;
}


/* =========================================================
   CONTENT
========================================================= */

.dining-content {

   max-width: 560px;
}


/* =========================================================
   TITLE
========================================================= */

.dining-title {

   margin: 0;

   color: var(--text-primary);

   font-family: var(--font-heading);

   font-size: clamp(42px,
         4.5vw,
         64px);

   font-weight: var(--fw-regular);

   line-height: 1.02;

   letter-spacing: -0.5px;
}


.dining-title span {

   display: block;

   color: var(--primary);

   font-style: italic;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.dining-description {

   max-width: 520px;

   margin: 25px 0 0;

   color: var(--text-secondary);

   font-family: var(--font-body);

   font-size: 14px;

   font-weight: var(--fw-regular);

   line-height: 1.85;
}


/* =========================================================
   DINING CATEGORIES
========================================================= */

.dining-categories {

   display: flex;

   flex-direction: column;

   margin-top: 30px;

   border-top: 1px solid var(--border-dark);
}


/* =========================================================
   CATEGORY
========================================================= */

.dining-category {

   display: flex;

   align-items: center;

   gap: 15px;

   padding: 17px 0;

   border-bottom: 1px solid var(--border-dark);

   transition:
      padding-left var(--transition);
}


.dining-category:hover {

   padding-left: 5px;
}


/* =========================================================
   CATEGORY ICON
========================================================= */

.dining-category-icon {

   width: 42px;
   height: 42px;

   display: flex;

   align-items: center;
   justify-content: center;

   flex-shrink: 0;

   background: var(--white);

   color: var(--primary);

   border: 1px solid var(--border-light);

   transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition);
}


.dining-category:hover .dining-category-icon {

   background: var(--primary);

   color: var(--white);

   border-color: var(--primary);
}


.dining-category-icon i {

   font-size: 14px;
}


/* =========================================================
   CATEGORY TEXT
========================================================= */

.dining-category>div {

   display: flex;

   flex-direction: column;

   gap: 4px;
}


.dining-category strong {

   color: var(--text-primary);

   font-family: var(--font-body);

   font-size: 12px;

   font-weight: var(--fw-semibold);

   line-height: 1.3;
}


.dining-category>div span {

   color: var(--text-light);

   font-family: var(--font-body);

   font-size: 10px;

   line-height: 1.4;
}


/* =========================================================
   MENU BUTTON
========================================================= */

.dining-button {

   display: inline-flex;

   align-items: center;
   justify-content: center;

   gap: 12px;

   margin-top: 32px;

   padding: 14px 22px;

   background: var(--primary);

   color: var(--white);

   border: 1px solid var(--primary);

   font-family: var(--font-body);

   font-size: 12px;

   font-weight: var(--fw-semibold);

   line-height: 1;

   text-decoration: none;

   transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition),
      transform var(--transition);
}


.dining-button i {

   font-size: 11px;

   transition:
      transform var(--transition);
}


.dining-button:hover {

   background: var(--primary-dark);

   color: var(--white);

   border-color: var(--primary-dark);

   transform: translateY(-2px);
}


.dining-button:hover i {

   transform: translateX(4px);
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1200px) {

   .dining-container {

      gap: 60px;
   }


   .dining-images {

      min-height: 520px;
   }


   .dining-image-small {

      height: 190px;
   }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

   .dining-container {

      width: min(calc(100% - 40px),
            var(--container-width));

      gap: 45px;
   }


   .dining-images {

      min-height: 480px;
   }


   .dining-image-main {

      width: 80%;

      height: 87%;
   }


   .dining-image-small {

      width: 43%;

      height: 170px;

      padding: 7px;
   }


   .dining-decoration {

      width: 80%;

      height: 87%;

      top: 20px;

      left: 20px;
   }


   .dining-title {

      font-size: clamp(40px,
            4.5vw,
            56px);
   }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

   .dining-section {

      padding: 70px 0;
   }


   .dining-container {

      width: min(calc(100% - 30px),
            var(--container-width));

      grid-template-columns: 1fr;

      gap: 55px;
   }


   /* Image */

   .dining-images {

      min-height: 470px;
   }


   .dining-image-main {

      width: 82%;

      height: 82%;
   }


   .dining-image-small {

      width: 45%;

      height: 155px;

      padding: 6px;
   }


   .dining-decoration {

      width: 82%;

      height: 82%;

      top: 18px;

      left: 18px;
   }


   /* Content */

   .dining-content {

      max-width: 100%;
   }


   .dining-title {

      font-size: clamp(40px,
            11vw,
            55px);
   }


   .dining-description {

      font-size: 13px;

      line-height: 1.75;
   }


   .dining-categories {

      margin-top: 25px;
   }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

   .dining-section {

      padding: 60px 0;
   }


   .dining-container {

      width: calc(100% - 24px);

      gap: 45px;
   }


   /* Image */

   .dining-images {

      min-height: 390px;
   }


   .dining-image-main {

      width: 84%;

      height: 80%;
   }


   .dining-image-small {

      width: 43%;

      height: 125px;

      right: 3%;

      padding: 5px;
   }


   .dining-decoration {

      width: 84%;

      height: 80%;

      top: 15px;

      left: 15px;
   }


   /* Content */

   .dining-title {

      font-size: 42px;
   }


   .dining-description {

      font-size: 13px;
   }


   .dining-category {

      padding: 15px 0;
   }


   .dining-category-icon {

      width: 40px;
      height: 40px;
   }


   .dining-category strong {

      font-size: 11px;
   }


   .dining-category>div span {

      font-size: 9px;
   }


   /* Button */

   .dining-button {

      width: 100%;

      margin-top: 28px;
   }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

   .dining-images {

      min-height: 350px;
   }


   .dining-image-small {

      height: 110px;
   }


   .dining-title {

      font-size: 38px;
   }


   .dining-category-icon {

      width: 38px;
      height: 38px;
   }

}




/* =========================================================
   HOTEL SONURAJ — GALLERY SECTION
========================================================= */

.gallery-section {

   position: relative;

   width: 100%;

   padding: var(--space-5xl) 0;

   background: var(--white);

   overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.gallery-container {

   width: min(calc(100% - 60px),
         var(--container-width));

   margin-inline: auto;
}


/* =========================================================
   HEADER
========================================================= */

.gallery-header {

   display: flex;

   align-items: flex-end;
   justify-content: space-between;

   gap: 50px;

   margin-bottom: 50px;
}


.gallery-heading {

   max-width: 600px;
}


.gallery-title {

   margin: 0;

   color: var(--text-primary);

   font-family: var(--font-heading);

   font-size: clamp(42px,
         4.5vw,
         64px);

   font-weight: var(--fw-regular);

   line-height: 1.02;

   letter-spacing: -0.5px;
}


.gallery-title span {

   color: var(--primary);

   font-style: italic;
}


/* =========================================================
   INTRO
========================================================= */

.gallery-intro {

   max-width: 350px;

   padding-bottom: 5px;
}


.gallery-intro p {

   margin: 0 0 20px;

   color: var(--text-secondary);

   font-family: var(--font-body);

   font-size: 13px;

   line-height: 1.75;
}


.gallery-view-all {

   display: inline-flex;

   align-items: center;

   gap: 10px;

   color: var(--primary);

   font-family: var(--font-body);

   font-size: 12px;

   font-weight: var(--fw-semibold);

   text-decoration: none;
}


.gallery-view-all i {

   font-size: 10px;

   transition:
      transform var(--transition);
}


.gallery-view-all:hover i {

   transform: translateX(5px);
}


/* =========================================================
   GALLERY GRID
========================================================= */

.gallery-grid {

   display: grid;

   grid-template-columns:
      1.35fr 0.65fr 0.65fr;

   grid-template-rows:
      250px 250px;

   gap: 15px;
}


/* =========================================================
   GALLERY ITEM
========================================================= */

.gallery-item {

   position: relative;

   display: block;

   width: 100%;
   height: 100%;

   padding: 0;

   border: 0;

   overflow: hidden;

   background: var(--cream-dark);

   cursor: pointer;
}


.gallery-item img {

   display: block;

   width: 100%;
   height: 100%;

   object-fit: cover;

   transition:
      transform 0.8s ease;
}


.gallery-item:hover img {

   transform: scale(1.06);
}


/* =========================================================
   MAIN IMAGE
========================================================= */

.gallery-item-large {

   grid-column: 1;

   grid-row: 1 / 3;
}


/* =========================================================
   MAIN IMAGE AUTO SLIDE
========================================================= */

.gallery-item-large img {

   opacity: 1;

   transition:
      opacity 0.5s ease,
      transform 0.8s ease;
}


.gallery-item-large.image-changing img {

   opacity: 0;
}


/* =========================================================
   OVERLAY
========================================================= */

.gallery-overlay {

   position: absolute;

   inset: 0;

   display: flex;

   align-items: center;
   justify-content: center;

   background:
      rgba(62, 38, 24, 0.45);

   opacity: 0;

   transition:
      opacity 0.3s ease;

   z-index: 2;
}


.gallery-item:hover .gallery-overlay {

   opacity: 1;
}


.gallery-view-icon {

   width: 48px;
   height: 48px;

   display: flex;

   align-items: center;
   justify-content: center;

   background: var(--white);

   color: var(--primary);

   transform: scale(0.8);

   transition:
      transform 0.3s ease;
}


.gallery-item:hover .gallery-view-icon {

   transform: scale(1);
}


.gallery-view-icon i {

   font-size: 12px;
}


/* =========================================================
   SLIDE COUNTER
========================================================= */

.gallery-slide-counter {

   position: absolute;

   right: 20px;
   bottom: 20px;

   z-index: 3;

   display: flex;

   align-items: center;

   gap: 5px;

   padding: 8px 11px;

   background:
      rgba(30, 18, 10, 0.72);

   color: var(--white);

   font-family: var(--font-body);

   font-size: 10px;

   letter-spacing: 1px;
}


/* =========================================================
   GALLERY MODAL
========================================================= */

.gallery-modal {

   position: fixed;

   inset: 0;

   z-index: 99999;

   display: flex;

   align-items: center;
   justify-content: center;

   padding: 30px;

   background:
      rgba(25, 15, 9, 0.94);

   opacity: 0;

   visibility: hidden;

   pointer-events: none;

   transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
}


.gallery-modal.active {

   opacity: 1;

   visibility: visible;

   pointer-events: auto;
}


/* =========================================================
   MODAL CONTENT
========================================================= */

.gallery-modal-content {

   position: relative;

   width: min(1100px,
         90vw);

   height: min(760px,
         85vh);

   display: flex;

   align-items: center;
   justify-content: center;
}


/* =========================================================
   MODAL IMAGE
========================================================= */

.gallery-modal-image-wrapper {

   width: 100%;
   height: 100%;

   display: flex;

   align-items: center;
   justify-content: center;

   overflow: hidden;
}


.gallery-modal-image-wrapper img {

   max-width: 100%;
   max-height: 100%;

   width: auto;
   height: auto;

   object-fit: contain;

   user-select: none;

   transition:
      opacity 0.25s ease;
}


/* =========================================================
   MODAL BUTTONS
========================================================= */

.gallery-modal-close,
.gallery-modal-prev,
.gallery-modal-next {

   position: absolute;

   width: 48px;
   height: 48px;

   display: flex;

   align-items: center;
   justify-content: center;

   border: 1px solid rgba(255, 255, 255, 0.3);

   background:
      rgba(255, 255, 255, 0.08);

   color: var(--white);

   cursor: pointer;

   transition:
      background 0.25s ease,
      border-color 0.25s ease;
}


.gallery-modal-close:hover,
.gallery-modal-prev:hover,
.gallery-modal-next:hover {

   background: var(--white);

   color: var(--primary);

   border-color: var(--white);
}


/* Close */

.gallery-modal-close {

   top: -20px;
   right: -20px;

   z-index: 5;
}


/* Previous */

.gallery-modal-prev {

   left: -70px;

   top: 50%;

   transform: translateY(-50%);
}


/* Next */

.gallery-modal-next {

   right: -70px;

   top: 50%;

   transform: translateY(-50%);
}


/* =========================================================
   MODAL COUNTER
========================================================= */

.gallery-modal-counter {

   position: absolute;

   left: 50%;
   bottom: -45px;

   transform: translateX(-50%);

   display: flex;

   align-items: center;

   gap: 8px;

   color: rgba(255, 255, 255, 0.8);

   font-family: var(--font-body);

   font-size: 11px;

   letter-spacing: 2px;
}



.gallery-modal-backdrop {
   position: absolute;
   inset: 0;
}

.gallery-modal-content {
   position: relative;
   z-index: 2;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

   .gallery-header {

      align-items: flex-start;

      flex-direction: column;

      gap: 20px;

      margin-bottom: 40px;
   }


   .gallery-intro {

      max-width: 550px;
   }


   .gallery-grid {

      grid-template-columns:
         1fr 1fr;

      grid-template-rows:
         300px 200px 200px;
   }


   .gallery-item-large {

      grid-column: 1 / 3;

      grid-row: 1;
   }


   .gallery-item:nth-child(2) {

      grid-column: 1;

      grid-row: 2;
   }


   .gallery-item:nth-child(3) {

      grid-column: 2;

      grid-row: 2;
   }


   .gallery-item:nth-child(4) {

      grid-column: 1;

      grid-row: 3;
   }


   .gallery-item:nth-child(5) {

      grid-column: 2;

      grid-row: 3;
   }


   .gallery-modal-content {

      width: 82vw;

      height: 75vh;
   }


   .gallery-modal-prev {

      left: -60px;
   }


   .gallery-modal-next {

      right: -60px;
   }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

   .gallery-section {

      padding: 65px 0;
   }


   .gallery-container {

      width: calc(100% - 24px);
   }


   .gallery-header {

      gap: 15px;

      margin-bottom: 30px;
   }


   .gallery-title {

      font-size: 42px;
   }


   .gallery-intro {

      max-width: 100%;
   }


   .gallery-intro p {

      font-size: 12px;

      line-height: 1.7;
   }


   /* =========================================
       MOBILE GALLERY
    ========================================= */

   .gallery-grid {

      grid-template-columns:
         1fr 1fr;

      grid-template-rows:
         260px 145px 145px;

      gap: 8px;
   }


   /* Featured */

   .gallery-item-large {

      grid-column: 1 / 3;

      grid-row: 1;

      min-height: 260px;
   }


   /* Small images */

   .gallery-item:nth-child(2) {

      grid-column: 1;

      grid-row: 2;
   }


   .gallery-item:nth-child(3) {

      grid-column: 2;

      grid-row: 2;
   }


   .gallery-item:nth-child(4) {

      grid-column: 1;

      grid-row: 3;
   }


   .gallery-item:nth-child(5) {

      grid-column: 2;

      grid-row: 3;
   }


   /* Always visible mobile icon */

   .gallery-overlay {

      opacity: 1;

      align-items: flex-end;

      justify-content: flex-end;

      padding: 10px;

      background:
         linear-gradient(180deg,
            transparent 55%,
            rgba(62, 38, 24, 0.4));
   }


   .gallery-view-icon {

      width: 34px;
      height: 34px;

      transform: scale(1);
   }


   .gallery-view-icon i {

      font-size: 10px;
   }


   /* Counter */

   .gallery-slide-counter {

      right: 12px;
      bottom: 12px;

      padding: 7px 9px;

      font-size: 9px;
   }


   /* =========================================
       MOBILE MODAL
    ========================================= */

   .gallery-modal {

      padding: 15px;
   }


   .gallery-modal-content {

      width: 100%;

      height: 75vh;
   }


   .gallery-modal-image-wrapper {

      width: 100%;
      height: 100%;
   }


   .gallery-modal-image-wrapper img {

      max-width: 100%;
      max-height: 70vh;
   }


   .gallery-modal-close {

      top: -55px;
      right: 0;

      width: 44px;
      height: 44px;
   }


   .gallery-modal-prev,
   .gallery-modal-next {

      top: auto;
      bottom: -65px;

      width: 44px;
      height: 44px;

      transform: none;
   }


   .gallery-modal-prev {

      left: 0;
   }


   .gallery-modal-next {

      right: 0;
   }


   .gallery-modal-counter {

      bottom: -55px;

      font-size: 10px;
   }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

   .gallery-grid {

      grid-template-rows:
         230px 125px 125px;
   }


   .gallery-item-large {

      min-height: 230px;
   }


   .gallery-title {

      font-size: 38px;
   }


   .gallery-view-icon {

      width: 32px;
      height: 32px;
   }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

   .gallery-item img,
   .gallery-modal,
   .gallery-modal-image-wrapper img {

      transition: none;
   }

}






/* =========================================================
   HOTEL SONURAJ — LOCATION / ATTRACTIONS SECTION
========================================================= */

.location-section {

   position: relative;

   width: 100%;

   padding: var(--space-5xl) 0;

   background: var(--primary-dark);

   color: var(--white);

   overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.location-container {

   width: min(calc(100% - 60px),
         var(--container-width));

   margin-inline: auto;

   display: grid;

   grid-template-columns:
      minmax(0, 0.85fr) minmax(0, 1fr);

   align-items: center;

   gap: 100px;
}


/* =========================================================
   CONTENT
========================================================= */

.location-content {

   max-width: 520px;
}


/* =========================================================
   EYEBROW
========================================================= */

.location-eyebrow {

   color: var(--cream);
}


.location-eyebrow .section-eyebrow-line {

   background: var(--accent);
}


/* =========================================================
   TITLE
========================================================= */

.location-title {

   margin: 0;

   color: var(--white);

   font-family: var(--font-heading);

   font-size: clamp(44px,
         4.5vw,
         66px);

   font-weight: var(--fw-regular);

   line-height: 1.02;

   letter-spacing: -0.5px;
}


.location-title span {

   display: block;

   color: var(--cream);

   font-style: italic;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.location-description {

   max-width: 500px;

   margin: 25px 0 0;

   color: rgba(255, 255, 255, 0.72);

   font-family: var(--font-body);

   font-size: 14px;

   line-height: 1.85;
}


/* =========================================================
   LOCATION INFO
========================================================= */

.location-info {

   display: flex;

   flex-direction: column;

   margin-top: 30px;

   border-top: 1px solid rgba(255, 255, 255, 0.15);
}


.location-info-item {

   display: flex;

   align-items: center;

   gap: 15px;

   padding: 17px 0;

   border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}


/* =========================================================
   LOCATION ICON
========================================================= */

.location-info-icon {

   width: 42px;
   height: 42px;

   display: flex;

   align-items: center;
   justify-content: center;

   flex-shrink: 0;

   border: 1px solid rgba(255, 255, 255, 0.2);

   color: var(--cream);
}


.location-info-icon i {

   font-size: 13px;
}


/* =========================================================
   LOCATION TEXT
========================================================= */

.location-info-item>div {

   display: flex;

   flex-direction: column;

   gap: 4px;
}


.location-info-item strong {

   color: var(--white);

   font-family: var(--font-body);

   font-size: 12px;

   font-weight: var(--fw-semibold);
}


.location-info-item>div span {

   color: rgba(255, 255, 255, 0.55);

   font-family: var(--font-body);

   font-size: 10px;

   line-height: 1.4;
}


/* =========================================================
   BUTTON
========================================================= */

.location-button {

   display: inline-flex;

   align-items: center;

   gap: 12px;

   margin-top: 32px;

   padding: 14px 22px;

   background: var(--cream);

   color: var(--primary-dark);

   border: 1px solid var(--cream);

   font-family: var(--font-body);

   font-size: 12px;

   font-weight: var(--fw-semibold);

   text-decoration: none;

   transition:
      background var(--transition),
      color var(--transition),
      transform var(--transition);
}


.location-button i {

   font-size: 10px;

   transition:
      transform var(--transition);
}


.location-button:hover {

   background: var(--white);

   color: var(--primary-dark);

   transform: translateY(-2px);
}


.location-button:hover i {

   transform: translateX(5px);
}


/* =========================================================
   ATTRACTIONS
========================================================= */

.attractions-wrapper {

   width: 100%;
}


/* =========================================================
   ATTRACTIONS HEADING
========================================================= */

.attractions-heading {

   display: flex;

   align-items: center;

   justify-content: space-between;

   padding-bottom: 15px;

   border-bottom: 1px solid rgba(255, 255, 255, 0.2);

   color: rgba(255, 255, 255, 0.5);

   font-family: var(--font-body);

   font-size: 9px;

   font-weight: var(--fw-semibold);

   letter-spacing: 2px;
}


/* =========================================================
   ATTRACTION ITEM
========================================================= */

.attraction-item {

   display: grid;

   grid-template-columns:
      45px 1fr 40px;

   align-items: center;

   gap: 20px;

   padding: 25px 0;

   color: var(--white);

   border-bottom: 1px solid rgba(255, 255, 255, 0.15);

   text-decoration: none;

   transition:
      padding-left var(--transition);
}


.attraction-item:hover {

   padding-left: 10px;

   color: var(--white);
}


/* =========================================================
   NUMBER
========================================================= */

.attraction-number {

   color: var(--accent);

   font-family: var(--font-heading);

   font-size: 18px;

   font-weight: var(--fw-regular);
}


/* =========================================================
   ATTRACTION CONTENT
========================================================= */

.attraction-content {

   min-width: 0;
}


.attraction-content h3 {

   margin: 0;

   color: var(--white);

   font-family: var(--font-heading);

   font-size: 27px;

   font-weight: var(--fw-regular);

   line-height: 1.15;
}


.attraction-content p {

   margin: 6px 0 0;

   color: rgba(255, 255, 255, 0.5);

   font-family: var(--font-body);

   font-size: 10px;

   line-height: 1.5;
}


/* =========================================================
   ARROW
========================================================= */

.attraction-arrow {

   width: 38px;
   height: 38px;

   display: flex;

   align-items: center;
   justify-content: center;

   border: 1px solid rgba(255, 255, 255, 0.2);

   color: var(--cream);

   transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition);
}


.attraction-arrow i {

   font-size: 10px;
}


.attraction-item:hover .attraction-arrow {

   background: var(--cream);

   color: var(--primary-dark);

   border-color: var(--cream);
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1200px) {

   .location-container {

      gap: 60px;
   }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

   .location-container {

      width: min(calc(100% - 40px),
            var(--container-width));

      grid-template-columns: 1fr;

      gap: 60px;
   }


   .location-content {

      max-width: 650px;
   }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

   .location-section {

      padding: 70px 0;
   }


   .location-container {

      width: calc(100% - 24px);

      gap: 50px;
   }


   .location-title {

      font-size: 42px;
   }


   .location-description {

      font-size: 13px;

      line-height: 1.75;
   }


   .location-info {

      margin-top: 25px;
   }


   .location-button {

      width: 100%;

      justify-content: center;
   }


   .attraction-item {

      grid-template-columns:
         35px 1fr 36px;

      gap: 12px;

      padding: 20px 0;
   }


   .attraction-content h3 {

      font-size: 23px;
   }


   .attraction-content p {

      font-size: 9px;
   }


   .attraction-arrow {

      width: 36px;
      height: 36px;
   }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

   .location-title {

      font-size: 38px;
   }


   .attraction-content h3 {

      font-size: 21px;
   }

}





/* =========================================================
   HOTEL SONURAJ — REVIEWS SECTION
========================================================= */

.reviews-section {

   position: relative;

   width: 100%;

   padding: var(--space-5xl) 0;

   background: var(--white);

   overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.reviews-container {

   width: min(calc(100% - 60px),
         var(--container-width));

   margin-inline: auto;

   display: grid;

   grid-template-columns:
      0.8fr 1.2fr;

   align-items: center;

   gap: 110px;
}


/* =========================================================
   LEFT INTRO
========================================================= */

.reviews-intro {

   max-width: 500px;
}


.reviews-title {

   margin: 0;

   color: var(--text-primary);

   font-family: var(--font-heading);

   font-size: clamp(44px,
         4.5vw,
         65px);

   font-weight: var(--fw-regular);

   line-height: 1.02;

   letter-spacing: -0.5px;
}


.reviews-title span {

   display: block;

   color: var(--primary);

   font-style: italic;
}


.reviews-description {

   max-width: 440px;

   margin: 25px 0 0;

   color: var(--text-secondary);

   font-family: var(--font-body);

   font-size: 13px;

   line-height: 1.85;
}


/* =========================================================
   OVERALL RATING
========================================================= */

.reviews-overall {

   display: flex;

   align-items: center;

   gap: 18px;

   margin-top: 35px;

   padding-top: 25px;

   border-top: 1px solid var(--border-light);
}


.reviews-rating-number {

   color: var(--primary);

   font-family: var(--font-heading);

   font-size: 52px;

   font-weight: var(--fw-regular);

   line-height: 1;
}


.reviews-overall>div:last-child {

   display: flex;

   flex-direction: column;

   gap: 6px;
}


.reviews-overall span {

   color: var(--text-light);

   font-family: var(--font-body);

   font-size: 9px;

   text-transform: uppercase;

   letter-spacing: 1px;
}


/* =========================================================
   STARS
========================================================= */

.review-stars {

   display: flex;

   align-items: center;

   gap: 4px;

   color: var(--accent);
}


.review-stars i {

   font-size: 10px;
}


/* =========================================================
   SHOWCASE
========================================================= */

.reviews-showcase {

   position: relative;

   min-height: 500px;

   display: flex;

   flex-direction: column;

   justify-content: center;
}


/* =========================================================
   REVIEW ITEM
========================================================= */

.review-item {

   display: none;

   padding: 45px 50px;

   background: var(--cream);

   border-left: 3px solid var(--primary);

}


.review-item.active {

   display: block;

   animation:
      reviewSlideIn 0.5s ease;
}


@keyframes reviewSlideIn {

   from {

      opacity: 0;

      transform: translateX(25px);

   }

   to {

      opacity: 1;

      transform: translateX(0);

   }

}


/* =========================================================
   REVIEW TOP
========================================================= */

.review-item-top {

   display: flex;

   align-items: center;

   justify-content: space-between;

   margin-bottom: 30px;
}


.review-number {

   color: var(--primary);

   font-family: var(--font-heading);

   font-size: 16px;
}


/* =========================================================
   REVIEW TEXT
========================================================= */

.review-item .review-text {

   max-width: 700px;

   margin: 0;

   color: var(--text-primary);

   font-family: var(--font-heading);

   font-size: clamp(25px,
         3vw,
         36px);

   font-weight: var(--fw-regular);

   line-height: 1.45;
}


/* =========================================================
   AUTHOR
========================================================= */

.review-author {

   display: flex;

   align-items: center;

   gap: 15px;

   margin-top: 35px;
}


.review-author-line {

   width: 35px;

   height: 1px;

   background: var(--primary);
}


.review-author>div {

   display: flex;

   flex-direction: column;

   gap: 3px;
}


.review-author strong {

   color: var(--text-primary);

   font-family: var(--font-body);

   font-size: 11px;

   font-weight: var(--fw-semibold);
}


.review-author span:not(.review-author-line) {

   color: var(--text-light);

   font-family: var(--font-body);

   font-size: 9px;
}


/* =========================================================
   CONTROLS
========================================================= */

.reviews-controls {

   display: flex;

   align-items: center;

   justify-content: space-between;

   margin-top: 25px;
}


.reviews-counter {

   display: flex;

   align-items: center;

   gap: 6px;

   color: var(--text-light);

   font-family: var(--font-body);

   font-size: 10px;

   letter-spacing: 1px;
}


.reviews-counter strong {

   color: var(--primary);

   font-weight: var(--fw-semibold);
}


/* =========================================================
   ARROWS
========================================================= */

.reviews-arrows {

   display: flex;

   gap: 8px;
}


.reviews-arrows button {

   width: 44px;
   height: 44px;

   display: flex;

   align-items: center;
   justify-content: center;

   background: var(--white);

   color: var(--primary);

   border: 1px solid var(--border-light);

   cursor: pointer;

   transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition),
      transform var(--transition);
}


.reviews-arrows button:hover {

   background: var(--primary);

   color: var(--white);

   border-color: var(--primary);

   transform: translateY(-2px);
}


.reviews-arrows i {

   font-size: 10px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

   .reviews-container {

      grid-template-columns: 1fr;

      gap: 55px;
   }


   .reviews-intro {

      max-width: 650px;
   }


   .reviews-showcase {

      min-height: auto;
   }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

   .reviews-section {

      padding: 70px 0;
   }


   .reviews-container {

      width: calc(100% - 24px);

      gap: 40px;
   }


   .reviews-title {

      font-size: 42px;
   }


   .reviews-description {

      font-size: 12px;

      line-height: 1.75;
   }


   .reviews-overall {

      margin-top: 25px;

      padding-top: 20px;
   }


   .reviews-rating-number {

      font-size: 45px;
   }


   .reviews-showcase {

      min-height: 420px;
   }


   .review-item {

      padding: 30px 22px;

      border-left-width: 2px;
   }


   .review-item-top {

      margin-bottom: 22px;
   }


   .review-item .review-text {

      font-size: 23px;

      line-height: 1.5;
   }


   .review-author {

      margin-top: 28px;
   }


   .reviews-controls {

      margin-top: 20px;
   }


   .reviews-arrows button {

      width: 40px;
      height: 40px;
   }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

   .reviews-title {

      font-size: 38px;
   }


   .review-item {

      padding: 25px 18px;
   }


   .review-item .review-text {

      font-size: 20px;
   }

}






/* =========================================================
   HOTEL SONURAJ — FOOTER
========================================================= */

.site-footer {

   position: relative;

   width: 100%;

   background: var(--primary-dark);

   color: var(--white);

   overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.footer-container {

   width: min(calc(100% - 60px),
         var(--container-width));

   margin-inline: auto;
}


/* =========================================================
   FOOTER TOP
========================================================= */

.footer-top {

   display: grid;

   grid-template-columns:
      1.5fr 0.7fr 1fr 1fr;

   gap: 70px;

   padding: 80px 0 70px;
}


/* =========================================================
   BRAND
========================================================= */

.footer-brand {

   max-width: 350px;
}


/* =========================================================
   LOGO
========================================================= */

.footer-logo {

   display: inline-block;

   color: var(--white);

   font-family: var(--font-heading);

   font-size: 32px;

   font-weight: var(--fw-regular);

   line-height: 1;

   text-decoration: none;
}


.footer-logo span {

   color: var(--cream);

   font-style: italic;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.footer-description {

   max-width: 320px;

   margin: 22px 0 25px;

   color: rgba(255, 255, 255, 0.58);

   font-family: var(--font-body);

   font-size: 11px;

   line-height: 1.8;
}


/* =========================================================
   SOCIAL
========================================================= */

.footer-social {

   display: flex;

   align-items: center;

   gap: 8px;
}


.footer-social a {

   width: 36px;
   height: 36px;

   display: flex;

   align-items: center;
   justify-content: center;

   border: 1px solid rgba(255, 255, 255, 0.18);

   color: var(--cream);

   text-decoration: none;

   transition:
      background var(--transition),
      color var(--transition),
      border-color var(--transition),
      transform var(--transition);
}


.footer-social a:hover {

   background: var(--cream);

   color: var(--primary-dark);

   border-color: var(--cream);

   transform: translateY(-3px);
}


.footer-social i {

   font-size: 11px;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.footer-column h3 {

   margin: 0 0 22px;

   color: var(--white);

   font-family: var(--font-body);

   font-size: 10px;

   font-weight: var(--fw-semibold);

   letter-spacing: 2px;

   text-transform: uppercase;
}


.footer-column ul {

   display: flex;

   flex-direction: column;

   gap: 12px;

   margin: 0;

   padding: 0;

   list-style: none;
}


.footer-column li {

   margin: 0;
}


.footer-column li a {

   color: rgba(255, 255, 255, 0.55);

   font-family: var(--font-body);

   font-size: 11px;

   text-decoration: none;

   transition:
      color var(--transition),
      padding-left var(--transition);
}


.footer-column li a:hover {

   color: var(--cream);

   padding-left: 5px;
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact {

   display: flex;

   flex-direction: column;
}


.footer-contact-item {

   display: flex;

   align-items: flex-start;

   gap: 12px;

   margin-bottom: 16px;

   color: rgba(255, 255, 255, 0.58);

   font-family: var(--font-body);

   font-size: 10px;

   line-height: 1.6;

   text-decoration: none;

   transition:
      color var(--transition);
}


.footer-contact-item:hover {

   color: var(--cream);
}


.footer-contact-icon {

   width: 30px;
   height: 30px;

   display: flex;

   align-items: center;
   justify-content: center;

   flex-shrink: 0;

   border: 1px solid rgba(255, 255, 255, 0.15);

   color: var(--cream);
}


.footer-contact-icon i {

   font-size: 9px;
}


/* =========================================================
   BOOKING
========================================================= */

.footer-booking {

   display: flex;

   flex-direction: column;

   align-items: flex-start;
}


.footer-booking-eyebrow {

   color: var(--accent);

   font-family: var(--font-body);

   font-size: 8px;

   font-weight: var(--fw-semibold);

   letter-spacing: 2px;
}


.footer-booking h3 {

   margin: 15px 0 22px;

   color: var(--white);

   font-family: var(--font-heading);

   font-size: 29px;

   font-weight: var(--fw-regular);

   line-height: 1.15;
}


.footer-booking h3 span {

   display: block;

   color: var(--cream);

   font-style: italic;
}


/* =========================================================
   WHATSAPP
========================================================= */

.footer-whatsapp {

   display: flex;

   align-items: center;

   gap: 12px;

   width: 100%;

   padding: 14px 16px;

   background: var(--cream);

   color: var(--primary-dark);

   text-decoration: none;

   font-family: var(--font-body);

   font-size: 10px;

   font-weight: var(--fw-semibold);

   transition:
      background var(--transition),
      color var(--transition),
      transform var(--transition);
}


.footer-whatsapp>i:first-child {

   font-size: 17px;
}


.footer-whatsapp>span {

   flex: 1;
}


.footer-whatsapp>i:last-child {

   font-size: 9px;
}


.footer-whatsapp:hover {

   background: var(--white);

   color: var(--primary-dark);

   transform: translateY(-2px);
}


/* =========================================================
   DIVIDER
========================================================= */

.footer-divider {

   width: 100%;

   height: 1px;

   background:
      rgba(255, 255, 255, 0.12);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 25px;

   padding: 20px 0;
}


.footer-bottom p {

   margin: 0;

   color: rgba(255, 255, 255, 0.4);

   font-family: var(--font-body);

   font-size: 9px;
}


/* =========================================================
   BOTTOM LINKS
========================================================= */

.footer-bottom-links {

   display: flex;

   align-items: center;

   gap: 10px;
}


.footer-bottom-links a {

   color: rgba(255, 255, 255, 0.4);

   font-family: var(--font-body);

   font-size: 9px;

   text-decoration: none;

   transition:
      color var(--transition);
}


.footer-bottom-links a:hover {

   color: var(--cream);
}


.footer-bottom-links span {

   color: rgba(255, 255, 255, 0.2);

   font-size: 8px;
}


/* =========================================================
   CREDIT
========================================================= */

.footer-credit i {

   color: var(--accent);

   margin: 0 2px;
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1200px) {

   .footer-top {

      grid-template-columns:
         1.3fr 0.7fr 1fr;

      gap: 50px;
   }


   .footer-booking {

      grid-column: 1 / -1;

      max-width: 350px;
   }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

   .footer-container {

      width: min(calc(100% - 40px),
            var(--container-width));
   }


   .footer-top {

      grid-template-columns:
         1fr 1fr;

      gap: 45px;
   }


   .footer-brand {

      max-width: 400px;
   }


   .footer-booking {

      grid-column: auto;

      max-width: none;
   }


   .footer-bottom {

      flex-wrap: wrap;

      justify-content: center;

      text-align: center;
   }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

   .footer-container {

      width: calc(100% - 30px);
   }


   .footer-top {

      grid-template-columns: 1fr;

      gap: 40px;

      padding: 60px 0 50px;
   }


   .footer-brand {

      max-width: 100%;
   }


   .footer-logo {

      font-size: 30px;
   }


   .footer-description {

      max-width: 100%;

      font-size: 11px;
   }


   .footer-column h3 {

      margin-bottom: 18px;
   }


   .footer-booking {

      max-width: 100%;
   }


   .footer-booking h3 {

      font-size: 27px;
   }


   .footer-whatsapp {

      max-width: 350px;
   }


   .footer-bottom {

      flex-direction: column;

      gap: 12px;

      padding: 20px 0;
   }


   .footer-bottom-links {

      order: 2;

      flex-wrap: wrap;

      justify-content: center;
   }


   .footer-credit {

      order: 3;
   }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

   .footer-container {

      width: calc(100% - 24px);
   }


   .footer-top {

      gap: 35px;

      padding: 50px 0 40px;
   }


   .footer-logo {

      font-size: 28px;
   }


   .footer-booking h3 {

      font-size: 25px;
   }

}