:root{
  --primary:#1e3a8a;
  --secondary:#ff6b00;
  --accent:#22c55e;
  --light:#f8fafc;
  --dark:#0f172a;
  --container:1200px;
  --gutter:20px;
  --card-radius:14px;
  --shadow-1: 0 8px 24px rgba(2,6,23,0.06);
}

/* Reset and base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',sans-serif;
  color:#1e293b;
  background:linear-gradient(-45deg,#e0f2fe,#f8fafc,#e2e8f0,#dbeafe);
  background-size:400% 400%;
  animation:gradientMove 12s ease infinite;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

/* Background animation */
@keyframes gradientMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Layout helpers */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:64px 0}
img{max-width:100%;height:auto;display:block}

/* Header */
header{background:#fff;position:sticky;top:0;z-index:999;border-bottom:1px solid #e5e7eb}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px}
.logo{font-size:clamp(20px,2.2vw,28px);font-weight:800;color:var(--primary)}
.logo span{color:var(--secondary)}

/* Nav */
nav{display:flex;align-items:center}
nav ul{display:flex;gap:22px;list-style:none}
nav a{text-decoration:none;color:var(--dark);font-weight:500;transition:color .18s}
nav a:hover{color:var(--secondary)}

/* Mobile toggle */
.nav-toggle{display:none;background:transparent;border:0;cursor:pointer;padding:8px}
.hamburger{width:26px;height:2px;background:#111;display:block;position:relative}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0;width:26px;height:2px;background:#111;transition:transform .25s}
.hamburger::before{top:-8px}
.hamburger::after{top:8px}

/* HERO: layout + spacing improvements */
.hero{
  display:flex;
  gap:36px;
  align-items:center;
  padding:48px 0;
  /* ensure hero never overflows */
  min-height: calc(60vh - 40px);
}
.hero-left{flex:1;min-width:0;padding-right:12px}
.hero-right{flex:1;display:flex;justify-content:center;min-width:0;align-items:center;position:relative;overflow:visible}
.hero-right img{
  max-width:520px;
  width:100%;
  border-radius:20px;
  object-fit:cover;
  box-shadow:var(--shadow-1);
  transform-origin:center center;
  will-change:transform,opacity;
  transition:transform .9s cubic-bezier(.2,.9,.3,1),opacity .9s ease;
}

/* Badge & typography */
.badge{display:inline-block;background:#ffedd5;color:var(--secondary);padding:8px 16px;border-radius:999px;font-weight:600;margin-bottom:18px}
h1{font-size:clamp(28px,5vw,56px);line-height:1.06;color:var(--primary);margin:12px 0}
.lead{font-size:clamp(15px,1.6vw,18px);color:#475569;margin-bottom:22px}
.buttons{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 22px;border-radius:10px;text-decoration:none;font-weight:600;transition:transform .18s,background .18s}
.primary{background:var(--secondary);color:#fff;box-shadow:0 6px 18px rgba(255,107,0,0.12)}
.primary:hover{transform:translateY(-3px);background:#e55a00}
.whatsapp{background:var(--accent);color:#fff}
.whatsapp:hover{transform:translateY(-3px);background:#16a34a}

/* CTA pulse (subtle) */
.btn.primary.pulse{
  animation:ctaPulse 2.8s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%{box-shadow:0 6px 18px rgba(255,107,0,0.12);transform:translateY(0)}
  50%{box-shadow:0 18px 40px rgba(255,107,0,0.12);transform:translateY(-4px)}
  100%{box-shadow:0 6px 18px rgba(255,107,0,0.12);transform:translateY(0)}
}

/* Stats */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:20px 0}
.stat-box{background:#fff;padding:18px;border-radius:var(--card-radius);text-align:center;box-shadow:var(--shadow-1);transition:transform .2s}
.stat-box:hover{transform:translateY(-6px)}
.stat-box h3{color:var(--primary);font-size:18px;margin-bottom:8px}
.stat-box p{color:#64748b}

/* Section title */
.section-title{text-align:center;margin-bottom:28px}
.section-title h2{font-size:clamp(22px,3.2vw,42px);color:var(--primary);margin-bottom:8px}
.section-title p{color:#64748b}

/* Course grid */
.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.course-card{background:#fff;padding:18px;border-radius:14px;text-align:center;font-weight:600;box-shadow:0 10px 25px rgba(0,0,0,.05);transition:transform .18s}
.course-card:hover{transform:translateY(-6px)}

/* Benefits */
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.benefit-card{background:#fff;padding:22px;border-radius:14px;text-align:center;box-shadow:0 10px 25px rgba(0,0,0,.05);transition:transform .18s}
.benefit-card:hover{transform:translateY(-6px)}
.icon{font-size:36px;margin-bottom:12px}
.benefit-card h3{color:var(--primary);margin-bottom:8px}
.benefit-card p{color:#64748b}

/* Register area */
.register-grid{display:grid;grid-template-columns:1fr minmax(280px,420px);gap:24px;align-items:start}
.trainer-card{display:flex;gap:18px;background:#fff;padding:18px;border-radius:14px;box-shadow:var(--shadow-1);align-items:center;min-width:0}
.trainer-image img{width:100%;max-width:260px;border-radius:12px;object-fit:cover;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.trainer-content{flex:1;min-width:0}
.trainer-tag{display:inline-block;background:#dbeafe;color:var(--primary);padding:8px 14px;border-radius:999px;font-weight:600;margin-bottom:12px}
.trainer-content h2{font-size:clamp(18px,2.6vw,32px);color:var(--primary);margin:10px 0}
.trainer-content p{color:#475569;font-size:15px;margin-bottom:10px}
.trainer-points p{font-size:15px;font-weight:500;margin-bottom:8px}

/* Form */
.form-card{background:#fff;padding:18px;border-radius:12px;box-shadow:var(--shadow-1)}
.form-card form{display:flex;flex-direction:column;gap:10px}
.form-card input,.form-card select,.form-card textarea{
  padding:12px;border-radius:8px;border:1px solid #e6e9ef;font-size:15px;width:100%;min-width:0;
}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{border-color:var(--primary);box-shadow:0 6px 18px rgba(30,58,138,.06)}
.form-card button{padding:12px 18px;border-radius:10px;border:0;background:var(--secondary);color:#fff;font-weight:700;cursor:pointer}

/* Footer */
footer{padding:28px 0;background:transparent;border-top:1px solid rgba(15,23,42,.04)}
.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.footer-inner .contact{min-width:0}
.footer-inner p{color:#475569}
.footer-links{display:flex;gap:12px;align-items:center}
.footer-links a{color:var(--dark);text-decoration:none;font-weight:600}
.footer-links a:hover{color:var(--secondary)}
.copyright{color:#64748b;margin-top:12px;text-align:center}

/* Fade-up animation + stagger helpers */
.fade-up{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.fade-up.show{opacity:1;transform:none}
.fade-up.stagger-1{transition-delay:0.08s}
.fade-up.stagger-2{transition-delay:0.16s}
.fade-up.stagger-3{transition-delay:0.24s}

/* Parallax helper for hero image (subtle) */
.hero-right.parallax img{transform:translateY(0) scale(1)}
.hero-right.parallax.show img{transform:translateY(-8px) scale(1.02)}

/* Prevent long text overflow */
.prevent-overflow{overflow-wrap:break-word;word-break:break-word;hyphens:auto}

/* Responsive */
@media (max-width:1024px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .register-grid{grid-template-columns:1fr 360px}
  .hero{min-height:50vh}
}

@media (max-width:768px){
  .nav-toggle{display:block}
  nav{position:fixed;inset:0;top:64px;background:rgba(255,255,255,.98);backdrop-filter:blur(6px);transform:translateY(-120%);transition:transform .28s;display:block;padding:0}
  nav ul{flex-direction:column;padding:28px;gap:18px}
  nav.open{transform:translateY(0)}
  .nav-toggle.open .hamburger{background:transparent}
  .nav-toggle.open .hamburger::before{transform:translateY(8px) rotate(45deg)}
  .nav-toggle.open .hamburger::after{transform:translateY(-8px) rotate(-45deg)}

  .hero{flex-direction:column;align-items:flex-start;padding:28px 0}
  .hero-right{width:100%}
  .hero-right img{max-width:420px;border-radius:16px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .register-grid{grid-template-columns:1fr;gap:18px}
  .trainer-card{flex-direction:column;text-align:center;padding:16px}
  .trainer-image img{max-width:220px;margin:0 auto}
  .section{padding:36px 0}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .footer-inner .footer-links{margin-top:12px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fade-up{transition:none;opacity:1;transform:none}
  .btn.primary.pulse{animation:none}
  .hero-right img{transition:none}
}


/* =========================
   Upcoming Events: cube cards + sliding reveal (DE-DUPED)
   ========================= */

.events-section { padding-top: 36px; padding-bottom: 56px; }
.events-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}

/* Make grid responsive */
@media (max-width: 1024px) {
  .events-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .events-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .events-grid { grid-template-columns: 1fr; }
}

/* Card base */
.event-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(2,6,23,0.06);
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  transform-style: preserve-3d;
  perspective: 900px;
  transition: transform .36s cubic-bezier(.2,.9,.3,1), box-shadow .28s;
  will-change: transform, opacity;
  outline: none;
}

/* Cube wrapper */
.cube {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.9,.3,1);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Face */
.face {
  backface-visibility: hidden;
  transform: translateZ(0);
  text-align: center;
  padding: 8px;
}
.face h3 { color: var(--primary); margin: 8px 0; font-size: 18px; }
.face p { color: #64748b; font-size: 14px; margin: 0; }

/* Icon */
.event-icon { font-size: 36px; margin-bottom: 8px; }

/* Hover / focus 3D tilt */
.event-card:hover .cube,
.event-card:focus .cube,
.event-card:focus-visible .cube {
  transform: rotateX(6deg) rotateY(-8deg) translateZ(6px) scale(1.01);
}
.event-card:hover,
.event-card:focus,
.event-card:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(2,6,23,0.10);
}

/* Sliding reveal animation (from left/right with slight rotate) */
.event-card {
  opacity: 0;
  transform: translateY(18px) translateX(0) rotateX(0deg);
}
.event-card.slide-in {
  opacity: 1;
  transform: translateY(0) translateX(0) rotateX(0deg);
  transition: transform .6s cubic-bezier(.2,.9,.3,1), opacity .6s ease;
}

/* Directional slide helpers (JS will add stagger and direction classes) */
.event-card.dir-left { transform: translateX(-28px) rotateY(6deg); }
.event-card.dir-right { transform: translateX(28px) rotateY(-6deg); }
.event-card.dir-left.slide-in,
.event-card.dir-right.slide-in { transform: translateX(0) rotateY(0deg); }

/* Stagger delays for events (safe up to 8) */
.event-card.stagger-1 { transition-delay: 0.06s; }
.event-card.stagger-2 { transition-delay: 0.12s; }
.event-card.stagger-3 { transition-delay: 0.18s; }
.event-card.stagger-4 { transition-delay: 0.24s; }
.event-card.stagger-5 { transition-delay: 0.30s; }
.event-card.stagger-6 { transition-delay: 0.36s; }
.event-card.stagger-7 { transition-delay: 0.42s; }
.event-card.stagger-8 { transition-delay: 0.48s; }

/* Ensure keyboard focus visible */
.event-card:focus-visible {
  box-shadow: 0 0 0 4px rgba(30,58,138,0.08);
  border-radius: 14px;
}

/* Small visual tweak for long text */
.events-grid .face p { min-height: 40px; }

/* Reduced motion: disable transforms and transitions */
@media (prefers-reduced-motion: reduce) {
  .event-card, .cube { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* =========================
   Background visualization
   ========================= */

#bg-visual {
  position: fixed;
  inset: 0;
  z-index: 0; /* behind header/content which use higher z-index */
  pointer-events: none; /* non-interactive */
  overflow: hidden;
}

/* Canvas covers full viewport */
#bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transform: translateZ(0); /* promote to its own layer */
  will-change: transform, opacity;
  opacity: 0.9;
}

/* SVG blobs sit above canvas but behind content */
#bg-blobs {
  position: absolute;
  inset: 0;
  width: 120%;
  height: 120%;
  left: -10%;
  top: -6%;
  z-index: 1;
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.85;
}

/* Slight dark overlay to improve contrast for text */
#bg-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(15,23,42,0.02));
  z-index: 2;
  pointer-events: none;
}

/* Ensure main content sits above the visualization */
header, main, footer, .site-header, .site-footer {
  position: relative;
  z-index: 10;
}

/* Reduced motion: disable canvas animation and keep static subtle blur */
@media (prefers-reduced-motion: reduce) {
  #bg-canvas { opacity: 0.6; }
  #bg-blobs { transition: none; transform: none; }

  /* ===== REGISTER SECTION (ADDED - DO NOT MODIFY ABOVE CSS) ===== */

.register-container {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 420px);
  gap: 24px;
  align-items: stretch;
}

/* Trainer Card (match your design system) */
.register-container .trainer-card {
  display: flex;
  gap: 18px;
  background: #fff;
  padding: 18px;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-1);
  align-items: center;
  min-width: 0;
}

.register-container .trainer-image img {
  width: 100%;
  max-width: 240px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.register-container .trainer-content {
  flex: 1;
}

.register-container .trainer-tag {
  display: inline-block;
  background: #dbeafe;
  color: var(--primary);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 600;
  margin-bottom: 10px;
}

.register-container .trainer-content h2 {
  font-size: clamp(18px,2.5vw,30px);
  color: var(--primary);
  margin: 10px 0;
}

.register-container .trainer-content p {
  color: #475569;
  font-size: 15px;
}

.register-container .trainer-points p {
  font-size: 14px;
  margin: 6px 0;
}

/* ===== FORM STYLE (YOUR HTML CLASS BASED) ===== */

.register-form {
  background: #fff;
  padding: 22px;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-1);
}

.register-form .form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.register-form input,
.register-form select,
.register-form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  outline: none;
  transition: 0.3s;
}

/* Focus */
.register-form input:focus,
.register-form select:focus,
.register-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 6px 18px rgba(30,58,138,0.08);
}

/* Button (reuse your theme) */
.register-form .btn.primary {
  background: var(--secondary);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
}

.register-form .btn.primary:hover {
  transform: translateY(-2px);
  background: #e55a00;
}

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

@media (max-width: 768px) {

  .register-container {
    grid-template-columns: 1fr;
  }

  .register-container .trainer-card {
    flex-direction: column;
    text-align: center;
  }

  .register-container .trainer-image img {
    max-width: 200px;
    margin: 0 auto;
  }

  .register-form {
    width: 100%;
  }

}



  
}

/* Logo image styles — add at the end of your stylesheet */
.logo-link {
  display: inline-block;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}

/* Keep original .logo rule intact; this new class only affects the image */
.site-logo {
  display: block;
  width: 220px;      /* default desktop width — adjust if needed */
  height: auto;
  object-fit: contain;
  max-width: 100%;
}

/* Responsive sizes (only these new rules; nothing else changed) */
@media (max-width: 768px) {
  .site-logo { width: 160px; }
}

@media (max-width: 420px) {
  .site-logo { width: 140px; }
}

/* Ensure the mobile nav toggle still aligns correctly */
.header-inner .logo-link { margin-right: 8px; }

/* ===== Logo and header polish (add at end of style.css) ===== */

/* Ensure header items align perfectly */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0; /* slightly tighter than original for a compact professional look */
}

/* Logo container */
.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
  margin-right: 8px;
}

/* Logo image sizing and crispness */
.site-logo {
  display: block;
  height: 48px;           /* fixed visual height to match header */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
  transition: transform .18s ease;
}

/* Slight hover lift for polish */
.logo-link:hover .site-logo { transform: translateY(-2px); }

/* Keep text logo hidden if still present in DOM */
.logo { display: none !important; }

/* Navigation spacing and visual balance */
nav ul { gap: 18px; }
nav a { padding: 8px 6px; font-size: 15px; }

/* Make sure hamburger and nav align nicely */
.nav-toggle {
  display: none; /* default hidden on desktop; your existing responsive rules will show it */
  background: transparent;
  border: 0;
  padding: 8px;
  margin-left: 8px;
  align-self: center;
}

/* On mobile ensure logo and toggle sit on same row and look balanced */
@media (max-width: 768px) {
  .site-logo { height: 44px; }
  .header-inner { padding: 10px 12px; }
  .logo-link { margin-right: 6px; }
  .nav-toggle { display: block; order: 2; } /* keep toggle visible and after logo */
  .logo-link { order: 1; }
  nav { order: 3; }
  nav ul { gap: 14px; }
}

/* Small screens */
@media (max-width: 420px) {
  .site-logo { height: 40px; }
  nav a { font-size: 14px; padding: 8px 4px; }
}

/* Ensure header z-index and spacing remain intact */
header, .site-header { z-index: 999; }

/* Optional: force visible focus outline for accessibility */
.logo-link:focus-visible, .nav-toggle:focus-visible, nav a:focus-visible {
  outline: 3px solid rgba(30,58,138,0.12);
  outline-offset: 3px;
}

/* Header baseline (64px total) */
header { height: 64px; }
.header-inner { height: 64px; align-items: center; padding: 0 18px; }

/* Logo container */
.logo-text {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  line-height: 1;
  white-space: nowrap;
}

/* Emblem size tuned for 64px header */
.logo-emblem {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%);
  color:#fff;
  font-weight:800;
  font-size:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(37,99,235,0.12);
  flex-shrink:0;
}

/* Brand words stacked for compactness */
.logo-words { display:flex; flex-direction:row; gap:6px; align-items:baseline; }

/* Typography */
.brand-main { font-weight:800; font-size:18px; color:#0f172a; }
.brand-accent {
  font-weight:800; font-size:18px;
  background:linear-gradient(90deg,#ff6b00 0%,#ff8a4b 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Tagline (small) */
.logo-tag { font-size:11px; color:#64748b; font-weight:600; margin-left:10px; letter-spacing:0.6px; text-transform:uppercase; }

/* Nav balance */
nav ul { gap:20px; }
nav a { padding:8px 6px; font-size:15px; }

/* Mobile adjustments */
@media (max-width:768px) {
  header, .header-inner { height:56px; padding:0 12px; }
  .logo-emblem { width:44px; height:44px; font-size:15px; }
  .brand-main, .brand-accent { font-size:16px; }
  .logo-tag { display:none; }
}

/* Very small screens */
@media (max-width:420px) {
  header, .header-inner { height:52px; padding:0 10px; }
  .logo-emblem { width:40px; height:40px; }
  .brand-main, .brand-accent { font-size:15px; }
}

/* Accessibility focus */
.logo-text:focus-visible { outline:3px solid rgba(30,58,138,0.12); outline-offset:4px; border-radius:8px; }

/* Hide old text logo if still present */
.logo { display:none !important; }