/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    background: url('../img/hero.webp') 
                no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 20px;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

/* Floating Icons */
.floating-icon{
  position: absolute;
  width: 60px;                   /* tweak per asset */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
  cursor: grab;
  z-index: 3;
  transform: translate3d(0,0,0);
  will-change: transform;
  transition: filter .2s ease;
}
.floating-icon:active{ cursor: grabbing; filter: brightness(1.05); }

/* Optional: start positions so they don't overlap at load */
.floating-icon:nth-of-type(1){ top: 10%; left: 8%; }
.floating-icon:nth-of-type(2){ top: 35%; right: 10%; }
.floating-icon:nth-of-type(3){ bottom: 8%; left: 30%; }

@keyframes floatRandom {
0%   { transform: translate(0, 0); }
75%  { transform: translate(var(--x1), var(--y1)); }
75%  { transform: translate(var(--x2), var(--y2)); }
75%  { transform: translate(var(--x3), var(--y3)); }
100% { transform: translate(0, 0); }
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: #fff;
    animation: bounce 2s infinite;
    z-index: 2;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -10px); }
    60% { transform: translate(-50%, -5px); }
}

/* Responsive Typography */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    .hero p { font-size: 1rem; }
    .btn-main, .btn-secondary {
    display: block;
    margin: 10px auto;
    width: 80%;
    }
}

/* About Section Styling */
#about {
  overflow: hidden;
}

#about p {
  font-size: 1.1rem;
  /* line-height: 1.6; */
}

.highlight-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
}
.highlight-box:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 6px 15px rgba(66, 31, 111, 0.3);
}

.about-img {
  max-width: 90%;
  transition: transform 0.5s ease;
}
.about-img:hover {
  transform: scale(1.05) rotate(2deg);
}

/* Animation classes */
[data-aos="fade-right"] {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.7s ease;
}
[data-aos="fade-right"].animate {
  opacity: 1;
  transform: translateX(0);
}

[data-aos="fade-left"] {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.7s ease;
}
[data-aos="fade-left"].animate {
  opacity: 1;
  transform: translateX(0);
}

/* What we off section styling */
/* Section Heading underline */
.underline {
  width: 80px;
  height: 6px;
  background: linear-gradient(90deg, #FFB907, #421F6F);
  margin: 0 auto;
  border-radius: 10px;
}

/* Card Styling */
/* Offer Card Layout */
.offer-card {
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.offer-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 8px 18px rgba(66, 31, 111, 0.25);
}

/* Icon Styling (left side) */
.offer-icon {
  width: 200px;
  height: 200px;
  margin: -5px;
  transition: transform 0.3s ease;
}

@media (max-width: 360px) {
    .offer-icon { 
      width: 170px;
      height: 170px;
    }
   
    
}

.offer-card:hover .offer-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Fade-in effect */
.offer-card {
  opacity: 0;
  transform: translateY(40px);
}
.offer-card.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.7s ease;
}

/* Leaderboard section styling */
/* ===== Leaderboard Look & Feel ===== */
.lb-underline{width:100px;height:6px;background:linear-gradient(90deg,#FFB907,#421F6F);border-radius:999px}
.lb-chip{border-radius:999px;border:1px solid #e7ddff;background:#fff;color:#421F6F}
.lb-chip.active{background:#421F6F;color:#fff;border-color:#421F6F}

.lb-podium .lb-card{background:#fff;position:relative;overflow:hidden}
.lb-1st{min-height:360px;transform:translateY(0)}
.lb-2nd{min-height:300px}
.lb-3rd{min-height:300px}

.lb-card h3 {
  color: #421F6F;
}

/* Podium “steps” */
.lb-1st::after,.lb-2nd::after,.lb-3rd::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
  background:linear-gradient(180deg,rgba(66,31,111,0.05),rgba(66,31,111,0.12));
}
@media (min-width:768px){
  .lb-1st{transform:translateY(-12px)}  /* center card taller */
  .lb-2nd,.lb-3rd{transform:translateY(12px)}
}

/* Medals */
.lb-medal{
  position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;font-weight:500;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.lb-gold{background:linear-gradient(145deg,#ffcc33,#d4a017)}
.lb-silver{background:linear-gradient(145deg,#d6d6d6,#a8a8a8)}
.lb-bronze{background:linear-gradient(145deg,#d28b36,#a6631b)}

/* Trophy behind 1st */
.lb-trophy{
  position:absolute;inset:auto 0 10px 0;margin:auto;width:180px;opacity:.08;pointer-events:none;filter:drop-shadow(0 6px 16px rgba(66,31,111,.2));
}

/* Ribbon */
.lb-ribbon{
  position:absolute;top:0;right:-38px;transform:rotate(45deg);background:#FFB907;color:#421F6F;
  font-weight:800;padding:.25rem 2.5rem;margin-top: 1.3rem;box-shadow:0 4px 10px rgba(0,0,0,.15)
}

/* Avatars */
.lb-avatar{
  width:84px;height:84px;border-radius:50%;object-fit:cover;
  border:4px solid #FFB907;box-shadow:0 6px 14px rgba(255,185,7,.3)
}

/* Score */
.lb-score{
  font-size:1.5rem;margin:0;color:#421F6F;
  text-shadow:0 0 0 rgba(0,0,0,0);transition:transform .2s ease
}
.lb-card:hover .lb-score{transform:scale(1.06)}

/* Badges */
.lb-badge{
  background:#fff3c6;color:#421F6F;border:1px solid #ffd874;
  border-radius:999px;font-size:.75rem;padding:.35rem .6rem
}

/* Hover lift */
.lb-card{transition:transform .25s ease, box-shadow .25s ease}
.lb-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(66,31,111,.18)}

/* Scroll-in */
.lb-card{opacity:0;transform:translateY(30px)}
.lb-card.lb-in{opacity:1;transform:translateY(0);transition:all .6s ease}

/* Confetti canvas fills card */
.lb-confetti{position:absolute;inset:0;pointer-events:none}

/* Accessibility focus */
.lb-card:focus{outline:3px solid #FFB907;outline-offset:2px}

/* Gamified Progress Preview Styling */
/* Cards */
.pp-card {
  background:#fff;
  transition:transform .3s ease, box-shadow .3s ease;
  position:relative;
  overflow:hidden;
}
.pp-card:hover {
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 12px 24px rgba(66,31,111,.18);
}

/* Icons */
.pp-icon {
  width:70px;
  height:70px;
  transition:transform .3s ease;
}
.pp-card:hover .pp-icon { transform:scale(1.15) rotate(5deg); }

/* Highscore big number */
.pp-highscore {
  color:#421F6F;
  transition:transform .3s ease;
}
.pp-card:hover .pp-highscore { transform:scale(1.08); }

/* Progress bar */
.progress {
  height:16px;
  border-radius:999px;
  background:#e5dff3;
}
.progress-bar {
  border-radius:999px;
  transition:width 1.5s ease;
}

/* Streak fire flicker */
@keyframes flicker {
  0%,19%,21%,23%,25%,54%,56%,100% {opacity:1;}
  20%,24%,55% {opacity:0.5;}
}

/* Confetti canvas covers Level card */
.pp-confetti {
  position:absolute; inset:0; pointer-events:none;
}