/* Reset & Box Model */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace;
  font-weight: 100;
}

/* Root Colors */
:root {
  --primary-green: #023b2d;
  --pure-white: #ffffff;
  --coal-black: #000000;
  --footer-dark: #041410;
  --golden-yellow: #b18745;
  --navy-blue: #041e24;
  --light-beige: #fff8eb;
  --border: #ffffff4d;
}

/* Font Imports */
@font-face {
  font-family: rfont;
  src: url(../fonts/679159375198c7ad907b3258_BeautiqueDisplayCondensed-Regular.otf);
}
@font-face {
  font-family: mfont;
  src: url(../fonts/679159372ccf41ce02bdf50f_BeautiqueDisplayCondensed-Medium.otf);
}
@font-face {
  font-family: lfont;
  src: url(../fonts/6791599e11d2e6d2e7d4fd1d_BeautiqueDisplayCondensed-Light.otf);
}
@font-face {
  font-family: bmona;
  src: url(../fonts/6787c79510cc3801f05f154a_Mona-Sans-Bold.otf);
}
@font-face {
  font-family: smona;
  src: url(../fonts/6787c79510cc3801f05f1558_Mona-Sans-SemiBold.otf);
}
@font-face {
  font-family: rmona;
  src: url(../fonts/6787c79510cc3801f05f1551_Mona-Sans-Regular.otf);
}
@font-face {
  font-family: mmona;
  src: url(../fonts/6787c79510cc3801f05f154a_Mona-Sans-Medium.otf);
}

/* Loader Container */
#loader {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  overflow: hidden;
  z-index: 9999;
}

/* Loader Sections */
.loaderSections {
  flex: 1;
  height: 100%;
  background-color: var(--primary-green);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Center Text Wrapper - Fixed on screen */
.loaderTextWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  pointer-events: none;
}

/* Heading Text */
.loadertext h1 {
  color: var(--pure-white);
  text-align: center;
  font-family: lfont;
  font-size: clamp(2rem, 6vw, 7rem);
  font-weight: 100;
  letter-spacing: 0.2rem;
  line-height: 1em;
}

/* Cursor Animation */
.cursor {
  position: fixed; /* ← This makes the cursor stick to the viewport */
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: var(--golden-yellow);
  border-radius: 50%;
  z-index: 100000;
  pointer-events: none; /* Prevents blocking interactions */
}

.cursor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--golden-yellow);
  opacity: 0.5;
  z-index: 100000;
}
/* Container covering full width, hides horizontal overflow */
#main {
  width: 100%;
  overflow-x: hidden;
}

/* Hero section fills full viewport height and width */
#hero {
  height: 100vh;
  width: 100%;
}

/* Header styling with fixed height, full width, and semi-transparent border */
#header {
  height: 7.1em;
  width: 100%;
  border-bottom: 1px solid #ffffff4d;
  backdrop-filter: blur(15px); /* Blurs background content behind header */
  mask-image: linear-gradient(
    to bottom,
    transparent,
    black 1%,
    black 99%,
    transparent /* Fade out mask at bottom */
  );
}

/* Navbar uses flexbox for horizontal layout */
#navbar {
  display: flex;
}

/* Left navigation menu container */
#navMenu {
  height: 7.1em;
  width: 9.4%;
  border-right: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000;
  position: relative; /* Make z-index take effect */
}

/* Hamburger menu container - vertical stacked bars */
.ham {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  width: 3em;
  height: 4rem;
  cursor: pointer; /* Pointer cursor on hover */
  margin-right: 6%;
}
.close {
  height: 7.1em;
  width: 100%;
  position: absolute;
  top: 0;
  display: flex;
  justify-content: start;
  align-items: center;
  padding-left: 1.6%;
}
.closeham {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  width: 3em;
  height: 4rem;
  cursor: pointer; /* Pointer cursor on hover */
  padding-right: 1%;
}
.closeham span {
  display: block;
  height: 0.1em;
  background-color: #ffffff;
  transition: all 0.3s ease; /* Smooth animation for hover effects */
}
#closewidth {
  width: 3rem;
  transform-origin: right;
  height: 0.1em; /* Or keep it 0.1em if you want it like the rest */
  transform: scaleX(0.4);
}

/* Style for each bar in hamburger menu */
.ham span {
  display: block;
  height: 0.1em;
  background-color: #ffffff;
  transition: all 0.3s ease; /* Smooth animation for hover effects */
}

/* Full width for first hamburger bar */
.chamburger {
  width: 3rem;
  height: 0.1em;
  background-color: #ffffff;
}

/* Full width for second bar, transform origin for animation */
#hamWidth {
  width: 100%;
  transform-origin: right;
}

/* Navigation menu text styling */
.navMenu {
  font-size: 0.9em;
  text-transform: uppercase;
  font-family: rmona;
  letter-spacing: 0.1em;
  color: var(--pure-white);
  cursor: pointer;
}
/* Fullscreen overlay menu - hidden by default */
.closeham:hover #closewidth,
.navMenu:hover ~ .ham #closeWidth {
  transform: scaleX(1);
}

/* Container for navigation items, flex layout spaced */
#navItems {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 7.1rem;
}

/* Logo container, centers content */
#navLogo {
  width: 15rem;
  height: 7.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Navbar Container */
#navbar {
  display: flex;
}

/* Left Navigation Menu Container */
#navMenu {
  height: 7.1em;
  width: 9.4%;
  border-right: 1px solid var(--border);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hamburger Menu */
.ham {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  width: 3rem;
  height: 4rem;
  cursor: pointer;
  margin-right: 6%;
}

/* Hamburger Bars */
.ham span {
  display: block;
  height: 0.1rem;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

/* Bar Variants */
.hamburger {
  width: 100%;
}

#hamWidth {
  width: 100%;
  transform-origin: right;
}

/* Hover Animation on Text or Hamburger */
.navMenu:hover #hamWidth,
.ham:hover #hamWidth {
  transform: scaleX(0.4);
}
.fullScreenMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--primary-green);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transform: translateY(-100%);
}

.fullScreenMenu.active {
  top: 0;
  pointer-events: auto;
}

/* Menu Container Layout */
.menu_component {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Menu Link Style */
.menu_link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s ease;
  overflow: hidden;
  text-decoration: none;
  color: var(--pure-white);
  padding: 2% 0;
}
.menu_link-texts {
  position: relative;
  height: 2.2rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2%;
}

.menu_link-text {
  color: var(--primary--white);
  font-size: 2.5rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1.1;
}

/* Top text (default view) */
.menu_link-text._1 {
  transform: translateY(0%);
  transition: transform 0.4s ease;
}

/* Bottom text (initially hidden below) */
.menu_link-text._2 {
  transform: translateY(100%);
  transition: transform 0.4s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.menu_link-lines {
  display: flex;
  flex-direction: column;
  width: 0rem;
  transition: width 0.4s ease;
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.5rem;
}

.menu_link-line {
  background-color: var(--golden-yellow);
  width: 100%;
  height: 1px;
  transition: all 0.4s ease;
}

/* Hover effect — both texts move upward */
.menu_link:hover .menu_link-text._1 {
  transform: translateY(-100%);
}

.menu_link:hover .menu_link-text._2 {
  transform: translateY(0%);
}

.menu_link:hover .menu_link-lines {
  width: 4.5rem;
}

/* Info Section (Phone, Address) */
.menu_infos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}

.menu_info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 0.7;
  transition: opacity 0.2s;
  color: var(--pure-white);
  text-decoration: none;
}

.menu_info:hover {
  opacity: 1;
}

.menu_info-icon {
  width: 1.135rem;
}

.menu_info-divider {
  background-color: #ffffff30;
  width: 1px;
  height: 4rem;
}

.paragraph {
  color: var(--primary--white);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Navigation Text Styling */
.navMenu {
  font-size: 0.9rem;
  text-transform: uppercase;
  font-family: "rmona", sans-serif;
  letter-spacing: 0.1em;
  color: var(--pure-white);
}

/* Nav Items Container */
#navItems {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 7.1rem;
}

/* Logo Container */
#navLogo {
  width: 15rem;
  height: 7.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo Alignment */
#logo {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

/* Logo Image */
#logo img {
  width: 5em;
  height: 5em;
  object-fit: contain;
}

/* Logo Highlight Text */
#logo span {
  font-size: 1.7rem;
  padding-right: 0.4em;
  color: #b18745;
}

/* Logo Title */
#logo h1 {
  font-size: 1.8rem;
  color: white;
  font-family: mfont;
  padding-right: 1rem;
  letter-spacing: 0.1rem;
}

/* Navigation Links Container */
#navLinks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.7em;
  height: 7.1em;
  padding-right: 2em;
}

/* Navigation Link Boxes */
#navLinks div {
  font-size: 1.7rem;
}

/* Actual Anchor Links */
#navLinks div > a {
  text-decoration: none;
  color: var(--pure-white);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* Cart Icon */
#navLinks div:last-of-type {
  font-size: 1.4rem;
  cursor: pointer;
}

/* Book Now Button */
#book {
  height: 4rem;
  width: 10em;
  background-color: var(--border);
  border-radius: 5rem;
  transition: background-color 0.3s ease;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(10px);
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  padding: 0 2.5em;
  justify-content: space-evenly;
}
#book h3 {
  color: var(--pure-white);
  font-size: 1rem;
  font-family: rmona;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  cursor: pointer;
}
#book span {
  width: 5em;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}
span i {
  margin: 0 auto;
  transition: transform 0.2s ease-in-out;
  color: var(--pure-white);
}

#book:hover span i {
  transform: translateX(1.7em);
}

/* Navigation Link Styling + Underline Animation */
#navLinks a {
  position: relative;
  text-decoration: none;
  color: var(--pure-white);
  font-family: "smona", sans-serif;
  font-size: 2vh;
  padding-bottom: 0.5vh;
  text-transform: capitalize;
  overflow: hidden;
}

/* Underline Animation */
#navLinks a::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0.1vh;
  background-color: var(--pure-white);
  transition: width 0.4s ease;
}

#navLinks a:hover::after {
  left: 0;
  right: auto;
  width: 100%;
}

/* --------------- HERO SECTION STARTS HERE -------------------- */
/* Slider container */
#videoSlider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 0;
}
.videoheading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  pointer-events: none;
}

/* Heading Text */
.videoheading h1 {
  color: var(--pure-white);
  text-align: center;
  font-family: lfont;
  font-size: clamp(2rem, 6vw, 7rem);
  font-weight: 100;
  letter-spacing: 0.2rem;
  line-height: 1em;
}

/* Shared styles for video and images */
.heroVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
  filter: brightness(0.5);
  pointer-events: none;
  z-index: 0;
}

/* Active slide styling */
.heroVideo.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

/* Optional: additional image-specific filter */
.heroImg {
  filter: brightness(0.5);
}

/* Buttons container at bottom */
#heroBtns {
  position: absolute;
  bottom: 0%;
  left: 0;
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #2d31314d;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  -webkit-mask-image: linear-gradient(#0000, #000 70%);
  mask-image: linear-gradient(#0000, #000 70%);
  pointer-events: none; /* prevent interaction except buttons */
  z-index: 10;
}

/* Individual progress buttons */
.corosalBtns {
  position: relative;
  overflow: hidden;
  height: 0.1em;
  width: 23%;
  background-color: rgba(255, 255, 255, 0.3);
  margin-top: 3%;
  border-radius: 2em;
  pointer-events: auto;
}

/* Progress bar that fills via GSAP */
.progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-image: linear-gradient(270deg, #fff 20%, #ffffff1f 65%, #fff0);
  transition: none;
}

/* --------------- HERO INFO SECTION -------------------- */

/* Container for hero info content */
#heroInfo {
  height: 100%;
  width: 100%;
  background-color: var(--primary-green);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 10%; /* Vertical padding */
}

/* Nested heroInfo container */
#heroInfo .heroInfo {
  height: 100%;
  width: 100%;
}

/* Container for detailed hero text */
#heroInfo .herodetails {
  height: 89%;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin: 0 auto;
}

/* Styling for hero logo text */
.heroLogo pre {
  font-family: rmona;
  color: var(--pure-white);
  font-size: 1.5rem;
  padding: 1em;
  text-align: center;
}

/* Paragraph styling in hero description */
.heroDes p {
  font-family: rfont;
  color: var(--pure-white);
  font-size: 3vw;
  padding: 3rem 0;
  text-align: center;
}

/* Container for hero assets/icons */
.heroAssects {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 10em;
  width: 100%;
}

/* Individual hero asset container */
.heroAssects .heroast {
  height: 100%;
  width: 100%;
  border: 1px solid #28584c;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Text inside hero assets */
.heroAssects pre {
  font-family: rmona;
  color: var(--pure-white);
  font-size: 1em;
  padding: 0.26em;
  text-wrap: wrap;
}

/* Size of icons inside hero assets */
.heroAssects span {
  height: 6em;
  width: 6em;
  padding: 0.26vw;
}

/* --------------- ABOUT US SECTION STYLES -------------------- */

/* Left image block styling */
.leftimage {
  height: 30%;
  width: 10%;
  background-color: rebeccapurple; /* Fallback color */
  background: url(../images/about-left.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Right image block styling */
.rightimage {
  height: 12%;
  width: 14%;
  background-color: rebeccapurple;
  background-image: url(../images/about-right.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.pin-image {
  height: 0;
  width: 0;
  /* position: absolute ;
  top */
  display: none;
}
.pin-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Applies horizontal margin for spacing */
.upword {
  margin: 0 4%;
}

/* Main aboutUs section container */
#aboutUs {
  height: 100vh; /* Full viewport height */
  width: 100%;
  display: flex; /* Flex container for layout */
  align-items: center; /* Vertically center content */
  background-color: var(--primary-green);
}
/* -------- ABOUT INFO SECTION -------- */

.aboutinfo {
  height: 89%;
  width: 28%;
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  flex-direction: column; /* Stack children vertically */
  text-align: center;
  margin: 0 auto; /* Center container horizontally */
  gap: 2%; /* Gap between flex items */
  margin-bottom: 15%; /* Space below section */
}

/* Heading inside aboutinfo */
.aboutinfo .aboutheading h2 {
  font-family: lfont;
  font-size: 4rem;
  color: var(--golden-yellow);
}

/* Paragraph inside aboutinfo description */
.aboutinfo .aboutdec p {
  font-size: 1.5rem;
  font-family: rmona;
  color: var(--pure-white);
  padding: 5%; /* Padding around paragraph */
  text-wrap: wrap;
}

/* Subheading inside aboutinfo */
.aboutinfo .aboutsubheading h3 {
  font-size: 1.2rem;
  font-family: bmona;
  color: var(--border);
  text-transform: uppercase;
}

/* -------- ROOMS SECTION -------- */

#rooms {
  height: auto; /* Allow height to adjust based on content */
  width: 100%;
  background-color: var(--pure-white);
  margin-top: 1%;
  margin-bottom: 10%;
}

/* Rooms section heading */
#rooms .roomheading h1 {
  text-transform: uppercase;
  color: var(--coal-black);
  font-family: rfont;
  font-size: 4rem;
  padding: 7%; /* Padding around heading */
}

/* Container for rooms */
#rooms .room {
  display: flex;
  justify-content: space-evenly; /* Evenly space child rooms */
  align-items: end; /* Align rooms at the bottom */
  flex-wrap: wrap;
}

/* Left side room container */
.room .leftroom {
  height: auto;
  width: 50%;
  display: flex;
  float: right;
  align-items: flex-end; /* Align children to bottom */
  flex-direction: column;
  /* background-color: red; */ /* Uncomment for debugging */
}

/* Upper room image styling */
.upperroom .roomimg {
  height: 40em;
  width: 46.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/upperimage.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer; /* Indicates clickable */
}

/* Lower room image styling */
.lowerroom .roomimg {
  height: 40em;
  width: 35vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/lowerimage.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

/* Room image container for hover effect */
.roomimg {
  position: relative; /* For absolute positioning inside */
  overflow: hidden; /* Hide overflow content */
  transition: all 0.3s ease-in-out; /* Smooth transition */
}

/* Outline overlay inside room image, hidden initially */
.roomimg .outilne {
  height: 90%;
  width: 90%;
  border: 1px solid #b18745;
  opacity: 0; /* Invisible by default */
  visibility: hidden; /* Prevent interaction */
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  display: flex; /* Flex container but hidden */
  position: absolute; /* Positioned over room image */
}

/* Text button inside outline overlay */
.roomimg .outilne div {
  height: 4rem;
  width: 15em;
  background-color: #041e24;
  border: none;
  color: var(--pure-white);
  font-size: 1rem;
  font-family: bmona;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 5rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Show outline overlay on hover */
.roomimg:hover .outilne {
  opacity: 1;
  visibility: visible;
}

/* Room details container for upper and lower rooms */
.upperroom .roomdetails,
.lowerroom .roomdetails {
  display: flex;
  justify-content: space-between; /* Space between details */
}

/* Show outline on hover over roomdetails - but note the selector seems off */
.upperroom .roomdetails,
.lowerroom .roomdetails:hover .outilne {
  opacity: 1;
  visibility: visible;
}

/* Headings inside room details */
.roomdetails h2,
h4 {
  font-family: rfont;
  font-size: 2rem;
  padding: 1em 0;
}

/* Add top margin to lower room container */
.room .lowerroom {
  margin-top: 15%;
}

/* Right rooms container */
.room .rightrooms {
  height: fit-content; /* Height based on content */
  width: 40%;
  margin-top: 20%;
}
/* --------- RIGHT ROOMS SECTION --------- */

.rightrooms {
  width: 40%;
  float: right; /* Float container to the right side */
  display: flex;
  flex-direction: column; /* Stack children vertically */
  align-items: flex-end; /* Align items to the right */
}

.rightrooms .rupperroom {
  height: 40em;
  width: 85%;
  display: flex;
  justify-content: flex-end; /* Align children to right */
  flex-direction: column;
}

/* Room image in rightrooms */
.rightrooms .roomimg {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../images/leftimage.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  /* filter: brightness(0.4); */ /* Optional dimming effect */
}

/* Room details container for rightrooms */
.rightrooms .roomdetails {
  display: flex;
  justify-content: space-between; /* Space items evenly */
  width: 100%;
}

/* --------- LOWER SECTION --------- */

.lowersec {
  height: 24vh; /* 24% of viewport height */
  width: 80%;
  margin-top: 20%;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
}

/* Lower section heading */
.lowersec .lowerheading h3 {
  font-family: rfont;
  font-size: 1.8rem;
  text-align: start;
  padding-right: 10rem; /* Adds right padding */
  /* text-wrap: wrap; Note: this should be word-wrap or overflow-wrap */
}

/* Button inside lower section */
.lowersec .lowerbtn button {
  height: 4rem;
  width: 15em;
  background-color: var(--border);
  border: 1px solid var(--coal-black);
  color: var(--footer-dark);
  font-size: 1.1rem;
  font-family: bmona;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 20%;
  align-self: flex-end; /* Align button to the right */
  gap: 0.6em;
}

.lowerbtn button span > i {
  color: var(--primary-green);
  font-size: 1.1rem;
  font-weight: 600;
}

/* --------- GALLERY SECTION --------- */

#gallery .gallery {
  height: 90vh; /* Full viewport height */
  width: 100vw; /* Full viewport width */
  background-color: var(--golden-yellow);
  position: relative;
  top: 0;
  left: 0;
}

/* Container for gallery images */
.gallery .galleryimages {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

/* Each gallery image takes 1/3 width and full height */
.galleryimage-1,
.galleryimage-2,
.galleryimage-3 {
  height: 100%;
  width: 33.33%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Specific background images */
.galleryimage-1 {
  background-image: url(../images/gallery1.webp);
}
.galleryimage-2 {
  background-image: url(../images/gallery2.webp);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all 0.3s ease-in-out;
}
.galleryimage-3 {
  background-image: url(../images/gallery3.webp);
}

/* Top blur overlay in gallery */
.gallery .topblur {
  height: 5rem;
  width: 100%;
  background-color: transparent;
  position: absolute;
  top: 0;
  backdrop-filter: blur(20px);
  mask-image: linear-gradient(#000 30%, #0000);
  -webkit-mask-image: linear-gradient(#000 50%, #0000);
}

/* Bottom blur overlay in gallery */
.gallery .bottumblur {
  height: 15rem;
  width: 100%;
  background-color: transparent;
  position: absolute;
  bottom: 0;
  backdrop-filter: blur(20px);
  mask-image: linear-gradient(#0000, #000 50%);
  -webkit-mask-image: linear-gradient(#0000, #000 50%);
  z-index: 332;
}

/* Gallery text details container */
.gallery .gallerydetails {
  height: fit-content;
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1.2em;
  position: absolute;
  bottom: 10%;
  z-index: 333;
}

/* Gallery heading */
.gallery .gallerydetails h1 {
  font-family: rfont;
  font-size: 4em;
  color: var(--pure-white);
  text-transform: capitalize;
  padding-top: 8rem;
}

/* Gallery button */
.gallery .gallerydetails button {
  height: 4rem;
  width: 10em;
  background-color: var(--primary-green);
  border: none;
  color: var(--pure-white);
  font-size: 1rem;
  font-family: bmona;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 5rem;
  overflow: hidden;
  outline: none;
}

/* --------- TERRACE ITEMS SECTION --------- */

#terrace-items .terrace-items {
  width: 100vw;
  height: 50rem;
  background-color: var(--light-beige);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 6em;
}

/* Terrace section heading */
.terrace-items .items-heading h1 {
  font-family: lfont;
  font-size: 3em;
  letter-spacing: 0.1rem;
}

/* Container for icons */
.terrace-items .item-icons {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

/* Upper and lower icon rows */
.terrace-items .item-icons .item-icons-upper,
.terrace-items .item-icons .item-icons-lower {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* Individual upper icon container */
.uppericon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 20vw;
}

/* Icon heading */
.uppericon h3 {
  font-family: bmona;
  text-transform: uppercase;
  color: var(--coal-black);
  letter-spacing: 0.1em;
  font-size: 1rem;
  padding-left: 1.5rem;
}

/* Terrace buttons */
.terrace-items button {
  height: 4rem;
  width: 13rem;
  background-color: transparent;
  border: 1.5px solid var(--primary-green);
  color: var(--primary-green);
  font-size: 1rem;
  font-family: bmona;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 5rem;
  overflow: hidden;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0 2em;
}

/* Terrace buttons hover */
.terrace-items button span > i {
  color: var(--primary-green);
  font-size: 1.4rem;
}

/* --------- DINING EXPERIENCE SECTION --------- */
#dinningExperience .dinning-experience {
  height: 120em; /* 100 dynamic viewport height (Chrome experimental) */
  width: 100%;
  background-color: var(--navy-blue);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10rem;
}
.dinning-experience .dinning-image {
  height: 90%;
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: start;
  position: relative;
  /* background-color: rebeccapurple; */
}
/* === Dining Main Container === */
.dinning-image .dinning {
  width: 95%;
  height: 65%;
  border-top-left-radius: 99rem;
  border-top-right-radius: 99rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  margin-top: 6em;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent),
    url("./images/dinning.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
}

.dinning-image .dinning::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-mask-image: linear-gradient(to top, black 5%, transparent 100%);
  mask-image: linear-gradient(to top, black 5%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: rgb(2, 12, 4);
  z-index: 2; /* Above lines but below text */
}

/* === Content in Dining === */
.dinning .dinning-heading h1 {
  font-size: 4em;
  font-family: lfont;
  color: var(--pure-white);
  text-transform: capitalize;
  z-index: 3;
}

.dinning .dinning-text {
  width: 80%;
  line-height: 1.5em;
  height: fit-content;
  z-index: 3;
}

.dinning .dinning-text p {
  font-size: 0.8em;
  font-family: bmona;
  color: var(--pure-white);
  text-transform: uppercase;
  text-align: center;
  padding: 3vw;
  z-index: 3;
}

.light {
  height: 0.15em;
  width: 12%;
  background-color: var(--golden-yellow);
  border-radius: 20em;
  border: 1px solid var(--golden-yellow);
  z-index: 5;
}
/* === Bar Image Section === */
.dinning-experience .bar-image {
  height: 90%;
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: end;
  position: relative;
}

.bar-image .dinning {
  width: 95%;
  height: 65%;
  border-top-left-radius: 99rem;
  border-top-right-radius: 99rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  margin-top: 6em;
  background: url("./images/bar.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
  margin-bottom: 20%;
}

.bar-image .dinning::before {
  content: "";
  position: absolute;
  bottom: 0; /* Changed from top */
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-mask-image: linear-gradient(to top, black 5%, transparent 100%);
  mask-image: linear-gradient(to top, black 5%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: rgb(2, 12, 4);
  z-index: 2; /* Above lines but below text */
}

/* === Animated Lines Container === */
.home-exp_lines {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* Behind the mask */
  pointer-events: none;
}

/* === Common Animated Line Style === */
.home-exp_line-1,
.home-exp_line-2,
.home-exp_line-3 {
  border: 1px solid var(--golden-yellow);
  border-top-left-radius: 99rem;
  border-top-right-radius: 99rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 1; /* Same as lines container */
}

/* Sizes for Concentric Effect */
.home-exp_line-1 {
  width: calc(100% - 6rem);
  height: calc(100% - 6rem);
  top: 3rem;
  left: 3rem;
}

.home-exp_line-2 {
  width: calc(100% - 12rem);
  height: calc(100% - 12rem);
  top: 6rem;
  left: 6rem;
}

.home-exp_line-3 {
  width: calc(100% - 18rem);
  height: calc(100% - 18rem);
  top: 9rem;
  left: 9rem;
}

/* === Hover Trigger for Animated Lines === */
.dinning:hover .home-exp_line-1 {
  opacity: 1;
  transition-delay: 0.1s;
}

.dinning:hover .home-exp_line-2 {
  opacity: 1;
  transition-delay: 0.2s;
}

.dinning:hover .home-exp_line-3 {
  opacity: 1;
  transition-delay: 0.3s;
}

/* === Text Content Layering (if not already included) === */
.dinning-heading,
.dinning-text,
.dinning-text p {
  position: relative;
  z-index: 3; /* Keep text above all */
}
/* ------------------ booking section  ---------------- */
/* === Booking CTA Section === */
#booking .booking-cta-section {
  width: 100%;
  height: 70rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--light-beige);
  /* padding: 1rem 0; */
}
.booking-cta-section .booking-content {
  width: 33.333%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.booking-content .booking-text h1 {
  font-family: lfont;
  font-size: 4vw;
  text-align: start;
  width: 60%;
  margin: 0 auto;
  letter-spacing: 0.2rem;
  color: var(--primary-green);
  flex-wrap: wrap;
}
.booking-content .booking-subtext {
  display: flex;
  justify-content: space-between;
  width: 50%;
}
.booking-content .booking-subtext h3 {
  font-family: rmona;
  font-size: 1.2vw;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--golden-yellow);
  padding-top: 2rem;
  letter-spacing: 0.4rem;
}

.booking-cta-section .middle-booking {
  height: 86%;
  width: 30.333%;
  /* border: 1px solid red; */
  display: flex;
  align-items: end;
  position: relative;
}
.booking-cta-section .booking-img {
  height: 92%;
  width: 100%;
  background-image: url("./images/gallery2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.booking-img img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}
.booking-cta-section .booking-btn {
  width: 33.333%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.booking-btn button {
  height: 5rem;
  width: 16rem;
  background-color: var(--primary-green);
  border: 1px solid var(--primary-green);
  color: var(--pure-white);
  font-size: 1.2rem;
  font-family: bmona;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 5rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
}
/* -------------------- footer start -------------------------------------- */
#footer .footer-sec {
  width: 100%;
  height: 44.6em;
  background-color: var(--footer-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}

.footer-sec .footer-links {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
}
.footer-links .footer-sec-left,
.footer-links .footer-sec-middle,
.footer-links .footer-sec-right {
  width: 26%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 2%;
}
.footer-sec-left .footerheading {
  width: 100%;
  height: 10%;
  padding-bottom: 3%;
}
.footeranchors {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 2% 0;
  border-top: 1px solid var(--border);
}
.footeranchors h2 {
  font-family: rmona;
  font-size: 1.7rem;
  color: var(--golden-yellow);
  text-transform: uppercase;
  padding-top: 10%;
}
.footeranchors .outeranchor {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  gap: 10%;
}
.footeranchors ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  flex-wrap: wrap;
}

.footeranchors ul li {
  border-top: 1px solid var(--border);
  color: var(--pure-white);
}
.footer-sec-left .footeranchors ul li {
  color: var(--border);
  font-size: 3rem;
  width: 15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: bmona;
  letter-spacing: 0.2rem;
}
.footeranchors ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1.3rem;
  text-transform: uppercase;
}

.footeranchors ul li span i {
  color: var(--border);
  font-size: 1.5rem;
  cursor: pointer;
}
.foot-details {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: start;
}
.foot-details .footdet {
  color: var(--border);
  font-family: rmona;
  font-size: 0.78em;
  width: 34%;
  /* background-color: red; */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid var(--border);
  transition: width 0.2s ease-in-out;
}
.foot-details .footdet a {
  color: var(--border);
  text-decoration: none;
}
.foot-details .footdet:hover a {
  color: var(--golden-yellow);
  font-size: 1.2em;
  width: 34.1%;
  transition: all 0.2s ease-in-out;
}
.foot-details .footdet:first-child {
  border: none;
}

/* Heading for All Sections */
.footer-sec-middle .footerheading,
.footer-sec-right .footerheading {
  width: 100%;
  height: 10%;
  padding-bottom: 3%;
  opacity: 0;
}
.footer-sec-left .footerheading h1,
.footer-sec-middle .footerheading h1,
.footer-sec-right .footerheading h1 {
  font-family: rmona;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 2%;
}

/* Footer Anchors Shared Style */
.footer-sec-left .footeranchors,
.footer-sec-middle .footeranchors,
.footer-sec-right .footeranchors {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding: 2% 0;
  border-top: 1px solid var(--border);
}
.footeranchors h2 {
  font-family: rmona;
  font-size: 1.7rem;
  color: var(--golden-yellow);
  text-transform: uppercase;
  padding-top: 10%;
}

/* Anchor Group Columns */
.footeranchors .outeranchor {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  gap: 10%;
}
.footeranchors ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.footeranchors ul li {
  border-top: 1px solid var(--border);
  color: var(--pure-white);
}
.footeranchors ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 1.3rem;
  text-transform: uppercase;
}
.footeranchors ul li span i {
  color: var(--border);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Optional: Customize font styles per section if needed */
.footer-sec-left .footeranchors ul li,
.footer-sec-middle .footeranchors ul li,
.footer-sec-right .footeranchors ul li {
  color: var(--border);
  font-size: 3rem;
  width: 15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: bmona;
  letter-spacing: 0.2rem;
}

/* Footer Logo & Contact Styles */
.footdet {
  color: var(--border);
  font-family: rmona;
  font-size: 0.78em;
  margin-top: auto;
}
.footer-sec-middle .footdet {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-sec-middle .footlogo img {
  width: 14em; /* adjust as needed */
  height: auto;
  display: block;
}
.footer-sec-right .footerheading h1 {
  padding-top: 3%;
}
.footer_social {
  grid-column-gap: 1.5rem;
  grid-row-gap: 1.5rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  margin-top: 9%;
}

.footer_social-link {
  border: 1px solid #fff3;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  transition: border 0.2s;
  display: flex;
}

.footer_social-link:hover {
  border-color: var(--border);
}

.footer_social-icon {
  opacity: 0.5;
  width: 1.1rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
.footer-sec-right .footdet {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.footer-sec-right .footdet a:hover {
  color: var(--pure-white);
  transition: all 0.1s ease-in-out;
}
.gmail,
.contactno {
  font-size: 1rem;
  color: var(--border);
  padding-bottom: 2%;
}