/* ═══════════════════════════════════════════
   sections.css — Shared section styles & stars
   Change this file to update: the background
   gradient, nebula orbs, and star effect that
   appear in ALL content sections
═══════════════════════════════════════════ */

/* ── Section wrapper ── */
.sec{
  position:relative;padding:90px 32px;overflow:hidden;
}

/* ── Background image layer (set per section in destinations/tours css) ── */
.sec .sec-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:blur(2px) brightness(.45) saturate(1.3);
  transform:scale(1.05);
  z-index:0;
}

/* ── Dark overlay on top of image ── */
.sec .sec-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(13,5,33,.72) 0%,rgba(13,5,33,.38) 40%,rgba(13,5,33,.72) 100%);
}

/* ── Top nebula glow ── */
.sec::before{
  content:'';position:absolute;
  width:900px;height:700px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(139,92,246,.25) 0%,rgba(244,114,182,.08) 40%,transparent 70%);
  top:-250px;left:50%;transform:translateX(-50%);pointer-events:none;z-index:2;
}

/* ── Bottom warm sunset orb ── */
.sec::after{
  content:'';position:absolute;
  width:600px;height:500px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(251,146,60,.1) 0%,rgba(244,114,182,.06) 40%,transparent 70%);
  bottom:-120px;right:0%;pointer-events:none;z-index:2;
}

/* ── Left teal accent orb ── */
.sec .orb-left{
  position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,211,238,.06) 0%,transparent 70%);
  bottom:10%;left:-5%;pointer-events:none;z-index:2;
}

.sec-inner{max-width:1120px;margin:0 auto;position:relative;z-index:3}

/* ── Scattered stars ── */
.stars{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;
}
.stars::before,.stars::after{
  content:'';position:absolute;border-radius:50%;background:white;
  box-shadow:
    45px 55px 0 1px rgba(255,255,255,.55),
    130px 25px 0 .5px rgba(255,255,255,.4),
    210px 80px 0 1px rgba(255,255,255,.6),
    295px 45px 0 .5px rgba(255,255,255,.35),
    380px 110px 0 1px rgba(255,255,255,.5),
    460px 30px 0 .5px rgba(255,255,255,.4),
    540px 90px 0 1px rgba(255,255,255,.6),
    625px 20px 0 .5px rgba(255,255,255,.45),
    700px 70px 0 1px rgba(255,255,255,.5),
    790px 40px 0 .5px rgba(255,255,255,.3),
    870px 95px 0 1px rgba(255,255,255,.55),
    950px 15px 0 .5px rgba(255,255,255,.4),
    75px 150px 0 .5px rgba(255,255,255,.35),
    165px 190px 0 1px rgba(255,255,255,.45),
    255px 145px 0 .5px rgba(255,255,255,.5),
    340px 200px 0 1px rgba(255,255,255,.4),
    440px 160px 0 .5px rgba(255,255,255,.3),
    525px 205px 0 1px rgba(255,255,255,.55);
  width:2px;height:2px;top:0;left:0;
}
.stars::after{top:50%}

/* ── Section heading ── */
.sec-head{text-align:center;margin-bottom:52px}
.sec-label{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-bottom:12px;
}
.sec-label::before,.sec-label::after{
  content:'';flex:1;max-width:80px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),transparent);
}
.sec-label span{
  font-size:11.5px;font-weight:700;letter-spacing:2.5px;
  color:var(--accent2);text-transform:uppercase;
}
.sec-head h2{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.5px;margin-bottom:10px}
.sec-head p{font-size:15px;color:var(--white50)}