:root{
  --bg:#f1f7f5;
  --card:#ffffff;
  --primary:#0f766e;
  --primary-light:#14b8a6;
  --dark:#042f2e;
  --muted:#64748b;
  --radius:16px;
  --shadow:0 10px 35px rgba(0,0,0,.08);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, Arial;
  background:var(--bg);
}

/* ===== NAVBAR ===== */
.nav{
  position:sticky;
  top:0;
  z-index:1000;
  background:white;
  border-bottom:1px solid rgba(0,0,0,.05);
}

.nav-inner{
  max-width:1180px;
  margin:auto;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.logo-box{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo-img{
  width:42px;
  height:42px;
  border-radius:25px;
  object-fit:cover;
  border:1px solid #ddd;
}

.logo-text{
  font-size:20px;
  font-weight:800;
  color:var(--primary);
}

.nav-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.nav-links a{
  font-weight:600;
  text-decoration:none;
  color:var(--dark);
  font-size:15px;
}

/* BUTTON */
.btn-primary{
  background:linear-gradient(90deg,var(--primary),var(--primary-light));
  color:white;
  border:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;

  /* ADDED: CTA emphasis */
  box-shadow:0 6px 20px rgba(20,184,166,.35);
}

/* ===== HERO ===== */
.hero{
  max-width:1180px;
  margin:16px auto 24px;
  padding:56px 28px;
  border-radius:22px;
  background:
    linear-gradient(135deg, rgba(15,118,110,.95), rgba(20,184,166,.95)),
    url("https://images.unsplash.com/photo-1503676260728-1c00da094a0b?q=80&w=1600&auto=format");
  color:white;
}

/* ===== COMMON SECTION ===== */
.section{
  max-width:1180px;
  margin:32px auto;
  padding:0 14px;
}

.section h2{color:var(--dark);}

/* ===== GRIDS ===== */
.stuck-grid,
.mentorship-grid,
.mentors,
.testimonials{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
}

/* Cards */
.stuck-card,
.ms-card,
.test-card,
.mentor-card{
  background:white;
  padding:16px;
  border-radius:16px;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  gap:12px;

}
/* ===== TESTIMONIAL STARS (FIXED SIZE & COLOR) ===== */
/* ===== STAR HOVER ANIMATION ===== */
.test-card .fa-star{
  font-size:18px;              /* your chosen size */
  color:#f59e0b;               /* your chosen gold */
  margin-right:2px;
  transition:
    transform 0.25s ease,
    color 0.25s ease,
    text-shadow 0.25s ease;
}

/* Hover effect on testimonial card */
.test-card:hover .fa-star{
  transform:scale(1.25) rotate(-5deg);
  color:#fde047;               /* brighter on hover */
  text-shadow:0 0 8px rgba(253,224,71,.8);
}

/* Optional: staggered animation (feels premium) */
.test-card:hover .fa-star:nth-child(1){transition-delay:0s;}
.test-card:hover .fa-star:nth-child(2){transition-delay:.05s;}
.test-card:hover .fa-star:nth-child(3){transition-delay:.1s;}
.test-card:hover .fa-star:nth-child(4){transition-delay:.15s;}
.test-card:hover .fa-star:nth-child(5){transition-delay:.2s;}

/* Icons */
.stuck-icon{
  width:46px;
  height:46px;
  border-radius:14px;
  background:#e6fffa;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:#0f766e;
}

/* Mentor image */
.mentor-img{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
  margin:auto;
  border:3px solid var(--primary-light);
}

/* ===== FOOTER ===== */
footer{
  background:var(--dark);
  color:white;
  padding:36px 14px;
}

.footer-grid{
  max-width:1180px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}

.social-row{
  display:flex;
  gap:12px;
}

.social-row a{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#065f46;
  border-radius:50%;
  color:white;
  font-size:18px;
}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .nav-inner{
    justify-content:center;
    text-align:center;
    gap:10px;
  }

  .nav-links{
    justify-content:center;
  }

  .btn-primary{
    padding:8px 10px;
    font-size:12px;
  }

  .hero{
    padding:40px 16px;
    border-radius:18px;
  }

  .hero h1{
    font-size:22px;
  }
}