/* this is  a responsive code */
/* loader section */
@media screen and (max-width: 768px) {

  .loaderTextWrapper {
    position: absolute;
    top: 23.7%;
  }
}

/*  


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

@media (min-width: 1024px) and (max-width: 1279px) {}
 Desktop 
@media (min-width: 1280px) and (max-width: 1535px) {}
}
 Large Desktop 
@media (min-width: 1536px) {}
}
/* ---------------------- responsive media queries start hero section ------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {
  #header {
    height: 7em;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }
  #navMenu {
    width: 13%;
  }
  #navLinks {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5em;
    height: 7.1em;
    padding-right: 2em;
  }
  #book {
    height: 3rem;
    width: 8rem;
    padding: 0 1rem;
    justify-content: space-evenly;
  }
  #book h3 {
    font-size: 0.9rem;
  }

 
}

@media (min-width: 768px) and (max-width: 1023px) {
  #navMenu {
    width: 15%;
    position: absolute;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border);
    padding: 0 0.5rem;
  }
  .cursor,
  .cursor::after {
    display: none !important;
  }
  #header {
    height: 7em;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }

  #navLinks {
    display: none;
  }
  .close {
    padding-right: 2%;
    justify-content: end;
  }

  .menu_link-text {
    font-size: 2rem;
    line-height: 1;
  }
  #navLogo {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 4%;
  }
  #logo img {
    width: 5em;
    height: 5em;
    object-fit: contain;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  #header {
    height: 6rem;
    display: flex;
    justify-content: center;
  }
  .cursor,
  .cursor::after {
    display: none !important;
  }
  #hero {
    height: 50dvh;
  }
  #videoSlider {
    height: 50%;
  }
  #heroBtns {
    position: absolute;
    bottom: 50%;
  }
  .corosalBtns {
    height: 0.1em;
    margin-top: 10%;
  }
  #navMenu {
    width: 23%;
    /* background-color: red; */
    position: absolute;
    right: 0;
    /* float: left; */
    border-right: none;
    border-left: 1px solid var(--border);
    padding: 0 0.5rem;
  }
  #navLinks {
    display: none;
  }
  .close {
    padding-right: 2%;
    justify-content: end;
  }

  .menu_link-text {
    font-size: 2rem;
    line-height: 1;
  }
  #navLogo {
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 4%;
  }
  #logo img {
    width: 5em;
    height: 5em;
    object-fit: contain;
  }
}
@media (max-width: 479px) {
  .cursor,
  .cursor::after {
    display: none !important;
  }
  #header {
    height: 5rem;
    display: flex;
    justify-content: center;
  }
  #hero {
    height: 50dvh;
  }
  #videoSlider {
    height: 50%;
  }
  #heroBtns {
    position: absolute;
    bottom: 49%;
  }
  .corosalBtns {
    height: 0.1em;
    margin-top: 10%;
  }
  #navMenu {
    width: 23%;
    position: absolute;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border);
    padding: 0 0.5rem;
  }
  #navLinks {
    display: none;
  }
  .close {
    padding-right: 2%;
    justify-content: end;
  }

  .menu_link-text {
    font-size: 2rem;
    line-height: 1;
  }
  #navLogo {
    width: 50%;
    display: flex;
    justify-content: start;
    align-items: start;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 4%;
  }
  #logo img {
    width: 4em;
    height: 4em;
    object-fit: contain;
  }
}

/* ---------------------- responsive media queries end hero section ------------------------------- */

/* ---------------------- responsive media queries start heroinfo section ------------------------------- */

/* Mobile (Small)  */
@media (max-width: 479px) {
  .heroInfo {
    height: 100%;
    margin-bottom: 20%;
  }
  .heroLogo pre {
    font-size: 1.4rem;
    padding: 1em;
  }
  #heroInfo .herodetails {
    width: 90%;
    margin: 0 auto;
  }
  .heroDes p {
    /* background-color: rebeccapurple; */
    font-size: 1.6rem;
    padding: 3rem 0;
    letter-spacing: 0.3rem;
  }
  .heroAssects {
    flex-direction: column;
  }
  .heroAssects .heroast {
    padding: 3% 0;
  }
}

@media (min-width: 480px) and (max-width: 580px) {
  #heroInfo {
  width: 100%;
  height: 100%;
  background-color: var(--primary-green);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5% 0;
  box-sizing: border-box;
}

/* Nested heroInfo container */
#heroInfo .heroInfo {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* Hero details section (logo, description, etc.) */
#heroInfo .herodetails {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  margin: 0;
}

/* Hero logo text */
.heroLogo {
  width: 100rem;
  text-align: center;
}

.heroLogo pre {
  font-family: rmona;
  color: var(--pure-white);
  font-size: 1.5rem;
  padding: 1em 0;
  text-align: center;
  margin: 0;
}

/* Hero description text */
.heroDes {
  width: fit-content;
  text-align: center;
  /* background-color:red; */
}

.heroDes p {
  font-family: rfont;
  color: var(--pure-white);
  font-size: 7vw;
  padding: 3rem;
  margin: 0;
  text-align: center;
}

/* Hero icons/assets container */
.heroAssects {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1em 0;
  box-sizing: border-box;
}

/* Individual hero asset box */
.heroAssects .heroast {
  flex: 1 1 30%;
  max-width: 100%;
  border: 1px solid #28584c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1em;
  box-sizing: border-box;
  text-align: center;
}

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

/* Icon size inside hero assets */
.heroAssects span {
  height: 6em;
  width: 6em;
  padding: 0.5em;
  display: block;
}


}
/* Mobile (Large)  */
@media (min-width: 480px) and (max-width: 767px) {
  .heroInfo {
    height: 100%;
  }
  .heroLogo pre {
    font-size: 1.4rem;
    padding-top: 3r;
  }
  #heroInfo .herodetails {
    width: 65%;
    gap: 2rem;
    /* background-color: red; */
  }
  .heroDes {
    width: 100%;
  }
  .heroDes p {
    /* background-color: rebeccapurple; */
    font-size: 2.2rem;
    /* background-color: red; */
    text-align: center;
  }
  .heroAssects .heroast {
    height: 100%;
    width: 100%;
    padding: 1.2rem;
  }
  .heroAssects pre {
    font-size: 1rem;
    padding: 0.2em;
  }
}
/* Tablet  */
@media (min-width: 768px) and (max-width: 1023px) {
  .heroLogo pre {
    font-size: 1.4rem;
    padding: 1em;
  }
  #heroInfo .herodetails {
    width: 60%;
    margin: 0 auto;
    gap: 3rem;
  }
  .heroDes p {
    /* background-color: rebeccapurple; */
    font-size: 2.5rem;
  }
}
/* Small Laptop  */
@media (min-width: 1024px) and (max-width: 1279px) {
  #heroInfo .herodetails {
    gap: 5rem;
  }
}

/* ---------------------- responsive media queries end heroinfo section ------------------------------- */

/* ---------------------- responsive media queries start aboutus section ------------------------------- */

@media (max-width: 479px) {
  .rightimage {
    display: none;
  }
  .leftimage {
    display: none;
  }
  .upword {
    margin: 0 4%;
  }
  #aboutUs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
  }
  .aboutinfo {
    height: 89%;
    width: 90%;
    gap: 2rem;
  }
  .aboutinfo .aboutheading h2 {
    font-size: 4rem;
  }
  .aboutinfo .aboutdec p {
    font-size: 1rem;
    text-wrap: wrap;
  }
  .aboutinfo .aboutsubheading h3 {
    font-size: 1rem;
  }
  .pin-image {
    display: flex;
    width: 80%;
    height: 80%;
    padding-top: 15rem;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .rightimage {
    display: none;
  }
  .leftimage {
    display: none;
  }
  .pin-image {
    display: flex;
    width: 50%;
    height: 50%;
  }
  .aboutinfo {
    width: 80%;
    gap: 2%;
  }
  .aboutinfo .aboutheading h2 {
    font-size: 4rem;
    margin-top: 20%;
  }
  .aboutinfo .aboutdec p {
    font-size: 1.3rem;
    padding: 1%;
    /* text-wrap: nowrap; */
  }
  .aboutinfo .aboutsubheading h3 {
    font-size: 1rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .rightimage {
    display: none;
  }
  .leftimage {
    display: none;
  }
  .pin-image {
    display: flex;
    width: 100%;
    height: 70%;
  }
  .aboutinfo {
    width: 50%;
  }
  .aboutinfo .aboutheading h2 {
    font-size: 4rem;
  }
  .aboutinfo .aboutdec p {
    font-size: 1.3rem;
  }
  .aboutinfo .aboutsubheading h3 {
    font-size: 1rem;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .aboutinfo {
    width: 50%;
    /* background-color: red; */
  }
  .aboutinfo .aboutdec p {
    font-size: 1.4rem;
  }
  .leftimage {
    height: 30%;
    width: 17%;
  }
}

/* ---------------------- responsive media queries end aboutus section ------------------------------- */
/* ---------------------- responsive media queries start rooms section ------------------------------- */

@media (max-width: 479px) {
  /* Rooms section heading */
  #rooms .roomheading h1 {
    text-transform: uppercase;
    font-size: 3rem;
    padding: 16% 6%; /* Padding around heading */
    /* margin-top: 13%; */
    position: relative;
  }

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

  /* Left side room container */
  .room .leftroom {
    height: auto;
    width: 50%;
  }

  /* Upper room image styling */
  .upperroom .roomimg {
    height: 15rem;
    width: 90vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }

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

  /* Lower room image styling */
  .lowerroom .roomimg {
    height: 15rem;
    width: 90vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .upperroom .roomdetails,
  .lowerroom .roomdetails {
    display: flex;
    justify-content: space-between; /* Space between details */
  }

  /* Headings inside room details */
  .roomdetails h4 {
    display: none;
  }
  .roomdetails h2 {
    font-family: rfont;
    font-size: 1.9rem;
    padding-top: 1rem;
  }

  /* Right rooms container */
  .room .rightrooms {
    height: fit-content; /* Height based on content */
    width: 100%;
    margin-top: 0;
  }

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

  .rightrooms .rupperroom {
    height: 20rem;
    width: 90vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

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

  /* Lower section heading */
  .lowersec .lowerheading h3 {
    display: none;
  }

  /* Button inside lower section */
  .lowersec .lowerbtn button {
    height: 3.5rem;
    width: 10rem;
    background-color: var(--border);
    border: 1px solid var(--coal-black);
    color: var(--footer-dark);
    font-size: 0.81rem;
    margin-top: 0%;
    align-self: flex-start;
    gap: 0.6em;
  }

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

@media (min-width: 580px) and (max-width: 767px) {
  #rooms {
    height: auto; /* Allow height to adjust based on content */
    width: 100%;
    margin-top: 0%;
    margin-bottom: 5%;
  }

  /* Rooms section heading */
  #rooms .roomheading h1 {
    font-size: 3rem;
    padding: 7%; /* Padding around heading */
  }
  #rooms .room {
    display: flex;
    justify-content: space-evenly; /* Evenly space child rooms */
    align-items: center; /* Align rooms at the bottom */
    flex-wrap: wrap;
  }
  /* Left side room container */
  .room .leftroom {
    height: auto;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: red; */
  }

  /* Upper room image styling */
  .upperroom .roomimg {
    height: 15rem;
    width: 22rem;
  }

  .lowerroom .roomimg {
    height: 15rem;
    width: 22rem;
  }
  .rightrooms .roomimg {
    height: 15rem;
    width: 22rem;
  }
  .roomdetails h2 {
    font-size: 1.4rem;
    padding: 1em 0;
  }
  h4 {
    display: none;
  }

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

  /* Right rooms container */
  .room .rightrooms {
    height: fit-content; /* Height based on content */
    width: 50%;
    /* background-color: rebeccapurple; */
  }
  /* --------- RIGHT ROOMS SECTION --------- */

  .room .rightrooms {
    width: 50%;
    height: auto;
    float: none;
    margin-top: -11%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .rightrooms .rupperroom {
    height: 20em;
    width: 100%;
    display: flex;
    justify-content: center; /* Align children to right */
    flex-direction: column;
    align-items: center;
  }

  /* Room image in rightrooms */

  /* Room details container for rightrooms */
  .rightrooms .roomdetails {
    display: flex;
    justify-content: space-between; /* Space items evenly */
    width: 22rem;
    /* background-color: red; */
  }

  .lowersec {
    height: 50%; /* 24% of viewport height */
    width: 80%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
  }

  /* Lower section heading */
  .lowersec .lowerheading h3 {
    font-size: 1.4rem;
    text-align: center;
    padding-right: 0rem; /* Adds right padding */
    text-wrap: 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: 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: 5%;
    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;
  }
}
@media (min-width: 480px) and (max-width: 579px) {
  #heroInfo .herodetails {
    height: 100%;
    width: 50%;
  }
  #rooms {
    height: auto; /* Allow height to adjust based on content */
    width: 100%;
    margin-top: 0%;
    margin-bottom: 5%;
  }
  #heroInfo .heroInfo {
    height: 100%;
    width: 100%;
  }
  .heroDes p {
    font-size: 2rem;
    padding: 0;
  }
  .heroAssects {
    /* flex-wrap: wrap; */
    margin: 0;
    /* background-color: red; */
  }
  #rooms {
    height: auto; /* Allow height to adjust based on content */
    width: 100%;
    margin-top: 0%;
    margin-bottom: 5%;
  }

  /* Rooms section heading */
  #rooms .roomheading h1 {
    font-size: 3rem;
    padding: 7%; /* Padding around heading */
  }
  #rooms .room {
    display: flex;
    justify-content: space-evenly; /* Evenly space child rooms */
    align-items: center; /* Align rooms at the bottom */
    flex-wrap: wrap;
  }
  /* Left side room container */
  .room .leftroom {
    height: auto;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: red; */
  }

  /* Upper room image styling */
  .upperroom .roomimg {
    height: 12rem;
    width: 16rem;
  }

  .lowerroom .roomimg {
    height: 12rem;
    width: 16rem;
  }
  .rightrooms .roomimg {
    height: 12rem;
    width: 16rem;
  }
  .roomdetails h2 {
    font-size: 1.4rem;
    padding: 1em 0;
  }
  h4 {
    display: none;
  }

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

  /* Right rooms container */
  .room .rightrooms {
    height: fit-content; /* Height based on content */
    width: 50%;
    /* background-color: rebeccapurple; */
  }
  /* --------- RIGHT ROOMS SECTION --------- */

  .room .rightrooms {
    width: 50%;
    height: auto;
    float: none;
    margin-top: -9%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .rightrooms .rupperroom {
    height: 17rem;
    width: 100%;
    display: flex;
    justify-content: center; /* Align children to right */
    flex-direction: column;
    align-items: center;
  }

  /* Room image in rightrooms */

  /* Room details container for rightrooms */
  .rightrooms .roomdetails {
    display: flex;
    justify-content: space-between; /* Space items evenly */
    width: 16rem;
    /* background-color: red; */
  }

  .lowersec {
    height: 60%; /* 24% of viewport height */
    width: 70%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
  }

  /* Lower section heading */
  .lowersec .lowerheading h3 {
    font-size: 1.4rem;
    text-align: center;
    padding-right: 0rem; /* Adds right padding */
    text-wrap: wrap;
  }

  /* Button inside lower section */
  .lowersec .lowerbtn button {
    height: 3rem;
    width: 12em;
    background-color: var(--border);
    border: 1px solid var(--coal-black);
    color: var(--footer-dark);
    font-size: 0.81rem;
    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: 5%;
    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;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .lowerroom .roomimg {
    height: 40em;
    width: 40vw;
    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;
  }

  .lowersec {
    height: 24vh; /* 24% of viewport height */
    width: 100%;
    margin-top: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .room .rightrooms {
    height: 100%; /* Height based on content */
    width: 40%;
    margin-top: -20%;
    /* background-color: red; */
  }

  /* Lower section heading */
  .lowersec .lowerheading h3 {
    font-family: rfont;
    font-size: 1.8rem;
    text-align: start;
    padding-left: 25%; /* Adds right padding */
    text-wrap: wrap;
    padding-right: 0;
  }

  /* 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: 5%;
    align-self: flex-end; /* Align button to the right */
    gap: 0.6em;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .lowersec {
    height: 35vh; /* 24% of viewport height */
    width: 80%;
    margin-bottom: 8%;
  }

  /* Lower section heading */
  .lowersec .lowerheading h3 {
    font-family: rfont;
    font-size: 1.8rem;
    text-align: start;
    padding-right: 5rem; /* 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;
    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;
  }
}

/* ---------------------- responsive media queries end rooms section ------------------------------- */

/* ---------------------- responsive media queries start gallery section ------------------------------- */

@media (max-width: 479px) {
  #gallery .gallery {
    height: 50vh; /* Full viewport height */
  }
  .gallery .gallerydetails h1 {
    font-family: rfont;
    font-size: 12vw;
    color: var(--pure-white);
    text-transform: capitalize;
    padding-top: 8rem;
  }
  .gallery .gallerydetails button {
    height: 5vh;
    width: 40vw;
    font-size: 0.9rem;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  #gallery .gallery {
    height: 60vh;
    width: 100vw;
  }
  .gallery .gallerydetails {
    font-size: 0.9rem;
  }
}
/* ---------------------- responsive media queries end gallery section ------------------------------- */
/* ---------------------- responsive media queries start items section ------------------------------- */

@media (max-width: 480px) {
  /* Adjust overall section height and padding */
  #terrace-items .terrace-items {
    height: auto;
    padding: 3em 1em;
    gap: 4em;
  }

  /* Center the heading */
  .terrace-items .items-heading h1 {
    font-size: 2rem;
    text-align: center;
  }

  /* Icons container stacked vertically */
  .terrace-items .item-icons {
    flex-direction: column;
    gap: 3em;
    align-items: center;
  }

  /* Upper & Lower rows stacked as well */
  .terrace-items .item-icons .item-icons-upper,
  .terrace-items .item-icons .item-icons-lower {
    flex-direction: column;
    gap: 2em;
    justify-content: center;
    align-items: center;
  }

  /* Individual icon size for small screens */
  .uppericon {
    width: 60vw;
    justify-content: flex-start;
  }

  .uppericon h3 {
    font-size: 0.9rem;
    padding-left: 1rem;
    text-align: left;
  }

  /* Button adjustments */
  .terrace-items button {
    width: 50%;
    font-size: 0.9rem;
    padding: 0 0.5em;
    justify-content: center;
    gap: 0.5em;
  }

  .terrace-items button span > i {
    font-size: 1.2rem;
  }
}
@media (min-width: 480px) and (max-width: 767px) {
  #terrace-items .terrace-items {
    height: auto;
    padding: 4em 2em;
    gap: 4em;
  }

  .terrace-items .items-heading h1 {
    font-size: 2.5rem;
    text-align: center;
  }

  /* Container of icons */
  .terrace-items .item-icons {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }

  /* Icon rows: arrange into two columns */
  .terrace-items .item-icons .item-icons-upper,
  .terrace-items .item-icons .item-icons-lower {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2em;
  }

  /* Individual icon container */
  .uppericon {
    width: 45%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
  }

  .uppericon h3 {
    font-size: 1rem;
    padding-left: 1rem;
    text-align: left;
  }

  /* Button style */
  .terrace-items button {
    width: 50%;
    font-size: 1rem;
    justify-content: center;
    gap: 0.6em;
  }

  .terrace-items button span > i {
    font-size: 1.2rem;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
}
/* ---------------------- responsive media queries end items section ------------------------------- */
/* ---------------------- responsive media queries end dinning section ------------------------------- */

@media (max-width: 480px) {
  /* Stack the two sections vertically */
  #dinningExperience .dinning-experience {
    flex-direction: column;
    height: auto;
    padding: 5rem 1rem;
  }

  /* Make both image sections full width */
  .dinning-experience .dinning-image,
  .dinning-experience .bar-image {
    width: 100%;
    height: auto;
    margin-bottom: 15%;
    align-items: center;
  }

  /* Resize the .dinning container inside both sections */
  .dinning-image .dinning,
  .bar-image .dinning {
    width: 90%;
    height: 60vh;
    margin-top: 3em;
    margin-bottom: 0;
  }

  /* Resize text inside dining section */
  .dinning .dinning-heading h1 {
    font-size: 2.5rem;
    text-align: center;
  }

  .dinning .dinning-text p {
    font-size: 0.9rem;
    padding: 1em;
  }

  /* Optional: resize animated lines if they overflow on small screens */
  .home-exp_line-1,
  .home-exp_line-2,
  .home-exp_line-3 {
    display: none; /* OR scale down size if you prefer to show */
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  #dinningExperience .dinning-experience {
    flex-direction: row;
    height: 80rem;
    padding: 5rem 1rem;
  }

  /* Image sections side-by-side */
  .dinning-experience .dinning-image,
  .dinning-experience .bar-image {
    width: 100%;
    height: 30rem;
    margin-bottom: 15%;
    align-items: center;
    display: flex;
    justify-content: center;
  }

  /* Shift bar-image slightly downward */
  .dinning-experience .bar-image {
    margin-top: 30%;
  }
  .dinning-image .dinning,
  .bar-image .dinning {
    width: 90%;
    height: 60vh;
    margin-top: 3rem;
    margin-bottom: 0;
  }

  .dinning-content {
    padding: 2em 1em;
    text-align: center;
  }

  .dinning .dinning-heading h1 {
    font-size: 2em;
  }

  .dinning .dinning-text {
    width: 98%;
  }

  .dinning .dinning-text p {
    font-size: 0.9rem;
    padding: 1vw;
  }

  .light {
    width: 30%;
    margin: 1rem auto;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #dinningExperience .dinning-experience {
    height: 70em;
    gap: 2rem;
    /* background-color: var(--navy-blue); */
  }

  /* Dinning and Bar section containers */
  .dinning-experience .dinning-image,
  .dinning-experience .bar-image {
    width: 100%;
    height: 60rem;
  }

  .dinning .dinning-heading h1 {
    font-size: 2.5rem;
    text-align: center;
  }

  .dinning .dinning-text p {
    font-size: 1rem;
    text-align: center;
    padding: 0.7rem;
  }

  .light {
    width: 25%;
    margin: 1rem auto;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .dinning-experience .bar-image {
    height: 85%;
    width: 50%;
  }

  .dinning-experience .dinning-image {
    height: 85%;
    width: 50%;
  }
  #dinningExperience .dinning-experience {
    height: 110em;
  }
}

/* ---------------------- responsive media queries end gallery section -------------------------------   */
/* ---------------------- responsive media queries start booking section -------------------------------   */
@media (max-width: 479px) {
  #booking .booking-cta-section {
    width: 100%;
    height: auto; /* more flexible than fixed vh */
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    gap: 6rem;
  }

  .booking-cta-section .booking-content {
    width: 100%;
    align-items: flex-start;
  }

  .booking-content .booking-text h1 {
    font-size: 2.2rem;
    margin: 0;
    letter-spacing: 0.2rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
    width: 100%;
  }

  .booking-content .booking-subtext {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding-left: 1rem;
    flex-wrap: wrap;
    gap: 4rem;
  }

  .booking-content .booking-subtext h3 {
    font-size: 1rem;
    padding: 3% 0;
    color: var(--golden-yellow);
  }

  .booking-cta-section .middle-booking {
    width: 85%;
    height: 30rem;
    justify-content: flex-start;
    align-items: flex-end;
  }

  .booking-cta-section .booking-img {
    width: 100%;
    height: 90%;
  }

  .booking-img img {
    width: 50%;
    height: 50%;
    top: -19%;
  }

  .booking-cta-section .booking-btn {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    padding: 0 1rem;
  }

  .booking-btn button {
    width: 14rem;
    height: 4rem;
    font-size: 1rem;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  #booking .booking-cta-section {
    height: 60rem;
  }

  .booking-cta-section .booking-content {
    width: 33.333%;
    height: 100%;
    padding: 0 0.5rem;
  }

  .booking-content .booking-text h1 {
    font-size: 3.5vw;
    width: 90%;
    text-align: start;
    padding: 0;
    margin: 0 auto;
  }

  .booking-content .booking-subtext {
    width: 90%;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .booking-content .booking-subtext h3 {
    font-size: 1.8vw;
    padding-top: 1rem;
    letter-spacing: 0.3rem;
  }

  .booking-cta-section .middle-booking {
    width: 34%;
    height: 50%;
    align-items: end;
  }

  .booking-cta-section .booking-img {
    width: 100%;
    height: 100%;
    background-size: cover;
  }

  .booking-img img {
    width: 70%;
    height: 70%;
    top: -39%;
  }

  .booking-cta-section .booking-btn {
    width: 32.333%;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  .booking-btn button {
    width: 10rem;
    height: 4rem;
    font-size: 0.9rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .booking-cta-section .booking-img {
    height: 76%;
  }
  .booking-cta-section .middle-booking {
    /* background-color: rebeccapurple; */
    height: 58%;
    align-items: center;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
}
/* ---------------------- responsive media queries end booking section -------------------------------   */
/* ---------------------- responsive media queries start footer section -------------------------------   */

@media (max-width: 479px) {
  #footer .footer-sec {
    flex-direction: column;
    padding: 2rem 1rem;
    height: auto;
    justify-content: space-between;
  }

  .footer-sec .footer-links {
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    width: 100%;
  }

  .footer-links .footer-sec-left,
  .footer-links .footer-sec-middle,
  .footer-links .footer-sec-right {
    width: 100%;
    padding: 0;
  }

  .footerheading h1 {
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: #fff;
    margin-bottom: 1.52rem;
  }

  .footeranchors {
    width: 100%;
    padding: 0;
    border-top: none;
  }

  .footeranchors h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--golden-yellow);
  }

  .outeranchor {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
  }

  .outeranchor ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .outeranchor ul li {
    font-size: 0.9rem;
    color: #fff;
    padding: 0.1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-sec-left .footeranchors ul li {
    color: var(--border);
    font-size: 1.5rem;
    width: 10rem;
  }
  .footer-sec-middle .footeranchors {
    margin-top: -20%;
  }
  .footer-sec-left .foot-details {
    display: none;
  }

  .footer-sec-middle .footeranchors ul li {
    color: var(--border);
    font-size: 1.5rem;
    width: 10rem;
  }
  .footer-sec-middle .footdet {
    display: none;
  }
  .outeranchor ul li span i {
    font-size: 0.81rem;
  }
  .footer-sec-right {
    margin-top: -5rem;
  }

  .footer_social-link {
    width: 2.5rem;
    height: 2.5rem;
  }
  .footer_social {
    margin-top: -2%;
  }
  .foot-details {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
    font-size: 0.45rem;
    padding-top: 0;
  }
  .footer-sec-right .footdet {
    font-size: 0.4rem;
    height: fit-content;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .gmail,
  .contactno {
    font-size: 0.9rem;
    color: var(--border);
    line-height: 2;
    flex-wrap: wrap;
  }
}

@media (min-width: 480px) and (max-width: 780px) {
  /* Main container */
  #footer .footer-sec {
    flex-direction: column;
    padding: 2rem 1rem;
    height: auto;
    justify-content: space-between;
  }

  /* Footer links stacked */
  .footer-sec .footer-links {
    /* margin-top: -4%; */
    flex-direction: column;
    align-items: center;

    gap: 2rem;
  }

  /* Individual sections */
  .footer-links .footer-sec-left,
  .footer-links .footer-sec-middle,
  .footer-links .footer-sec-right {
    width: 100%;
    padding: 0.5rem 0;
    margin: 0;
    align-items: center;
  }
  .footerheading h1 {
    font-size: 1.1rem;
    letter-spacing: 0.08em;
  }

  .footeranchors {
    width: 100%;
    padding: 0;
    border-top: none;
    margin: 0;
  }

  .footeranchors h2 {
    font-size: 1.5rem;
    text-align: start;
    padding: rem 0;
  }

  .outeranchor {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 100%;
    gap: 2%;
  }

  .outeranchor ul {
    padding: 0;
    margin: 0;
  }
  .footer-sec-middle .footeranchors {
    margin-top: 0%;
  }
  .outeranchor ul li {
    font-size: 4rem;
    padding: 0.2rem 0;
    margin: 0;
    color: #fff;
    justify-content: space-evenly;
  }
  .footer-sec-middle {
    margin-top: -48rem;
  }
  .footer-sec-left .footeranchors ul li,
  .footer-sec-middle .footeranchors ul li {
    font-size: 2.5rem;
    width: 20rem;
    margin: 0;
    padding: 0.1rem 0.21rem;
  }

  .outeranchor ul li span i {
    font-size: 1.3rem;
  }

  /* Footer bottom details */
  .foot-details {
    display: none;
  }

  /* Logo & Social */
  .footer-sec-middle .footlogo {
    display: none;
  }

  .footer_social {
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0%;
  }

  .footer_social-link {
    width: 2.5rem;
    height: 2.5rem;
  }

  .footer-sec-right .footdet {
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
  }
  .gmail,
  .contactno {
    font-size: 0.95rem;
    padding: 0.3rem 0;
    margin: 0;
  }
}
@media (min-width: 781px) and (max-width: 1023px) {
  .footer-links .footer-sec-left,
  .footer-links .footer-sec-middle,
  .footer-links .footer-sec-right {
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 2%;
  }
  .footeranchors h2 {
    font-family: rmona;
    font-size: 1.1rem;
    padding-top: 30%;
  }
  .footeranchors .outeranchor {
    width: 100%;
    height: 100%;
    justify-content: space-between;
    /* padding: 10% 2%; */
  }

  .footeranchors ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    text-transform: uppercase;
  }

  .footeranchors ul li span i {
    font-size: 1rem;
    display: flex;
    align-items: center;
  }

  .footer-sec-left .footeranchors ul li,
  .footer-sec-middle .footeranchors ul li,
  .footer-sec-right .footeranchors ul li {
    font-size: 6rem;
    width: 7.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.1rem;
    line-height: 3rem;
  }
  .footer_social {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    margin-top: 39%;
  }
  .foot-details .footdet {
    font-size: 0.9rem;
    width: 33%;
    /* background-color: red; */
    color: var(--pure-white);
    height: 100%;
    flex-direction: column;
    /* background-color: rgba(255, 0, 0, 0.479); */
    border-left: none;
    transition: width 0.2s ease-in-out;
  }
  .foot-details .footdet a {
    color: var(--golden-yellow);
    text-decoration: none;
  }
  .footer-sec-right .footdet {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    /* gap: rem; */
  }
  .footer-sec-right .footdet .num {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 0.8rem;
    line-height: 1.4;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .footer-links .footer-sec-left,
  .footer-links .footer-sec-middle,
  .footer-links .footer-sec-right {
    width: 32%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 2%;
  }
  .footer-sec-left .footeranchors ul li,
  .footer-sec-middle .footeranchors ul li,
  .footer-sec-right .footeranchors ul li {
    width: 11.5rem;
    display: flex;
    align-items: center;
  }
  .footer-sec-right .footdet {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .footer-sec-right .footdet .num {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .foot-details .footdet {
    font-size: 1rem;
    /* background-color: red; */
    color: var(--pure-white);
    height: 100%;
    flex-direction: column;
    text-align: center;
    /* background-color: rgba(255, 0, 0, 0.479); */
    border-left: none;
    transition: width 0.2s ease-in-out;
  }
}
@media (min-width: 1280px) and (max-width: 1535px) {
  .footer-links .footer-sec-left,
  .footer-links .footer-sec-middle,
  .footer-links .footer-sec-right {
    width: 32%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 2%;
  }
  .footer-sec-left .footeranchors ul li,
  .footer-sec-middle .footeranchors ul li,
  .footer-sec-right .footeranchors ul li {
    width: 11.5rem;
    display: flex;
    align-items: center;
  }
  .footer-sec-right .footdet {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .footer-sec-right .footdet .num {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .foot-details .footdet {
    font-size: 1rem;
    /* background-color: red; */
    color: var(--pure-white);
    height: 100%;
    flex-direction: column;
    text-align: center;
    /* background-color: rgba(255, 0, 0, 0.479); */
    border-left: none;
    transition: width 0.2s ease-in-out;
  }
}

@media (min-width: 1536px) {
  .footer-links .footer-sec-left,
  .footer-links .footer-sec-middle,
  .footer-links .footer-sec-right {
    width: 32%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 2%;
  }
}
/* ---------------------- responsive media queries end footer section -------------------------------   */