:root{
  --bg:#07110d;
  --dark:#0a1711;
  --green:#24d36b;
  --green-dark:#10a957;
  --text:#f4f7f4;
  --muted:#aebdb4;
  --border:rgba(255,255,255,.1);
  --max:1180px;
}

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:Inter,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{
  text-decoration:none;
  color:inherit;
}

.container{
  width:min(var(--max),92%);
  margin:auto;
}


/* HEADER */

.header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(7,17,13,.9);
  backdrop-filter:blur(15px);
  border-bottom:1px solid var(--border);
}

.nav{
  height:74px;
  display:flex;
  align-items:center;
  gap:28px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:19px;
}

.logo-box{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--green);
  color:#03200f;
  font-weight:900;
}

nav{
  display:flex;
  gap:25px;
  margin-left:auto;
}

nav a{
  color:#c9d5ce;
  font-size:14px;
}

nav a:hover{
  color:#fff;
}

.header-btn{
  padding:11px 18px;
  background:var(--green);
  color:#03200f;
  border-radius:12px;
  font-weight:800;
  font-size:14px;
}

.menu-btn{
  display:none;
  background:none;
  border:0;
  color:white;
  font-size:27px;
}


/* HERO */

.hero{
  min-height:680px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
  radial-gradient(
    circle at 75% 45%,
    rgba(36,211,107,.18),
    transparent 35%
  ),
  linear-gradient(
    145deg,
    #06100c,
    #0a1b13 60%,
    #0c281a
  );
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
  padding:90px 0;
}

.small-title,
.section-label{
  font-size:12px;
  letter-spacing:.16em;
  font-weight:800;
  color:#68f39b;
}

.hero h1{
  font-size:clamp(50px,7vw,86px);
  line-height:.98;
  letter-spacing:-.05em;
  margin:20px 0;
}

.hero h1 span{
  color:var(--green);
}

.hero p{
  color:var(--muted);
  font-size:18px;
  max-width:650px;
}

.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:30px 0;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 21px;
  border-radius:13px;
  font-weight:800;
  font-size:14px;
  transition:.2s;
}

.btn:hover{
  transform:translateY(-3px);
}

.primary{
  background:var(--green);
  color:#04200f;
}

.secondary{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
}

.trust{
  display:flex;
  gap:30px;
  margin-top:35px;
}

.trust div{
  display:flex;
  flex-direction:column;
}

.trust strong{
  font-size:14px;
}

.trust span{
  font-size:12px;
  color:var(--muted);
}


/* HERO GRAPHIC */

.hero-image{
  min-height:440px;
  position:relative;
  border-radius:32px;
  border:1px solid var(--border);
  background:
  linear-gradient(
    160deg,
    rgba(255,255,255,.09),
    rgba(255,255,255,.02)
  );
  overflow:hidden;
}

.circle{
  position:absolute;
  border-radius:50%;
  background:
  radial-gradient(
    circle at 35% 30%,
    #fff,
    #dfe9e3 35%,
    #27352e 37%,
    #111
  );
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}

.one{
  width:100px;
  height:100px;
  right:60px;
  top:65px;
}

.two{
  width:55px;
  height:55px;
  left:55px;
  bottom:70px;
}

.sports-bat{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-45%) rotate(-13deg);
  width:105px;
  height:285px;
  border-radius:15px;
  background:
  linear-gradient(
    90deg,
    #b87532,
    #f1d58a 35%,
    #b87935 70%,
    #70451e
  );
  box-shadow:
  inset 0 0 0 5px rgba(255,255,255,.12),
  0 25px 45px rgba(0,0,0,.4);
}

.bat-text{
  height:100%;
  display:grid;
  place-items:center;
  color:#193c28;
  font-weight:900;
  font-size:30px;
}

.sports-bat:after{
  content:"";
  position:absolute;
  width:46px;
  height:115px;
  left:50%;
  transform:translateX(-50%);
  bottom:-110px;
  background:
  linear-gradient(
    90deg,
    #26322c,
    #d2ddd6,
    #26322c
  );
  border-radius:8px;
}

.floating-box{
  position:absolute;
  right:24px;
  bottom:24px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 15px;
  background:rgba(5,14,10,.8);
  border:1px solid var(--border);
  border-radius:15px;
  backdrop-filter:blur(10px);
}

.floating-box>span{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--green);
  color:#04200f;
}

.floating-box div{
  display:flex;
  flex-direction:column;
}

.floating-box b{
  font-size:12px;
}

.floating-box small{
  font-size:10px;
  color:var(--muted);
}


/* SECTIONS */

.section{
  padding:100px 0;
}

.two-column{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}

h2{
  font-size:clamp(35px,4vw,54px);
  line-height:1.05;
  margin:15px 0;
}

.about-text{
  color:var(--muted);
}

.about-text p{
  margin-bottom:18px;
}

.text-link{
  color:var(--green);
  font-weight:800;
}


/* WHY US */

.dark{
  background:var(--dark);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.heading{
  margin-bottom:40px;
}

.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.feature{
  padding:25px;
  border:1px solid var(--border);
  border-radius:20px;
  background:rgba(255,255,255,.025);
}

.feature-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:rgba(36,211,107,.12);
  color:var(--green);
  border-radius:12px;
  margin-bottom:18px;
}

.feature h3{
  margin-bottom:8px;
}

.feature p{
  color:var(--muted);
  font-size:14px;
}


/* CATEGORIES */

.center{
  text-align:center;
}

.heading p{
  color:var(--muted);
}

.categories{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.category{
  min-height:180px;
  padding:30px;
  border-radius:22px;
  border:1px solid var(--border);
  background:
  linear-gradient(
    145deg,
    #101f17,
    #0b1711
  );
  transition:.25s;
}

.category:hover{
  transform:translateY(-5px);
  border-color:rgba(36,211,107,.45);
}

.category span{
  font-size:38px;
}

.category h3{
  margin:15px 0 4px;
}

.category p{
  color:var(--muted);
  font-size:14px;
}


/* REVIEWS */

.reviews{
  background:#f4f7f4;
  color:#07110d;
}

.reviews .section-label{
  color:#0b9d4d;
}

.review-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.review{
  padding:28px;
  border:1px solid #dce5df;
  border-radius:20px;
  background:white;
}

.stars{
  color:#12aa55;
  letter-spacing:2px;
  margin-bottom:12px;
}

.review p{
  font-size:15px;
  margin-bottom:18px;
}

.review small{
  color:#718077;
}


/* CTA */

.cta{
  padding:55px 0;
  background:
  linear-gradient(
    120deg,
    #0c2c1b,
    #19a957
  );
}

.cta-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.cta h2{
  margin:10px 0;
}

.cta p{
  color:#c9f5d9;
}

.white{
  background:white;
  color:#06120c;
}


/* CONTACT */

.contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}

.contact>div:first-child p{
  color:var(--muted);
}

.contact-card{
  border:1px solid var(--border);
  border-radius:22px;
  overflow:hidden;
}

.contact-card div{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:4px;
  border-bottom:1px solid var(--border);
}

.contact-card div:last-child{
  border-bottom:0;
}

.contact-card span{
  color:var(--muted);
  font-size:14px;
}

.contact-card a{
  color:var(--green);
  font-weight:800;
}


/* FOOTER */

footer{
  border-top:1px solid var(--border);
  padding:25px 0;
}

.footer{
  display:flex;
  justify-content:space-between;
  color:#89988f;
  font-size:12px;
}

.footer a{
  color:#c9d5ce;
}


/* MOBILE */

@media(max-width:900px){

  .nav nav,
  .header-btn{
    display:none;
  }

  .menu-btn{
    display:block;
    margin-left:auto;
  }

  nav.mobile-open{
    display:flex;
    position:absolute;
    top:74px;
    left:0;
    right:0;
    padding:20px;
    background:#08130e;
    flex-direction:column;
    gap:15px;
  }

  .hero-grid,
  .two-column,
  .contact{
    grid-template-columns:1fr;
  }

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

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

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

  .cta-content{
    flex-direction:column;
    align-items:flex-start;
  }

}


@media(max-width:560px){

  .hero{
    min-height:auto;
  }

  .hero-grid{
    padding:65px 0;
  }

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

  .hero p{
    font-size:16px;
  }

  .trust{
    gap:14px;
    flex-wrap:wrap;
  }

  .hero-image{
    min-height:350px;
  }

  .features,
  .categories{
    grid-template-columns:1fr;
  }

  .section{
    padding:70px 0;
  }

  .footer{
    flex-direction:column;
    gap:10px;
  }
const menuBtn = document.getElementById("menuBtn");
const navMenu = document.getElementById("navMenu");


// MOBILE MENU

menuBtn.addEventListener("click", function () {

  navMenu.classList.toggle("mobile-open");

});


// CLOSE MENU AFTER CLICK

document.querySelectorAll("#navMenu a").forEach(function(link){

  link.addEventListener("click", function(){

    navMenu.classList.remove("mobile-open");

  });

});


// SMOOTH SCROLL

document.querySelectorAll('a[href^="#"]').forEach(function(link){

  link.addEventListener("click", function(e){

    const target = document.querySelector(
      this.getAttribute("href")
    );

    if(target){

      e.preventDefault();

      target.scrollIntoView({
        behavior:"smooth"
      });

    }

  });

});
}
const menuBtn = document.getElementById("menuBtn");
const navMenu = document.getElementById("navMenu");


// MOBILE MENU

menuBtn.addEventListener("click", function () {

  navMenu.classList.toggle("mobile-open");

});


// CLOSE MENU AFTER CLICK

document.querySelectorAll("#navMenu a").forEach(function(link){

  link.addEventListener("click", function(){

    navMenu.classList.remove("mobile-open");

  });

});


// SMOOTH SCROLL

document.querySelectorAll('a[href^="#"]').forEach(function(link){

  link.addEventListener("click", function(e){

    const target = document.querySelector(
      this.getAttribute("href")
    );

    if(target){

      e.preventDefault();

      target.scrollIntoView({
        behavior:"smooth"
      });

    }

  });

});