/* ==========================================================
   SPORTS CAMP INFRA — STYLE SHEET
   Tokens: White #FFFFFF / Grey #F5F6F8 / Green #00C853
   Display: Poppins ExtraBold+  Body: Inter
   ========================================================== */

:root{
  --white:#ffffff;
  --grey-50:#fafbfc;
  --grey-100:#f2f4f6;
  --grey-200:#e7eaee;
  --grey-400:#9aa3ad;
  --grey-600:#5c6570;
  --ink:#111111;
  --green:#00c853;
  --green-dark:#00953d;
  --green-light:#e6faec;
  --shadow-sm: 0 4px 14px rgba(17,17,17,0.06);
  --shadow-md: 0 14px 40px rgba(17,17,17,0.09);
  --shadow-lg: 0 30px 70px rgba(17,17,17,0.14);
  --shadow-green: 0 14px 34px rgba(0,200,83,0.28);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --ease: cubic-bezier(.22,1,.36,1);
  --container: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html.no-scroll{ overflow:hidden; }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}
@media (max-width:900px){ body{ cursor:auto; } }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; }

h1,h2,h3,h4{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  margin:0;
  color:var(--ink);
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 32px;
}

em{ font-style:normal; color:var(--green); }

/* ---------- Reveal utility classes (driven by JS/IntersectionObserver) --- */
.reveal-up{ opacity:0; transform:translateY(36px); filter:blur(6px); transition:opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.reveal-up.in-view{ opacity:1; transform:translateY(0); filter:blur(0); }
.reveal-scale{ opacity:0; transform:scale(.92); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-scale.in-view{ opacity:1; transform:scale(1); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

/* stagger children */
.reveal-up:nth-child(2){ transition-delay:.08s; }
.reveal-up:nth-child(3){ transition-delay:.16s; }
.reveal-up:nth-child(4){ transition-delay:.24s; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ================= SCROLL PROGRESS ================= */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--green),var(--green-dark));
  z-index:9999;
  transition:width .1s linear;
}

/* ================= CUSTOM CURSOR ================= */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; pointer-events:none; z-index:9998; border-radius:50%; transform:translate(-50%,-50%); }
.cursor-dot{ width:6px; height:6px; background:var(--ink); transition:transform .1s ease, opacity .2s; }
.cursor-ring{ width:34px; height:34px; border:1.5px solid var(--green); transition:transform .18s var(--ease), width .3s, height .3s, opacity .2s, border-color .3s; }
.cursor-ring.hovered{ width:60px; height:60px; border-color:var(--ink); background:rgba(0,200,83,0.08); }
@media (max-width:900px){ .cursor-dot,.cursor-ring{ display:none; } }

/* ================= LOADER ================= */
#loader .loader-word {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #ffffff !important;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 10px;
}

#loader .loader-word span {
    color: #ffffff !important;
}

#loader .loader-word .loader-accent {
    color: #00c853 !important;
}

/* ================= NAVBAR ================= */
.navbar{
  position:fixed;
top:44px;
left:0;
right:0;
z-index:9998;
  padding:22px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.navbar.scrolled{
  padding:12px 0;
  background:rgba(8,15,25,.88);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 15px 40px rgba(0,0,0,.25);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-container{ max-width:var(--container); margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo{ display:flex; align-items:center; gap:10px; }
.logo-mark{ width:38px; height:38px; border-radius:10px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:800; font-size:14px; }
.logo-text{ font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; letter-spacing:-.01em; }
.logo-text em{ color:var(--green); font-style:normal; }
.logo-text.light{ color:#fff; display:flex; align-items:center; gap:10px; font-size:18px; }
.nav-menu{ display:flex; align-items:center; gap:34px; }
.nav-link{
    position:relative;
    font-size:14.5px;
    font-weight:600;
    color:#111827;
    padding:6px 0;
    transition:0.3s;
}

.nav-link:hover{
    color:#10d45c;
}

.nav-link.active{
    color:#10d45c;
}

.nav-link::after{
    content:'';
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:2px;
    background:#10d45c;
    transition:width .35s ease;
}

.nav-link:hover::after,
.nav-link.active::after{
    width:100%;
}
.nav-link::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--green); transition:width .35s var(--ease); }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }
.nav-burger{ display:none; flex-direction:column; gap:5px; width:26px; }
.nav-burger span{ height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s; }
/* Mobile Menu Icon */
@media (max-width:768px){

.nav-burger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    background:none;
    border:none;
    z-index:9999;
}

.nav-burger span{
    width:28px;
    height:3px;
    background:#fff !important;   /* Black lines */
    border-radius:3px;
}

}

.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; padding:15px 30px; border-radius:100px; font-weight:600; font-size:14.5px; letter-spacing:.01em; overflow:hidden; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.btn span{ position:relative; z-index:2; }
.btn-primary{ background:var(--green); color:#fff; box-shadow:var(--shadow-green); }
.btn-primary:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 22px 45px rgba(0,200,83,.35);
}

.btn-ghost{ background:rgba(255,255,255,0.14); color:#fff; border:1.5px solid rgba(255,255,255,0.55); backdrop-filter:blur(6px); }
.btn-ghost:hover{
  background:rgba(255,255,255,.25);
  transform:translateY(-4px) scale(1.03);
}
.btn-outline{ border:1.5px solid var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--ink); color:#fff; transform:translateY(-3px); }
.btn-lg{ padding:19px 42px; font-size:16px; }
.nav-cta{ padding:12px 24px; font-size:13.5px; }
@media (max-width:900px){
  .nav-menu{ position:fixed; top:0; right:-100%; height:100vh; width:78%; max-width:340px; background:#fff; flex-direction:column; justify-content:center; align-items:flex-start; padding:40px; gap:26px; transition:right .5s var(--ease); box-shadow:-20px 0 60px rgba(0,0,0,.08); }
  .nav-menu.open{ right:0; }
  .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}

/* ================= HERO ================= */
.hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; padding-bottom:100px; }
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); animation:hero-zoom 16s var(--ease) forwards; }
@keyframes hero-zoom{ to{ transform:scale(1); } }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.32) 40%, rgba(0,0,0,.75) 100%); }
.hero-rays{ position:absolute; inset:-20% -10%; background:conic-gradient(from 200deg at 50% 0%, transparent 0deg, rgba(0,200,83,0.18) 40deg, transparent 90deg, transparent 260deg, rgba(255,255,255,0.10) 300deg, transparent 340deg); animation:ray-rotate 24s linear infinite; mix-blend-mode:screen; }
@keyframes ray-rotate{ to{ transform:rotate(360deg); } }
.hero-particles{ position:absolute; inset:0; z-index:1; }
.hero-lines{ position:absolute; inset:0; z-index:1; opacity:.16; }
.hero-lines svg{ width:100%; height:100%; }
.pitch-line, .pitch-line-v{ stroke:#fff; stroke-width:1.5; }
.pitch-circle{ stroke:#fff; stroke-width:1.5; fill:none; }

.hero-content{
    position:relative;
    z-index:2;
    max-width:900px;
    padding:60px 32px 0;
    margin:0 auto;
    width:100%;
    color:#fff;
}
.eyebrow{ display:inline-block; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:18px; }
.hero .eyebrow{ color:#b7ffd2; }
.hero-title{ font-size:clamp(38px,6.4vw,84px); line-height:1.04; color:#fff; margin-bottom:26px; }
.mask-line{ display:block; overflow:hidden; }
.mask-inner{ display:block; transform:translateY(110%); animation:mask-in .9s var(--ease) forwards; }
.hero-title .mask-line:nth-child(1) .mask-inner{ animation-delay:.15s; }
.hero-title .mask-line:nth-child(2) .mask-inner{ animation-delay:.30s; }
.hero-title .mask-line:nth-child(3) .mask-inner{ animation-delay:.45s; }
@keyframes mask-in{ to{ transform:translateY(0); } }
.hero-sub{
    font-size:clamp(15px,1.6vw,19px);
    max-width:640px;
    color:#ffffff !important;
    opacity:1 !important;
    text-shadow:0 2px 8px rgba(0,0,0,.6);
    margin-bottom:36px;
}
.hero-actions{ display:flex; gap:18px; flex-wrap:wrap; }

.scroll-indicator{ position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; color:#fff; font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.scroll-line{ width:1.5px; height:46px; background:rgba(255,255,255,0.3); position:relative; overflow:hidden; }
.scroll-dot{ position:absolute; top:-20%; left:-1.5px; width:4px; height:16px; background:var(--green); border-radius:2px; animation:scroll-fall 1.8s ease-in-out infinite; }
@keyframes scroll-fall{ 0%{ top:-20%; } 60%{ top:80%; } 100%{ top:-20%; } }

/* ================= TRUST BAR ================= */
.trust-bar{ background:var(--ink); padding:56px 0; }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.trust-item{ color:#fff; }
.trust-number{ font-family:'Poppins',sans-serif; font-weight:900; font-size:clamp(30px,4vw,54px); color:var(--green); }
.trust-plus{ font-family:'Poppins',sans-serif; font-weight:900; font-size:clamp(22px,3vw,36px); color:var(--green); }
.trust-item p{ margin:6px 0 0; color:rgba(255,255,255,0.7); font-size:14px; letter-spacing:.02em; }
@media (max-width:700px){ .trust-grid{ grid-template-columns:repeat(2,1fr); gap:36px 20px; } }

/* ================= SECTION GENERICS ================= */
section{ padding:120px 0; position:relative; }
.section-title{ font-size:clamp(30px,4vw,50px); line-height:1.12; max-width:720px; }
.section-title.center{ max-width:760px; }
.section-sub{ color:var(--grey-600); font-size:17px; max-width:560px; margin-top:14px; }
@media (max-width:900px){ section{ padding:80px 0; } }

/* ================= ABOUT ================= */
.about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center; }
.about-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.about-media img{ width:100%; height:560px; object-fit:cover; transition:transform .8s var(--ease); }
.about-media:hover img{ transform:scale(1.06); }
.about-badge{ position:absolute; bottom:24px; left:24px; background:#fff; padding:18px 22px; border-radius:var(--radius-md); box-shadow:var(--shadow-md); max-width:220px; }
.about-badge strong{ display:block; font-family:'Poppins',sans-serif; font-weight:800; font-size:26px; color:var(--green); }
.about-badge span{ font-size:12.5px; color:var(--grey-600); }
.about-content p{ color:var(--grey-600); font-size:16.5px; margin:20px 0 30px; max-width:520px; }
.about-cols{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-bottom:34px; }
.about-col h4{ font-size:16px; margin-bottom:8px; }
.about-col p{ font-size:14.5px; margin:0; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; gap:40px; } .about-media img{ height:400px; } }

/* field-line divider */
.divider-line{ height:40px; overflow:hidden; }
.divider-line svg{ width:100%; height:100%; }
.draw-line{ stroke:var(--grey-200); stroke-width:2; stroke-dasharray:1440; stroke-dashoffset:1440; transition:stroke-dashoffset 1.4s var(--ease); }
.draw-line.in-view{ stroke-dashoffset:0; stroke:var(--green); }

/* ================= SERVICES ================= */
.services{ background:var(--grey-50); }
.services-grid{ margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.service-card{
  position:relative; background:rgba(255,255,255,0.75); border:1px solid var(--grey-200);
  border-radius:var(--radius-md); padding:28px 24px; backdrop-filter:blur(10px);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  transform-style:preserve-3d; will-change:transform;
}
.service-card{
    transition:all .45s cubic-bezier(.22,1,.36,1);
    overflow:hidden;
    position:relative;
}

.service-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        135deg,
        rgba(34,197,94,.08),
        transparent 60%
    );
    opacity:0;
    transition:.45s;
}

.service-card:hover{
    transform:translateY(-12px) scale(1.02);
    border-color:#22c55e;
    box-shadow:0 25px 55px rgba(34,197,94,.22);
}

.service-card:hover::before{
    opacity:1;
}

.service-card:hover .service-icon{
    transform:scale(1.15) rotate(8deg);
    background:#22c55e;
    color:#fff;
}

.service-icon{
    transition:.45s;
}
.service-icon{ width:52px; height:52px; border-radius:14px; background:var(--green-light); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--green-dark); }
.service-icon svg{ width:24px; height:24px; }
.service-card h4{ font-size:16.5px; margin-bottom:8px; }
.service-card p{ font-size:13.5px; color:var(--grey-600); margin:0; }
@media (max-width:1100px){ .services-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .services-grid{ grid-template-columns:1fr; } }

/* ================= WHY (BENTO) ================= */
.bento-grid{ margin-top:56px; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:20px; }
.bento-item{ position:relative; border-radius:var(--radius-md); background:var(--grey-100); padding:26px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.bento-item:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.bento-item h4{ font-size:17px; margin-bottom:6px; position:relative; z-index:2; }
.bento-item p{ font-size:13.5px; color:var(--grey-600); margin:0; position:relative; z-index:2; }
.bento-large{ grid-column:span 2; grid-row:span 2; color:#fff; }
.bento-large img, .bento-wide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.bento-large::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.72) 100%); z-index:1; }
.bento-large h4, .bento-large p{ color:#fff; }
.bento-wide{ grid-column:span 2; color:#fff; }
.bento-wide::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.78) 40%, rgba(0,0,0,.15) 100%); z-index:1; }
.bento-wide .bento-text{ position:relative; z-index:2; max-width:60%; }
.bento-wide h4, .bento-wide p{ color:#fff; }
@media (max-width:900px){
  .bento-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .bento-large{ grid-column:span 2; grid-row:span 2; }
  .bento-wide{ grid-column:span 2; }
  .bento-wide .bento-text{ max-width:100%; }
}
@media (max-width:560px){
  .bento-grid{ grid-template-columns:1fr; }
  .bento-large, .bento-wide{ grid-column:span 1; }
}

/* ================= PROCESS ================= */
.process{ background:var(--ink); color:#fff; }
.process .eyebrow{ color:var(--green); }
.process .section-title{ color:#fff; }
.process-track-wrap{ margin-top:64px; position:relative; }
.process-track{ display:flex; gap:0; overflow-x:auto; padding:10px 32px 30px; scroll-snap-type:x proximity; scrollbar-width:none; }
.process-track::-webkit-scrollbar{ display:none; }
.process-step{ flex:0 0 260px; scroll-snap-align:start; padding:0 30px; border-left:1.5px solid rgba(255,255,255,0.16); position:relative; }
.process-step:first-child{ border-left:none; }
.process-index{ display:block; font-family:'Poppins',sans-serif; font-weight:800; font-size:14px; color:var(--green); margin-bottom:18px; letter-spacing:.05em; }
.process-step h4{ color:#fff; font-size:19px; margin-bottom:8px; }
.process-step p{ color:rgba(255,255,255,0.62); font-size:14px; margin:0; }
.process-progress{ height:2px; background:rgba(255,255,255,0.14); max-width:var(--container); margin:0 auto; }
.process-progress-fill{ height:100%; width:0%; background:var(--green); transition:width .2s linear; }

/* ================= PROJECTS ================= */
.projects-grid{ margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.project-card{ position:relative; display:block; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-sm); }
.project-card img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.project-card:hover img{ transform:scale(1.1); }
.project-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.82) 100%); color:#fff; }
.project-cat{ font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--green); font-weight:600; margin-bottom:6px; }
.project-overlay h4{ color:#fff; font-size:19px; margin-bottom:4px; }
.project-loc{ font-size:13px; color:rgba(255,255,255,0.72); }
@media (max-width:900px){ .projects-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .projects-grid{ grid-template-columns:1fr; } }

/* ================= SPORTS WE COVER ================= */
.sports-grid{ margin-top:56px; display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
.sport-chip{ background:var(--grey-100); border-radius:var(--radius-md); padding:26px 14px; text-align:center; transition:transform .4s var(--ease), background .4s; }
.sport-chip:hover{ transform:translateY(-6px); background:var(--green-light); }
.sport-chip .sport-icon{ width:38px; height:38px; margin:0 auto 12px; color:var(--green-dark); }
.sport-chip .sport-icon svg{ width:100%; height:100%; }
.sport-chip span{ font-size:13.5px; font-weight:600; }
@media (max-width:900px){ .sports-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:560px){ .sports-grid{ grid-template-columns:repeat(3,1fr); } }

/* ================= CLIENTS MARQUEE ================= */
.clients{ padding:60px 0; border-top:1px solid var(--grey-200); border-bottom:1px solid var(--grey-200); }
.marquee{ overflow:hidden; }
.marquee-track{ display:flex; gap:64px; width:max-content; animation:marquee-scroll 26s linear infinite; }
.marquee-track span{ font-family:'Poppins',sans-serif; font-weight:700; font-size:20px; color:var(--grey-400); white-space:nowrap; }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ================= TESTIMONIALS ================= */
.testimonials{ background:var(--grey-50); }
.testimonial-track{ margin-top:56px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testimonial-card{ background:#fff; border-radius:var(--radius-md); padding:34px 30px; box-shadow:var(--shadow-sm); border:1px solid var(--grey-200); transition:transform .4s var(--ease), box-shadow .4s; }
.testimonial-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.testimonial-card p{ font-size:15.5px; color:var(--ink); margin:0 0 22px; }
.testimonial-author strong{ display:block; font-size:14.5px; }
.testimonial-author span{ font-size:12.5px; color:var(--grey-600); }
@media (max-width:900px){ .testimonial-track{ grid-template-columns:1fr; } }

/* ================= FAQ ================= */
.faq-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:60px; }
.faq-head p{ color:var(--grey-600); margin-top:16px; }
.faq-head a{ color:var(--green); font-weight:600; }
.faq-item{ border-bottom:1px solid var(--grey-200); }
.faq-question{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:22px 0; text-align:left; font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; }
.faq-icon{ width:22px; height:22px; position:relative; flex-shrink:0; }
.faq-icon::before, .faq-icon::after{ content:''; position:absolute; background:var(--ink); border-radius:2px; top:50%; left:50%; transform:translate(-50%,-50%); transition:transform .35s var(--ease), opacity .35s; }
.faq-icon::before{ width:14px; height:2px; }
.faq-icon::after{ width:2px; height:14px; }
.faq-item.open .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item.open .faq-icon::before{ background:var(--green); }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq-answer p{ padding:0 0 22px; color:var(--grey-600); font-size:14.5px; max-width:520px; }
@media (max-width:900px){ .faq-grid{ grid-template-columns:1fr; gap:30px; } }

/* ================= CTA ================= */
.cta{ position:relative; padding:150px 0; overflow:hidden; }
.cta-bg{ position:absolute; inset:0; }
.cta-bg img{ width:100%; height:100%; object-fit:cover; }
.cta-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.78)); }
.cta-content{ position:relative; z-index:1; text-align:center; }
.cta-content h2{ color:#fff; font-size:clamp(30px,5vw,56px); max-width:800px; margin:0 auto 40px; }

/* ================= CONTACT ================= */

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:stretch;
}

.contact-card{
    background:var(--grey-50);
    border-radius:var(--radius-lg);
    padding:52px 44px;
    border:1px solid var(--grey-200);
}

.contact-card p{
    color:var(--grey-600);
    margin:14px 0 30px;
    max-width:400px;
}

.contact-map{
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-md);
    height:100%;
    min-height:720px;
}

.contact-map iframe{
    width:100%;
    height:100%;
    min-height:720px;
    border:0;
    display:block;
}

@media (max-width:992px){

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

    .contact-map{
        min-height:450px;
    }

    .contact-map iframe{
        min-height:450px;
    }

}
/* ================= FOOTER ================= */
.footer{ background:var(--ink); color:#fff; padding-top:80px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-bottom:60px; border-bottom:1px solid rgba(255,255,255,0.1); }
.footer-brand p{ color:rgba(255,255,255,0.55); font-size:14px; margin-top:16px; max-width:280px; }
.footer-col h5{ font-family:'Poppins',sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--green); margin-bottom:18px; }
.footer-col a{ display:block; color:rgba(255,255,255,0.68); font-size:14.5px; margin-bottom:12px; transition:color .3s; }
.footer-col a:hover{ color:var(--green); }
.footer-bottom-inner{ display:flex; align-items:center; justify-content:space-between; padding:26px 0; }
.footer-bottom p{ color:rgba(255,255,255,0.5); font-size:13px; margin:0; }
.footer-social{ display:flex; gap:14px; }
.footer-social a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; transition:background .3s, border-color .3s; }
.footer-social a:hover{ background:var(--green); border-color:var(--green); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-bottom-inner{ flex-direction:column; gap:14px; } }
/* =========================
   TOP CONTACT BAR
========================= */

.top-bar{
    width:100%;
    background:#0f172a;
    color:#fff;
    font-size:14px;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.top-bar-container{
    max-width:1400px;
    margin:auto;
    padding:10px 25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.top-left,
.top-right{
    display:flex;
    gap:20px;
    align-items:center;
}

.top-bar a{
    color:#fff;
    text-decoration:none;
}

.top-bar a:hover{
    color:#22c55e;
}

.navbar{
    top:44px !important;
}

body{
    padding-top:44px;
}
/* ===========================
   FLOATING BUTTONS
=========================== */

.floating-btn{

position:fixed;

right:25px;

width:60px;

height:60px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

box-shadow:0 10px 30px rgba(0,0,0,.25);

z-index:99999;

transition:.35s ease;

font-size:28px;

}

.floating-btn:hover{

transform:translateY(-5px) scale(1.08);

}

.whatsapp{

bottom:95px;

background:#25D366;

}

.call{

bottom:20px;

background:#0f172a;

color:white;

}
.hero-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin:45px 0;
max-width:720px;
}

.stat-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.15);
border-radius:18px;
padding:20px;
text-align:center;
transition:.35s;
}

.stat-card:hover{
transform:translateY(-8px);
border-color:#22c55e;
box-shadow:0 20px 40px rgba(34,197,94,.25);
}

.stat-card h3{
font-size:34px;
color:#22c55e;
margin-bottom:8px;
font-weight:800;
}

.stat-card p{
font-size:15px;
color:#fff;
opacity:.9;
margin:0;
}

@media(max-width:768px){
.hero-stats{
grid-template-columns:repeat(2,1fr);
}
}
/* ================= Scroll Progress ================= */

.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    width:0%;
    height:4px;
    background:linear-gradient(90deg,#00C853,#39FF14);
    z-index:100000;
    transition:width .15s linear;
    box-shadow:0 0 15px rgba(0,200,83,.5);
}
/* ================= Cursor Glow ================= */

.cursor-glow{
    position:fixed;
    width:320px;
    height:320px;
    border-radius:50%;
    pointer-events:none;

    background:radial-gradient(circle,
        rgba(34,197,94,.18) 0%,
        rgba(34,197,94,.08) 40%,
        transparent 75%);

    transform:translate(-50%,-50%);
    z-index:1;
    transition:
        transform .08s linear,
        opacity .3s ease;

    opacity:0;
    filter:blur(10px);
}

body:hover .cursor-glow{
    opacity:1;
}
/* ================= Lightbox ================= */

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);

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

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:100000;
}

.lightbox.active{
    opacity:1;
    visibility:visible;
}

.lightbox img{

    max-width:90%;
    max-height:90%;

    border-radius:18px;

    box-shadow:0 30px 80px rgba(0,0,0,.4);

    animation:zoomIn .35s ease;
}

@keyframes zoomIn{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.lightbox-close{

position:absolute;

top:30px;

right:40px;

font-size:45px;

color:white;

cursor:pointer;

transition:.3s;

}

.lightbox-close:hover{

color:#22c55e;

transform:rotate(90deg);

}
/* ================= Testimonials ================= */

.testimonial-slider{

max-width:850px;

margin:auto;

position:relative;

}

.testimonial-card{

display:none;

padding:50px;

background:#fff;

border-radius:24px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

text-align:center;

animation:fade .5s;

}

.testimonial-card.active{

display:block;

}

.testimonial-card p{

font-size:18px;

line-height:1.8;

margin-bottom:25px;

}

.testimonial-card h4{

color:#22c55e;

margin-bottom:8px;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/* ================= WHY US ================= */

.why-grid{

display:grid;

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

gap:25px;

margin-top:60px;

}

.why-card{

background:#fff;

padding:40px 25px;

border-radius:24px;

text-align:center;

transition:.4s;

box-shadow:0 15px 35px rgba(0,0,0,.06);

}

.why-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(34,197,94,.20);

}

.why-card h3{

font-size:42px;

color:#22c55e;

margin-bottom:12px;

}

.why-card p{

margin:0;

color:#555;

}

@media(max-width:900px){

.why-grid{

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

}

}

@media(max-width:600px){

.why-grid{

grid-template-columns:1fr;

}

}
/* ================= Project Filters ================= */

.project-filters{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    margin:40px 0;
}

.filter-btn{
    border:none;
    background:#f3f4f6;
    padding:12px 24px;
    border-radius:50px;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.filter-btn:hover,
.filter-btn.active{
    background:#22c55e;
    color:#fff;
}
/* ================= CLIENTS ================= */

.clients{
    padding:90px 0;
}

.clients-slider{
    display:flex;
    gap:40px;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:60px;
}

.clients-slider img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:50%;
    border:3px solid #22c55e;
    filter:none;
    opacity:1;
    transition:.35s;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.clients-slider img:hover{
    transform:translateY(-8px) scale(1.08);
    box-shadow:0 15px 35px rgba(34,197,94,.35);
}

.clients-slider img:hover{
    filter:none;
    opacity:1;
    transform:scale(1.08);
}
/* ================= TIMELINE ================= */

.timeline{
    padding:100px 0;
    background:#f8fafc;
}

.timeline-wrapper{
    max-width:900px;
    margin:70px auto 0;
    position:relative;
}

.timeline-wrapper::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    bottom:0;
    width:4px;
    background:#22c55e;
    transform:translateX(-50%);
}

.timeline-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:60px;
}

.timeline-year{
    width:120px;
    height:120px;
    border-radius:50%;
    background:#22c55e;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:700;
    flex-shrink:0;
}

.timeline-content{
    width:70%;
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.timeline-content h3{
    margin-bottom:10px;
}

.timeline-content p{
    margin:0;
    color:#555;
}

@media(max-width:768px){

.timeline-wrapper::before{
display:none;
}

.timeline-item{
flex-direction:column;
text-align:center;
gap:20px;
}

.timeline-content{
width:100%;
}

}
/* CONTACT */

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

margin-top:60px;

}

.contact-info{

display:flex;

flex-direction:column;

gap:25px;

}

.info-card{

padding:28px;

background:#fff;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.contact-form{

display:flex;

flex-direction:column;

gap:18px;

background:#fff;

padding:35px;

border-radius:24px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.contact-form input,
.contact-form textarea,
.contact-form select{

padding:16px;

border:1px solid #ddd;

border-radius:12px;

font-size:16px;

}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{

border-color:#22c55e;

outline:none;

}

@media(max-width:900px){

.contact-wrapper{

grid-template-columns:1fr;

}

}
.contact-form{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:25px;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:15px;
    font-family:inherit;
}

.contact-form textarea{
    resize:vertical;
    min-height:140px;
}

.contact-extra{
    margin-top:30px;
    border-top:1px solid #eee;
    padding-top:20px;
}

.contact-extra p{
    margin:10px 0;
}
/* ================= CONTACT SECTION FIX ================= */

.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:stretch;
}

.contact-card,
.contact-map{
    width:100%;
}

.contact-map iframe{
    width:100%;
    height:100%;
    min-height:650px;
    border:none;
    border-radius:20px;
}

@media (max-width:992px){

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

    .contact-map iframe{
        min-height:450px;
    }

}
/* ===== NAVBAR LOGO FIX ===== */

.navbar .logo-text{
    color:#ffffff !important;
}

.navbar .logo-text em{
    color:#10d45c !important;
}

.navbar .logo-mark{
    color:#ffffff !important;
}
.nav-logo{
    display:flex;
    align-items:center;
    gap:10px;
    position:relative;
    z-index:9999;
}

.logo-img{
    width:170px;
    height:auto;
    display:block;
    position:relative;
    z-index:9999;
}
/* ===== NAVBAR SIZE FIX ===== */

.navbar{
    min-height:72px;
    padding:8px 0;
}

.nav-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.nav-logo{
    display:flex;
    align-items:center;
}

.logo-img{
    width:150px;
    height:auto;
    display:block;
}
/* ===== Hero Gap Fix ===== */

.hero{
    padding-top:90px;
}

.hero-content{
    margin-top:30px;
}
/* FOOTBALL HERO */

.football-hero{

padding:120px 0;
background:#fff;

}

.football-hero .container{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;

}

.hero-tag{

display:inline-block;
padding:8px 18px;
background:#E8F8F0;
color:#0E9F6E;
border-radius:30px;
font-weight:600;
margin-bottom:20px;

}

.hero-content h1{

font-size:58px;
line-height:1.1;
margin-bottom:25px;

}

.hero-content p{

font-size:18px;
line-height:1.8;
color:#666;
margin-bottom:35px;

}

.hero-image img{

width:100%;
border-radius:24px;
box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.hero-buttons{

display:flex;
gap:20px;

}

.btn-primary{

background:#0E9F6E;
color:#fff;
padding:15px 30px;
border-radius:10px;
text-decoration:none;

}

.btn-secondary{

padding:15px 30px;
border:2px solid #0E9F6E;
border-radius:10px;
text-decoration:none;
color:#0E9F6E;

}





.about-football{

padding:100px 0;
background:#F8FAFC;

}

.about-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;

}

.about-grid img{

width:100%;
border-radius:20px;

}

.about-grid h2{

font-size:42px;
margin-bottom:20px;

}

.about-grid p{

font-size:17px;
line-height:1.9;
margin-bottom:18px;
color:#555;

}
/* ABOUT FOOTBALL */

.about-football{
    padding:100px 0;
    background:#f8fafc;
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.about-image img{
    width:100%;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.about-content .section-subtitle{
    color:#0E9F6E;
    font-weight:700;
    letter-spacing:1px;
    display:block;
    margin-bottom:15px;
}

.about-content h2{
    font-size:42px;
    margin-bottom:20px;
    line-height:1.2;
}

.about-content p{
    font-size:17px;
    line-height:1.8;
    color:#555;
    margin-bottom:18px;
}
/* FOOTBALL STATS */

.football-stats{
    padding:90px 0;
    background:#0E9F6E;
}

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

.stat-card{
    background:rgba(15,23,42,.45);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

    padding:22px 18px;
}

.stat-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.stat-card h2{
    font-size:42px;
    color:#0E9F6E;
    margin-bottom:10px;
}

.stat-card p{
    font-size:16px;
    color:#ffffff !important;
    opacity:1 !important;
    margin:0;
    font-weight:500;
    line-height:1.6;
    text-shadow:0 2px 8px rgba(0,0,0,.6);
}
/* BENEFITS */

.benefits{
    padding:110px 0;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    color:#0E9F6E;
    font-weight:700;
}

.section-title h2{
    font-size:42px;
    margin-top:15px;
}

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

.benefit-card{
    padding:35px;
    border-radius:20px;
    background:#fff;
    border:1px solid #eee;
    transition:.4s;
}

.benefit-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.10);
}

.benefit-card h3{
    margin-bottom:15px;
}

.benefit-card p{
    color:#666;
    line-height:1.7;
}
/* CONSTRUCTION PROCESS */

.construction-process{
    padding:120px 0;
    background:#f8fafc;
}

.construction-process .section-title{
    max-width:700px;
    margin:0 auto 70px;
}

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

.process-card{
    background:#fff;
    border-radius:20px;
    padding:35px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.4s;
}

.process-card:hover{
    transform:translateY(-10px);
}

.process-number{
    width:65px;
    height:65px;
    border-radius:50%;
    background:#0E9F6E;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:bold;
    margin-bottom:25px;
}

.process-card h3{
    margin-bottom:15px;
    font-size:22px;
}

.process-card p{
    color:#666;
    line-height:1.8;
}
/* PROJECT GALLERY */

.project-gallery{
    padding:120px 0;
}

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

.gallery-item{
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.10);
}

.gallery-item img{
    width:100%;
    height:300px;
    object-fit:cover;
    transition:.5s;
}

.gallery-item:hover img{
    transform:scale(1.08);
}
/* WHY CHOOSE */

.why-choose{
    padding:120px 0;
    background:#f8fafc;
}

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

.choose-card{
    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.3s;
}

.choose-card:hover{
    transform:translateY(-8px);
}

.choose-card h3{
    margin-bottom:15px;
}

.choose-card p{
    color:#666;
    line-height:1.8;
}
/* FAQ */

.faq-section{
    padding:120px 0;
}

.faq-item{
    background:#fff;
    padding:30px;
    border-radius:15px;
    margin-bottom:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.faq-item h3{
    margin-bottom:15px;
}

.faq-item p{
    color:#666;
    line-height:1.8;
}
/* CTA */

.cta-section{

padding:120px 0;
background:#0E9F6E;
color:#fff;
text-align:center;

}

.cta-section h2{

font-size:48px;
margin-bottom:20px;

}

.cta-section p{

max-width:700px;
margin:0 auto 40px;
line-height:1.8;
font-size:18px;

}

.cta-section .btn-secondary{

border-color:#fff;
color:#fff;

}
/* ================= MOBILE FIX ================= */

@media (max-width:768px){

.top-bar{
    position:relative;
}

body{
    padding-top:0;
}

.navbar{
    top:0 !important;
}

.top-bar-container{
    flex-direction:column;
    gap:8px;
    padding:10px;
    text-align:center;
}

.top-left,
.top-right{
    flex-direction:column;
    gap:6px;
    width:100%;
}

.top-left a,
.top-right span{
    font-size:13px;
}

}
@media (max-width:768px){

.logo-img{
    width:150px;
    height:auto;
}

.nav-container{
    padding:12px 18px;
}

}
@media (max-width:768px){

.nav-menu{
    width:100%;
    max-width:100%;
}

}
@media (max-width:768px){

.footer-grid{
    grid-template-columns:1fr;
    text-align:center;
}

.footer-brand p{
    max-width:100%;
}

.footer-bottom-inner{
    flex-direction:column;
    text-align:center;
    gap:15px;
}

}
@media (max-width:768px){

.floating-btn{
    width:55px;
    height:55px;
    right:15px;
}

.whatsapp{
    bottom:85px;
}

.call{
    bottom:18px;
}

}
html, body{
    overflow-x: hidden;
    width: 100%;
}

@media (max-width:768px){

    .footer-container{
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    .footer-col{
        width:100%;
    }
}
/* ===== MOBILE OVERFLOW FIX ===== */

@media (max-width:768px){

html,
body{
    overflow-x:hidden;
}

.container{
    width:100%;
    max-width:100%;
    padding-left:15px;
    padding-right:15px;
}

.footer,
.footer-grid,
.contact-grid,
.contact-map,
iframe{
    width:100%;
    max-width:100%;
}

img{
    max-width:100%;
    height:auto;
}

}
/* ===== Hide Top Bar on Mobile ===== */

@media (max-width:768px){

    .top-bar{
        display:none !important;
    }

    body{
        padding-top:0 !important;
    }

    .navbar{
        top:0 !important;
    }

}
/* ===== WHY US CARD TRANSPARENT ===== */

.why-card{
    background:rgba(255,255,255,0.08) !important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.08); !important;

    box-shadow:none !important;
}

.why-card h3{
    color:#22c55e;
}

.why-card p{
    color:#ffffff;
}
/* ===== Desktop Menu White ===== */
@media (min-width:769px){

    .nav-link{
        color:#ffffff !important;
    }

    .nav-link:hover,
    .nav-link.active{
        color:#22c55e !important;
    }

}
/* Mobile Projects Slider */

@media (max-width:768px){

.projects-slider{
    display:flex;
    overflow-x:auto;
    gap:18px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:15px;
}

.projects-slider::-webkit-scrollbar{
    display:none;
}

.project-card{
    min-width:85%;
    flex:0 0 85%;
    scroll-snap-align:center;
}

}
@media (max-width:768px){

.about-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.about-content{
    width:100%;
    max-width:340px;
    margin:0 auto;
    text-align:center;
}

}
.loader-logo{
    margin-bottom:25px;
    animation:loaderLogo 1.2s ease-in-out infinite alternate;
}

.loader-logo img{
    width:220px;
    max-width:75%;
    height:auto;
}

@keyframes loaderLogo{
    from{
        transform:scale(1);
        opacity:.9;
    }
    to{
        transform:scale(1.05);
        opacity:1;
    }
}
/* ===== Mobile Navbar ===== */
@media (max-width:768px){

    .navbar{
        min-height:60px !important;
        padding:6px 0 !important;
    }

    .nav-container{
        min-height:60px !important;
        padding:0 18px !important;
    }

    .logo-img{
        width:110px !important;
        height:auto;
    }

    .nav-burger{
        width:40px;
        height:40px;
    }

    .hero{
        padding-top:60px !important;
    }

}
@media (max-width:768px){

    .navbar{
        min-height:65px !important;
        padding:4px 0 !important;
    }

    .nav-container{
        min-height:65px !important;
        padding:0 16px !important;
    }

    .logo-img{
        width:145px !important;   /* Logo bada */
        height:auto;
    }

    .nav-logo{
        margin:0;
    }

    .hero{
        padding-top:65px !important;
    }

}
.products{
    padding:100px 0;
    background:#fff;
}

.section-subtitle{
    text-align:center;
    color:#6b7280;
    margin-top:15px;
    margin-bottom:50px;
    font-size:18px;
}

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

.product-card{
    display:block;
    text-decoration:none;
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.product-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:.35s;
}

.product-card h3{
    padding:22px;
    font-size:24px;
    color:#111827;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.product-card span{
    color:#22c55e;
    transition:.35s;
}

.product-card:hover{
    transform:translateY(-8px);
}

.product-card:hover img{
    transform:scale(1.05);
}

.product-card:hover span{
    transform:translateX(6px);
}

@media(max-width:992px){

.products-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.products{
padding:70px 0;
}

.products-grid{
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.product-card img{
height:120px;
}

.product-card h3{
padding:12px;
font-size:17px;
line-height:1.4;
}

.section-subtitle{
font-size:16px;
}

}
/* Navbar Background */
.navbar{
    background:#111827; /* Dark Black */
    backdrop-filter:none;
    box-shadow:0 2px 15px rgba(0,0,0,.15);
}
.products{
    padding-top:120px;
    padding-bottom:100px;
}
.section-title{
    margin-bottom:18px;
}

.section-subtitle{
    margin-top:0;
    margin-bottom:50px;
    color:#6b7280;
    font-size:18px;
    line-height:1.7;
}
/* ================= MOBILE MENU ================= */

@media (max-width:768px){

.nav-menu{

    position:fixed;

    top:0;
    right:-100%;

    width:100%;
    height:100vh;

    background:#111827 !important;

    display:flex;
    flex-direction:column;

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

    padding:80px 40px;

    transition:.4s ease;

    z-index:9998;
}

.nav-menu.active{
    right:0;
}

/* Links */

.nav-menu .nav-link{

    color:#fff !important;

    font-size:22px;

    font-weight:600;

    margin:12px 0;
}

.nav-menu .nav-link:hover,
.nav-menu .nav-link.active{

    color:#10d45c !important;
}

/* Hamburger */

.nav-burger{
    z-index:10000;
}

.nav-burger span{
    background:#fff !important;
}

/* CTA Button */

.nav-menu .btn{
    margin-top:30px;
    width:100%;
    justify-content:center;
}

}
.section-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:18px;
}

.brand-line{
    width:55px;
    height:2px;
    background:#10d45c;
    border-radius:20px;
}

.brand-text{
    color:#10d45c;
    font-size:13px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    font-family:'Poppins',sans-serif;
}
.nav-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:72px;
    padding:0 20px;
}

.nav-logo{
    display:flex;
    align-items:center;
    height:72px;
}

.logo-img{
    width:140px;      /* 130–150px try kar sakte ho */
    height:auto;
    display:block;
    object-fit:contain;
}

.nav-burger{
    display:flex;
    align-items:center;
    justify-content:center;
    height:72px;
}
.logo-img{
    position:relative;
    top:3px;
}

/* ==========================================================================
   COURT BUILD ANIMATION — tiles interlocking to form a finished court
   ========================================================================== */
.court-build{ background:var(--grey-50); overflow:hidden; }

.court-build-grid{
  display:grid;
  grid-template-columns:.95fr 1.15fr;
  gap:64px;
  align-items:center;
}

.court-build-copy p{ color:var(--grey-600); font-size:16.5px; margin:20px 0 30px; max-width:480px; }

.court-build-points{ display:flex; flex-direction:column; gap:16px; margin:0 0 36px; }
.court-build-points li{
  display:flex; align-items:center; gap:16px;
  font-size:15px; font-weight:600; color:var(--ink);
}
.cbp-index{
  flex:none; width:36px; height:36px; border-radius:50%;
  background:var(--green-light); color:var(--green-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:'Poppins',sans-serif; font-weight:800; font-size:12.5px;
}

.court-build-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.court-replay-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:inherit; font-weight:600; font-size:14px; color:var(--ink);
  padding:0; border:none; background:none; cursor:pointer;
  transition:color .25s var(--ease);
}
.court-replay-btn svg{ transition:transform .5s var(--ease); }
.court-replay-btn:hover{ color:var(--green-dark); }
.court-replay-btn:hover svg{ transform:rotate(-220deg); }

/* ---------- Stage ---------- */
.court-build-visual{ position:relative; width:100%; min-width:0; }
.court-stage-glow{
  position:absolute; inset:-40px; z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(0,200,83,.18), transparent 65%);
  filter:blur(10px); pointer-events:none;
}
.court-stage{
  position:relative; z-index:1;
  aspect-ratio:8/5; width:100%;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#0a2740;
  box-shadow:var(--shadow-lg);
  padding:16px;
}
.court-stage::after{
  content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform:translateX(-120%) skewX(-12deg);
  opacity:0;
}
.court-stage.is-done::after{
  animation:courtShine 3.4s var(--ease) .5s infinite;
}
@keyframes courtShine{
  0%{ transform:translateX(-120%) skewX(-12deg); opacity:0; }
  8%{ opacity:.55; }
  28%{ opacity:0; }
  100%{ transform:translateX(120%) skewX(-12deg); opacity:0; }
}

.court-tiles{
  position:absolute; inset:16px;
  display:grid;
  gap:4px;
  z-index:1;
}
.court-tile{
  border-radius:5px;
  opacity:0;
  transform:translate(var(--tx,0), var(--ty,0)) rotate(var(--rot,0deg)) scale(.7);
  transition:transform .85s var(--ease), opacity .55s var(--ease);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  will-change:transform, opacity;
}
.court-tile.is-set{
  opacity:1;
  transform:translate(0,0) rotate(0deg) scale(1);
}

.court-lines{
  position:absolute; inset:16px; z-index:2;
  width:calc(100% - 32px); height:calc(100% - 32px);
  pointer-events:none;
}
.court-line-path{
  fill:none;
  stroke:#ffffff;
  stroke-width:3.5;
  stroke-linecap:round;
  stroke-dasharray:2000;
  stroke-dashoffset:2000;
  opacity:.9;
  transition:stroke-dashoffset 1.1s var(--ease);
}
.court-line-path.is-drawn{ stroke-dashoffset:0; }

.court-badge{
  position:absolute; left:50%; top:50%; z-index:3;
  transform:translate(-50%,-50%) scale(.7);
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--green-dark);
  font-family:'Poppins',sans-serif; font-weight:700; font-size:13.5px;
  letter-spacing:.03em;
  padding:12px 20px; border-radius:100px;
  box-shadow:var(--shadow-md);
  opacity:0;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.court-badge svg{ color:var(--green); }
.court-badge.is-visible{ opacity:1; transform:translate(-50%,-50%) scale(1); }

@media (max-width:980px){
  .court-build-grid{ grid-template-columns:1fr; gap:40px; }
  .court-build-visual{ order:-1; width:100%; max-width:520px; margin:0 auto; }
}
@media (max-width:720px){
  .court-build{ padding:70px 0; }
  .court-stage{ aspect-ratio:1/1.02; padding:12px; border-radius:var(--radius-md); }
  .court-tiles{ inset:12px; gap:3px; }
  .court-lines{ inset:12px; width:calc(100% - 24px); height:calc(100% - 24px); }
  .court-line-path{ stroke-width:3; }
  .court-badge{ font-size:12.5px; padding:10px 18px; }
  .court-build-copy p{ max-width:100%; }
  .court-build-actions{ gap:18px 24px; }
  .court-replay-btn{ padding:10px 4px; }
}
@media (max-width:420px){
  .court-stage{ padding:9px; border-radius:16px; }
  .court-tiles{ inset:9px; gap:2px; }
  .court-lines{ inset:9px; width:calc(100% - 18px); height:calc(100% - 18px); }
  .court-line-path{ stroke-width:2.5; }
  .court-tile{ border-radius:3px; }
  .court-badge{ font-size:11.5px; padding:8px 14px; gap:6px; }
  .court-badge svg{ width:13px; height:13px; }
}
/* =========================================
   COURT BUILD - MOBILE TOP GAP FIX
   ========================================= */

@media (max-width: 600px) {

    .court-build {
        padding-top: 35px !important;
        padding-bottom: 45px !important;
    }

    .court-build-grid {
        padding-top: 0 !important;
        margin-top: 0 !important;
        gap: 30px !important;
    }

    .court-build-visual {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .court-stage {
        margin-top: 0 !important;
    }
}
/* =========================================
   MOBILE - REMOVE GAP ABOVE COURT ANIMATION
   ========================================= */

@media (max-width: 600px) {

    /* Products section ke neeche ka extra blank space */
    .products {
        padding-bottom: 15px !important;
    }

    /* Court animation ko immediately upar lao */
    .court-build {
        padding-top: 15px !important;
        padding-bottom: 40px !important;
    }

    .court-build-grid {
        gap: 20px !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .court-build-visual {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .court-stage {
        margin-top: 0 !important;
    }
}