/* ============================================================
   ASIM BIN SALEH AL DAYANI — GLOBAL STYLESHEET
   Premium Championship Design System
   Single stylesheet — no inline CSS, no page-specific files.
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  --red: #B3001B;
  --red-dark: #7A0012;
  --gold: #D4AF37;
  --gold-light: #F1D98B;
  --black: #0D0D0D;
  --card: #171717;
  --card-hover: #1E1E1E;
  --text: #FFFFFF;
  --text-secondary: #CFCFCF;
  --border-gold: linear-gradient(135deg, rgba(212,175,55,.6), rgba(212,175,55,.05));

  --font-heading: 'Bebas Neue', sans-serif;
  --font-sub: 'Oswald', sans-serif;
  --font-body: 'Poppins', sans-serif;
  --font-btn: 'Montserrat', sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --transition: .35s cubic-bezier(.4,0,.2,1);
  --container: 1240px;

  --glow-red: 0 0 24px rgba(179,0,27,.45);
  --glow-gold: 0 0 24px rgba(212,175,55,.4);
  --shadow-card: 0 12px 30px rgba(0,0,0,.45);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--black);
  color:var(--text);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; }
::selection{ background:var(--red); color:#fff; }

h1,h2,h3,h4{ font-family:var(--font-heading); letter-spacing:.03em; line-height:1.05; }
h5,h6{ font-family:var(--font-sub); }

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

/* Scrollbar */
::-webkit-scrollbar{ width:9px; }
::-webkit-scrollbar-track{ background:var(--black); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--gold),var(--red)); border-radius:10px; }

/* ---------- 3. UTILITIES ---------- */
.text-gold{ color:var(--gold); }
.text-red{ color:var(--red); }
.eyebrow{
  font-family:var(--font-sub);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.78rem;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{ content:''; width:28px; height:2px; background:var(--red); display:inline-block; }

.section{ padding:110px 0; position:relative; }
.section-tight{ padding:70px 0; }
.section-title{
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  text-transform:uppercase;
  margin-bottom:18px;
}
.section-desc{
  color:var(--text-secondary);
  max-width:640px;
  font-size:1.02rem;
}
.section-head{ margin-bottom:56px; }
.section-head.center{ text-align:center; margin-left:auto; margin-right:auto; }
.section-head.center .section-desc{ margin-left:auto; margin-right:auto; }

.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

/* Buttons */
.btn{
  font-family:var(--font-btn);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.85rem;
  padding:16px 34px;
  border-radius:50px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:var(--transition);
  border:2px solid transparent;
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  color:#fff;
  box-shadow:var(--glow-red);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--gold),#B5892C);
  color:var(--black);
  box-shadow:var(--glow-gold);
  transform:translateY(-3px);
}
.btn-outline{
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(212,175,55,.05);
}
.btn-outline:hover{
  background:var(--gold);
  color:var(--black);
  box-shadow:var(--glow-gold);
  transform:translateY(-3px);
}
.btn-block{ width:100%; justify-content:center; }
.btn-sm{ padding:11px 22px; font-size:.75rem; }

/* Cards */
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:32px;
  border:1px solid rgba(212,175,55,.15);
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute; inset:0;
  padding:1px;
  border-radius:var(--radius);
  background:var(--border-gold);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:var(--transition);
  pointer-events:none;
}
.card:hover{ transform:translateY(-8px); background:var(--card-hover); box-shadow:var(--shadow-card); }
.card:hover::before{ opacity:1; }

.icon-badge{
  width:58px; height:58px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(212,175,55,.08);
  border:1px solid rgba(212,175,55,.3);
  color:var(--gold);
  font-size:1.5rem;
  margin-bottom:20px;
  transition:var(--transition);
}
.card:hover .icon-badge{
  background:var(--red);
  color:#fff;
  transform:scale(1.1);
  box-shadow:var(--glow-red);
}

/* ---------- 4. PRELOADER + SCROLL PROGRESS ---------- */
.page-loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
.page-loader.loaded{ opacity:0; visibility:hidden; }
.loader-badge{
  width:70px; height:70px; border-radius:50%;
  border:3px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; color:var(--red);
  animation:pulseGlow 1.2s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(212,175,55,.5); }
  50%{ box-shadow:0 0 0 16px rgba(212,175,55,0); }
}
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--red),var(--gold));
  z-index:9998; transition:width .1s ease-out;
}

/* ---------- 5. NAVBAR ---------- */

.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  padding:22px 0;
  background:transparent;
  transition:var(--transition);
}

.navbar.scrolled{
  padding:14px 0;
  background:rgba(13,13,13,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(212,175,55,.15);
}

.navbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-width:0;
}

/* ---------- BRAND ---------- */

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  min-width:0;
}

.brand-logo{
  width:70px;
  height:auto;
  object-fit:contain;
  flex-shrink:0;
  transition:var(--transition);
}

.navbar.scrolled .brand-logo{
  width:50px;
}

.admin-sidebar .brand-logo{
  width:50px;
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  flex-shrink:0;
}

.brand-text strong{
  font-family:var(--font-sub);
  font-size:1.05rem;
  letter-spacing:.03em;
}

.brand-text small{
  color:var(--gold);
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* ---------- NAV LINKS ---------- */

.nav-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:20px;
  margin-left:auto;
  min-width:0;
  flex-shrink:1;
}

.nav-links a{
  font-family:var(--font-sub);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-secondary);
  position:relative;
  padding:6px 0;
  transition:var(--transition);
  white-space:nowrap;
  flex-shrink:0;
}

.nav-links a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:0;
  background:var(--gold);
  transition:var(--transition);
}

.nav-links a:hover,
.nav-links a.active{
  color:var(--gold);
}

.nav-links a:hover::after,
.nav-links a.active::after{
  width:100%;
}

/* ---------- CONTACT BUTTON ---------- */

.nav-links .nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  background:var(--red);
  color:#fff !important;

  padding:10px 18px;
  min-width:88px;
  height:44px;

  border-radius:50px;

  white-space:nowrap;
  flex-shrink:0;
  box-sizing:border-box;
}

.nav-links .nav-cta::after{
  display:none;
}

.nav-links .nav-cta:hover{
  background:var(--gold);
  color:var(--black) !important;
  box-shadow:var(--glow-gold);
}

/* ---------- MENU TOGGLE ---------- */

.menu-toggle{
  display:none;
  font-size:1.6rem;
  color:var(--gold);
  background:none;
  border:0;
  cursor:pointer;
  flex-shrink:0;
}


/* ---------- SMALL DESKTOP ---------- */

@media (max-width:1200px){

  .nav-links{
    gap:14px;
  }

  .nav-links a{
    font-size:.76rem;
    letter-spacing:.03em;
  }

  .nav-links .nav-cta{
    min-width:82px;
    height:42px;
    padding:9px 15px;
  }

  .brand-logo{
    width:60px;
  }

  .brand-text strong{
    font-size:.95rem;
  }

  .brand-text small{
    font-size:.60rem;
  }
}


/* ---------- TABLET / MOBILE ---------- */

/*@media (max-width:768px){

  .navbar{
    padding:16px 0;
  }

  .navbar-inner{
    position:relative;
  }

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

  .nav-links{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;

    display:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;

    width:100%;

    padding:18px;
    gap:4px;

    background:rgba(13,13,13,.98);
    backdrop-filter:blur(14px);

    border:1px solid rgba(212,175,55,.15);
    border-radius:12px;

    box-sizing:border-box;
  }

  .nav-links.active{
    display:flex;
  }

  .nav-links a{
    width:100%;
    padding:12px 10px;
    text-align:center;
    box-sizing:border-box;
  }

  .nav-links .nav-cta{
    width:100%;
    height:44px;
    margin-top:6px;
  }
}*/

/* ---------- 6. HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at top right, rgba(179,0,27,.25), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(212,175,55,.12), transparent 55%),
    var(--black);
}
.hero-bg-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(212,175,55,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(212,175,55,.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  animation:gridDrift 40s linear infinite;
}
@keyframes gridDrift{ from{ background-position:0 0; } to{ background-position:200px 200px; } }

.hero-particles{ position:absolute; inset:0; pointer-events:none; }
.hero-particles span{
  position:absolute; bottom:-10%;
  width:4px; height:4px; border-radius:50%;
  background:var(--gold); opacity:.6;
  animation:floatUp linear infinite;
}
@keyframes floatUp{
  to{ transform:translateY(-110vh) translateX(20px); opacity:0; }
}

.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; padding-top:100px; }

/* Hero slider mechanics */
.hero-slider{ position:relative; z-index:2; overflow:hidden; }
.hero-slides-track{ display:flex; width:100%; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.hero-slide{ flex:0 0 100%; width:100%; min-width:100%; }
.hero-slide .hero-inner{ padding-bottom:20px; }
.hero-arrows{ position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); z-index:5; display:flex; justify-content:space-between; padding:0 20px; pointer-events:none; }
.hero-arrow{
  pointer-events:auto;
  width:50px; height:50px; border-radius:50%;
  background:rgba(23,23,23,.7); backdrop-filter:blur(6px);
  border:1px solid rgba(212,175,55,.35);
  color:var(--gold); font-size:1.3rem;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
}
.hero-arrow:hover{ background:var(--gold); color:var(--black); box-shadow:var(--glow-gold); }
.hero-dots{
  position:absolute; bottom:70px; left:50%; transform:translateX(-50%);
  z-index:5; display:flex; gap:10px;
}
.hero-dots button{ width:10px; height:10px; border-radius:50%; background:rgba(212,175,55,.3); transition:var(--transition); }
.hero-dots button.active{ background:var(--gold); width:30px; border-radius:6px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(212,175,55,.4);
  padding:8px 18px; border-radius:50px;
  font-family:var(--font-sub); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
  background:rgba(212,175,55,.06);
}
.hero-badge i{ color:var(--red); }
.hero-role{
  font-family:var(--font-sub); font-size:.95rem; letter-spacing:.03em;
  color:var(--text-secondary); margin-bottom:14px; display:flex; align-items:center; gap:8px;
}
.hero-role i{ color:var(--gold); }
.hero h1{
  font-size:clamp(3.2rem, 7vw, 6.2rem);
  text-transform:uppercase;
  color:#fff;
}
.hero h1 span{
  background:linear-gradient(135deg,var(--gold),#fff 40%,var(--red));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-family:var(--font-sub); font-size:1.3rem; color:var(--text-secondary);
  margin:20px 0 30px; max-width:560px;
}
.typing-cursor{ border-right:2px solid var(--gold); }

.hero-cta-row{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:44px; }

.hero-stats{ display:flex; gap:40px; flex-wrap:wrap; }
.hero-stat{ }
.hero-stat .num{
  font-family:var(--font-heading); font-size:2.6rem; color:var(--gold); line-height:1;
}
.hero-stat .label{
  font-family:var(--font-sub); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary);
}

.hero-media{ position:relative; }
.hero-portrait{
  position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(212,175,55,.3);
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.hero-portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.hero-portrait::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(13,13,13,.85), transparent 45%);
}
.champion-belt-tag{
  position:absolute; bottom:26px; left:26px; z-index:2;
  background:rgba(13,13,13,.75); backdrop-filter:blur(6px);
  border:1px solid rgba(212,175,55,.5);
  padding:14px 20px; border-radius:var(--radius-sm);
  display:flex; align-items:center; gap:12px;
}
.champion-belt-tag i{ color:var(--gold); font-size:1.6rem; }
.champion-belt-tag strong{ display:block; font-family:var(--font-sub); font-size:.95rem; }
.champion-belt-tag small{ color:var(--text-secondary); font-size:.72rem; }

.scroll-hint{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--gold); font-size:.7rem; text-transform:uppercase; letter-spacing:.2em;
  animation:bounceHint 2s ease-in-out infinite;
}
@keyframes bounceHint{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } }

/* ---------- 7. STATISTICS BAND ---------- */
.stats-band{
  background:linear-gradient(135deg, var(--red-dark), var(--black) 60%);
  border-top:1px solid rgba(212,175,55,.2);
  border-bottom:1px solid rgba(212,175,55,.2);
  padding:60px 0;
}
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stat-item .counter{
  font-family:var(--font-heading); font-size:3.2rem; color:var(--gold);
  display:block;
}
.stat-item .stat-label{ font-family:var(--font-sub); text-transform:uppercase; letter-spacing:.1em; color:var(--text-secondary); font-size:.85rem; }

/* ---------- 8. TIMELINE ---------- */
.timeline{ position:relative; max-width:820px; margin:0 auto; }
.timeline::before{
  content:''; position:absolute; left:24px; top:0; bottom:0; width:2px;
  background:linear-gradient(var(--gold), var(--red));
}
.timeline-item{ position:relative; padding-left:70px; margin-bottom:44px; }
.timeline-item:last-child{ margin-bottom:0; }
.timeline-dot{
  position:absolute; left:12px; top:2px;
  width:28px; height:28px; border-radius:50%;
  background:var(--card); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:.85rem;
}
.timeline-year{ font-family:var(--font-heading); color:var(--red); font-size:1.4rem; }
.timeline-item h4{ text-transform:none; font-family:var(--font-sub); font-size:1.25rem; margin:4px 0 8px; }
.timeline-item p{ color:var(--text-secondary); }

/* ---------- 9. ACHIEVEMENT CARDS ---------- */
.achievement-card{ text-align:center; }
.achievement-card .icon-badge{ margin:0 auto 20px; }
.achievement-card h4{ font-family:var(--font-sub); text-transform:none; font-size:1.15rem; margin-bottom:8px; }
.achievement-card p{ color:var(--text-secondary); font-size:.92rem; }

/* ---------- 10. TRAINING / SCHOOL PROGRAM CARDS ---------- */
.program-card{ display:flex; flex-direction:column; }
.program-card .program-media{ border-radius:var(--radius-sm); overflow:hidden; margin-bottom:22px; aspect-ratio:16/10; }
.program-card .program-media img{ width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.program-card:hover .program-media img{ transform:scale(1.08); }
.program-card h3{ font-family:var(--font-sub); text-transform:none; font-size:1.4rem; margin-bottom:10px; }
.program-card p{ color:var(--text-secondary); flex:1; margin-bottom:18px; }
.program-meta{ display:flex; gap:18px; margin-bottom:18px; flex-wrap:wrap; }
.program-meta span{ font-size:.8rem; color:var(--gold); display:flex; align-items:center; gap:6px; }

/* FIGHTER IMAGE TEST */
.fighter-card .fighter-photo {
    width: 100% !important;
    height: 350px !important;
    background: red !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin: 0 0 20px 0 !important;
    border: 5px solid yellow !important;
}

.fighter-card .fighter-photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
}

/* ---------- 11. GALLERY ---------- */
.gallery-filters{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.filter-btn{
  padding:10px 22px; border-radius:50px; border:1px solid rgba(212,175,55,.3);
  font-family:var(--font-sub); text-transform:uppercase; font-size:.8rem; letter-spacing:.08em;
  color:var(--text-secondary); transition:var(--transition);
}
.filter-btn.active,.filter-btn:hover{ background:var(--gold); color:var(--black); border-color:var(--gold); }

.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gallery-item{
  position:relative; border-radius:var(--radius-sm); overflow:hidden; cursor:pointer;
  aspect-ratio:1/1; background:var(--card);
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:var(--transition); }
.gallery-item:hover img{ transform:scale(1.12); }
.gallery-item .overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:18px;
  background:linear-gradient(0deg, rgba(13,13,13,.9), transparent 55%);
  opacity:0; transition:var(--transition);
}
.gallery-item:hover .overlay{ opacity:1; }
.gallery-item .overlay i{ color:var(--gold); font-size:1.4rem; margin-right:8px; }
.gallery-item.hidden{ display:none; }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(13,13,13,.95); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius:var(--radius-sm); border:1px solid rgba(212,175,55,.3); }
.lightbox-close{ position:absolute; top:30px; right:40px; font-size:2rem; color:var(--gold); }
.lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:2rem; color:var(--gold); padding:10px; }
.lightbox-prev{ left:20px; } .lightbox-next{ right:20px; }

/* ---------- 12. CERTIFICATE VERIFICATION ---------- */
.verify-panel{
  max-width:640px; margin:0 auto; background:var(--card); border-radius:var(--radius);
  padding:44px; border:1px solid rgba(212,175,55,.2); box-shadow:var(--shadow-card);
}
.verify-form{ display:flex; gap:12px; margin-top:10px; }
.verify-form input{
  flex:1; padding:16px 20px; border-radius:50px; border:1px solid rgba(212,175,55,.3);
  background:rgba(255,255,255,.03); color:#fff;
}
.verify-form input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.15); }
.cert-result{ margin-top:32px; padding:24px; border-radius:var(--radius-sm); background:rgba(255,255,255,.02); border:1px solid rgba(212,175,55,.15); }
.cert-result.status-valid{ border-color:rgba(46,160,67,.4); }
.cert-result.status-invalid{ border-color:rgba(179,0,27,.5); }
.cert-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.08); font-size:.92rem; }
.cert-row:last-child{ border-bottom:none; }
.cert-row span:first-child{ color:var(--text-secondary); }
.badge-status{ padding:5px 14px; border-radius:50px; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.badge-status.valid{ background:rgba(46,160,67,.15); color:#5CD675; }
.badge-status.invalid{ background:rgba(179,0,27,.2); color:#ff6b7a; }

@media (max-width: 576px) {
    .verify-panel {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .verify-form {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 12px;
        box-sizing: border-box;
    }

    .verify-form input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .verify-form button {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0;
    }
}

/* ---------- 13. TESTIMONIALS ---------- */
.testimonial-slider{ position:relative; max-width:780px; margin:0 auto; overflow:hidden; }
.testimonial-track{ display:flex; transition:transform .5s ease; }
.testimonial-slide{ min-width:100%; padding:10px; text-align:center; }
.testimonial-slide i.bi-quote{ font-size:2.2rem; color:var(--gold); }
.testimonial-slide p{ font-size:1.15rem; color:var(--text-secondary); margin:18px 0 26px; font-style:italic; }
.testimonial-author{ display:flex; align-items:center; justify-content:center; gap:14px; }
.testimonial-author img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); }
.testimonial-author strong{ display:block; font-family:var(--font-sub); }
.testimonial-author small{ color:var(--gold); font-size:.78rem; }
.slider-dots{ display:flex; justify-content:center; gap:10px; margin-top:30px; }
.slider-dots button{ width:10px; height:10px; border-radius:50%; background:rgba(212,175,55,.3); transition:var(--transition); }
.slider-dots button.active{ background:var(--gold); width:26px; border-radius:6px; }
.slider-arrows{ display:flex; justify-content:center; gap:20px; margin-top:16px; }
.slider-arrows button{ font-size:1.3rem; color:var(--gold); }

/* ---------- 14. CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:start; }
.contact-info-card{ display:flex; gap:16px; align-items:flex-start; margin-bottom:26px; }
.contact-info-card i{ color:var(--gold); font-size:1.4rem; margin-top:4px; }
.contact-info-card h5{ font-family:var(--font-sub); margin-bottom:4px; }
.contact-info-card p{ color:var(--text-secondary); font-size:.92rem; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; margin-bottom:8px; font-size:.85rem; color:var(--text-secondary); font-family:var(--font-sub); text-transform:uppercase; letter-spacing:.05em; }
.form-control{
  width:100%; padding:15px 18px; border-radius:var(--radius-sm);
  border:1px solid rgba(212,175,55,.25); background:rgba(255,255,255,.03); color:#fff;
  transition:var(--transition);
}
.form-control:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,55,.15); }
.form-control.error{ border-color:var(--red); }
.field-error{ color:#ff6b7a; font-size:.78rem; margin-top:6px; display:none; }
.field-error.show{ display:block; }
textarea.form-control{ resize:vertical; min-height:140px; }
.map-embed{ border-radius:var(--radius); overflow:hidden; border:1px solid rgba(212,175,55,.2); height:280px; margin-top:30px; }
.map-embed iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) contrast(.9); }
.alert{ padding:16px 20px; border-radius:var(--radius-sm); margin-bottom:20px; font-size:.9rem; }
.alert-success{ background:rgba(46,160,67,.12); border:1px solid rgba(46,160,67,.4); color:#8CE29A; }
.alert-error{ background:rgba(179,0,27,.14); border:1px solid rgba(179,0,27,.5); color:#ff9aa5; }

/* ---------- 14.5 REELS CAROUSEL ---------- */
.reels-wrap{ position:relative; display:flex; align-items:center; gap:16px; }
.reels-carousel{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:6px 4px 20px;
  -webkit-overflow-scrolling:touch;
  flex:1;
}
.reels-carousel::-webkit-scrollbar{ height:6px; }
.reel-card{
  position:relative;
  flex:0 0 auto;
  width:280px;
  aspect-ratio:9/16;
  border-radius:var(--radius);
  overflow:hidden;
  scroll-snap-align:center;
  background:#000;
  border:1px solid rgba(212,175,55,.25);
  box-shadow:var(--shadow-card);
}
.reel-video{ width:100%; height:100%; object-fit:cover; display:block; }
.reel-link{
  position:absolute; top:12px; right:12px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  background:rgba(13,13,13,.6); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); font-size:1.1rem; transition:var(--transition);
}
.reel-link:hover{ background:var(--red); color:#fff; }
.reels-nav{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  background:var(--card); border:1px solid rgba(212,175,55,.35);
  color:var(--gold); font-size:1.2rem; display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
}
.reels-nav:hover{ background:var(--gold); color:var(--black); }
@media (max-width:768px){
  .reels-nav{ display:none; } /* rely on native touch swipe on mobile */
  .reel-card{ width:70vw; }
}

/* ---------- 15. FOOTER ---------- */
.site-footer{ background:#0a0a0a; border-top:1px solid rgba(212,175,55,.15); padding:70px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; }
.footer-col p{ color:var(--text-secondary); font-size:.9rem; margin-top:14px; }
.footer-col h4{ font-family:var(--font-sub); text-transform:uppercase; letter-spacing:.06em; font-size:1rem; margin-bottom:18px; color:var(--gold); }
.footer-col ul li{ margin-bottom:12px; }
.footer-col ul li a{ color:var(--text-secondary); font-size:.92rem; transition:var(--transition); }
.footer-col ul li a:hover{ color:var(--gold); padding-left:4px; }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; color:var(--text-secondary); font-size:.9rem; }
.footer-contact i{ color:var(--red); margin-top:3px; }
.social-row{ display:flex; gap:12px; margin-top:20px; }
.social-row a{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(212,175,55,.3); color:var(--gold); transition:var(--transition);
}
.social-row a:hover{ background:var(--red); color:#fff; border-color:var(--red); transform:translateY(-3px) scale(1.1); box-shadow:var(--glow-red); }
.newsletter-form{ display:flex; margin-top:18px; border:1px solid rgba(212,175,55,.3); border-radius:50px; overflow:hidden; }
.newsletter-form input{ flex:1; background:transparent; border:none; padding:13px 18px; color:#fff; font-size:.85rem; }
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{ background:var(--red); color:#fff; padding:0 20px; transition:var(--transition); }
.newsletter-form button:hover{ background:var(--gold); color:var(--black); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.06); padding:22px 0; margin-top:10px; }
.footer-bottom-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:var(--text-secondary); }
.footer-record i{ color:var(--gold); margin-right:6px; }

/* ---------- 16. FLOATING BUTTONS ---------- */
.whatsapp-float{
  position:fixed; bottom:28px; right:28px; z-index:900;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; box-shadow:0 10px 26px rgba(37,211,102,.4);
  transition:var(--transition);
}
.whatsapp-float:hover{ transform:scale(1.12); }
.back-to-top{
  position:fixed; bottom:28px; left:28px; z-index:900;
  width:48px; height:48px; border-radius:50%;
  background:var(--card); border:1px solid rgba(212,175,55,.4); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:var(--transition);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--gold); color:var(--black); }

/* ---------- 17. SCROLL-REVEAL ANIMATIONS ---------- */
[data-reveal]{ opacity:0; transition:opacity .8s ease, transform .8s ease; }
[data-reveal="up"]{ transform:translateY(40px); }
[data-reveal="left"]{ transform:translateX(-50px); }
[data-reveal="right"]{ transform:translateX(50px); }
[data-reveal="zoom"]{ transform:scale(.9); }
[data-reveal].in-view{ opacity:1; transform:translate(0,0) scale(1); }

/* Skeleton loading */
.skeleton{ background:linear-gradient(90deg, var(--card) 25%, var(--card-hover) 37%, var(--card) 63%); background-size:400% 100%; animation:skeletonLoad 1.4s ease infinite; border-radius:var(--radius-sm); }
@keyframes skeletonLoad{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } }

/* ---------- 18. ADMIN PANEL ---------- */
.admin-body{ background:#0a0a0a; min-height:100vh; }
.admin-login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.admin-login-card{
  width:100%; max-width:420px; background:var(--card); padding:44px; border-radius:var(--radius);
  border:1px solid rgba(212,175,55,.25); box-shadow:var(--shadow-card); text-align:center;
}
.admin-login-card .icon-badge{ margin:0 auto 20px; width:64px; height:64px; font-size:1.8rem; }
.admin-shell{ display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.admin-sidebar{ background:#111; border-right:1px solid rgba(212,175,55,.15); padding:26px 18px; }
.admin-sidebar .brand{ padding:0 10px 26px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:20px; }
.admin-nav a{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--radius-sm); color:var(--text-secondary); font-size:.92rem; margin-bottom:4px; transition:var(--transition); }
.admin-nav a i{ font-size:1.1rem; color:var(--gold); width:20px; }
.admin-nav a:hover,.admin-nav a.active{ background:rgba(212,175,55,.08); color:#fff; }
.admin-main{ padding:34px 40px;min-width: 0;
    max-width: 100%;
    overflow-x: hidden; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.admin-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:36px; }
.admin-stat-card{ background:var(--card); border-radius:var(--radius); padding:24px; border:1px solid rgba(212,175,55,.15); }
.admin-stat-card .num{ font-family:var(--font-heading); font-size:2.4rem; color:var(--gold); }
.admin-table{ width:100%; border-collapse:collapse; background:var(--card); border-radius:var(--radius); overflow:hidden; }
.admin-table th,.admin-table td{ padding:14px 18px; text-align:left; border-bottom:1px solid rgba(255,255,255,.06); font-size:.9rem; }
.admin-table th{ background:rgba(212,175,55,.06); color:var(--gold); font-family:var(--font-sub); text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; }

/* ---------- 19. 404 ---------- */
.error-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px; }
.error-page .code{ font-family:var(--font-heading); font-size:9rem; color:var(--red); text-shadow:var(--glow-red); line-height:1; }

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:1080px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .admin-cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; padding-top:130px; }
  .hero-media{ order:-1; max-width:380px; margin:0 auto; }
  .hero-arrow{ width:40px; height:40px; font-size:1.1rem; }
  .hero-dots{ bottom:50px; }
  .contact-grid{ grid-template-columns:1fr; }
  .admin-shell{ grid-template-columns:1fr; }
  .admin-sidebar{ display:none; }
}
@media (max-width:768px){
  .nav-links{
    position:fixed; top:0; right:-100%; height:100vh; width:78%; max-width:320px;
    background:#0a0a0a; flex-direction:column; align-items:flex-start; justify-content:center;
    padding:40px; gap:22px; transition:right .4s ease; border-left:1px solid rgba(212,175,55,.2);
  }
  .nav-links.open{ right:0; }
  .menu-toggle{ display:block; z-index:1100; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom-inner{ flex-direction:column; text-align:center; }
  .whatsapp-float{ width:52px; height:52px; font-size:1.5rem; }
  .section{ padding:70px 0; }
}
@media (max-width:480px){
  .gallery-grid{ grid-template-columns:1fr; }
  .hero-cta-row{ flex-direction:column; }
  .btn{ width:100%; justify-content:center; }
  .error-page .code{ font-size:6rem; }
}

/* =========================================================
   MOBILE NAVBAR - FINAL FIX
========================================================= */

@media (max-width: 900px) {

    .navbar {
        padding: 16px 0;
    }

    .navbar-inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Hamburger */
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 46px;
        height: 46px;

        margin-left: auto;

        padding: 0;

        background: transparent;
        border: 1px solid rgba(212,175,55,.35);
        border-radius: 8px;

        color: var(--gold);
        font-size: 1.7rem;

        cursor: pointer;

        position: relative;
        z-index: 1101;
    }

    .menu-toggle:hover {
        background: var(--gold);
        color: var(--black);
    }

    /* Mobile menu */
    .nav-links {
        position: fixed !important;

        top: 0 !important;
        right: -100% !important;

        width: 80% !important;
        max-width: 320px !important;
        height: 100vh !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: stretch !important;
        justify-content: center !important;

        gap: 8px !important;

        padding: 80px 25px 40px !important;

        background: rgba(10,10,10,.98) !important;
        backdrop-filter: blur(16px);

        border-left: 1px solid rgba(212,175,55,.25);

        box-sizing: border-box;

        transition: right .35s ease;

        z-index: 1100;

        visibility: hidden;
    }

    /* OPEN STATE */
    .nav-links.open {
        right: 0 !important;
        visibility: visible;
    }

    /* Navigation links */
    .nav-links a {
        display: block !important;

        width: 100% !important;

        padding: 14px 10px !important;

        text-align: left !important;

        box-sizing: border-box;
    }

    /* Contact button */
    .nav-links .nav-cta {
        display: flex !important;

        width: 100% !important;

        min-width: 0 !important;

        height: 46px !important;

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

        margin-top: 8px;
    }
}


/* Small mobile */
@media (max-width: 480px) {

    .nav-links {
        width: 85% !important;
        max-width: 300px !important;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
        font-size: 1.5rem;
    }

}

/* =========================================================
   FINAL MOBILE RESPONSIVE FIX
   Prevent horizontal page movement
========================================================= */

/* Prevent elements from expanding the page */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Make all major containers safe */
.container,
.section,
.section-tight,
.hero,
.hero-slider,
.hero-slides-track {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Grid children must be allowed to shrink */
.grid,
.grid-2,
.grid-3,
.grid-4,
.hero-inner,
.contact-grid,
.footer-grid {
    min-width: 0;
}

.grid > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.hero-inner > *,
.contact-grid > *,
.footer-grid > * {
    min-width: 0;
    max-width: 100%;
}


/* =========================================================
   HERO MOBILE
========================================================= */

@media (max-width: 900px) {

    .hero {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .hero-slider {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .hero-slides-track {
        width: 100%;
        max-width: 100%;
    }

    .hero-slide {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .hero-inner {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 1fr;
        padding-top: 130px;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hero-media {
        width: 100%;
        max-width: 380px;
        margin: 0 auto;
        min-width: 0;
    }

    .hero-portrait {
        width: 100%;
        max-width: 100%;
    }

    .hero-portrait img {
        width: 100%;
        max-width: 100%;
    }


    /* Hero badge */
    .hero-badge {
        max-width: 100%;
        box-sizing: border-box;
        flex-wrap: wrap;
        line-height: 1.4;
    }


    /* Hero role */
    .hero-role {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
        overflow-wrap: anywhere;
        word-break: break-word;
    }


    /* Hero heading */
    .hero h1 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(2.4rem, 12vw, 4rem);
        line-height: 1;
        overflow-wrap: anywhere;
        word-break: normal;
    }


    /* Hero subtitle */
    .hero-sub {
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }


    /* Buttons */
    .hero-cta-row {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hero-cta-row .btn {
        max-width: 100%;
        box-sizing: border-box;
    }


    /* Statistics */
    .hero-stats {
        width: 100%;
        max-width: 100%;
        gap: 24px;
    }

    .hero-stat {
        min-width: 0;
        max-width: 100%;
    }

    .hero-stat .num {
        font-size: 2.3rem;
    }

    .hero-stat .label {
        overflow-wrap: anywhere;
    }


    /* Hero arrows */
    .hero-arrows {
        padding: 0 10px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
        box-sizing: border-box;
    }

    .hero-inner {
        padding-left: 18px;
        padding-right: 18px;
    }

    .hero h1 {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
        letter-spacing: .02em;
    }

    .hero-role {
        font-size: .82rem;
    }

    .hero-sub {
        font-size: 1rem;
    }

    .hero-stats {
        gap: 20px;
    }
}


/* =========================================================
   GENERAL MOBILE GRID FIX
========================================================= */

@media (max-width: 768px) {

    .grid,
    .grid-2,
    .grid-3,
    .grid-4 {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .grid > *,
    .grid-2 > *,
    .grid-3 > *,
    .grid-4 > * {
        min-width: 0;
        max-width: 100%;
    }

    .card {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .section-title {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .section-desc {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}


/* =========================================================
   REELS - KEEP HORIZONTAL SCROLL INSIDE REELS ONLY
========================================================= */

.reels-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.reels-carousel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
}

@media (max-width: 768px) {

    .reels-wrap {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .reels-carousel {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    .reel-card {
        width: 70vw;
        max-width: 280px;
        flex: 0 0 70vw;
    }
}


/* =========================================================
   REVEAL ANIMATION - PREVENT SIDEWAYS PAGE MOVEMENT
========================================================= */

@media (max-width: 768px) {

    [data-reveal="left"],
    [data-reveal="right"] {
        transform: translateY(30px);
    }

    [data-reveal="left"].in-view,
    [data-reveal="right"].in-view {
        transform: translateY(0);

    }
}
/* ================================
   FIGHTERS - 4 CARDS SIDE BY SIDE
================================ */

.fighter-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
}

/* =========================================================
   COLLABORATORS SECTION
========================================================= */

.collaborators-section {
    padding-top: 90px;
    padding-bottom: 90px;
    overflow: hidden;
    background: var(--black);
}

.collaborators-section .section-head {
    margin-bottom: 55px;
}

.collaborators-section .section-desc {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   LOGO MARQUEE
========================================================= */

.collaborators-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
}


/* Fade effect on both sides */

.collaborators-marquee::before,
.collaborators-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    width: 140px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.collaborators-marquee::before {
    left: 0;
    background: linear-gradient(
        to right,
        var(--black),
        transparent
    );
}

.collaborators-marquee::after {
    right: 0;
    background: linear-gradient(
        to left,
        var(--black),
        transparent
    );
}


/* Moving track */

.collaborators-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 95px;

    animation: collaboratorsScroll 35s linear infinite;
}


/* Individual logo box */

.collaborator-logo {
    width: 145px;
    height: 105px;

    flex-shrink: 0;

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

    background: rgba(255,255,255,.02);

    transition: .3s ease;
}


/* Logo */

.collaborator-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    transition: .3s ease;

    filter: grayscale(15%);
}


/* Hover */

.collaborator-logo:hover img {
    transform: scale(1.08);
    filter: grayscale(0%);
}


/* Infinite scrolling animation */

@keyframes collaboratorsScroll {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 47.5px));
    }

}


/* Pause when mouse is over logos */

.collaborators-marquee:hover .collaborators-track {
    animation-play-state: paused;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .collaborators-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .collaborators-section .section-head {
        margin-bottom: 40px;
        padding: 0 20px;
    }

    .collaborators-track {
        gap: 55px;
        animation-duration: 28s;
    }

    .collaborator-logo {
        width: 120px;
        height: 90px;
    }

    .collaborators-marquee::before,
    .collaborators-marquee::after {
        width: 60px;
    }

}
/* =========================================================
   SCHOOL COLLABORATIONS
========================================================= */

.school-collaborations {
    padding-top: 150px;
    padding-bottom: 90px;
    background: var(--black);
    overflow: hidden;
}

.school-collaborations .section-head {
    margin-bottom: 55px;
}

.school-collab-description {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

.school-collab-subtext {
    max-width: 780px;
    margin: 18px auto 0;
    color: var(--text-secondary);
    font-size: .95rem;
    line-height: 1.7;
}


/* =========================================================
   SCHOOL LOGOS GRID
========================================================= */

.school-logos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    align-items: stretch;
}


/* Individual logo card */

.school-logo-card {
    height: 150px;

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

    padding: 20px;

    background: #111111;

    border: 1px solid rgba(212, 175, 55, .25);

    border-radius: var(--radius-sm);

    transition: var(--transition);
}


/* Logo */

.school-logo-card img {
    width: 100%;
    height: 110px;

    object-fit: contain;

    display: block;

    transition: transform .3s ease;
}


/* Hover effect */

.school-logo-card:hover {
    border-color: var(--gold);
    transform: translateY(-5px);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .4),
        0 0 15px rgba(212, 175, 55, .15);
}

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


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1080px) {

    .school-logos-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .school-collaborations {
        padding-top: 120px;
        padding-bottom: 70px;
    }

    .school-collaborations .section-head {
        margin-bottom: 40px;
    }

    .school-collab-description {
        padding: 0 10px;
    }

    .school-logos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .school-logo-card {
        height: 125px;
        padding: 15px;
    }

    .school-logo-card img {
        height: 90px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .school-logos-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .school-logo-card {
        height: 110px;
        padding: 10px;
    }

    .school-logo-card img {
        height: 80px;
    }

}

/* =========================================================
   EVENTS SECTION
   LFC FIGHT NIGHT / CHAMPIONSHIP EVENTS
========================================================= */

.events-section {
    position: relative;
    overflow: hidden;
}


/* ---------------------------------------------------------
   EVENT LAYOUT
--------------------------------------------------------- */

.events-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.92fr);
    gap: 34px;
    align-items: start;
}


/* ---------------------------------------------------------
   EVENTS LIST
--------------------------------------------------------- */

.events-list {
    width: 100%;
    min-width: 0;
}


/* ---------------------------------------------------------
   EVENT ITEM
--------------------------------------------------------- */

.event-item {
    background: #101010;
    border: 1px solid rgba(212,175,55,.16);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 14px;
    transition: var(--transition);
}

.event-item:hover {
    border-color: rgba(212,175,55,.32);
}

.event-item.active {
    border-color: rgba(212,175,55,.24);
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
}


/* ---------------------------------------------------------
   EVENT HEADER
--------------------------------------------------------- */

.event-header {
    width: 100%;
    min-height: 96px;
    padding: 20px 18px;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(190px, .85fr) 28px;
    align-items: center;
    gap: 18px;
    text-align: left;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}


.event-header:hover {
    background: rgba(212,175,55,.025);
}


/* ---------------------------------------------------------
   EVENT NAME
--------------------------------------------------------- */

.event-name {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: .04em;
    color: #fff;
    margin-bottom: 8px;
}


.event-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #999;
    font-family: var(--font-sub);
    font-size: .72rem;
    letter-spacing: .02em;
}


.event-separator {
    color: var(--red);
    font-weight: 700;
}


/* ---------------------------------------------------------
   FEATURED MAIN EVENT
--------------------------------------------------------- */

.event-featured {
    text-align: right;
    min-width: 0;
}


.event-featured-label {
    font-family: var(--font-sub);
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .62rem;
    color: var(--red);
    margin-bottom: 5px;
}


.event-featured strong {
    display: block;
    font-family: var(--font-sub);
    font-size: .82rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---------------------------------------------------------
   EVENT TOGGLE
--------------------------------------------------------- */

.event-toggle {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red);
    font-size: 1rem;
    transition: transform .35s ease;
}


.event-item.active .event-toggle {
    transform: rotate(180deg);
}


/* ---------------------------------------------------------
   EVENT CONTENT
--------------------------------------------------------- */

.event-content {
    display: none;
    padding: 0 18px 18px;
    border-top: 1px solid rgba(255,255,255,.07);
}


.event-item.active .event-content {
    display: block;
    animation: eventContentReveal .4s ease;
}


@keyframes eventContentReveal {

    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ---------------------------------------------------------
   BOOK NOW
--------------------------------------------------------- */

.event-action {
    padding: 18px 0 14px;
}


.event-action .btn {
    border-radius: 3px;
    min-height: 40px;
    padding: 11px 20px;
    font-size: .72rem;
}


/* ---------------------------------------------------------
   FIGHT TABS
--------------------------------------------------------- */

.fight-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}


.fight-tab {
    min-height: 38px;
    padding: 9px 12px;

    border: 1px solid rgba(212,175,55,.16);
    background: transparent;

    color: #9a9a9a;

    font-family: var(--font-sub);
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .13em;

    transition: var(--transition);
    cursor: pointer;
}


.fight-tab:hover {
    color: var(--gold);
    border-color: rgba(212,175,55,.4);
}


.fight-tab.active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}


/* ---------------------------------------------------------
   FIGHT PANELS
--------------------------------------------------------- */

.fight-panel {
    display: none;
}


.fight-panel.active {
    display: block;
    animation: fightPanelIn .3s ease;
}


@keyframes fightPanelIn {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ---------------------------------------------------------
   FIGHT CARD
--------------------------------------------------------- */

.fight-card {
    min-height: 80px;

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

    gap: 10px;

    padding: 12px;

    margin-bottom: 10px;

    background: #0d0d0d;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 4px;

    transition: var(--transition);
}


.fight-card:hover {
    border-color: rgba(212,175,55,.24);
    background: #121212;
}


.fight-card.main-fight {
    border-color: rgba(212,175,55,.2);
}


/* ---------------------------------------------------------
   FIGHTER NAMES
--------------------------------------------------------- */

.fight-side {
    min-width: 0;

    font-family: var(--font-sub);
    font-size: .74rem;
    text-transform: uppercase;

    color: #fff;

    word-break: break-word;
}


.fight-side-right {
    text-align: right;
}


/* ---------------------------------------------------------
   FIGHT CENTER
--------------------------------------------------------- */

.fight-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.fight-label {
    font-family: var(--font-sub);
    font-size: .54rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--red);
    margin-bottom: 3px;
}


.fight-vs {
    font-family: var(--font-heading);
    font-size: .9rem;
    color: var(--red);
    line-height: 1;
}


.fight-center small {
    margin-top: 5px;

    font-family: var(--font-sub);
    font-size: .55rem;

    text-transform: uppercase;
    letter-spacing: .14em;

    color: #858585;
}


/* ---------------------------------------------------------
   EMPTY FIGHT PANEL
--------------------------------------------------------- */

.fight-empty {
    min-height: 110px;

    display: flex;
    flex-direction: column;

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

    gap: 10px;

    text-align: center;

    border: 1px dashed rgba(212,175,55,.18);
    background: rgba(255,255,255,.015);

    color: #777;

    font-family: var(--font-sub);
    font-size: .75rem;
}


.fight-empty i {
    color: var(--gold);
    font-size: 1.2rem;
}


/* ---------------------------------------------------------
   EVENT POSTER
--------------------------------------------------------- */

.event-poster-wrap {
    width: 100%;
    min-width: 0;
}


.event-poster {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: #111;

    border: 1px solid rgba(212,175,55,.2);

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

    border-radius: 2px;
}


.event-poster::before {
    content: '';

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    border: 1px solid rgba(212,175,55,.14);
}


.event-poster img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .7s cubic-bezier(.4,0,.2,1);
}


.event-poster:hover img {
    transform: scale(1.025);
}


/* ---------------------------------------------------------
   POSTER OVERLAY
--------------------------------------------------------- */

.poster-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding: 70px 25px 25px;

    background:
        linear-gradient(
            to top,
            rgba(13,13,13,.92),
            rgba(13,13,13,.45) 45%,
            transparent
        );

    pointer-events: none;
}


.poster-event-label {
    font-family: var(--font-sub);
    text-transform: uppercase;
    letter-spacing: .25em;
    font-size: .62rem;
    color: var(--gold);
    margin-bottom: 4px;
}


.poster-event-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1;
    color: #fff;
    letter-spacing: .05em;
}


.poster-event-location {
    margin-top: 6px;

    font-family: var(--font-sub);
    font-size: .7rem;

    color: var(--text-secondary);
}


/* ---------------------------------------------------------
   POSTER CONTROLS
--------------------------------------------------------- */

.event-poster-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 14px;
}


.poster-arrow {
    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    background: var(--card);

    border: 1px solid rgba(212,175,55,.25);

    color: var(--gold);

    font-size: .95rem;

    transition: var(--transition);
}


.poster-arrow:hover {
    background: var(--gold);
    color: var(--black);

    border-color: var(--gold);

    box-shadow: var(--glow-gold);

    transform: scale(1.05);
}


.poster-counter {
    display: flex;
    align-items: center;
    gap: 8px;

    font-family: var(--font-sub);
    font-size: .68rem;
    letter-spacing: .15em;
    color: #777;

    text-transform: uppercase;
}


.poster-current {
    color: var(--gold);
}


.poster-divider {
    color: var(--red);
}


/* =========================================================
   EVENTS RESPONSIVE
========================================================= */

@media (max-width: 1080px) {

    .events-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .event-poster-wrap {
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
        order: -1;
    }

    .events-list {
        width: 100%;
    }

}


@media (max-width: 768px) {

    .events-layout {
        gap: 25px;
    }

    .event-header {
        grid-template-columns: 1fr 28px;
        gap: 12px;
        padding: 18px 15px;
    }

    .event-featured {
        display: none;
    }

    .event-name {
        font-size: 1.25rem;
    }

    .event-meta {
        font-size: .68rem;
    }

    .event-content {
        padding: 0 14px 14px;
    }

    .fight-card {
        grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
        min-height: 75px;
        padding: 10px 8px;
    }

    .fight-side {
        font-size: .66rem;
    }

    .fight-center small {
        font-size: .48rem;
        letter-spacing: .08em;
    }

    .poster-overlay {
        padding: 55px 20px 20px;
    }

}


@media (max-width: 480px) {

    .event-header {
        min-height: 82px;
        padding: 16px 13px;
    }

    .event-name {
        font-size: 1.15rem;
    }

    .event-meta {
        display: block;
        line-height: 1.5;
    }

    .event-separator {
        display: none;
    }

    .event-meta span {
        display: inline;
    }

    .event-content {
        padding: 0 10px 12px;
    }

    .fight-tabs {
        gap: 4px;
    }

    .fight-tab {
        font-size: .58rem;
        letter-spacing: .08em;
        padding: 8px 5px;
    }

    .fight-card {
        grid-template-columns:
            minmax(0, 1fr)
            45px
            minmax(0, 1fr);

        gap: 5px;
        padding: 10px 7px;
    }

    .fight-side {
        font-size: .59rem;
    }

    .fight-vs {
        font-size: .78rem;
    }

    .fight-label {
        font-size: .45rem;
        letter-spacing: .08em;
    }

    .fight-center small {
        font-size: .42rem;
        letter-spacing: .04em;
    }

    .event-poster-controls {
        margin-top: 10px;
    }

    .poster-arrow {
        width: 36px;
        height: 36px;
    }

}