/* =========================
   GLOBAL DESIGN SYSTEM
========================= */
:root{
  /* brand */
  --brand-1: #00d4ff;
  --brand-2: #883ff9;
  --accent: #ec167f;
  /* spacing */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 8px 18px rgba(0,0,0,.18);
  --shadow-md: 0 16px 40px rgba(0,0,0,.28);
  --container-pad: clamp(14px, 2vw, 22px);
  --section-pad: clamp(48px, 6vw, 80px);
  --ease: 240ms ease;
  /* Theme tokens (default = dark) */
  --bg: #0a0a1a;
  --bg-2: #12122b;
  --card: rgba(255,255,255,.06);
  --card-2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.12);
  --text: #f7f8ff;
  --muted: rgba(247,248,255,.70);
  --nav-bg: rgba(0,0,0,.55);
  --nav-border: rgba(255,255,255,.10);
  --link: rgba(247,248,255,.85);
  --btn-text: #fff;
  --primary: #00d4ff;
  --secondary: #883ff9;
}

/* Light Theme */
html[data-theme="light"]{
  --bg: #f6f7fb;
  --bg-2: #ffffff;
  --card: rgba(10,10,26,.04);
  --card-2: rgba(10,10,26,.06);
  --border: rgba(10,10,26,.10);
  --text: #0b1020;
  --muted: rgba(11,16,32,.70);
  --nav-bg: rgba(255,255,255,.70);
  --nav-border: rgba(10,10,26,.10);
  --link: rgba(11,16,32,.80);
  --btn-text: #fff;
  --brand-1: rgba(11,16,32,.80);
  --brand-2: rgba(10,10,26,.80);
  --primary: rgba(11,16,32,.80);
  --secondary: rgba(10,10,26,.80);
}
/* =========================
   BASE
========================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}
.text-light{ color: var(--text) !important; }
.gradient-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(-45deg, var(--bg), var(--bg-2), var(--bg), var(--bg-2));
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  /* animation: gradientShift 8s ease infinite; */
}

.gradient-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="%23fff" opacity="0.1"><animate attributeName="opacity" values="0.1;0.8;0.1" dur="3s" repeatCount="indefinite"/></circle><circle cx="80" cy="40" r="1" fill="%2300d4ff" opacity="0.2"><animate attributeName="opacity" values="0.2;1;0.2" dur="4s" repeatCount="indefinite"/></circle><circle cx="60" cy="80" r="1.5" fill="%23ff006e" opacity="0.15"><animate attributeName="opacity" values="0.15;0.9;0.15" dur="5s" repeatCount="indefinite"/></circle></svg>');
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
a{ text-decoration:none; }
img{ max-width:100%; height:auto; }
.container, .container-fluid{
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.section{
  padding: var(--section-pad) 0;
}

.section-title{
  font-weight: 800;
  text-align:center;
  margin-bottom: clamp(24px, 3vw, 44px);
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  letter-spacing: .2px;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
  /* background-color: var(--brand-1); */
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
/* nice selection */
::selection{ background: rgba(0,212,255,.25); }
/* =========================
   REUSABLE UI UTILS
========================= */
.ui-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
}
.ui-card:hover{
  transform: translateY(-4px);
  transition: transform var(--ease), box-shadow var(--ease);
  box-shadow: var(--shadow-md);
}
.ui-soft{
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.text-muted-2{ color: var(--muted) !important; }
.ui-pill{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  padding: .6rem 1rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
}
.btn-gradient{
  background: linear-gradient(45deg, var(--accent), var(--brand-2));
  color: var(--btn-text);
  border: none;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 700;
  transition: transform var(--ease), box-shadow var(--ease), opacity var(--ease);
  box-shadow: 0 10px 25px rgba(136,63,249,.25);
}
.btn-gradient:hover{
  transform: translateY(-2px);
  opacity: .96;
  box-shadow: 0 16px 35px rgba(136,63,249,.35);
}
/* icon button */
.btn-icon{
  width: 42px;
  height: 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  border: 1px solid var(--nav-border);
  background: var(--nav-bg);
  color: var(--text);
  backdrop-filter: blur(10px);
}
/* =========================
   NAVBAR
========================= */
.navbar{
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(10px);
  transition: background var(--ease), border var(--ease);
}
.navbar-brand{ color: var(--text) !important; letter-spacing: .4px; }
.navbar .text-primary{ color: var(--brand-1) !important; }
.nav-link{
  color: var(--link) !important;
  font-weight: 600;
  padding: .7rem 1rem !important;
  border-radius: 10px;
  transition: background var(--ease), color var(--ease);
}
.nav-link:hover,
.nav-link:focus{
  background: rgba(0,212,255,.12);
  color: var(--text) !important;
}
.navbar-toggler{
  border: 1px solid var(--nav-border);
  border-radius: 12px;
  padding: .45rem .65rem;
  background: var(--nav-bg);
  color: var(--text);
  backdrop-filter: blur(10px);
}
/* Offcanvas */
.offcanvas{
  background: var(--bg-2);
  color: var(--text);
}
.offcanvas .nav-link{
  text-align:left;
  margin: .15rem 0;
}
.dropdown-menu {
  border-radius: 10px;
  border: none;
  background-color: rgba(255, 255, 255, 0.95);
}

.dropdown-item:hover {
  background-color: #f0f0f0;
}

/* Highlighted button for “Book Your Stay” */
.navbar .btn-warning {
  border-radius: 25px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.navbar .btn-warning:hover {
  background-color: #ffdd33;
  transform: translateY(-2px);
}

/* =========================
   HERO
========================= */
.hero{
  padding: clamp(90px, 10vw, 140px) 0;
  position: relative;
  overflow:hidden;
  text-align:center;
  background:
    linear-gradient(rgba(10,10,26,.55), rgba(10,10,26,.65)),
    url('../../img/download2.png');
  background-size: cover;
  background-position: center;
}
html[data-theme="light"] .hero{
  background:
    linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.60)),
    url('../../img/download2.png');
}
.hero h1{
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 900;
  margin-bottom: 14px;
  color: var(--text);
  text-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.hero p{
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--muted);
  margin-bottom: 22px;
}
.event-details{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.detail-item{
  display:flex;
  align-items:center;
  gap: .6rem;
  padding: .65rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
html[data-theme="light"] .detail-item{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.08);
}
/* =========================
   FEATURE CARDS / PRICING
========================= */
.card-feature{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.2vw, 28px);
  height: 100%;
  backdrop-filter: blur(10px);
  transition: transform var(--ease), box-shadow var(--ease);
}
.card-feature:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.feature-icon{
  font-size: 2.6rem;
  margin-bottom: 12px;
  color: var(--brand-1);
}
.card-feature h3{
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--brand-1);
}
.card-feature ul{ padding-left: 0; list-style: none; }
.card-feature li{
  padding-left: 1.4rem;
  margin-bottom: .7rem;
  position: relative;
  color: var(--muted);
}
.card-feature li::before{
  content: "•";
  position:absolute;
  left: 0;
  color: var(--brand-1);
}
.pricing-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
}
.pricing-card .card-body{ padding: 26px; }
.bg-primary-gradient{
  background: linear-gradient(45deg, var(--brand-1), var(--brand-2));
}
.bg-secondary-gradient{
  background: linear-gradient(45deg, var(--brand-2), var(--accent));
}
.price{
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--brand-1);
}
/* =========================
   FOOTER
========================= */
footer{
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 54px 0 20px;
}
.footer-links a{
  color: var(--muted);
  margin: 0 .8rem;
  transition: color var(--ease);
}
.footer-links a:hover{ color: var(--brand-1); }
.social-link{
  color: var(--muted);
  font-size: 1.35rem;
  margin: 0 .65rem;
  transition: transform var(--ease), color var(--ease);
}
.social-link:hover{
  color: var(--brand-1);
  transform: translateY(-2px);
}
html[data-theme="light"] {
  footer{
    background: var(--bg);
    border-top: 1px solid var(--border);
  }
  footer .footer-logo{
    filter: invert(1);
  }
}
/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px){
  .hero{ padding-top: 110px; }
}
@media (max-width: 768px){
  .detail-item{ width: 100%; justify-content:center; }
  .pricing-card .card-body{ padding: 18px; }
}