:root {
  --bg: #0b1220;
  --text: #0d1117;
  --muted: #6b7280;
  --brand: #0f172a;
  --brand-2: #2563eb;
  --surface: #f6f7fb;
  --white: #fff;
  --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  --radius: 16px;
}

body {
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif;
  color: #0b1324;
}

a {
  color: var(--brand-2);
  text-decoration: none;
}
.container {
  width: min(1220px, 95%);
  margin: 0 auto;
}
.tiny {
  border-top: 1px solid #7b899d;
  text-align: center;
  padding: 20px 0 0px 0;
  font-size: 16px;
  color: var(--muted);
}

.site-header {
  position: sticky;
  top: 0;
  background: #f6f6f7;
  border-bottom: 1px solid #f6f6f7;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}
.brand img{
width: 200px;
}
.main-nav {
  display: flex;
  gap: 30px;
  align-items: center;
}
.main-nav a {
  color: #2a3443;
  opacity: 0.9;
  transition: 0.2s ease;
}
.main-nav a:hover {
  color: #111419;
}
.link-muted {
  color: var(--muted);
}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
}
.nav-toggle i {
  font-size: 22px;
  cursor: pointer;
}
.banner_book_space_btn {
  padding: 10px 38px !important;
  transform: translate(0) !important;
  font-size: 17px;
  display: flex;
  align-items: center;
  color: #0f172a;
}
.banner_book_space_btn i {
  font-size: 30px;
  transform: translateY(2px);
}
.btn {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  transition: 0.2s box-shadow, 0.2s transform;
}
.btn:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.btn-light {
  background: #fff;
  color: #0b1324;
  border-color: #e5e7eb;
}
.btn-dark {
  background: #0b1324;
  color: #fff;
  border-color: #0b1324;
}
.btn-primary {
  background: var(--brand-2);
  color: #fff;
  border-color: var(--brand-2);
}
.btn-outline {
  background: #fff;
  color: #0b1324;
  border-color: #d1d5db;
}
.badge {
  position: absolute;
  top: -12px;
  left: 16px;
  background: #0b1324;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.hero {
  position: relative;
  color: #fff;
  background: linear-gradient(130deg, rgb(27, 32, 54), rgba(2, 6, 23, 0.491)),
    url("../img/hero.jpg");
  background-size: cover;
  height: 90vh;
  background-blend-mode: multiply;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-inner {
  padding: 60px 0;
  max-width: 760px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 300;
}
.pill span {
  font-weight: 600;
  font-size: 18px;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}
.dot--muted {
  background: #cbd5e1;
}
.hero h1 {
  font-size: 4.5rem;
  line-height: 1.05;
  margin: 0 0 12px;
  font-weight: 800;
}
.lead {
  font-size: 24px;
  color: #e5e7eb;
  /* margin: 0 0 20px; */
}
.actions {
  display: flex;
  gap: 12px;
  margin: 18px 0 8px;
}
.hero-notes {
  display: flex;
  gap: 18px;
  margin-top: 30px;
  color: #cbd5e1;
}

.section {
  padding: 20px 0;
}
.section--alt {
  background: #f8fafc;
}
.section--dark {
  background: #0b1324;
  color: #e5e7eb;
}
.section-title {
  font-size: 2.9rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 8px;
}
.section-subtitle {
  font-size: 1.25rem;
  text-align: center;
  color: #6b7280;
  margin: 0 0 28px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.card {
  position: relative;
  background: #fff;
  border: 2px solid #eef0f4;
  border-radius: var(--radius);
  padding: 30px 22px;
  box-shadow: var(--shadow);
  transition: 0.1s;
}
.card:hover {
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.162);
}
.Ultimate_Package_card {
  border-color: #0b1324;
  position: relative;
  overflow: hidden;
}
.Ultimate_Package_card h3 {
  margin-top: 50px !important;
}
.Ultimate_Package_card button {
  background-color: #0b1324 !important;
  color: #fff;
}
.Monthly_Ultimate_Package_badge {
  background-color: #0b1324;
  font-weight: 600;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
}
.popular_card {
  border-color: #ea580c;
  position: relative;
  overflow: hidden;
}
.popular_card h3 {
  margin-top: 50px !important;
}
.popular_card button {
  background-color: #ea580c !important;
  color: #fff;
}
.popular_badge {
  background-color: #ea580c;
  font-weight: 600;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 0;
}
.card h3 {
  margin: 6px 0 2px;
}

.card button {
  border: none !important;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica,
    Arial, sans-serif;
  letter-spacing: 0.3px;
  transform: translate(0) !important;
  background-color: #f1f5f9;
  padding: 13px 33px !important;
  font-size: 15px;
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.card button i {
  font-size: 22px;
  line-height: 0 !important;
}
.muted {
  color: #6b7280;
}
.price {
  font-size: 34px;
  font-weight: 800;
  margin: 6px 0;
}
.price span {
  font-size: 16px;
  font-weight: 600;
  color: #6b7280;
}
.hours {
  color: #6b7280;
  font-size: 14px;
  margin-bottom: 12px;
}
.features {
  padding: 0;
  margin: 0 0 16px;
  list-style: none;
}
.features li {
  padding-left: 20px;
  margin: 20px 0;
  position: relative;
}
.features li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #22c55e;
}

.amenities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 16px;
}
.amenity {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  text-align: center;
}
.amenity:hover {
  background-color: #6b72800f;
}

.amenity span {
  background-color: #0f172a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 62px;
  width: 62px;
  border-radius: 10px;
  margin: 0 auto;
  transition: 0.3s;
}
.amenity:hover span {
  transform: scale(1.1);
}
.amenity span i {
  font-size: 24px;
  color: #fff;
}
.amenity h3 {
  margin: 12px 0 6px;
}
.amenity p {
  color: #6b7280;
}
.i {
  display: inline-flex;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #0b1324;
  color: #fff;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(2, 6, 23, 0.12);
}
.i svg {
  width: 28px;
  height: 28px;
}
#availability{
    padding: 40px 0;
}
/* icons using inline SVG backgrounds */
.i-wifi {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 20a2 2 0 100-4 2 2 0 000 4zm6.93-7.36a10 10 0 00-13.86 0l1.42 1.42a8 8 0 0111.02 0l1.42-1.42zm2.83-2.83a14 14 0 00-19.66 0l1.42 1.41a12 12 0 0116.82 0l1.42-1.41z"/></svg>')
    center/28px no-repeat;
  background: #0b1324;
}
.i-coffee {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M18 8h1a3 3 0 010 6h-1v1a5 5 0 01-5 5H8a5 5 0 01-5-5V8h15zm1 2v2a1 1 0 000-2zM7 3h2v3H7V3zm4 0h2v3h-2V3zm4 0h2v3h-2V3z"/></svg>')
    center/28px no-repeat;
  background: #0b1324;
}
.i-printer {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 9V2h12v7h-2V4H8v5H6zm-2 2h16a2 2 0 012 2v6h-4v3H8v-3H4v-6a2 2 0 012-2zm4 10h8v-5H8v5z"/></svg>')
    center/28px no-repeat;
  background: #0b1324;
}
.i-users {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 11c1.66 0 3-1.57 3-3.5S17.66 4 16 4s-3 1.57-3 3.5 1.34 3.5 3 3.5zM8 11c1.66 0 3-1.57 3-3.5S9.66 4 8 4 5 5.57 5 7.5 6.34 11 8 11zm0 2c-2.33 0-7 1.17-7 3.5V20h10v-3.5C11 14.17 6.33 13 4 13zm12 0c-.29 0-.62.02-.97.06 1.16.84 1.97 1.96 1.97 3.44V20h4v-3.5c0-2.33-4.67-3.5-7-3.5z"/></svg>')
    center/28px no-repeat;
  background: #0b1324;
}
.i-clock {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 1a11 11 0 100 22 11 11 0 000-22zm1 11h5v2h-7V6h2v6z"/></svg>')
    center/28px no-repeat;
  background: #0b1324;
}
.i-shield {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2l8 4v6c0 5-3.58 9.74-8 10-4.42-.26-8-5-8-10V6l8-4z"/></svg>')
    center/28px no-repeat;
  background: #0b1324;
}
.i-calendar {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 2h2v2h6V2h2v2h3a1 1 0 011 1v15a1 1 0 01-1 1H4a1 1 0 01-1-1V5a1 1 0 011-1h3V2zm13 8H4v9h16v-9z"/></svg>')
    center/28px no-repeat;
  background: #0b1324;
}

/* extra icons for visit/footer */
.i-pin {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z"/></svg>')
    center/24px no-repeat;
  background: #0b1324;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.i-mail {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm8 7L4.5 7h15L12 11z"/></svg>')
    center/24px no-repeat;
  background: #0b1324;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.i-train {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M12 2c4.97 0 9 1.79 9 4v9a3 3 0 01-3 3l2 2h-2.5l-1.5-1.5H8.5L7 20H4.5l2-2A3 3 0 014 15V6c0-2.21 4.03-4 8-4zm-5 7h10V6H7v3z"/></svg>')
    center/20px no-repeat;
  background: #0b1324;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-block;
  margin-right: 8px;
}
.i-bus {
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 3H8a5 5 0 00-5 5v7a3 3 0 003 3v2h2v-2h8v2h2v-2a3 3 0 003-3V8a5 5 0 00-5-5zM6 14h12V8H6v6z"/></svg>')
    center/20px no-repeat;
  background: #0b1324;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-block;
  margin-right: 8px;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  padding: 20px 0;
}

.gallery_contents {
  position: relative;
  height: 220px;
  border-radius: 14px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.gallery_contents_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.gallery_contents:hover img {
  transform: scale(1.1);
}

.gallery_contents_desc {
  position: absolute;
  bottom: 25px;
  left: 25px;
  z-index: 3;
  color: #fff;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  font-size: 1rem;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.gallery_contents:hover .gallery_contents_desc {
  opacity: 1;
}

.gallery_contents::after {
  content: "";
  background: linear-gradient(
    to top,
    rgba(2, 6, 23, 0.805),
    rgba(2, 6, 23, 0.281)
  );
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 0;
}

.gallery_contents:hover::after {
  opacity: 1;
}

/* Popup Modal Styles */
.gallery_popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.gallery_popup.active {
  display: flex;
  opacity: 1;
}

.gallery_popup_img {
  max-width: 90%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.gallery_popup_close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 2.5rem;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s ease;
  z-index: 1001;
}

.gallery_popup_close:hover,
.gallery_popup_close:focus {
  color: #ccc;
}

/* Responsive Design */

.testimonial_main_container {
  background-color: #0f172a;
  width: 100%;
  padding: 30px 0px 100px 0px;
}
.testimonial_main_container .testimonial_head_desc {
  text-align: center;
  color: #fff;
}
.testimonial_main_container .testimonial_head_desc h1 {
  font-size: 44px;
}
.testimonial_main_container .testimonial_head_desc p {
  font-size: 20px;
  color: #ffffffd7;
}
.testimonial_slider_container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
}
.testimonial_carousel {
  position: relative;
  max-width: 900px;
  overflow: hidden;
  background: #272e3f;
  border-radius: 16px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.281);
}

.testimonial_carousel-content {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.testimonial_card {
  min-width: 100%;
  padding: 40px 30px;
  box-sizing: border-box;
  text-align: center;
}

.testimonial_stars {
  color: #facc15;
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.testimonial_text {
  font-size: 20px;
  color: #fff;
  line-height: 1.6;
  margin-bottom: 25px;
  font-weight: 600;
}

.testimonial_author {
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
}

.testimonial_role {
  font-size: 0.9rem;
  color: #c7ced6;
}
.testimonial_part {
  font-size: 0.9rem;
  color: #96a1ad;
}
.control_indicates {
  position: absolute;
  width: 1000px;
}
.control_indicates .controler {
  display: flex;
  justify-content: space-between;
}
.testimonial_nav-btn {
  transform: translateY(20px);
  background: rgb(255, 255, 255);
  border: none;
  color: #05060d;
  font-size: 18px;
  cursor: pointer;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
}

.testimonial_nav-btn:hover {
  background: rgb(217, 217, 217);
}

.testimonial_prev-btn {
  left: 0px;
}
.testimonial_next-btn {
  right: 15px;
}

.testimonial_dots {
  transform: translateY(140px);
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.testimonial_dot {
  width: 7px;
  height: 7px;
  border-radius: 50px;
  background: #ffffff;
  cursor: pointer;
  transition: 0.3s;
}

.testimonial_dot.active {
  background: #ffffff;
  width: 28px;
  transform: scale(1.2);
}

.visit-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}
.visit-info .info-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.visit-info .info-row a {
  color: #0b1324;
}
.visit-info h3 {
  margin: 0 0 6px;
}
.transport {
  background: #f1f5f9;
  border-radius: 16px;
  padding: 18px;
  margin-top: 10px;
}
.transport ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.transport li {
  margin: 10px 0;
  color: #0f172a;
}
.info-row span {
  background-color: #0f172a;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 52px;
  width: 52px;
  border-radius: 10px;
}
.info-row span i {
  color: #fff;
  font-size: 22px;
}
.map {
  height: 460px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.site-footer {
  background: #0b1324;
  color: #e5e7eb;
  padding: 48px 0 24px;
  margin-top: 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 28px;
}
.logo-tile {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fff;
  color: #0b1324;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-right: 10px;
}
.footer_logo {
  display: flex;
  justify-content: start;
}
.footer_logo img{
 width: 200px;
 object-fit: cover;
}
.footer-brand {
  display: grid;
  width: 300px;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}
.footer_logo .brandline {
  font-weight: 800;
}
.footer_logo .muted {
  font-size: 14px;
}
.footer_logo .logo_text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.footer-copy {
  grid-column: 1/-1;
  margin: 10px 0 12px;
  color: #7b899d;
}
.socials {
  grid-column: 1/-1;
  display: flex;
  gap: 10px;
}
.socials a {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #1e293b;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.footer-links {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.footer-links a {
  color: #7b899d;
  transition: 0.2s;
}
.footer-links a:hover {
  color: #fff;
}
.footer-links li {
  margin: 10px 0;
}
.footer_contact ul li {
  color: #7b899d;
}
.footer_contact ul li i {
  padding-right: 10px;
}
/* .site-footer a {
  color: #93c5fd;
} */

.main-nav .btn {
  background: #020815;
  color: #fff;
  border-color: #020815;
  padding: 17px auto;
}
.main-nav .btn:hover {
  background: #0f1a30;
  color: #fff;
  transform: translate(0) !important;
  border-color: #0f1a30;
}
.i-pin,
.i-mail {
  mask-size: 20px;
  mask-repeat: no-repeat;
  mask-position: center;
  background: #fff; /* make icon white */
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

.i-pin,
.i-mail,
.i-clock {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  background: #0b1324; /* dark default */
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}



@media (min-width: 480px) {
  .hero h1 { font-size: 3rem; }
  .hero .lead { font-size: 1.25rem; }
}

@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .amenities { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .ava_container { flex-direction: row; }
  .ava_calendar_section,
  .ava_details_section { flex: 1 1 50%; }
  .ava_calendar_section { border-right: 1px solid #e5e7eb; border-bottom: none; }
}

@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .amenities { grid-template-columns: repeat(4, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .visit-grid { grid-template-columns: 1.1fr 0.9fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
  .main-nav { position: static; width: auto; height: auto; flex-direction: row; padding: 0; box-shadow: none; }
  .nav-toggle, .nav-close { display: none; }
}

@media (min-width: 1200px) {
  .cards { grid-template-columns: repeat(5, 1fr); }
  .hero { height: 90vh; }
  .hero h1 { font-size: 4.5rem; }
  .hero .lead { font-size: 1.5rem; }
}