/* =========================================================
   Elite Sporting Trust — Stylesheet
   Palette: Deep Navy (trust) + Vibrant Orange (energy) + Gold accent
   ========================================================= */
:root{
  --navy: #0B2545;
  --navy-deep: #071a33;
  --navy-light: #13315c;
  --accent: #FF6A13;
  --accent-dark: #e05a06;
  --gold: #F5A623;
  --bg-light: #F7F9FC;
  --bg-alt: #EEF2F8;
  --text-dark: #1B2430;
  --text-muted: #5B6472;
  --white: #ffffff;
  --font-body: 'Poppins', sans-serif;
  --font-logo: 'Bebas Neue', sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  overflow-x: hidden;
}
section{scroll-margin-top: 76px;}

a{text-decoration:none; transition: all .25s ease;}
ul{margin:0; padding:0; list-style:none;}

/* ===== Preloader ===== */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--navy);
  display:flex; align-items:center; justify-content:center;
}
.spinner{
  width:48px; height:48px; border-radius:50%;
  border:5px solid rgba(255,255,255,.2);
  border-top-color: var(--accent);
  animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg);} }

/* ===== Navbar / Logo ===== */
#mainNav{
  background: rgba(11,37,69,0.97);
  padding: 10px 0;
  transition: all .3s ease;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.logo-text{
  font-family: var(--font-logo);
  font-size: 1.9rem;
  letter-spacing: 1px;
  color: var(--white);
  line-height: 1;
  display:inline-block;
}
.logo-accent{ color: var(--accent); }
.logo-sub{
  display:block;
  font-family: var(--font-body);
  font-size: .6rem;
  letter-spacing: 6px;
  color: var(--gold);
  margin-top: -4px;
  font-weight: 600;
}
.navbar-brand{ display:flex; flex-direction:column; }

#mainNav .navbar-collapse{ justify-content: center; }
.navbar-nav{ flex-wrap: nowrap; }
.navbar-nav .nav-link{
  color: rgba(255,255,255,.85);
  font-weight: 500;
  font-size: .88rem;
  margin: 0 3px;
  padding: 8px 8px !important;
  position: relative;
  white-space: nowrap;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active{ color: var(--accent); }
.navbar-nav .nav-cta{
  background: var(--accent);
  color: var(--white) !important;
  border-radius: 30px;
  padding: 8px 16px !important;
  margin-left: 6px;
  white-space: nowrap;
}
.navbar-nav .nav-cta:hover{ background: var(--accent-dark); }
.dropdown-menu{ border:none; box-shadow: 0 8px 24px rgba(0,0,0,.15); border-radius: 10px; }
.dropdown-item:active, .dropdown-item:hover{ background: var(--bg-alt); color: var(--navy); }

/* ===== Hero ===== */
.hero-section{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-light) 100%);
  overflow: hidden;
}
.hero-section::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 25%, rgba(255,106,19,.18), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(245,166,35,.15), transparent 45%);
}
.hero-overlay{ position:absolute; inset:0; }
.hero-content{ position:relative; z-index:2; padding: 100px 15px 60px; }
.eyebrow{
  color: var(--gold);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 18px;
}
.hero-title{
  font-family: var(--font-logo);
  color: var(--white);
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  letter-spacing: 1px;
  line-height: 1.1;
  margin-bottom: 20px;
}
.hero-tagline{
  color: rgba(255,255,255,.85);
  font-size: 1.15rem;
  max-width: 680px;
  margin: 0 auto 36px;
  font-style: italic;
}
.hero-buttons .btn{ margin: 6px; border-radius: 30px; font-weight:600; padding: 12px 28px; }
.scroll-down{
  position:absolute; bottom: 28px; left:50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7); font-size: 1.4rem; z-index:2;
  animation: bounce 2s infinite;
}
@keyframes bounce{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,10px);} }

.btn-accent{
  background: var(--accent); color: var(--white); border: none;
}
.btn-accent:hover{ background: var(--accent-dark); color: var(--white); }
.btn-outline-navy{
  border: 2px solid var(--navy); color: var(--navy); border-radius: 30px; font-weight:600; padding: 10px 26px;
}
.btn-outline-navy:hover{ background: var(--navy); color: var(--white); }

/* ===== Section generic ===== */
.section-block{ padding: 22px 0; }
.alt-bg{ background: var(--bg-light); }
.section-tag{
  display:inline-block; text-transform: uppercase; letter-spacing: 2px;
  font-size: .8rem; font-weight: 700; color: var(--accent); margin-bottom: 10px;
}
.section-heading{
  font-weight: 700; color: var(--navy); font-size: clamp(1.6rem, 3vw, 2.3rem);
}
.lead-text{ font-size: 1.1rem; color: var(--text-dark); }

/* Trim Bootstrap header/spacer utilities used between sections so gaps read tighter */
.text-center.mb-5{ margin-bottom: 1.75rem !important; }
.text-center.mb-4{ margin-bottom: 1.25rem !important; }
.row.mt-5{ margin-top: 1.75rem !important; }
.row.mt-5.pt-4{ padding-top: .75rem !important; }

/* ===== Welcome / stat boxes ===== */
.welcome-section{ padding: 22px 0 12px; }
.stat-box{
  background: var(--bg-light);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 28px 20px;
  text-align:center;
  height:100%;
}
.stat-box i{ font-size: 2rem; color: var(--navy); margin-bottom: 10px; display:block; }
.stat-box span{ font-weight:600; color: var(--text-dark); }

/* ===== Focus cards ===== */
.focus-section{ padding: 10px 0 22px; }
.focus-card{
  background: var(--white);
  border: 1px solid #E7ECF3;
  border-radius: 14px;
  padding: 32px 26px;
  height: 100%;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.focus-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(11,37,69,.1);
  border-color: var(--accent);
}
.focus-card i{ font-size: 1.8rem; color: var(--accent); margin-bottom: 14px; display:block; }
.focus-card h5{ font-weight:700; color: var(--navy); margin-bottom: 8px; }
.focus-card p{ color: var(--text-muted); margin:0; font-size: .95rem; }

/* ===== Services ===== */
.services-section{ background: var(--bg-light); }
.services-headline{
  font-family: var(--font-logo);
  color: var(--navy);
  letter-spacing: 1px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin: 8px 0 14px;
}
.services-headline .text-accent{ color: var(--accent); }

.service-card{
  background: var(--white); border-radius: 14px; padding: 30px 24px;
  border-top: 4px solid var(--accent); height: 100%;
  box-shadow: 0 6px 20px rgba(11,37,69,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 30px rgba(11,37,69,.1); }
.service-icon{
  width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin-bottom: 16px; color:#fff;
}
.service-card h5{ font-weight:700; color: var(--navy); margin-bottom: 12px; }
.service-card .tick-list li{ font-size:.9rem; padding: 5px 0 5px 24px; }

.service-red .service-icon{ background:#D8342A; }
.service-red{ border-top-color:#D8342A; }
.service-red h5{ color:#D8342A; }

.service-orange .service-icon{ background: var(--accent); }
.service-orange{ border-top-color: var(--accent); }
.service-orange h5{ color: var(--accent); }

.service-navy .service-icon{ background: var(--navy); }
.service-navy{ border-top-color: var(--navy); }
.service-navy h5{ color: var(--navy); }

.service-teal .service-icon{ background:#0E8A82; }
.service-teal{ border-top-color:#0E8A82; }
.service-teal h5{ color:#0E8A82; }

/* Why choose us */
.why-choose-strip{
  background: var(--navy); border-radius: 16px; padding: 30px;
  display:flex; align-items:center; gap: 20px; flex-wrap: wrap;
}
.why-choose-title span{
  font-family: var(--font-logo); color: var(--accent); font-size:1.6rem; line-height:1.15; letter-spacing:1px;
}
.why-choose-items{
  display:flex; flex: 1; flex-wrap: wrap; gap: 10px; justify-content: space-between;
}
.why-item{
  flex: 1 1 150px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  color:#fff; padding: 10px;
  border-left: 1px solid rgba(255,255,255,.12);
}
.why-item:first-child{ border-left:none; }
.why-item i{ font-size:1.6rem; color: var(--gold); }
.why-item span{ font-size:.85rem; font-weight:600; }

/* Perfect for */
.perfect-item{
  display:flex; flex-direction:column; align-items:center; gap:10px; color: var(--navy);
}
.perfect-item i{
  width:64px; height:64px; border-radius:50%; background: var(--bg-alt);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; color: var(--accent);
  border: 1px solid #E1E7F0;
}
.perfect-item span{ font-size:.85rem; font-weight:600; }

/* CTA banner */
.services-cta{
  background: linear-gradient(90deg, #D8342A, var(--accent));
  border-radius: 14px; padding: 22px 30px;
  display:flex; align-items:center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  color:#fff; font-family: var(--font-logo); font-size:1.3rem; letter-spacing:.5px;
}
.services-cta em{ color: #fff9d6; font-style: italic; }
.services-cta .btn-light{ font-family: var(--font-body); font-weight:700; border-radius:30px; }

/* ===== Vision / Mission cards ===== */
.vm-card{
  background: var(--navy);
  color: rgba(255,255,255,.9);
  border-radius: 14px;
  padding: 26px 28px;
}
.vm-card h5{ color: var(--gold); font-weight:700; margin-bottom: 12px; }
.vm-card h5 i{ margin-right:8px; }
.vm-card p{ margin-bottom: 10px; font-size: .95rem; }
.vm-card p:last-child{ margin-bottom:0; }

/* ===== Objectives ===== */
.objectives-list{ counter-reset: obj; list-style: none; margin: 0; padding: 0; }
.objectives-list li{
  position:relative; padding: 14px 0 14px 46px; border-bottom: 1px solid #E7ECF3;
}
.objectives-list li:last-child{ border-bottom:none; }
.objectives-list li::before{
  counter-increment: obj;
  content: counter(obj);
  position:absolute; left:0; top:12px;
  width: 28px; height:28px; border-radius:50%;
  background: var(--accent); color:#fff; font-weight:700; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
}
.objectives-list[start="5"]{ counter-reset: obj 4; }

.objectives-accordion .accordion-item{
  border: none; border-radius: 12px !important; overflow:hidden;
  box-shadow: 0 2px 10px rgba(11,37,69,.06);
}
.objectives-accordion .accordion-button{
  font-weight: 700; color: var(--navy); background: var(--bg-light);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-family: var(--font-logo); letter-spacing:.5px;
  padding: 20px 24px;
}
.objectives-accordion .accordion-button:not(.collapsed){
  background: var(--navy); color: var(--white); box-shadow:none;
}
.objectives-accordion .accordion-button:focus{ box-shadow:none; }
.objectives-accordion .accordion-button::after{ filter: none; }

/* ===== Trustee cards ===== */
.trustee-card{
  background: var(--white); border:1px solid #E7ECF3; border-radius:14px;
  padding: 30px; text-align:center; height:100%;
}
.trustee-photo{
  width:96px; height:96px; border-radius:50%;
  background: var(--bg-alt); color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; margin: 0 auto 16px;
  border: 3px solid var(--accent);
}
.trustee-card h5{ color: var(--navy); font-weight:700; margin-bottom:4px; }
.trustee-role{ color: var(--accent); font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; }
.trustee-card p{ font-size:.92rem; color: var(--text-muted); }

/* ===== Impact ===== */
.impact-item{ display:flex; gap:16px; align-items:flex-start; height:100%; }
.impact-item i{ font-size:1.6rem; color:var(--accent); margin-top:4px; }
.impact-item h6{ color: var(--navy); font-weight:700; margin-bottom:4px; }
.impact-item p{ color: var(--text-muted); font-size:.92rem; margin:0; }

/* ===== Programs accordion ===== */
.program-accordion .accordion-item{
  border: none; margin-bottom: 14px; border-radius: 12px !important; overflow:hidden;
  box-shadow: 0 2px 10px rgba(11,37,69,.06);
}
.program-accordion .accordion-button{
  font-weight: 600; color: var(--navy); background: var(--white);
  font-size: 1.05rem;
}
.program-accordion .accordion-button:not(.collapsed){
  background: var(--navy); color: var(--white);
}
.program-accordion .accordion-button:not(.collapsed) i{ color: var(--gold); }
.program-accordion .accordion-button:focus{ box-shadow:none; }
.program-accordion .accordion-button::after{ filter: none; }
.tick-list li{ padding: 6px 0 6px 26px; position:relative; color: var(--text-dark); font-size:.95rem; }
.tick-list li::before{
  content:"\f26e"; font-family:"bootstrap-icons"; position:absolute; left:0; color: var(--accent);
}

/* ===== Info panel (Events / Support) ===== */
.info-panel{
  background: var(--white); border: 1px dashed #C9D3E0; border-radius: 16px;
  padding: 28px 30px; max-width: 900px; margin: 0 auto;
}
.info-panel > i{ font-size: 2.4rem; color: var(--accent); margin-bottom: 14px; display:block; }
.info-panel h5{ color: var(--navy); font-weight:700; }
.pill-item{
  background: var(--bg-alt); border-radius: 30px; padding: 10px 16px;
  font-size: .85rem; font-weight:600; color: var(--navy);
  display:flex; align-items:center; gap:8px; justify-content:center; height:100%;
}
.pill-item i{ color: var(--accent); }

/* ===== Athletes ===== */
.athlete-card{
  background: var(--white); border:1px solid #E7ECF3; border-radius:14px;
  padding: 30px; text-align:center; height:100%;
}
.athlete-photo{
  width:84px; height:84px; border-radius:50%;
  background: var(--bg-alt); color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; margin: 0 auto 14px; border: 3px solid var(--gold);
}
.athlete-card h6{ color: var(--navy); font-weight:700; }

/* ===== Achievements ===== */
.achieve-card{
  background: var(--navy); border-radius: 14px; padding: 30px 14px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:#fff; height:100%;
  transition: transform .25s ease;
}
.achieve-card:hover{ transform: translateY(-6px); background: var(--accent); }
.achieve-card i{ font-size:1.8rem; color: var(--gold); }
.achieve-card:hover i{ color:#fff; }
.achieve-card span{ font-weight:600; font-size:.9rem; }

/* ===== Gallery ===== */
.gallery-box{
  background: var(--bg-alt); border-radius: 12px; aspect-ratio: 4/3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color: var(--navy); border: 1px solid #E1E7F0; transition: all .25s ease;
}
.gallery-box i{ font-size:1.8rem; color: var(--accent); }
.gallery-box span{ font-weight:600; font-size:.9rem; }
.gallery-box:hover{ background: var(--navy); color:#fff; }
.gallery-box:hover i{ color: var(--gold); }
.gallery-more{ border-style: dashed; }

/* ===== Contact ===== */
.contact-info-card{
  background: var(--navy); color:#fff; border-radius: 16px; padding: 36px;
  height:100%;
}
.contact-info-card h5{ color: var(--gold); font-weight:700; margin-bottom: 20px; }
.contact-line{ display:flex; align-items:center; gap:12px; margin-bottom: 16px; font-size:.95rem; }
.contact-line i{ color: var(--accent); font-size:1.1rem; }
.contact-line a{ color:#fff; }
.contact-line a:hover{ color: var(--gold); }
.social-row{ display:flex; gap:12px; margin-top: 24px; }
.social-row a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.social-row a:hover{ background: var(--accent); }

.contact-form{
  background: var(--white); border: 1px solid #E7ECF3; border-radius: 16px; padding: 36px;
  box-shadow: 0 10px 30px rgba(11,37,69,.06);
}
.contact-form .form-label{ font-weight:600; color: var(--navy); font-size:.9rem; }
.contact-form .form-control{
  border-radius: 8px; border: 1px solid #D8DEE8; padding: 10px 14px;
}
.contact-form .form-control:focus{
  border-color: var(--accent); box-shadow: 0 0 0 .2rem rgba(255,106,19,.15);
}

/* ===== Footer ===== */
.site-footer{ background: var(--navy-deep); color: rgba(255,255,255,.8); padding: 60px 0 0; }
.footer-logo{ font-size:1.6rem; }
.text-light-50{ color: rgba(255,255,255,.55) !important; }
.site-footer h6{ color:#fff; font-weight:700; margin-bottom: 16px; text-transform:uppercase; font-size:.85rem; letter-spacing:1px; }
.footer-links li{ margin-bottom: 10px; font-size:.9rem; }
.footer-links a{ color: rgba(255,255,255,.65); }
.footer-links a:hover{ color: var(--accent); }
.footer-links i{ margin-right:6px; color: var(--accent); }
.site-footer hr{ border-color: rgba(255,255,255,.1); margin-top: 30px; }

/* ===== Back to top ===== */
.back-to-top{
  position: fixed; bottom: 26px; right: 26px; width:46px; height:46px; border-radius:50%;
  background: var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 18px rgba(255,106,19,.4); opacity:0; visibility:hidden; transform: translateY(10px);
  z-index: 999;
}
.back-to-top.show{ opacity:1; visibility:visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--accent-dark); color:#fff; }

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  #mainNav{ background: var(--navy); }
  .navbar-nav .nav-link{ margin:0; padding: 10px 0 !important; }
  .navbar-nav .nav-cta{ display:inline-block; margin-top: 8px; }
  .section-block{ padding: 16px 0; }
  .why-choose-strip{ flex-direction: column; text-align:center; }
  .why-choose-title span{ text-align:center; }
  .why-item{ border-left:none; border-top: 1px solid rgba(255,255,255,.12); }
  .why-item:first-child{ border-top:none; }
  .services-cta{ justify-content:center; text-align:center; }
}