/*Designed by SNu Microsystems. */
/* styles.css - Responsive framework (mobile-first) */

/* ========== Variables ========== */
:root {
  /* ========== Breakpoints (mobile-first) ========== */
  --bp-xs: 0px;
  /* phones */
  --bp-sm: 576px;
  /* small tablets / large phones */
  --bp-md: 768px;
  /* tablets */
  --bp-lg: 992px;
  /* laptops */
  --bp-xl: 1200px;
  /* desktops */

  /* ========== Primary (Blue Family) ========== */

  --primary-50: #f2f7ff;
  /* very light backgrounds */
  --primary-100: #e0ecff;
  /* light sections */
  --primary-300: #90b9f8;
  /* soft accents */
  --primary-500: #4d96f2;
  /* main brand color */
  --primary-600: #3b86ee;
  /* hover / active */
  --primary-700: #2F80ED;
  /* dark headings, buttons */

  /* ========== Primary (Light Green Family) ========== 
  --primary-50: #f3faf4;
  /* very light backgrounds 
  --primary-100: #e2f5e4;
  /* light sections 
  --primary-300: #a7e3b1;
  /* soft accents 
  --primary-500: #4dbc66;
  /* main brand color 
  --primary-600: #3fa656;
  /* hover / active 
  --primary-700: #2e8c45;
  /* dark headings, buttons 

  /* ========== Gray Scale (neutral UI) ========== */
  --gray-50: #fafafa;
  /* background */
  --gray-100: #f4f4f5;
  /* card backgrounds */
  --gray-200: #e4e4e7;
  /* borders */
  --gray-300: #d1d1d6;
  /* light text */
  --gray-500: #71717a;
  /* body text */
  --gray-700: #3f3f46;
  /* dark UI */
  --gray-900: #18181b;
  /* headings */

  /* ========== Accent Colors ========== */
  --accent-blue: #3b82f6;
  /* links */
  --accent-yellow: #facc15;
  /* rating stars */
  --accent-red: #E51616;
  /* errors */
  --accent-teal: #14b8a6;
  /* secondary CTAs */

  /* ========== Spacing scale (based on px spec) ========== */
  --space-xs: 0.25rem;
  /* 4px */
  --space-sm: 0.5rem;
  /* 8px */
  --space-md: 0.75rem;
  /* 12px */
  --space-lg: 1rem;
  /* 16px */
  --space-xl: 1.5rem;
  /* 24px */
  --space-2xl: 2rem;
  /* 32px */
  --space-3xl: 3rem;
  /* 48px */
  --space-4xl: 4rem;
  /* 64px */

  /* ========== Border radius ========== */
  --radius-sm: 0.25rem;
  /* 4px */
  --radius-md: 0.5rem;
  /* 8px */
  --radius-lg: 0.75rem;
  /* 12px */
  --radius-xl: 1rem;
  /* 16px */
  --radius-full: 999px;
  /* fully rounded */

  /* ========== Typography system ========== */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial;
  --type-display-size: 48px;
  --type-display-weight: 700;
  --type-display-lh: 1.2;
  --type-h1-size: 40px;
  --type-h1-weight: 700;
  --type-h1-lh: 1.2;
  --type-h2-size: 32px;
  --type-h2-weight: 600;
  --type-h2-lh: 1.3;
  --type-h3-size: 28px;
  --type-h3-weight: 600;
  --type-h3-lh: 1.3;
  --type-h4-size: 24px;
  --type-h4-weight: 600;
  --type-h4-lh: 1.4;
  --type-h5-size: 20px;
  --type-h5-weight: 600;
  --type-h5-lh: 1.4;
  --type-h6-size: 18px;
  --type-h6-weight: 600;
  --type-h6-lh: 1.5;

  --type-body-large-size: 18px;
  --type-body-weight: 400;
  --type-body-lh: 1.6;
  --type-body-size: 16px;
  --type-body-weight: 400;
  --type-body-small-size: 14px;
  --type-caption-size: 12px;

  --type-button-size: 16px;
  --type-button-weight: 600;

  /* misc */
  --container-max-width-sm: 540px;
  --container-max-width-md: 720px;
  --container-max-width-lg: 960px;
  --container-max-width-xl: 1440px;

  /* corner radius */
  --corner-1: 4px;
  --corner-2: 8px;
  --corner-3: 12px;
  --corner-4: 16px;
  --corner-5: 24px;
  --corner-6: 32px;
  --corner-7: 48px;
  --corner-8: 44px;
  --full-radius: 9999px;
}

.main-header {
  text-align: center;
  margin-top: 40px;
  background: rgba(255, 255, 255, 0.699);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.textArea {
  grid-area: textArea;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  margin-top: 10px;
  margin-right: 5px;
  margin-left: 5px;
}

.lWrapper-right .textArea {
  grid-area: textArea;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  margin-top: 10px;
  margin-left: 10px;
}

.sideInd {
  grid-area: sideInd;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: transparent;
  border-radius: 0 9999px 9999px 0;
  align-items: center;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80px;
}

.lWrapper-right .sideInd {
  grid-area: sideInd;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: transparent;
  border-radius: 9999px 0 0 9999px;
  align-items: center;
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80px;
}

.cycle {
  width: 35px;
  height: 35px;
  background-color: transparent;
  border-radius: 999px;
  align-items: end;
  margin-right: 10px;
}

.lWrapper-right .cycle {
  width: 35px;
  height: 35px;
  background-color: transparent;
  border-radius: 999px;
  align-items: start;
  margin-left: 10px;
}

.lWrapper-left {
  display: grid;
  gap: 20px;
  grid-template-columns: 80px auto;
  grid-template-areas:
    "sideInd textArea";
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background-color: #fcfcfc;
  height: 150px;
}

.lWrapper-right {
  display: grid;
  gap: 20px;
  grid-template-columns: auto 80px;
  grid-template-areas:
    "textArea sideInd";
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background-color: #fcfcfc;
  height: 150px;
}

.main-header h1 {
  -webkit-text-stroke: 1px #efaf37;
}

.main-header p {
  font-style: italic;
}

.main-header h3 {
  -webkit-text-stroke: 1px #efaf37;
}

body {
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--gray-900);
  background-color: var(--gray-50);
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  position: sticky;
  top: 0;
  background-color: var(--primary-100);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  /*backdrop-filter: blur(10px);*/
  z-index: 999;
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2rem;
}

.navbar-logo {
  font-size: var(--type-h4-size);
  font-weight: var(--type-h4-weight);
  color: var(--gray-900);
  text-decoration: none;
  cursor: pointer;
  padding: 5px 15px;
}

.navbar-container .navbar-menu {
  display: flex;
  text-align: center;
  justify-content: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
}

.navbar-container .navbar-menu li a {
  font-size: var(--type-body-size);
  color: var(--gray-700);
  text-decoration: none;
  padding: 3px 20px;
  border: 2px solid transparent;
  transition: all 0.7s, background-color 0.3s;
  font-weight: 500;
  white-space: nowrap;
}

.navbar-container .navbar-menu li a:hover,
.navbar-container .navbar-menu li a.active {
  background-color: var(--primary-500);
}

.navbar-toggle {
  display: none;
  background-color: transparent;
  padding: 10px;
  border: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: var(--gray-700);
}

.booknow {
  background-color: var(--primary-700);
  color: var(--primary-100);
  border: none;
  height: 50px;
  width: 130px;
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  cursor: pointer;
  transition: background-color 0.3s;
}

.booknow.hiden {
  display: none;
}

.booknow:hover {
  background-color: var(--gray-700);
  color: var(--primary-500);
}

.booknow:clicked {
  background-color: var(--primary-700);
  color: var(--gray-900);
}

.sticky-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

.SliderParent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Slider Styles */
.slider-container {
  max-width: 90%;
  max-height: 780px;
  position: relative;
  margin-top: 80px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.slider-container img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: top;
}

.slider-slide {
  display: none;
}

.slider-text {
  color: #000000;
  padding: 0px 5px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: left;
  background-color: #ffffffa0;
  backdrop-filter: blur(10px);
}

.slider-text p {
  margin: 0px 5px 5px 20px;
  stroke: #ffffff;
  stroke-width: 1px;
  font-style: italic;
  font-size: 20px;
  text-shadow: 1px 1px 2px #ffffff;
  font-weight: bold;
  left: 0px;
}

.slider-text h2 {
  margin: 0px;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: none;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

.card-footer {
  background-color: transparent important;
}

.scard-body {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background: rgba(255, 255, 255, 0.555);
}

.scard-bg {
  background-image: url('Asset/offerBG.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.nearus {
  background-image: url('Asset/NreaUsBackgound.png');
  background-size: cover;
  background-repeat: repeat;
}

.faq-bg {
  background-image: url('Asset/FAQ_BG.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
}

.footer-bg {
  background-image: url('Asset/Slider_Image1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.footer-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.footer-bg h5 {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.footer-bootm {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.neon-border {
  border: 3px solid #efaf37;
  animation: neonGlow 1.5s ease-in-out infinite alternate;
}

.li-keyf {
  color: #183153;
}

.snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.snowflake {
  position: absolute;
  top: -10px;
  color: rgb(248, 208, 77);
  font-size: 1em;
  user-select: none;
  pointer-events: none;
  animation: fall linear infinite;
  font-family: 'Noto Color Emoji';
}

.contact-box {
  background: var(--gray-700);
  border: 2px solid var(--gray-500);
  border-radius: 15px;
  padding: 20px;
  color: white;
}

.contact-card-header {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
}

.contact-icon {
  color: var(--accent-red);
}

.concatus-bg {
  background-image: url('Asset/concatbg.png');
  background-size: cover;
  background-repeat: repeat;
}

@keyframes fall {
  to {
    transform: translateY(110vh);
  }
}

@keyframes neonGlow {
  from {
    box-shadow: 0 0 5px #efaf37;
  }

  to {
    box-shadow: 0 0 20px #efaf37;
  }
}

.fax-box {
  position: relative;
  padding: 20px;
  border-radius: 15px;
  overflow: visible;
  background: linear-gradient(to bottom, #a8e6a2, #3a9d3a);
  border: 2px solid #b8f0b3;
  color: #fff;
}

/* Image floating top-right, slightly outside the box */
.fax-box .fax-img {
  position: absolute;
  top: -15px;
  right: -15px;
  width: 50px;
  height: auto;
  border-radius: 10px;
  z-index: 10;
}

.fax-box .fax-innerbox {
  position: relative;
  top: 0;
  background-color: #b4f5ed67;
  border-end-end-radius: 10px;
  border-end-start-radius: 25px;
  border-start-end-radius: 10px;
  border-start-start-radius: 10px;
}

.fax-box .fax-title {
  font-weight: 700;
  color: #3f3f46;
  margin-left: 5px;
  height: 50px;
}

.fax-box .fax-body {
  margin-top: 10px;
  margin-bottom: 0;
  font-weight: 500;
}

/*Searching section*/
.box-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 40px;
}

.box {
  width: 80%;
  height: 80px;
  background-color: #e2f5e4;
  border-radius: var(--corner-3);

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.custom-margin {
  margin-left: 5rem;
  margin-right: 5rem;
}

/*Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 0.5s;
}

.horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  /* Hide scrollbar (IE/Edge) */
  scrollbar-width: none;
  /* Hide scrollbar (Firefox) */
}

.horizontal-scroll::-webkit-scrollbar {
  display: none;
}

.right-blur {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 95%;
  pointer-events: none;
  backdrop-filter: blur(8px);

  background: linear-gradient(to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.8) 70%,
      rgba(255, 255, 255, 1) 100%);
}

.left-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 95%;
  pointer-events: none;
  backdrop-filter: blur(8px);

  background: linear-gradient(to left,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.8) 70%,
      rgba(255, 255, 255, 1) 100%);
}

.container-overlay {
  position: relative;
  overflow: hidden;
}

.blur-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  border-radius: 0 0 0.5rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.995);
  display: flex;
  flex-direction: column;
  gap: .25rem;

  transition: opacity .35s cubic-bezier(.2, .9, .2, 1),
    transform .35s cubic-bezier(.2, .9, .2, 1),
    visibility .35s;
  pointer-events: none;
}

.container-overlay:hover .blur-overlay,
.container-overlay:focus-within .blur-overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.container-overlay img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: .5rem;
}

.blur-overlay--half {
  width: 50%;
}

.hero-img {
  height: 74.8vh;
}

.room-img {
  align-self: center;
}

@keyframes fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}

@media (max-width: 992px) {

  .right-blur {
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 95%;
    pointer-events: none;
    backdrop-filter: blur(8px);

    background: linear-gradient(to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 70%,
        rgba(255, 255, 255, 1) 100%);
  }

  .left-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 95%;
    pointer-events: none;
    backdrop-filter: blur(8px);

    background: linear-gradient(to left,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.8) 70%,
        rgba(255, 255, 255, 1) 100%);
  }

  .hero-img {
    height: 40vh;
    object-fit: cover;
  }

  .slider-container {
    max-width: 100%;
    max-height: 780px;
    position: relative;
    margin-top: 80px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1090px) {
  .navbar {
    backdrop-filter: none;
  }

  .main-header {
    margin-top: 20px;
    text-align: center;
  }

  .main-header h1 {
    -webkit-text-stroke: 1px #efaf37;
  }

  .main-header p {
    font-style: italic;
  }

  .slider-text {
    left: 0px;
    right: 12px;
    max-width: none;
    max-height: 660px;
    bottom: 32px;
    text-align: left;
  }

  /*.slider-text h2 { font-size: 20px; }*/
  .slider-text p {
    font-size: 15px;
    margin: 0px 5px 5px 10px;
  }

  .navbar-container .navbar-menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.7rem !important;
    position: absolute;
    height: 100vh;
    width: 250px;
    right: 0;
    top: 0;
    padding: 5rem 1.5rem;
    box-shadow: 0 10px 10px var(--gray-100);
    background-color: var(--gray-100);
    /*backdrop-filter: blur(10px);*/
  }

  .navbar-container .navbar-menu.active {
    display: flex;
    height: auto;
    background-color: var(--primary-100);
  }

  .navbar-toggle {
    display: block;
    z-index: 999;
  }

  .navbar-toggle.active {
    background-color: var(--primary-100);
    margin-top: 0;
  }

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

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

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

  .booknow.hiden {
    display: none;
  }

  .hero-img {
    height: 40vh;
    object-fit: cover;
  }

}