/* style.css - Theme B (Purple + Dark + Neon accents) */

:root{
  --bg:#0b0714;
  --card:#0f0b1a;
  --muted:#b6b0c9;
  --neon:#8a35ff;
  --neon-2:#4ef0c6;
  --accent:#ffce3d;
  --glass: rgba(255,255,255,0.04);
  --max:1200px;
  --radius:12px;
  --shadow: 0 12px 36px rgba(4,6,22,0.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #e8e6f3;
  background: var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

/* container */
.container{width:92%; max-width:var(--max); margin:0 auto;}

/* header */
.site-header{
  position:sticky; top:0; z-index:60;
  background: linear-gradient(180deg, rgba(6,4,14,0.6), rgba(6,4,14,0.4));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.logo{height:52px}
.brand-text{font-weight:700; font-size:18px; color:var(--neon)}
.site-nav{display:flex; gap:18px; align-items:center}
.site-nav a{color:var(--muted); text-decoration:none; font-weight:600; padding:8px 10px; border-radius:8px}
.site-nav a:hover{background:rgba(255,255,255,0.02); color:#fff}

/* mobile nav */
.nav-toggle{display:none; background:none; border:0; color:var(--neon); font-size:22px}

/* background canvas behind everything */
#bgCanvas {
  position: fixed;
  inset: 0;
  width:100vw; height:100vh; z-index:-4; pointer-events:none;
}

/* hero */
.hero{position:relative; min-height:560px; display:flex; align-items:center; overflow:hidden}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.05); filter:brightness(0.52) saturate(1.05); z-index:0}
.hero-overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,2,18,0.35), rgba(6,2,18,0.45)); z-index:1}
.hero-inner{position:relative; z-index:10; display:flex; align-items:center; min-height:560px}
.hero-copy{max-width:780px}
.hero h1{font-size:44px; margin:0 0 12px; color:linear-gradient; letter-spacing:-0.5px; color:#fff}
.lead{color:var(--muted); margin-bottom:20px; font-size:18px}
.hero-cta .btn{margin-right:12px}

/* buttons */
.btn{display:inline-block; padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none; cursor:pointer; border:0}
.btn-primary{background:linear-gradient(90deg,var(--neon),var(--neon-2)); color:#0b0714; box-shadow:0 8px 30px rgba(138,53,255,0.18)}
.btn-outline{background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.06)}

/* ===== Partners Section ===== */
.partners {
  padding: 40px 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.partners .section-title {
  color: #a855f7;
  margin-bottom: 16px;
  font-weight: 700;
}

/* Logo slider container */
.logo-slider {
  overflow: hidden;
  width: 100%;
  position: relative;
}

/* The track with duplicated slides */
.logo-track {
  display: flex;
  width: calc(250px * 8); /* adjust if more logos */
  animation: scroll-logos 10s linear infinite;
}

/* Each slide group (contains 4 logos here) */
.logo-track .slide {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-shrink: 0;
  width: 50%; /* 2 slides total → 50% each */
}

/* Logo images */
.logo-track img {
  height: 48px;
  width: auto;
  margin: 0 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  padding: 8px 14px;
  object-fit: contain;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.logo-track img:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

.logo-track .slide img {
  height: 70px; /* Increased from 44px to 70px */
  margin: 0 40px; /* Adds more spacing between logos */
  opacity: 1;
  filter: grayscale(0%); /* optional: remove gray tint for brighter look */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.logo-track .slide img:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}


/* Keyframes for seamless infinite scroll */
@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause when hovered */
.logo-slider:hover .logo-track {
  animation-play-state: paused;
}



/* courses */
.courses{padding:42px 0; position:relative; z-index:2}
.course-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.course-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); transition:transform .28s, box-shadow .28s}
.course-card:hover{transform:translateY(-8px); box-shadow:0 24px 60px rgba(4,6,22,0.7)}
.course-card img{width:100%; height:170px; object-fit:cover}
.card-body{padding:14px}
.card-body h4{margin:6px 0 8px}
.muted{color:var(--muted); font-size:14px}
.meta-row{display:flex; align-items:center; justify-content:space-between; margin-top:12px}
.price{font-weight:800; color:var(--neon)}

/* see-more */
.see-more-row{display:flex; justify-content:center; margin-top:18px}

/* goals / about blocks (Layout B) */
.goals{padding:42px 0; position:relative; z-index:2}
.about-block{display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:center; margin-bottom:28px}
.about-block.reverse{grid-template-columns:420px 1fr}
.about-text h4{margin:6px 0 8px; color:var(--neon)}
.about-image img{width:100%; height:auto; border-radius:12px; box-shadow:var(--shadow)}

/* stats */
.stats{padding:28px 0; position:relative; z-index:2}
.stats-grid{display:flex; gap:18px; justify-content:space-between; align-items:center; flex-wrap:wrap}
.stat{flex:1; min-width:150px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:12px; text-align:center; box-shadow:var(--shadow)}
.stat-num{font-size:26px; font-weight:800; color:var(--neon)}
.stat-label{color:var(--muted)}

/* add + at end of every number */
.stat-num::after {
  content: "+";
  margin-left: 2px;
}

/* ===== Testimonials Section ===== */
/* Testimonials */
.testimonial-frame {
  overflow: hidden;
  width: 100%;
  padding: 10px 0;
}

.testimonial-list {
  display: flex;
  gap: 22px;
  will-change: transform;
}

.testimonial-card {
  min-width: 320px;
  background: #fff;            /* white box */
  color: #000;                 /* black text */
  padding: 20px;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
  opacity: 0;                  /* for pop-up animation */
  transform: scale(0.8) translateY(40px);
}

.t-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.t-meta img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}


/* contact */
.contact{padding:36px 0; position:relative; z-index:2}
.form-center{display:flex; justify-content:center}
.contact-form{display:flex; flex-direction:column; gap:12px; max-width:720px; width:100%; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:12px; box-shadow:var(--shadow)}
.contact-form input, .contact-form textarea{padding:14px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); font-size:15px; background:transparent; color:var(--muted)}

/* footer */
.site-footer{padding:30px 0; position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.03); background:linear-gradient(180deg, rgba(6,4,14,0.4), rgba(6,4,14,0.35))}
.footer-inner{display:flex; gap:24px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap}
.logo-small{height:40px}
.footer-links a{display:block; color:var(--muted); text-decoration:none; margin-bottom:6px}
.copyright{display:block; margin-top:12px; color:var(--muted)}

/* whatsapp */
.whatsapp-float{position:fixed; right:18px; bottom:18px; width:56px; height:56px; background:linear-gradient(90deg,var(--neon),var(--neon-2)); color:#08030b; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:22px; z-index:60; box-shadow:0 12px 40px rgba(0,0,0,0.5)}

/* responsive */
@media (max-width:1100px){
  .course-grid{grid-template-columns:repeat(2,1fr)}
  .about-block{grid-template-columns:1fr}
  .about-block.reverse{grid-template-columns:1fr}
}
@media (max-width:720px){
  .site-nav{display:none}
  .nav-toggle{display:block}
  .course-grid{grid-template-columns:1fr}
  .hero h1{font-size:28px}
  .header-inner{gap:10px}
  .footer-inner{flex-direction:column; gap:12px}
}

/* subtle fades */
section{opacity:0; transform:translateY(8px); animation:fadeIn .8s forwards}
@keyframes fadeIn{to{opacity:1; transform:none}}

@keyframes scroll {
 0% {
 transform: translateX(0);
 }
 100% {
 transform: translateX(-100%);
 }
}