/* ===== HERO BANNER ========================================= */
.price-hero{
  /* replace the URL below with your real hero image when ready */
  
  background: radial-gradient(circle at 50% 0%, #101820 0%, #050608 100%);
  background:url('../../assets/images/noise6.gif') center center;
  min-height:70vh;           /* tall visual header */
  display:flex;justify-content:center;align-items:center;
  position:relative;color:#ffffff;text-align:center;padding:2rem 1rem;
}


/* frosted overlay block */
.hero-inner{
  max-width:600px;width:100%;
  display:flex;flex-direction:column;gap:1.4rem;align-items:center;
}

/* optional subtle glass-lite backdrop */
.glass-lite{
  backdrop-filter:blur(12px) saturate(160%);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;padding:2.5rem 1.8rem;
}

.hero-title{
  font-family:'Poppins',sans-serif;
  font-size:clamp(2.5rem,6vw,3.5rem);
  font-weight:700;margin:0;
}

.hero-tag{max-width:460px;font-size:1.05rem;opacity:.9;margin:0;}

.scroll-btn{
  margin-top:1.6rem;
  display:inline-block;padding:1rem 2.4rem;border-radius:9999px;
  background:linear-gradient(90deg,#ff6078 0%,#d884ff 100%);
  color:#1a1a1a;font-weight:600;text-decoration:none;
  transition:transform .2s,opacity .25s;
}
.scroll-btn:hover{transform:translateY(-3px);opacity:.85}

/* make sure hero sits below sticky navbar gap */
.navbar + .price-hero{margin-top:1rem;}

/* ===== PACKAGES ================================================= */
.packages{
  background:linear-gradient(180deg,#0d0822 10%,#220809 90%);
  padding:4rem 1rem;display:flex;justify-content:center;
}
.pkg-grid{
  width:min(1200px,100%);
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* frosted card */
.pkg-card{
  backdrop-filter:blur(14px)saturate(180%);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  padding:2.2rem 1.8rem 2.6rem;
  display:flex;flex-direction:column;gap:1rem;text-align:center;
  color:#ffffff;                              /* all-white text */
  transition:background .3s,box-shadow .3s,transform .3s;
}
.pkg-card:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}

/* badge */
.pkg-card.popular{position:relative}
.badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:#ff5b99;padding:.2rem .8rem;border-radius:999px;
  font-size:.75rem;font-weight:600;color:#fff;
}

/* headings & price */
.pkg-title{font-family:'Poppins',sans-serif;font-size:1.35rem;font-weight:700;margin:0}
.pkg-tag{font-size:.95rem;opacity:.85;margin:0}
.pkg-price{font-size:2rem;font-weight:700;margin:.4rem 0 0}
.pkg-note{font-size:.8rem;opacity:.75;margin:0}

/* feature list */
.pkg-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem;font-size:.9rem;text-align:left}
.pkg-list li::before{content:"✓";color:#28c840;font-weight:600;margin-right:.45rem}
.pkg-time{margin-top:1rem;font-size:.8rem;opacity:.75}

/* buttons */
.pkg-btn{
  margin-top:auto;display:inline-block;padding:.8rem 1.2rem;
  border-radius:8px;font-weight:600;text-decoration:none;color:#fff
}
.green{background:#871919}
.blue{background:#871919}
.purple{background:#871919}
.red{background:#871919}

/* ===== ADDITIONAL SERVICES =================================== */
.addons{
  background:linear-gradient(180deg,#220809 10%,#510303 90%);
  padding:5rem 1rem 7rem;
  display:flex;justify-content:center;
}
.addons .container{
  width:min(1100px,100%);
  text-align:center;display:flex;flex-direction:column;gap:3rem;
}
.addons-title{
  font-family:'Poppins',sans-serif;
  font-size:clamp(1.9rem,5vw,2.6rem);
  margin:0;color:#ffffff;
}
.addons-sub{max-width:540px;margin:0 auto;color:#ffffff;opacity:.85}
.addons-grid{
  display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* glass card */
.addon-card{
  backdrop-filter:blur(14px)saturate(180%);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.18);
  padding:2rem 1.6rem 2.4rem;
  display:flex;flex-direction:column;gap:1rem;text-align:center;
  color:#ffffff;transition:background .3s,transform .3s,box-shadow .3s;
}
.addon-card:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-6px);
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}

/* header inside card */
.addon-icon{font-size:2rem}
.addon-head{
  font-family:'Poppins',sans-serif;
  font-size:1.25rem;font-weight:700;margin:0;
}
.addon-lead{font-size:.95rem;opacity:.85;margin:0}

/* price rows */
.addon-table{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.6rem;font-size:.93rem;
}
.addon-table li{
  background:rgba(255,255,255,.12);
  border-radius:10px;padding:.6rem .9rem;
  display:flex;justify-content:space-between;
}

/* price figure */
.price{font-weight:600}

/* ===== Horizontal frosted tray ================================= */
.addons-field{
  backdrop-filter: blur(14px) saturate(180%);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 24px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.20);

  padding: 2.5rem 2rem;
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: nowrap;          /* keep cards in one row */
  overflow-x: auto;           /* allow lateral scroll on small screens */
}

/* each card shrinks a bit so three fit across common laptop widths */
.addon-card{
  flex: 0 0 clamp(240px, 28%, 320px);
}

@media (max-width: 600px) {
  .addons-field {
    flex-wrap: wrap;          /* stack cards when screen is narrow */
    overflow-x: hidden;       /* prevent horizontal scrolling */
    row-gap: 2rem;
  }
  .addon-card {
    flex: 1 1 260px;          /* allow cards to fill available width */
  }
}

/* Make sure footer is visible even without scroll-reveal */
.footer{
  opacity:1 !important;
  transform:none !important;
}

.navbar + .price-hero{
  margin-top: -80px !important;
}

body {
  background: #313131;
}