/* ================= FINAL — Reversed Deep Blue (Hero untouched) =================
   Paste this at the very end of styles.css
   Effect: sections after #home = top-light -> bottom-deep reversed gradient,
   headings & copy readable, cards keep subtle tint, previous overlays removed.
*/

/* --- Brand tones (adjust if you want slightly different hue) --- */
:root {
  --top-bright: #4BC2FF;    /* light / top */
  --mid-sky:   #2DA7E6;
  --brand-blue:#147EC3;
  --deep-mid:  #0A3D66;
  --navy-bottom:#041D33;    /* bottom deep */
  --heading-on-blue: #E9F6FF;
  --subtitle-on-blue: #C3E6FF;
}

/* 1) Reversed deep gradient for non-hero sections */
section:not(#home) {
  background: linear-gradient(
    180deg,
    var(--top-bright) 0%,        /* top light */
    var(--mid-sky)   18%,
    var(--brand-blue) 38%,
    var(--deep-mid)   60%,
    var(--navy-bottom) 100%      /* bottom deep */
  ) !important;

  color: var(--heading-on-blue) !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  border: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* 2) Remove old blobs/overlays that caused halos/bars */
section::before,
section::after,
section:not(#home)::before,
section:not(#home)::after,
.section-separator,
.section-divider-dark,
.section-overlay,
.dark-overlay,
.overlay {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* 3) Headings / subtitles on deep-blue background (readable) */
section:not(#home) h2 {
  color: var(--heading-on-blue) !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 800 !important;
  margin-bottom: 10px !important;
  text-shadow: 0 6px 22px rgba(3,20,30,0.14);
  position: relative;
  z-index: 3;
}
section:not(#home) p,
section:not(#home) .lead {
  color: var(--subtitle-on-blue) !important;
  max-width: 980px;
}

/* 4) Cards / panels: subtle light face so they stand out on blue (NOT pure white) */
.feature-card,
.event-card,
.faq-item,
.testimonial-wrap,
.contact-card,
.meet-us-wrapper {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,255,255,0.96)) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(20,126,195,0.14) !important;
  box-shadow: 0 18px 50px rgba(4,20,30,0.16) !important;
  color: #052f33 !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}

/* subtle hover lift */
.feature-card:hover,
.event-card:hover,
.testimonial-wrap:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 40px 110px rgba(4,20,30,0.20) !important;
  border-color: rgba(20,126,195,0.28) !important;
}



/* 6) Buttons: brand-blue CTA look */
.btn-cta,
.btn-details,
.bright-btn {
  background: linear-gradient(90deg, var(--brand-blue), var(--mid-sky)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 12px 36px rgba(20,126,195,0.20) !important;
}

/* 7) Forms on tinted background */
.contact-card input,
.contact-card textarea,
.contact-card select {
  background: #ffffff !important;
  border: 1px solid rgba(20,126,195,0.12) !important;
  color: #052f33 !important;
}
.contact-card input:focus,
.contact-card textarea:focus {
  box-shadow: 0 8px 30px rgba(20,126,195,0.12) !important;
  border-color: var(--brand-blue) !important;
}

/* 8) Footer keep dark anchor */
footer, .site-footer, #footer {
  background: linear-gradient(180deg,#031018,#02060A) !important;
  color: var(--top-bright) !important;
  z-index: 60 !important;
}

/* 9) Mobile tweaks so the gradient doesn't overpower short sections */
@media (max-width: 900px) {
  section:not(#home) { padding-top: 40px !important; padding-bottom: 40px !important; }
  .feature-card, .event-card { box-shadow: 0 10px 30px rgba(4,20,30,0.12) !important; }
}



/* color 2 start */

/* ==== Final tweak: deeper, reversed blue gradient + card contrast ==== */
section:not(#home) {
  background: linear-gradient(
    180deg,
    #3FAAF0 0%,    /* top light */
    #189bdc 20%,
    #147EC3 40%,
    #0A3D66 68%,
    #041D33 100%   /* bottom deep */
  ) !important;
  padding-top: 86px !important;
  padding-bottom: 86px !important;
  color: #EAF8FF !important;
  transition: background .36s ease !important;
}

/* stronger subtle vignette near bottom for depth (non intrusive) */
section:not(#home)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,29,51,0) 0%, rgba(4,29,51,0.25) 60%, rgba(4,29,51,0.45) 100%);
  z-index: 0;
}

/* keep cards clearly readable above bg */
.feature-card,
.event-card,
.testimonial-wrap,
.contact-card {
  position: relative;
  z-index: 6;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,253,255,0.97)) !important;
  border: 1px solid rgba(20,126,195,0.16) !important;
  box-shadow: 0 22px 60px rgba(4,18,28,0.22) !important;
}

/* headings & copy */
section:not(#home) h2 { color: #EAF8FF !important; text-shadow: 0 8px 30px rgba(3,18,30,0.18); }
section:not(#home) p, .lead { color: rgba(195,230,255,0.95) !important; }

/* remove old blobs/overlays if any */
section::before, section::after, .section-separator, .section-overlay { display:none !important; }


/* Color 2 End */

/* ============================================================
   FINAL PREMIUM DEEP BLUE GRADIENT FIX
   (No more flat, no more washed-out)
============================================================ */

section:not(#home) {
  background: linear-gradient(
    180deg,
    #041A2E 0%,      /* deep navy top */
    #063054 20%,     /* darker deep */
    #0A4A78 45%,     /* deep blue */
    #147EC3 70%,     /* brand blue */
    #39AEEF 100%     /* soft bright end */
  ) !important;

  padding-top: 70px !important;
  padding-bottom: 70px !important;
  color: #EAF7FF !important;
}

/* headings readable + premium */
section:not(#home) h2 {
  color: #EAF7FF !important;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  text-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

/* paragraph softer */
section:not(#home) p {
  color: #C7E8FF !important;
}

/* remove old glow overlays */
section:not(#home)::before,
section:not(#home)::after {
  display: none !important;
}

/* ============================
   CARD FIX (NOT pure white)
============================ */
.feature-card,
.event-card,
.faq-item,
.testimonial-wrap,
.contact-card {
  background: #F9FCFF !important;  /* softest white */
  border: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.18) !important;
  border-radius: 16px !important;
  color: #103B55 !important;
}

/* hover effect soft */
.feature-card:hover,
.event-card:hover,
.testimonial-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 90px rgba(0,0,0,0.25) !important;
}

/* ====== Quick fix: soften cards + balance reversed deep gradient ====== */

/* 1) Slightly tone down the top brightness and pull mid tones deeper */
section:not(#home) {
  background: linear-gradient(
    180deg,
    rgba(63,170,240,0.95) 0%,    /* top soft */
    rgba(24,155,220,0.95) 18%,
    rgba(20,126,195,0.98) 40%,
    rgba(10,61,102,1) 68%,
    rgba(4,29,51,1) 100%
  ) !important;
  transition: background .36s ease !important;
}

/* 2) Make cards slightly tinted (not pure white) and reduce glare */
.feature-card,
.event-card,
.faq-item,
.testimonial-wrap,
.contact-card {
  background: linear-gradient(180deg, #F4FBFF 0%, #EAF7FF 100%) !important; /* soft tint */
  border: 1px solid rgba(20,126,195,0.12) !important;
  box-shadow: 0 18px 50px rgba(2,12,20,0.22) !important;
  color: #073a4a !important;
}

/* 3) Reduce card inner text opacity so it doesn't wash with background */
.feature-card p,
.event-card p,
.faq-item p,
.testimonial-wrap p {
  color: rgba(7,58,74,0.86) !important;
}

/* 4) Slight vignette near top to smooth hero -> section transition */
section:not(#home)::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 72px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,29,51,0.95), rgba(4,29,51,0)) ;
  z-index: 0;
}

/* 5) Headings slightly clearer but not too bright */
section:not(#home) h2 {
  color: #E7F8FF !important;
  text-shadow: 0 6px 20px rgba(0,0,0,0.16);
}

/* 6) Small mobile tweak */
@media (max-width:900px) {
  section:not(#home) { padding-top: 48px !important; padding-bottom: 48px !important; }
  .feature-card, .event-card { box-shadow: 0 10px 30px rgba(2,12,20,0.20) !important; }
}

/* nn */
/* ========================================================
   RESTORE OLD DARK MODE ELEMENT COLORS (Hero-style UI)
   ======================================================== */

/* MAIN CARDS BACK TO DARK */
.feature-card,
.event-card,
.faq-item,
.testimonial-wrap,
.contact-card {
  background: rgba(10, 25, 40, 0.70) !important; /* dark glass UI */
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.45) !important;
  border-radius: 14px !important;
  color: #EAF7FF !important;
  backdrop-filter: blur(6px) !important;
}

/* CARD TITLES */
.feature-card h3,
.event-card h3,
.faq-item h3,
.testimonial-wrap h3 {
  color: #ffffff !important;
}

/* CARD TEXT */
.feature-card p,
.event-card p,
.faq-item p,
.testimonial-wrap p {
  color: #C9E8FF !important;
}

/* ICONS */
.feature-card svg,
.event-card svg,
.faq-item svg {
  opacity: 0.92 !important;
}

/* HOVER EFFECT BACK TO DARK VERSION */
.feature-card:hover,
.event-card:hover,
.testimonial-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.55) !important;
  background: rgba(10, 25, 40, 0.86) !important;
  transition: 0.25s ease;
}

/* CONTACT SECTION CARDS SPECIFIC FIX */
.contact-card {
  background: rgba(10, 25, 40, 0.75) !important;
}

/* FORM INPUTS DARK STYLE */
.contact-card input,
.contact-card textarea {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #EAF7FF !important;
}




/* Old Code */
:root{
  --logo-blue:#0077C8;
  --accent-cyan:#00CFFF;
  --navy-1:#021627;
  --navy-2:#011014;
  --muted:#8aa3b3;
  --white:#e9fbff;
  --container:1200px;
  --bitto-size:420px;
  --cta-h:48px;
  --ease-bezier: cubic-bezier(.2,.9,.2,1);
  --header-h:68px;
  --section-vertical: 64px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--navy-1),var(--navy-2));
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  padding-top:var(--header-h);
}
.wrap{max-width:var(--container);margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}

/* ===== Header (fixed) ===== */
header{
  position:fixed;
  left:0; right:0; top:0;
  z-index:1200;
  background:rgba(2,8,12,0.55);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.h-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;height:var(--header-h)}
.brand img{height:44px}
nav{display:flex;gap:18px;align-items:center}
.nav-link{font-weight:600;color:rgba(230,246,255,0.95);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav-link:hover{color:var(--accent-cyan)}
.nav-link[aria-current="true"]{ background: linear-gradient(90deg, rgba(0,200,255,0.06), rgba(0,120,200,0.03)); color:var(--accent-cyan); font-weight:700; }

/* header right group */
.header-actions{display:flex;gap:12px;align-items:center}

/* Buttons */
.btn-outline{ display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:999px;font-weight:700; color:var(--accent-cyan); background:transparent;border:1px solid rgba(255,255,255,0.06); cursor:pointer; transition: background .18s var(--ease-bezier), transform .14s ease;}
.btn-outline:hover{ background: rgba(0,195,255,0.06); transform: translateY(-2px); }
.btn-cta{ --g1: var(--accent-cyan); --g2: var(--logo-blue); display:inline-flex;align-items:center;justify-content:center;height:var(--cta-h);padding:0 26px;border-radius:999px;font-weight:800;font-family:Poppins, sans-serif;color:#02121a;border:none;cursor:pointer;position:relative;overflow:hidden;background:linear-gradient(90deg,var(--g1),var(--g2)); box-shadow:0 12px 28px rgba(0,120,180,0.18); transition: transform .18s var(--ease-bezier), box-shadow .18s var(--ease-bezier); text-decoration:none;}
.btn-cta::after{ content:""; position:absolute; inset:0; mix-blend-mode:overlay; background: linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.12) 60%, rgba(255,255,255,0.02) 100%); transform:translateX(-120%); transition: transform .9s var(--ease-bezier); }
.btn-cta:hover{ transform:translateY(-4px); box-shadow:0 26px 56px rgba(0,120,180,0.28); }
.btn-cta:hover::after{ transform:translateX(0); }
.btn-cta.secondary{ background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.06); box-shadow:none; padding:0 24px; height:var(--cta-h); }
.btn-outline.small { padding:8px 18px; }

/* Hamburger */
.hamburger{ display:none; flex-direction:column; justify-content:flex-start; align-items:center; width:48px;height:44px;padding-top:8px;border-radius:10px;background: rgba(0,0,0,0.05);border:1px solid rgba(255,255,255,0.06);z-index:1300;overflow:visible;cursor:pointer }
.hamburger .bar{ display:block;width:22px;height:3px;border-radius:3px;background:var(--white)!important;box-shadow:0 1px 0 rgba(0,0,0,0.32);margin:4px 0;transform-origin:center;transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease, width .18s }
.hamburger.active .bar:nth-child(1){ transform: translateY(7px) rotate(45deg); width:22px }
.hamburger.active .bar:nth-child(2){ opacity:0; transform: scaleX(0); width:20px }
.hamburger.active .bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); width:22px }

/* Mobile drawer */
.mobile-drawer{ position:fixed; inset:0; z-index:1200; display:none; background:linear-gradient(180deg, rgba(1,6,10,0.95), rgba(1,6,10,0.98)); padding:40px 18px; overflow:auto; }
.mobile-drawer.open{ display:block; }
.mobile-drawer nav{ display:flex; flex-direction:column; gap:18px; margin-top:20px; }
.mobile-drawer .nav-link{ font-size:20px; color:var(--white) }

/* ===== HERO & CANVASES ===== */
.hero{ position:relative; min-height:760px; height:100vh; overflow:hidden; padding-top:6px; z-index:1; }
.hero .wrap{ height:100%; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:24px 20px }
@media (max-width:960px){ .hero .wrap{ grid-template-columns:1fr; row-gap:28px; padding:20px } }

/* canvases behind everything */
canvas#hero-canvas, canvas#card-canvas { position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* Left column */
.hero-left{ position:relative; z-index:6; max-width:720px }
.title{ font-family:Poppins, sans-serif; font-weight:800; font-size:clamp(32px,6vw,64px); margin:0 0 18px; line-height:1.02 }
.sub{ color:rgba(230,246,255,0.92); margin:0 0 22px; font-size:15.5px }

/* KPI */
.kpis{ display:flex; gap:14px; margin-top:18px }
.kpi{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:12px 16px; border-radius:12px; min-width:110px; text-align:left; box-shadow: 0 12px 28px rgba(0,0,0,0.45); transition:transform .18s }
.kpi strong{ display:block; font-size:18px }
.kpi .label{ font-size:13px; color:var(--muted); margin-top:6px }

/* Visual card */
.hero-right{ position:relative; z-index:6; display:flex; align-items:center; justify-content:center; height:100% }
.visual-card{ position:relative; width:92%; max-width:940px; border-radius:26px; padding:56px 48px; background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(0,0,0,0.04)); box-shadow: 0 8px 28px rgba(0,0,0,0.45); display:flex; flex-direction:column; align-items:center; justify-content:center; backdrop-filter: blur(6px); overflow:hidden; z-index:2 }

/* Bitto */
.bitto{ position:relative; width:var(--bitto-size); height:var(--bitto-size); display:inline-flex; align-items:center; justify-content:center; z-index:8; pointer-events:none; margin:6px 0 18px; overflow:hidden; border-radius:50%; background:transparent }
.bitto .rotator{ position:absolute; inset:0; display:block; transform-origin:center; animation:bitto-rotate 12s linear infinite; z-index:4; pointer-events:none }
@keyframes bitto-rotate { from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} }
.bitto .logo{ position:relative; z-index:9; width:88%; height:88%; border-radius:50%; display:flex; align-items:center; justify-content:center; background: radial-gradient(circle at 30% 30%, rgba(0,200,255,0.12) 0%, rgba(0,140,220,0.05) 30%, transparent 70%); box-shadow: 0 0 48px rgba(0,195,255,0.18), inset 0 0 12px rgba(0,120,220,0.06); overflow:hidden; transform-origin:50% 50%; }
.bitto .logo img{ width:94%; height:auto; object-fit:contain; filter: drop-shadow(0 0 36px rgba(0,200,255,0.36)); }
.bitto .center-glow{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:6; width:72%; height:72%; border-radius:50%; background: radial-gradient(circle, rgba(0,200,255,0.45) 0%, rgba(0,150,230,0.18) 30%, transparent 70%); filter: blur(14px); animation: glow-breath 4.8s ease-in-out infinite; }
@keyframes glow-breath{ 0%{ transform:translate(-50%,-50%) scale(0.98); opacity:.9 } 50%{ transform:translate(-50%,-50%) scale(1.06); opacity:1 } 100%{ transform:translate(-50%,-50%) scale(0.98); opacity:.9 } }

/* stars & sparks */
.star { position:absolute; z-index:10; pointer-events:none; left:0; top:0; transform-origin:center; will-change:transform,opacity; filter: drop-shadow(0 0 10px rgba(0,200,255,0.24)); }
.star svg{ display:block; width:100%; height:100%; }
.star.s1{ width:34px;height:34px; } .star.s2{ width:30px;height:30px; } .star.s3{ width:26px;height:26px; } .star.s4{ width:22px;height:22px; } .star.s5{ width:18px;height:18px; } .star.s6{ width:16px;height:16px; } .star.s7{ width:14px;height:14px; }
@keyframes star-tw { 0%{ transform: translate(-50%,-50%) scale(0.78); opacity:0.28 } 50%{ transform: translate(-50%,-50%) scale(1.22); opacity:1 } 100%{ transform: translate(-50%,-50%) scale(0.88); opacity:0.36 } }
.star{ animation: star-tw 1.8s infinite ease-in-out; }

.sparks{ position:absolute; inset:0; z-index:8; pointer-events:none; }
.spark{ position:absolute;border-radius:50%; background: radial-gradient(circle, rgba(0,230,255,1) 0%, rgba(0,195,255,0.9) 35%, rgba(0,195,255,0.08) 100%); box-shadow: 0 0 22px rgba(0,195,255,0.38); opacity:0.9; transform:translate(-50%,-50%); animation: spark-pulse 2.4s infinite ease-in-out; }
@keyframes spark-pulse{ 0%{ opacity:0.2; transform:translate(-50%,-50%) scale(0.7);} 30%{ opacity:1; transform:translate(-50%,-50%) scale(1.12); } 60%{ opacity:.6; transform:translate(-50%,-50%) scale(0.95);} 100%{ opacity:0.28; transform:translate(-50%,-50%) scale(0.8);} }

/* card headline */
.card-cta{ margin-top:18px; font-family:Poppins, sans-serif; font-weight:800; font-size:28px; letter-spacing:-0.6px; padding:8px 18px; border-radius:12px; background: linear-gradient(90deg,var(--accent-cyan),var(--logo-blue)); -webkit-background-clip:text; color:transparent; }

/* ===== Sections spacing & safety ===== */
.section{
  padding: var(--section-vertical) 0;
  margin: 32px 0;
  opacity: 0;
  transform: translateY(12px) scale(.996);
  transition: opacity .6s var(--ease-bezier), transform .6s var(--ease-bezier);
  will-change: opacity,transform;
  position: relative;
  z-index: 3;
}
.section.in-view{ opacity:1; transform:translateY(0) scale(1); }

/* hero is top */
#home.section{ margin-top:0; padding-top: calc(var(--header-h) + 24px); padding-bottom: var(--section-vertical); }

.events-panel{ max-width:1260px;margin:24px auto;border-radius:20px;padding:34px;position:relative;
  /* subtle darker panel but with brand-tinge highlight */
  background: radial-gradient(900px 220px at 50% 6%, rgba(0,207,255,0.03), rgba(0,119,200,0.02) 18%, rgba(1,6,10,0.95) 36%), linear-gradient(180deg, rgba(1,10,16,0.94), rgba(2,14,20,0.98));
  border:1px solid rgba(0,150,210,0.06);
  box-shadow: 0 24px 60px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.02);
  overflow:hidden; 
  transition: box-shadow .22s ease, transform .18s ease;
}
.events-panel:hover{ box-shadow: 0 40px 100px rgba(0,0,0,0.7); transform: translateY(-3px); }

.events-head{text-align:center;margin-bottom:18px}
.events-title{
  font-family:Poppins, sans-serif; font-weight:800; font-size:36px; margin:0;
  /* brand gradient text */
  background: linear-gradient(90deg, var(--accent-cyan), var(--logo-blue));
  -webkit-background-clip:text;
  color:transparent;
  display:inline-block;
  padding:8px 12px;
  border-radius:10px;
  position:relative;
}
.events-sub{ color:rgba(230,246,255,0.78); max-width:960px; margin:8px auto 0; font-size:15px }

/* events grid */
.events-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:20px; align-items:start; padding:18px 6px 6px; }
@media (max-width:1000px){ .events-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:700px){ .events-grid{ grid-template-columns:1fr } }

.event-card{ border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.006), rgba(0,0,0,0.2)); padding:14px; min-height:380px; display:flex; flex-direction:column; box-shadow: 0 20px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.01); border:1px solid rgba(255,255,255,0.02); position:relative; overflow:hidden; transition: transform .22s var(--ease-bezier), box-shadow .22s, border-color .18s; }
/* subtle colored edge on hover (brand) */
.event-card:hover{
  transform:translateY(-8px);
  box-shadow:0 48px 110px rgba(0,0,0,0.72);
  border-color: rgba(0,207,255,0.14);
}
.event-media{ height:240px; border-radius:10px; overflow:hidden; margin-bottom:14px; position:relative; background: linear-gradient(180deg, rgba(2,10,14,0.9), rgba(6,20,26,0.85)); border:1px solid rgba(255,255,255,0.018); }
.event-media img{ display:block; width:100% !important; height:100% !important; object-fit:cover; object-position:center center; max-width:none !important; }
.event-body{ display:flex; flex-direction:column; gap:8px; color:var(--white); flex:1; }
.event-name{ font-family:Poppins, sans-serif; font-weight:700; font-size:15px; color:rgba(255,255,255,0.95); }
.event-title-strong{ font-weight:800; font-family:Poppins, sans-serif; font-size:16px; margin-top:6px; }
.event-meta{ display:flex; gap:14px; flex-wrap:wrap; color:rgba(230,246,255,0.76); font-size:14px; align-items:center; margin-top:6px; }
.ev-row{ display:inline-flex; gap:8px; align-items:center; }
.event-footer{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.018) }
.btn-details{
  padding:10px 16px; border-radius:10px; background:linear-gradient(90deg,var(--accent-cyan),var(--logo-blue)); color:#02121a; font-weight:800; font-family:Poppins, sans-serif; text-decoration:none; box-shadow:0 10px 26px rgba(0,120,180,0.12); transition: transform .14s ease, box-shadow .14s ease, opacity .14s;
}
.btn-details:hover{ transform: translateY(-4px); box-shadow:0 28px 64px rgba(0,120,180,0.22); opacity:0.98; }

/* features */
.features-header{ text-align:center; margin-bottom:36px; }
.features-header h2{
  font-family:Poppins, sans-serif; font-weight:800; font-size:40px; margin:0;
  /* brand gradient for heading */
  background: linear-gradient(90deg, var(--accent-cyan), var(--logo-blue));
  -webkit-background-clip:text;
  color:transparent;
  display:inline-block;
  padding:6px 10px;
  border-radius:10px;
}
.features-header p{ margin:12px auto 0; color:var(--muted); max-width:820px; line-height:1.6; }

/* features grid */
.features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:24px }
@media (max-width:1000px){ .features-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .features-grid{ grid-template-columns:1fr; } }
.feature-card{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04)); border-radius:14px; padding:28px 20px; min-height:220px; display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow: 0 12px 38px rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.04); transition: transform .18s var(--ease-bezier), box-shadow .18s var(--ease-bezier), border-color .18s, box-shadow .18s; position:relative; z-index:4; }
.feature-card:hover{ transform: translateY(-8px); box-shadow: 0 30px 80px rgba(0,0,0,0.56); border-color: rgba(0,207,255,0.12); }
/* subtle brand accent bar at top of card on hover */
.feature-card::before{ content:""; position:absolute; left:16px; right:16px; top:12px; height:4px; border-radius:4px; background: transparent; transition: background .18s ease, opacity .18s ease; opacity:0; }
.feature-card:hover::before{ background: linear-gradient(90deg, var(--accent-cyan), var(--logo-blue)); opacity:1; }

.feature-icon{ width:64px;height:64px;border-radius:12px;display:flex;align-items:center;justify-content:center;background: rgba(0,0,0,0.25);margin-bottom:18px;box-shadow: inset 0 -6px 18px rgba(0,0,0,0.28);border:1px solid rgba(255,255,255,0.03); }
.feature-title{ font-weight:800; font-family:Poppins, sans-serif; font-size:18px; margin:6px 0 10px; color:var(--white); }
.feature-desc{ color:var(--muted); font-size:14.5px; line-height:1.6; margin:0; }



/* testimonials */
.testimonial-wrap{ position:relative; overflow:hidden; border-radius:16px; background:rgba(255,255,255,0.02); padding:18px; box-shadow: 0 18px 40px rgba(0,0,0,0.45); }
#testimonialSlider{ display:flex; transition:transform .5s ease; gap:18px; }
.testimonial-slide{ min-width:100%; padding:12px; box-sizing:border-box; }
.testimonial-text{ font-size:16px; line-height:1.6; color:rgba(230,246,255,0.95) }
.testimonial-meta{ margin-top:10px; color:var(--muted); font-weight:700 }

/* faq */
.faq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:20px }
@media (max-width:900px){ .faq-grid{ grid-template-columns:1fr } }
.faq-item{ background:rgba(255,255,255,0.02); border-radius:12px; padding:16px; box-shadow: 0 12px 32px rgba(0,0,0,0.42) }
.faq-q{ font-weight:800; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:15px }
.faq-a{ margin-top:10px; color:var(--muted); max-height:0; overflow:hidden; transition: max-height .28s ease, opacity .22s ease; opacity:0 }
.faq-item.open .faq-a{ opacity:1; max-height:420px }

/* contact (SEPARATED section) */
.contact-section{
  padding: var(--section-vertical) 0;
  margin: 40px 0 36px;
  background: linear-gradient(180deg, rgba(1,6,10,0.0), rgba(1,6,10,0.03));
  border-top: 1px solid rgba(255,255,255,0.02);
  position:relative;
  z-index:8;
  scroll-margin-top: calc(var(--header-h) + 18px);
}

/* contact inner */
.contact-grid{ display:grid; grid-template-columns:1fr 420px; gap:24px; align-items:start; margin-top:18px }
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr } }
.contact-card{ background:rgba(255,255,255,0.02); border-radius:12px; padding:20px; box-shadow: 0 18px 40px rgba(0,0,0,0.45) }

/* floating share & back top */
.floating-share{ position:fixed; right:18px; top:40%; transform:translateY(-50%); z-index:1200; display:flex; flex-direction:column; gap:10px; }
.share-btn{ width:44px; height:44px; border-radius:10px; display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.04); color:var(--white); border:1px solid rgba(255,255,255,0.04); cursor:pointer; transition: transform .14s ease, background .14s, box-shadow .14s; }
.share-btn svg{ width:18px;height:18px; display:block; }
.share-btn:hover{ transform: translateY(-6px) scale(1.06); box-shadow: 0 10px 28px rgba(0,0,0,0.36); background: linear-gradient(90deg, rgba(0,207,255,0.12), rgba(0,119,200,0.08)); color:#02121a; }
.share-btn:active{ transform: translateY(-2px) scale(.99); }
.share-btn[aria-pressed="true"]{ box-shadow: 0 12px 30px rgba(0,120,180,0.14); }

/* distinct branded hover colours for clarity */
.share-btn.twitter:hover{ background: linear-gradient(90deg, rgba(29,161,242,0.12), rgba(29,161,242,0.06)); }
.share-btn.facebook:hover{ background: linear-gradient(90deg, rgba(59,89,152,0.12), rgba(59,89,152,0.06)); }
.share-btn.instagram:hover{ background: linear-gradient(90deg, rgba(193,53,132,0.12), rgba(193,53,132,0.06)); }
.share-btn.copy:hover{ background: linear-gradient(90deg, rgba(80,200,120,0.12), rgba(80,200,120,0.06)); }

/* backtop */
.backtop{ position:fixed; right:20px; bottom:22px; z-index:1200; width:54px; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(90deg,var(--accent-cyan),var(--logo-blue)); color:#02121a; box-shadow:0 18px 44px rgba(0,120,180,0.18); cursor:pointer; transform:translateY(80px); opacity:0; transition: transform .28s var(--ease-bezier), opacity .28s var(--ease-bezier), box-shadow .18s; border:none; font-weight:800; }
.backtop.show{ transform:translateY(0); opacity:1; }
.backtop:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 30px 64px rgba(0,120,180,0.28); }

/* accessibility focus */
:focus{ outline:3px solid rgba(0,200,255,0.12); outline-offset:3px; }

/* responsive header */
@media (max-width:920px){ nav{ display:none } .hamburger{ display:flex } .header-actions{ display:none } }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .section{ transition:none !important; transform:none !important; opacity:1 !important; }
  .bitto .rotator, .star, .spark, .testimonial-wrap { animation:none !important; }
  canvas#hero-canvas { display:none; }
}


/*  all of new codes */

:root {
  /* change this value to make scroll faster/slower (seconds) */
  --partners-speed: 45s;
}

/* wrapper stays same */
.logos-wrap {
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
}

/* scrolling strip */
.logos-scroll {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: scrollPartners var(--partners-speed) linear infinite;
  animation-play-state: running; /* default running */
}

/* pause on hover/focus via CSS (good for mouse & keyboard) */
.logos-wrap:hover .logos-scroll,
.logos-wrap:focus-within .logos-scroll {
  animation-play-state: paused;
}

/* images */
.logos-scroll img {
  height: 45px;
  filter: grayscale(1) opacity(0.6);
  transition: .3s;
}
.logos-scroll img:hover {
  filter: none;
  opacity: 1;
}

/* animation: translate by exactly half (duplicate set required) */
@keyframes scrollPartners {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* LIGHT BACKGROUND BOX */
.partners-light-box {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.15);   /* light glass effect */
  backdrop-filter: blur(10px);             /* modern blur */
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;

  box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* soft shadow */
}

/* SCROLLING AREA */
.logos-scroll {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: scrollPartners 45s linear infinite;
}

/* LOGOS SHOW CLEAN */
.logos-scroll img {
  height: 50px;
  opacity: 1;
  filter: none !important;
  transition: .3s ease;
}

.logos-scroll img:hover {
  transform: translateY(-4px);
}

/* INFINITE LOOP */
@keyframes scrollPartners {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.partners-light-box {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 0;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 0 !important;  /* <-- REMOVE CURVES */
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
#partners .wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Light glass background */
.partners-light-box {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  padding: 25px 0;

  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-radius: 0 !important; /* no rounded corners */
  position: relative;
}

/* Infinite scroll logos */
.logos-scroll {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: partnersScroll 40s linear infinite;
}

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

/* logos visible & clean */
.logos-scroll img {
  height: 50px;
  filter: none;
  opacity: 1;
  transition: .3s;
}
.logos-scroll img:hover {
  transform: translateY(-4px);
}

/* ---- LEFT + RIGHT FADE MASK ---- */
.fade-mask::before,
.fade-mask::after {
  content: "";
  position: absolute;
  top: 0;
  width: 120px;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* LEFT fade */
.fade-mask::before {
  left: 0;
  background: linear-gradient(
      to right,
      rgba(255,255,255,0.15) 0%,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.0) 0%
  );
}

/* RIGHT fade */
.fade-mask::after {
  right: 0;
  background: linear-gradient(
      to left,
      rgba(255,255,255,0.15) 0%,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.0) 0%
  );
}


#partners {
  background: #0A3660 !important;   /* choose your color */
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

#partners .wrap {
  background: none !important;
}

#partners {
  background: #2FA4E7 !important;
}
.partners-light-box,
.fade-mask::before,
.fade-mask::after {
  background: none !important;
  backdrop-filter: none !important;
}

.partners-light-box {
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* nav center */
header .wrap.h-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* The left section (logo + nav) */
header .wrap.h-inner > div:first-child {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1; /* allows proper centering */
}

/* Center the nav items */
header nav {
  display: flex;
  justify-content: center;
  flex: 1; /* pushes nav to the center */
  gap: 32px; /* spacing between links */
}

/* Right section (Login/Signup + mobile button) */
header .wrap.h-inner > div:last-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* FULL NEW CODE SD START */
/*  === MOBILE HAMBURGER FORCE-FIX (paste at end of styles.css) === */

/* make header + hamburger impossible to be covered and always clickable on small screens */
header {
  z-index: 10099 !important;
  position: fixed !important;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: auto !important;
}

/* strong rule: hamburger must appear and be on top */
.hamburger {
  display: flex !important;
  z-index: 10101 !important;
  position: relative !important;
  pointer-events: auto !important;
  width: 56px !important;
  height: 44px !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

/* ensure header inner wraps correctly on mobile */
header .wrap.h-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* hide desktop nav & actions on mobile */
@media (max-width: 920px) {
  header nav { display: none !important; }
  .header-actions { display: none !important; }
  .hamburger { display: flex !important; }

  /* make sure the mobile drawer is above everything */
  .mobile-drawer {
    z-index: 10100 !important;
    display: none;
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, rgba(1,6,10,0.98), rgba(1,6,10,0.99));
    padding: 40px 18px;
    overflow: auto;
  }
  .mobile-drawer.open { display: block !important; }

  /* make sure hero canvases or other elements cannot eat pointer events above header */
  canvas#hero-canvas, canvas#card-canvas {
    pointer-events: none !important;
  }
}

/* extra safety: clickable area for the hamburger */
.hamburger .bar { cursor: pointer !important; }

/* when drawer open, prevent body scroll */
body.mobile-drawer-open { overflow: hidden !important; touch-action: none !important; }


/* 2nd fixed sd */

/* ===== Hamburger / header visibility fixes ===== */
/* Default: desktop - show nav, hide hamburger */
.hamburger { display: none !important; }
header nav { display: flex !important; align-items: center !important; }
.header-actions { display: flex !important; }

/* Make sure header sits above page but below drawer by default */
header { z-index: 1200 !important; position: fixed !important; left: 0; right: 0; top: 0; }

/* Mobile: hide nav & actions, show hamburger, make drawer above header */
@media (max-width: 920px) {
  header nav { display: none !important; }
  .header-actions { display: none !important; }
  .hamburger { display: flex !important; align-items: center !important; justify-content: center !important; }
  .hamburger { cursor: pointer !important; }

  /* Drawer: ensure it covers header and content */
  .mobile-drawer { z-index: 1400 !important; position: fixed !important; inset: 0 !important; display: none; background: linear-gradient(180deg, rgba(1,6,10,0.98), rgba(1,6,10,0.99)) !important; padding: 36px 18px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }

  .mobile-drawer.open { display: block !important; }

  /* Ensure hamburger is tappable and visible */
  .hamburger { width: 48px; height: 44px; padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); }

  /* Prevent hero canvases or other elements from covering header on small screens */
  canvas#hero-canvas, canvas#card-canvas { pointer-events: none !important; }
}

/* Small tweak: make sure any "overlay" elements do not accidentally cover top nav */
[role="dialog"], .overlay, .section-overlay { pointer-events: auto; } /* keep default */

/* logo speed Slow*/

/* ===== PARTNERS SCROLL — Slow speed patch (desktop + mobile) ===== */

/* global default (slow) */
:root {
  --partners-speed: 120s !important; /* increase to slow down (bigger = slower) */
}

/* ensure the logos-scroll uses the variable and is forced */
.logos-scroll {
  animation-name: partnersScroll !important;
  animation-duration: var(--partners-speed) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  will-change: transform !important;
}

/* mobile: make it even slower for small screens (less distraction) */
@media (max-width: 900px) {
  :root { --partners-speed: 160s !important; }   /* extra slow on phones */
  .logos-scroll { gap: 34px !important; }       /* slightly tighter gap on small screens */
  .logos-scroll img { height: 42px !important; }/* scale logos a bit */
}

/* small tweak for very large desktop screens (if you want slightly faster than mobile) */
@media (min-width: 1600px) {
  :root { --partners-speed: 100s !important; }
}

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logos-scroll { animation: none !important; transform: translateX(0) !important; }
}

/* Pause-on-hover/focus already in your CSS — keep that but force important */
.logos-wrap:hover .logos-scroll,
.logos-wrap:focus-within .logos-scroll {
  animation-play-state: paused !important;
}

/* ensure the duplicate keyframes name is present (redefine to be safe) */
@keyframes partnersScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* FULL NEW CODE SD END */


/* FUll New Code 2 */

/* ============================
   Affiliate Review Section
   ============================ */

.affiliate-section{
  padding: 60px 0;
  background: linear-gradient(180deg, #0D5BC6 0%, #063B7A 100%);
  text-align: center;
  color: #ffffff;
}

.affiliate-wrap{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.affiliate-logos{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.aff-logo{
  max-height: 90px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}

.affiliate-text{
  font-size: 24px;
  font-weight: 700;
  margin-top: 10px;
  line-height: 1.4;
}

/* 🔹 Responsive */
@media (max-width: 600px){
  .aff-logo{
    max-height: 70px;
  }
  
  .affiliate-text{
    font-size: 18px;
  }
}


/*  Nnn  */
/* ===== Unified Section Title Styling for ALL h2 inside sections ===== */

section h2 {
  font-size: 28px;
  font-weight: 800;
  font-family: Poppins, Inter, sans-serif;
  color: var(--accent-cyan);      /* logo color */
  text-align: center;
  margin: 0 0 14px;
  letter-spacing: -0.5px;
  position: relative;
}

/* Underline glow bar */
section h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  margin: 8px auto 18px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-cyan),
    transparent
  );
  border-radius: 10px;
  opacity: 0.85;
}

/* Mobile adjust */
@media(max-width:480px){
  section h2 {
    font-size: 22px;
  }
  section h2::after {
    width: 70px;
  }
}

/* ===== Section Main Title (H2) ===== */
section h2 {
  font-size: 32px;
  font-weight: 800;
  font-family: Poppins, Inter, sans-serif;
  color: #ffffff !important;     /* H2 = White (you can change if you want) */
  text-align: center !important;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
  position: relative;
}

/* Underline line */
section h2::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  margin: 8px auto 18px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  border-radius: 10px;
  opacity: 0.85;
}

/* ===== Section Description / Paragraph under Title ===== */
section .lead,
section p.lead {
  text-align: center !important;
  max-width: 720px;
  margin: 0 auto 25px auto !important;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
}

/* Mobile adjustments */
@media(max-width:480px){
  section h2 {
    font-size: 24px;
  }
  section h2::after {
    width: 70px;
  }
  section .lead {
    font-size: 14px;
  }
}


/* After SEO */
/* make particle canvas not take layout space */
#particles-js, .particles-container, .stars-wrapper {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ensure hero area sits at top */
.hero, .hero-section, .hero-wrapper {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
  padding-top: 40px; /* if you still want a small gap for design */
}