/* =========================================================
   PROGRAMMES PAGE
   SAVIGENIX DARK PREMIUM THEME
========================================================= */


/* ================= BASE ================= */

body{

  background:
    linear-gradient(
      180deg,
      #061427 0%,
      #071B34 40%,
      #0B2447 100%
    );

  color:white;

}


/* ================= COMMON ================= */

section{
  padding:90px 0;
}

.section-heading{

  display:flex;

  align-items:center;

  gap:20px;

  margin-bottom:40px;

}

.section-heading h2{

  font-size:2.3rem;

  color:white;

}

.heading-line{

  flex:1;

  height:1px;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.06),
      rgba(0,184,196,0.4)
    );

}


/* ================= HERO ================= */

.programmes-hero{

  position:relative;

  overflow:hidden;

  padding:
    180px 0 120px;

}


.hero-content{

  max-width:760px;

}


.hero-tag{

  display:inline-flex;

  align-items:center;

  padding:
    10px 18px;

  border-radius:999px;

  background:
    rgba(255,255,255,0.06);

  border:
    1px solid rgba(255,255,255,0.08);

  color:
    rgba(255,255,255,0.82);

  font-size:0.82rem;

  letter-spacing:1px;

  font-weight:600;

  margin-bottom:28px;

}


.hero-content h1{

  font-size:5.8rem;

  line-height:1;

  margin-bottom:28px;

  color:white;

}


.hero-content p{

  font-size:1.15rem;

  line-height:2;

  max-width:700px;

  color:
    rgba(255,255,255,0.74);

}


.hero-buttons{

  display:flex;

  gap:18px;

  margin-top:42px;

  flex-wrap:wrap;

}


/* ================= BUTTONS ================= */

.hero-primary-btn,
.hero-secondary-btn{

  padding:
    16px 30px;

  border-radius:16px;

  font-weight:600;

  transition:0.3s ease;

}


.hero-primary-btn{

  background:
    linear-gradient(
      135deg,
      var(--orange-accent),
      var(--orange-soft)
    );

  color:white;

  box-shadow:
    0 14px 28px rgba(249,115,22,0.22);

}


.hero-primary-btn:hover{

  transform:
    translateY(-4px);

}


.hero-secondary-btn{

  border:
    1px solid rgba(255,255,255,0.12);

  background:
    rgba(255,255,255,0.05);

  backdrop-filter:
    blur(12px);

  color:white;

}


.hero-secondary-btn:hover{

  background:
    rgba(255,255,255,0.08);

}


/* ================= OFFER ================= */

.offer-section{
  padding-top:40px;
}


.offer-strip{

  display:flex;

  align-items:flex-start;

  gap:20px;

  padding:30px 34px;

  border-radius:26px;

  background:
    linear-gradient(
      135deg,
      rgba(249,115,22,0.18),
      rgba(249,115,22,0.08)
    );

  border:
    1px solid rgba(249,115,22,0.18);

  backdrop-filter:
    blur(16px);

}


.offer-icon{

  font-size:2rem;

}


.offer-strip h3{

  font-size:1.4rem;

  color:white;

  margin-bottom:8px;

}


.offer-strip p{

  color:
    rgba(255,255,255,0.72);

  line-height:1.8;

}


/* ================= JOURNEY ================= */

.journey-flow{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

  padding:38px;

  border-radius:28px;

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 10px 40px rgba(0,0,0,0.18);

}


.journey-step{

  flex:1;

  text-align:center;

}


.step-icon{

  width:72px;
  height:72px;

  border-radius:50%;

  display:flex;

  align-items:center;
  justify-content:center;

  margin:
    0 auto 18px;

  background:
    linear-gradient(
      135deg,
      var(--navy-royal),
      var(--teal-primary)
    );

  color:white;

  font-size:1.2rem;

  box-shadow:
    0 12px 24px rgba(0,184,196,0.18);

}


.gold{

  background:
    linear-gradient(
      135deg,
      var(--orange-accent),
      #FDBA74
    );

}


.journey-step span{

  font-size:0.75rem;

  letter-spacing:1px;

  font-weight:700;

  color:
    rgba(255,255,255,0.55);

}


.journey-step h3{

  font-size:1.7rem;

  margin-top:12px;

  color:white;

}


.journey-arrow{

  font-size:1.8rem;

  color:var(--orange-accent);

}


/* ================= PACKAGES ================= */

.packages-grid{

  display:grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:24px;

}


.programme-card{

  position:relative;

  border-radius:28px;

  overflow:hidden;

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:
    blur(18px);

  transition:0.3s ease;

  box-shadow:
    0 12px 28px rgba(0,0,0,0.14);

}


.programme-card:hover{

  transform:
    translateY(-8px);

}


.card-top{

  position:relative;

  padding:28px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.03)
    );

  border-bottom:
    1px solid rgba(255,255,255,0.08);

}


.card-top::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--teal-primary),
      var(--orange-accent)
    );

}


.card-label{

  display:inline-block;

  padding:6px 12px;

  border-radius:999px;

  background:
    rgba(255,255,255,0.08);

  border:
    1px solid rgba(255,255,255,0.08);

  color:
    rgba(255,255,255,0.82);

  font-size:0.72rem;

  font-weight:700;

  letter-spacing:1px;

  margin-bottom:18px;

}


.card-top h3{

  font-size:2.1rem;

  color:white;

  margin-bottom:8px;

}


.card-subtitle{

  color:
    rgba(255,255,255,0.7);

  line-height:1.6;

  margin-bottom:14px;

}


.card-duration{

  color:
    rgba(255,255,255,0.85);

  font-size:0.92rem;

}


.card-body{

  padding:30px 26px;

}


.price-block{

  margin-bottom:26px;

}


.original-price{

  font-size:2.5rem;

  font-weight:700;

  color:white;

  margin-bottom:10px;

}


.launch-price{

  color:#7EE7EE;

  font-weight:700;

}


.launch-price span{

  color:
    rgba(255,255,255,0.55);

  margin-left:6px;

  font-weight:500;

}


.strike-price{

  text-decoration:line-through;

  color:
    rgba(255,255,255,0.4);

  margin-bottom:10px;

}


.platinum-price{

  font-size:2.6rem;

  font-weight:700;

  color:#FDBA74;

}


.programme-card ul{

  list-style:none;

}


.programme-card ul li{

  position:relative;

  padding-left:24px;

  margin-bottom:16px;

  line-height:1.8;

  color:
    rgba(255,255,255,0.72);

}


.programme-card ul li::before{

  content:"✓";

  position:absolute;

  left:0;

  color:var(--teal-primary);

  font-weight:700;

}


.featured-card{

  border:
    2px solid rgba(0,184,196,0.24);

  transform:
    scale(1.03);

}


.featured-badge{

  position:absolute;

  top:14px;
  right:14px;

  padding:8px 12px;

  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      var(--teal-primary),
      var(--navy-royal)
    );

  color:white;

  font-size:0.72rem;

  font-weight:700;

  z-index:2;

}


.gold-badge{

  background:
    linear-gradient(
      135deg,
      var(--orange-accent),
      #FDBA74
    );

}


/* ================= SCHEDULE ================= */

.schedule-box{

  overflow:hidden;

  border-radius:28px;

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid rgba(255,255,255,0.08);

  backdrop-filter:
    blur(18px);

  box-shadow:
    0 12px 30px rgba(0,0,0,0.18);

}


.schedule-header{

  display:grid;

  grid-template-columns:
    1fr 1fr;

}


.schedule-phase{

  padding:36px;

}


.schedule-phase:first-child{

  background:
    rgba(0,184,196,0.05);

  border-right:
    1px solid rgba(255,255,255,0.06);

}


.schedule-phase:last-child{

  background:
    rgba(249,115,22,0.05);

}


.schedule-phase span{

  font-size:0.78rem;

  letter-spacing:1px;

  font-weight:700;

  color:var(--orange-accent);

}


.schedule-phase h3{

  font-size:2rem;

  color:white;

  margin:
    12px 0;

}


.schedule-phase p{

  color:
    rgba(255,255,255,0.7);

}


.schedule-row{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:24px 34px;

  border-top:
    1px solid rgba(255,255,255,0.06);

}


.schedule-row span{

  color:
    rgba(255,255,255,0.78);

}


.schedule-row strong{

  color:white;

}


.total-row{

  background:
    rgba(255,255,255,0.03);

}


.total-row strong{

  color:#FDBA74;

}


/* ================= RESPONSIVE ================= */

@media(max-width:1200px){

  .packages-grid{

    grid-template-columns:
      1fr 1fr;

  }

}


@media(max-width:768px){

  section{
    padding:70px 0;
  }

  .hero-content h1{
    font-size:4rem;
  }

  .journey-flow{
    flex-direction:column;
  }

  .journey-arrow{
    transform:rotate(90deg);
  }

  .packages-grid{
    grid-template-columns:1fr;
  }

  .schedule-header{
    grid-template-columns:1fr;
  }

  .schedule-row{

    flex-direction:column;

    align-items:flex-start;

    gap:10px;

  }

}