/* -----------------------------------------------------
   GLOBAL VARIABLES
------------------------------------------------------ */
:root{
  --bg-1:#0f172a;            /* slate-900 */
  --bg-2:#a855f7;            /* indigo-800 */
  --text:#ffffff;
  --muted:#cbd5e1;
  --brand-1:#60a5fa;         /* blue-400 */
  --brand-2:#a78bfa;         /* violet-400 */
  --brand-3:#f472b6;         /* pink-400 */
  --accent:#22d3ee;          /* cyan-400 */
  --card:rgba(255,255,255,.08);
  --card-border:rgba(255,255,255,.20);
  --glass:rgba(255,255,255,.06);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
  --radius-sm:14px;
  --radius-lg:26px;
  --max:1200px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, rgba(99,102,241,.25), transparent 60%),
              radial-gradient(800px 600px at 110% 10%, rgba(56,189,248,.18), transparent 55%),
              linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 60%, var(--bg-1) 100%);
  overflow-x:hidden;
}

/* -----------------------------------------------------
   UTILITIES
------------------------------------------------------ */
.container{max-width:var(--max); margin:0 auto; padding:0 20px}
.btn{
  appearance:none; border:0; border-radius:14px; padding:14px 22px; font-weight:700; cursor:pointer;
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2)); color:#fff; 
  box-shadow:0 15px 45px rgba(96,165,250,.25);
  transition:.25s transform,.25s box-shadow, .25s opacity;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 25px 60px rgba(96,165,250,.35)}

.btn-outline{
  background:transparent; border:1px solid var(--card-border); color:#fff;
  padding:14px 22px; border-radius:14px; font-weight:700;
  backdrop-filter: blur(8px);
}

.chip{
  display:inline-flex; gap:8px; align-items:center; 
  padding:8px 14px; border:1px solid var(--card-border);
  border-radius:9999px; background:rgba(255,255,255,.06)
}

.muted{color:var(--muted)}
.grid{display:grid; gap:24px}

/* -----------------------------------------------------
   GLASS COMPONENT 
------------------------------------------------------ */
.glass{
  color:#fff;
  position:relative;
  border-radius:var(--radius);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  box-shadow:inset 0 0 20px rgba(225,255,255,0.05);
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(16px);
}
.glass::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:linear-gradient(135deg,#60a5fa,#a855f7,#ec4899);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:0; filter:blur(6px); transition:.5s;
}
.glass:hover{transform:translateY(-6px) scale(1.02); box-shadow:0 0 35px rgba(168,85,247,0.35);}
.glass:hover::after{opacity:1; filter:blur(10px)}

/* -----------------------------------------------------
   TYPOGRAPHY
------------------------------------------------------ */
.heading-xl{font-size:clamp(36px, 5vw, 64px); line-height:1.05; letter-spacing:-.02em; margin:0 0 14px}
.heading-lg{font-size:clamp(28px, 3.5vw, 42px); line-height:1.1; margin:0 0 10px}
.heading-md{font-size:clamp(20px, 2.2vw, 26px); margin:0 0 8px}

.section{padding:96px 0}
.divider{
  height:3px; width:96px; border-radius:9999px; margin:14px auto;
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2))
}

/* -----------------------------------------------------
   NAVIGATION
------------------------------------------------------ */
.nav{
  position:sticky; top:0; z-index:1000; backdrop-filter:blur(14px);
  background:rgba(9,12,26,.55); border-bottom:1px solid rgba(255,255,255,.06)
}
.nav-inner{height:70px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; font-size:22px}
.brand .logo{
  width:38px; height:38px; border-radius:12px;
  background:conic-gradient(from 210deg, var(--brand-1), var(--brand-2), var(--brand-3));
  box-shadow:0 8px 24px rgba(167,139,250,.35)
}

.menu{display:flex; gap:22px; list-style:none; padding:0; margin:0}
.menu a{
  color:#fff; text-decoration:none; font-weight:600; 
  position:relative; padding:8px 2px; transition:.25s color
}
.menu a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0;
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2)); transition:.25s width
}
.menu a:hover::after,.menu a.active::after{width:100%}

.burger{
  display:none; width:38px; height:38px;
  border:1px solid var(--card-border); border-radius:10px;
  align-items:center; justify-content:center; background:transparent; color:#fff
}

.mobile-panel{
  display:none; position:fixed; inset:70px 0 auto 0; 
  background:rgba(9,12,26,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.mobile-menu{
  display:grid; padding:16px 20px; gap:8px
}
.mobile-menu a{
  padding:14px; border-radius:12px;
  text-decoration:none; color:#fff;
  border:1px solid var(--card-border); background:rgba(255,255,255,.03)
}
.logo-box {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  box-shadow: 0 8px 24px rgba(167,139,250,0.35);
}

.logo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or contain if your logo is not square */
}

/* -----------------------------------------------------
   HERO SECTION
------------------------------------------------------ */
.hero{
  position:relative; min-height:100vh; 
  display:grid; place-items:center; overflow:hidden;
}
.hero video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:.55; z-index:1;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(800px 400px at 20% 15%, rgba(96,165,250,.25), transparent 60%),
    radial-gradient(800px 400px at 80% 10%, rgba(167,139,250,.25), transparent 60%),
    linear-gradient(to bottom, rgba(15,23,42,.5), rgba(15,23,42,.9));
}
.hero-inner{
  position:relative; z-index:3; text-align:center; padding:40px 0;
}
.hero-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:22px}

.bg-video-section {
    position: relative;
    overflow: hidden;
}

.bg-video-section .section,
.bg-video-section footer {
    position: relative;
    z-index: 2;
}

.bg-video {
    position: fixed; /* stays fixed while scrolling */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
    opacity: 0.25; /* adjust transparency */
    pointer-events: none;
}


/* ====================================
   PARTNERS LOGO STRIP — CLEAN + MODERN
   ==================================== */

.partners {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  opacity: 0.85;
}

.partner {
  height: 40px;
  object-fit: contain;
  filter: none;
  opacity: 1;
  transition: 0.3s ease;
}

.partner:hover {
  filter: brightness(1.15);
  opacity: 1;
  transform: translateY(-3px);
}


/* -----------------------------------------------------
   STATS
------------------------------------------------------ */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.stat{
  padding:22px; border-radius:var(--radius-sm);
  background:var(--card); border:1px solid var(--card-border);
  text-align:center;
}
.stat .num{
  font-size:32px; font-weight:900; letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.stat .lbl{color:var(--muted); font-weight:600}




/* -----------------------------------------------------
   PRODUCT CARDS
------------------------------------------------------ */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.card{
  padding:22px; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--card-border);
  position:relative; overflow:hidden; transition:.25s;
}
.card:hover{transform:translateY(-2px)}
.card .icon{
  width:54px; height:54px; border-radius:14px;
  display:grid; place-items:center; margin-bottom:14px;
  background:linear-gradient(135deg,var(--brand-1),var(--brand-2));
}
.card .icon i{
  width:24px; height:24px; background:#fff; opacity:.9; border-radius:6px;
}
.card .actions{margin-top:12px}

.link{
  display:inline-flex; gap:8px; align-items:center;
  color:#93c5fd; text-decoration:none; font-weight:700;
}
.link:hover .arr{transform:translateX(4px)}
.arr{transition:.25s}

/* -----------------------------------------------------
   BLOG
------------------------------------------------------ */
.blog{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.post{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--card-border);
  background:rgba(255,255,255,.04);
}
.post .thumb{
  height:180px;
  background:linear-gradient(135deg, rgba(96,165,250,.35), rgba(167,139,250,.35));
  background-size: cover;
  background-position: top center;
}
.post .bd{padding:18px}
.post .meta{font-size:12px; color:#a7b0c3}

/* -----------------------------------------------------
   WHY US
------------------------------------------------------ */
.why{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.why .item {
  padding: 30px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--card-border);
}

.why .item .icon {
  width: 32px;
  height: 32px;
  color: #76a6ff; /* subtle premium blue */
  margin-bottom: 14px;
}

/* -----------------------------------------------------
   CTA
------------------------------------------------------ */
.cta{
  padding:36px; border-radius:var(--radius-lg);
  display:grid; grid-template-columns:1.2fr .8fr; gap:20px;
  background:linear-gradient(135deg, rgba(96,165,250,.18), rgba(167,139,250,.18));
  border:1px solid var(--card-border);
}
.cta .box{
  padding:18px; border-radius:16px;
  background:rgba(255,255,255,.06); border:1px solid var(--card-border);
}

/* -----------------------------------------------------
   FOOTER
------------------------------------------------------ */
footer{
  margin-top:60px; border-top:1px solid rgba(255,255,255,.08);
  background:rgba(9,12,26,.55)
}
.foot{
  display:grid; grid-template-columns:4fr 2fr 2fr 2fr 2fr;
  gap:40px; padding:46px 0;
} 
.foot > div:first-child {
  max-width: 360px;        
}
.foot a{color:#dbeafe; text-decoration:none;font-size: 15px;}
.foot h4 {
  margin: 0 0 8px 0;
}
.copyright{
  border-top:1px solid rgba(255,255,255,.06);
  padding:16px 0; color:#93a3b8;
  font-size:14px; text-align:center;
}

/* -----------------------------------------------------
   RESPONSIVE GLOBAL
------------------------------------------------------ */
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .blog{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:repeat(2,1fr)}
  .cta{grid-template-columns:1fr}
  .foot{grid-template-columns:1.5fr 1fr 1fr}
}
@media (max-width:720px){
  .menu{display:none}
  .burger{display:flex}
  .cards{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .blog{grid-template-columns:1fr}
  .why{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr; gap:10px}
  .hero{min-height:100vh}
}


/* ------------------------------
   3-COLUMN LAYOUT
-------------------------------*/
/* ================================
   AD TYPES LAYOUT
================================= */
.adtypes-wrap {
  display: grid;
  grid-template-columns: 0.9fr 2.1fr;  /* LEFT LIST | RIGHT CARD */
  gap: 40px;
  margin-top: 40px;
  width: 100%;
}

/* LEFT LIST */
.adtypes-list {
  list-style: none;
  margin-top: 50px;
  padding: 0;
  display: grid;
  gap: 60px;
}

.adtypes-item {
  padding-bottom: 10px;
  cursor: pointer;
}

.adtypes-title {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
  transition: color .25s ease;
}

.adtypes-item.active .adtypes-title {
  color: #a855f7;
}

/* Underline (track) */
.adtypes-underline {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  overflow: hidden;
}

/* Neon underline fill */
.adtypes-underline-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg,#7c3aed,#a855f7,#22d3ee,#60a5fa);
  box-shadow:
    0 0 10px rgba(168,85,247,0.9),
    0 0 18px rgba(124,58,237,0.7),
    inset 0 0 10px rgba(96,165,250,0.5);
  transition: width linear;
}

.adtypes-item.active .adtypes-underline-fill {
  width: 100%;
}
/* ============================
   AD TYPES — LEFT + DIVIDER
============================ */
.adtypes-left {
  margin-top: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-right: 35px;
}

/* VERTICAL LINE */
.adtypes-divider {
  position: absolute;
  right: 0;
  top: 0;
  width: 1.6px;
  height: 100%;
  background: rgba(255,255,255,0.18);
  border-radius: 12px;
}

/* ================================
   RIGHT GLASS CARD
================================= */
.adtypes-card {
  height: 460px;
  width: 101%;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.20);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 6px 28px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ================================
   VIDEO CONTAINER (SQUARE)
================================= */
.adtypes-card-image {
  width: 100%;
  overflow: hidden;
  border-radius: 6px 
  border: 2px solid rgba(255,255,255,0.18);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Adjusted video size */
.adtypes-card-image video {
  width: 100%;               
  max-height: 600px;         
  object-fit: contain;      
  display: block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s ease, transform .55s ease;
}

.adtypes-card-image video.enter {
  opacity: 1;
  transform: translateY(0);
}

.adtypes-card-image video.exit {
  opacity: 0;
  transform: translateY(-22px);
}


/* ================================
   CONTENT BELOW VIDEO
================================= */
.adtypes-card-content h3 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 8px;
}

.adtypes-card-content p {
  font-size: 16px;
  color: #e5e7eb;
  line-height: 1.55;
  margin-bottom: 12px;
}

/* ================================
   MOBILE RESPONSIVE
================================= */
@media (max-width: 900px) {

  /* MAIN WRAPPER STACK */
  .adtypes-wrap {
    display: flex;
    flex-direction: column;
    gap: 28px;                    
    margin-top: 10px;
  }

  /* HIDE DIVIDER */
  .adtypes-divider {
    display: none !important;
  }

  /* LEFT LIST SPACING */
  .adtypes-list {
    margin-top: 10px;
    margin-left: 20px;             
    gap: 40px;                     
  }

  .adtypes-title {
    font-size: 18px;
  }

  /* CARD */
  .adtypes-card {
    width: 100%;
    height: auto;
    padding: 18px;
    border-radius: 20px;
    gap: 16px;
    margin-bottom: 20px;          /
  }

  /* VIDEO */
  .adtypes-card-image {
    border-radius: 10px ;
  }

  .adtypes-card-image video {
    width: 100%;
    max-height: 220px;             
    object-fit: contain;
  }

  /* TEXT BELOW VIDEO */
  .adtypes-card-content h3 {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .adtypes-card-content p {
    font-size: 14px;
    line-height: 1.5;
  }
}




/* ===============================
   WHO SECTION — FINAL PERFECT FIX
   =============================== */

/* Proper two-column layout */
#who .grid {
  grid-template-columns: 1fr 1fr !important;
  align-items: start;
}

/* Image should have clean fixed height */
#who .who-img-wrapper {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#who .who-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Stats box spacing */
#who .stats {
  margin-bottom: 12px;
}

/* Clean description box – not too large */
#who .who-desc-box {
  height: 170px;
  overflow-y: auto;
  padding: 22px !important;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
}

/* Restore AOS animations correctly inside WHO */
#who [data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
}

#who [data-aos].aos-animate {
  opacity: 1 !important;
  transform: none !important;
}

/* Smooth scroll for inner description */
#who .who-desc-box::-webkit-scrollbar {
  width: 6px;
}
#who .who-desc-box::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 6px;
}
/* =========================================
   WHO SECTION — FADE ANIMATION
========================================= */

.who-fade-in {
  opacity: 0;
  animation: whoFade 0.6s ease forwards;
}

@keyframes whoFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ---------- WHO controls & timer ---------- */
.who-carousel { position: relative; }

/* control bar */
.who-controls{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  margin-top:20px;
  pointer-events:auto;
  justify-self:center;
  width:100%;
}

/* arrows */
.who-btn{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  transition:transform .18s ease, background .18s;
  user-select:none;
}
.who-btn:hover{ transform:translateY(-3px); background:rgba(255,255,255,0.06) }

/* indicator text */
.who-indicator { color:var(--muted); font-weight:700; font-size:14px; min-width:72px; text-align:center; }

/* circular timer container */
.who-timer { width:42px; height:42px; display:flex; align-items:center; justify-content:center; position:relative; }

/* svg circle stylings */
.who-circle { transform: rotate(-90deg); overflow:visible; }
.who-circle-bg { stroke: rgba(255,255,255,0.08); }
.who-circle-fg { stroke: linear-gradient(90deg,var(--brand-1),var(--brand-2)); stroke: var(--brand-1); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.2s linear; }

/* subtle shadow/glow on progress */
.who-circle-fg { filter: drop-shadow(0 6px 18px rgba(168,85,247,0.12)); }

/* small responsive tweaks */
@media (max-width:900px){
  .who-controls{ gap:10px; }
  .who-btn{ width:38px; height:38px; font-size:18px; }
}

/* keep your existing fade animation class for the image/desc */
.who-fade-slide-left {
  opacity:0;
  transform: translateX(-18px);
  transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .45s;
}
.who-fade-slide-left.show {
  opacity:1;
  transform: translateX(0);
}

.who-fade-slide-right {
  opacity:0;
  transform: translateX(18px);
  transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .45s;
}
.who-fade-slide-right.show {
  opacity:1;
  transform: translateX(0);
}
.auth-logo-link {
    text-decoration: none;
}

.auth-logo-link span {
    color: #fff;
}

/* ============================
   Mobile polish fixes (0 - 720px)
   Paste at the end of styles.css
   ============================ */
@media (max-width: 720px) {

   /* NAVBAR / menu overlap fixes */
  .nav-inner { height: 62px; padding: 8px 16px; }
  .logo-box { width: 34px; height: 34px; border-radius:10px; }
  .nav-cta { display:flex; gap:10px; align-items:center; z-index:1102; }
  .nav-cta a { position:relative; z-index:1102; }
  .burger { z-index:1103; }

  /* mobile panel under navbar */
  .mobile-panel {
    top: 62px;
    left: 0;
    right: 0;
    display: none;
    z-index:1100;
    padding: 12px 18px 28px;
  }
  .mobile-panel.open { display:block; }
  .mobile-menu a { display:block; width:100%; }

  /* HERO spacing */
  .hero {
    min-height: 100vh !important;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero .chip {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

  .heading-xl {
    font-size: 30px !important;
    line-height: 1.2 !important;
    margin-top: 6px;
    margin-bottom: 12px !important;
  }

  /* HERO BUTTON FIX — compact, clean */
  .hero-cta {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .hero-cta .btn,
  .hero-cta .btn-outline {
    width: auto !important;
    padding: 12px 22px !important;
    font-size: 15px !important;
    display: inline-flex !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }

  /* hero paragraph fix */
  .hero-inner p {
    font-size: 15px !important;
    line-height: 1.45 !important;
    max-width: 350px !important;
    margin: 0 auto 16px auto !important;
  }


  /* PARTNERS */
  .partners { gap: 20px; margin-top:22px; justify-content:center; }
  .partner { height: 34px; filter: none; opacity:1; }

  /* WHO section -> stack vertically */
  #who .grid { grid-template-columns: 1fr !important; gap:18px; }
  #who .who-img-wrapper { height: 220px; }
  #who .who-desc-box { max-height: 190px; overflow:auto; }

  /* AD TYPES: make the left list nicer (two-column grid for titles), clear spacing */
  .adtypes-wrap { grid-template-columns: 1fr; gap:20px; align-items:stretch; }
  /* Titles: display as a small two-column grid for mobile for compactness */
  .adtypes-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 6px 2px 10px;
  }
  .adtypes-item { padding-bottom: 6px; min-height: auto; }
  .adtypes-title { font-size: 18px; line-height:1.05; }
  .adtypes-underline { height:4px; margin-top:8px; }

  /* Middle content and image stack neatly */
  .adtypes-middle { order: 2; padding:18px; max-height:none; }
  .adtypes-image { order: 3; height: 200px; padding:0; border-radius:14px; }
  .adtypes-image img { width:100%; height:100%; object-fit:cover; border-radius:14px; display:block; }

  /* Make each ad-types content feel more lively on mobile */
  .adtypes-content { transition: transform .45s cubic-bezier(.2,.9,.2,1), opacity .32s; }

  /* CONTACT FORM: single column, full-width inputs */
  #contactForm { grid-template-columns: 1fr; gap:12px !important; }
  #contactForm input, #contactForm select, #contactForm textarea { grid-column: 1 / -1; width:100%; }
  #contactForm textarea { min-height:120px; }

  /* FOOTER: stack + center */
  .foot { grid-template-columns: 1fr ; gap:20px; text-align:center; padding:30px 0; }
  .foot > div { padding:6px 0; }
  .copyright { padding:18px 0; font-size:14px; }

  /* small polish for spacing and tap targets */
  .btn, .btn-outline { width:100%; max-width:420px; margin: 0 auto; display:block; border-radius:12px; }
  .menu a, .mobile-menu a { font-size:16px; }
}



/* WHO WRAPPER GRID */
.who-wrapper {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  align-items: center;
  position: relative;
}

/* VERTICAL SEPARATOR LINE */
.who-wrapper::before {
  content: "";
  position: absolute;
  left: 260px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255,255,255,0.14);
  border-radius: 10px;
}

/* LEFT VERTICAL TEXT */
.who-left {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.who-title {
  writing-mode: horizontal-tb;
  transform: rotate(360deg);     /* Now EXACT vertical */
  font-size: 60px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 2px;
  line-height: 1.1;
}

/* RIGHT GLASS BOX — NEW SIZE */
.who-right {
  padding: 18px 24px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);

  display: grid;
  grid-template-columns: 120px 1fr 120px;
  grid-template-rows: auto auto;
  gap: 20px;
}

/* SHRINK IMAGE */
/* GLASS CARD FOR IMAGE */
.who-image-box {
  padding: 1%;
  height: 260px;
  border-radius: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 18px rgba(255,255,255,0.08);
  overflow: hidden;             /* Important: ensures rounded corners for image */
  display: flex;
  justify-content: center;
  align-items: center;
}

.who-img {
  width: 100%;
  height: 80px;          /* NEW: reduce height */
  object-fit: cover;
  border-radius: 0;
}

/* STATS */
.stat {
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  text-align: center;
}
.num {
  font-size: 22px;
  font-weight: 700;
}
.who-stats-left,
.who-stats-right {
  display: flex;
  flex-direction: column;
  gap: 18px;      /* <--- THIS creates the space */
}

/* DESCRIPTION — REDUCED SIZE */
.who-desc {
  grid-column: 1 / span 3;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
}
.who-controls {
  grid-column: 1 / span 3;     /* span entire width */
  display: flex;
  justify-content: center;     /* CENTER IT */
  align-items: center;
  gap: 14px;
  
  margin-top: 16px;
  padding-top: 0;
  transform: none;             /* REMOVE SHIFTING */
}
.who-timer {
  background: transparent 
}
.who-circle path {
  fill: none 
}

/* FIX: Override fade-up inside WHO section */
#who .fade-up {
  opacity: 1 ;
  transform: none 
}

/* WHO fade from left & right */
/* WHO section fade from sides */
/* Default fade state */
.who-fade-left,
.who-fade-right {
    opacity: 0;
    transition: opacity 1.1s ease, transform 1.1s ease;
}

/* LEFT element = start from LEFT */
.who-fade-left {
    transform: translateX(-50px);
}

/* RIGHT element = start from RIGHT */
.who-fade-right {
    transform: translateX(50px);
}

/* When entering */
.who-fade-left.show,
.who-fade-right.show {
    opacity: 1;
    transform: translateX(0);
}

/* When leaving — return to ORIGINAL direction */
.who-fade-left.hide {
    opacity: 0;
    transform: translateX(-50px);
}

.who-fade-right.hide {
    opacity: 0;
    transform: translateX(50px);
}

@media (max-width: 768px) {

  /* 1. WHO main grid becomes 1 column */
  .who-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* remove vertical line */
  .who-wrapper::before {
    display: none ;
  }

  /* 2. WHO TITLE horizontal + spacing */
/* MOBILE — Fix Who We Are spacing */
/* MOBILE — Fix Who We Are spacing */
.who-title br {
  display: none ;        /* remove line breaks */
}


.who-title {
  writing-mode: horizontal-tb;
  transform: none ;
  font-size: 34px !important;
  text-align: center !important;
  margin: 0 auto !important;

  white-space: normal !important;  /* allow text to wrap normally */
  word-spacing: 1px !important;   /* spacing BETWEEN words */
  letter-spacing: 1px !important;  /* optional slight spacing between letters */
}



  /* 3. WHO right card becomes single column */
  .who-right {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto;
    padding: 16px;
    gap: 18px;
  }

  /* 4. MOBILE image */
  .who-image-box {
    width: 100%;
    height: 180px !important;
  }

  .who-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 5. Stats row */
  .who-stats-left,
  .who-stats-right {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* 6. Description */
  .who-desc {
    grid-column: 1 / span 1 !important;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* 7. Controls */
  .who-controls {
    grid-column: 1 / span 1 !important;
    justify-content: center;
    margin-top: 10px;
    gap: 10px;
  }

  /* 8. Animation for mobile */
  .who-fade-left,
  .who-fade-right {
    transform: translateY(30px) !important;
  }
  .who-fade-left.show,
  .who-fade-right.show {
    transform: translateY(0) !important;
  }
}
@media (max-width: 768px) {

  /* Stack them vertically */
  #contact .grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Form full width */
  #contact form {
    width: 100% !important;
  }

  /* Contact details card full width */
  #contact .grid > .glass {
    width: 100% !important;
  }
}