* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #10212b;
  background: #f4f8fb;
  line-height: 1.6;
}

a {
  text-decoration: none;
}

.hero,
.page-hero {
  min-height : 100vh;
  background-size : cover;
  background-position : center;
  display : flex;
  flex-direction : column;
  justify-content : space-between;
}

.hero {
  background-image :
    linear-gradient(rgba(8, 18, 30, 0.6), rgba(8, 18, 30, 0.7)),
    url("https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=1600&q=80");
}

.page-hero {
  min-height: 72vh;
  background-image:
    linear-gradient(rgba(8, 18, 30, 0.72), rgba(8, 18, 30, 0.82)),
    url("https://images.unsplash.com/photo-1517649763962-0c623066013b?auto=format&fit=crop&w=1600&q=80");
}
.strength-hero {
  background-image:
    linear-gradient(rgba(8, 18, 30, 0.72), rgba(8, 18, 30, 0.82)),
    url("https://images.unsplash.com/photo-1517838277536-f5f99be501cd?auto=format&fit=crop&w=1600&q=80");
}

.lowimpact-hero {
  background-image:
    linear-gradient(rgba(8, 18, 30, 0.72), rgba(8, 18, 30, 0.82)),
    url("https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=1600&q=80");
}


.navbar {
  display: flex ;
  justify-content : space-between ;
  align-items : center ;
  padding : 24px 8%;
}

.navbar.dark .logo,
.navbar.dark .nav-links a {
  color : #fff;
}
.logo {
  font-size : 1.4rem;
  font-weight : 800;
  color : #fff;
  letter-spacing : 0.5px;
}

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

.nav-links a {
  color : #fff;
  font-weight : 600;
  opacity : 0.95;
}

.nav-links a:hover {
  opacity : 1;
  text-decoration : underline;
}

.hero-content,
.page-hero-content {
  padding : 0 8% 80px;
  max-width : 820px;
  color : #fff;
}

.badge {
  display : inline-block;
  background : rgba(127, 231, 220, 0.18);
  border : 1px solid rgba(127, 231, 220, 0.45);
  color : #c8fff7;
  padding : 8px 14px;
  border-radius : 999px;
  font-size : 0.9rem;
  margin-bottom : 18px;
}

.hero h1,
.page-hero h1 {
  font-size : clamp(2.3rem, 5vw, 4.6rem);
  line-height : 1.08;
  margin-bottom : 18px;
}

.hero-text {
  font-size : 1.08rem;
  max-width : 650px;
  margin-bottom : 28px;
  color : rgba(255, 255, 255, 0.9);
}
.btn {
  display : inline-block;
  background : #7fe7dc;
  color : #10313a;
  padding : 14px 26px;
  border-radius : 14px;
  font-weight : 800;
  transition : transform 0.2s ease, background 0.2s ease;
}

.btn:hover {
  background : #a8f1e9;
  transform : translateY(-2px);
}

.section {
  padding : 80px 8%;
}

.section.alt {
  background : #eaf4f8;
}

.section-title {
  max-width : 800px;
  margin-bottom : 28px;
}

.section-title h2 {
  font-size: clamp(1.7rem, 3vw, 2.7rem);
  margin-bottom : 10px;
}

.section-title p {
  color : #48606c;
}

.info-grid,
.question-grid,
.sports-grid,
.steps {
  display : grid;
  gap : 20px;
}

.info-grid {
  grid-template-columns : repeat(auto-fit, minmax(220px, 1fr));
}

.question-grid {
  grid-template-columns : repeat(auto-fit, minmax(240px, 1fr));
}

.sports-grid {
  grid-template-columns : repeat(auto-fit, minmax(220px, 1fr));
}

.steps {
  grid-template-columns : repeat(auto-fit, minmax(220px, 1fr));
}

.info-card,
.question-card,
.sport-card,
.step {
  background : #fff;
  border-radius : 22px;
  padding  : 24px;
  box-shadow  : 0 10px 30px rgba(13, 40, 53, 0.08);
  border : 1px solid rgba(16, 33, 43, 0.06);
}

.question-card {
  color : #10212b;
  transition : transform 0.2s ease, box-shadow 0.2s ease;
}

.question-card:hover {
  transform : translateY(-4px);
  box-shadow : 0 16px 40px rgba(13, 40, 53, 0.12);
}

.question-tag {
  display: inline-block;
  font-size : 0.85rem;
  font-weight : 700;
  color : #0c6b68;
  background : #dff8f5;
  padding : 6px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.info-card h3,
.question-card h3,
.sport-card h3,
.step p {
  margin-bottom: 10px;
}
.step {
  text-align: center;
}
.step span {
  display: inline-flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #10212b;
  color : #fff;
  font-weight : 800;
  margin-bottom : 14px;
}
.footer {
  background: #10232b;
  color: #d8e7ee;
  text-align : center;
  padding : 34px 8%;
}
.footer h3 {
  margin-bottom: 10px;
  color: #fff;
}

.footer a {
  color: #7fe7dc;
}

.footer a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    gap: 14px;
  }

  .hero-content,
  .page-hero-content {
    padding-bottom: 60px;
  }

  .section {
    padding: 64px 6%;
  }
}