:root{
 --bg1:#0b223a;
--bg2:#0f2f4f; 
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --accent:#34c3ff;
  --shadow:0 18px 60px rgba(0,0,0,.35);
  --radius:14px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --max:1100px;

  /* sticky offsets */
  --topbarH:64px;
  --topbarH_m:92px;
}
/* ===== Anchor scroll fix for forms ===== */
#creator-form,
#brand-form{
  scroll-margin-top: 120px;
}

#creator-form h2,
#brand-form h2{
  margin-top: 10px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--text);
  background:
   radial-gradient(1200px 600px at 10% 10%, rgba(52,195,255,.15), transparent 55%),
   radial-gradient(1000px 500px at 90% 90%, rgba(52,195,255,.10), transparent 55%),
   linear-gradient(180deg,var(--bg1),var(--bg2));
}

/* ===== GLOBAL WRAPPER ===== */
.container,
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:32px 18px 60px;
}
/* ===== TOP BAR (GLOBAL FREEZE) ===== */
.topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(6,20,35,.85);
  border-bottom: 1px solid var(--border);
}

/* Dropdown cut na ho */
header,
.topbar,
.topbar__inner{
  overflow: visible !important;
}
.topbar_inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:18px;
}
.brand{
  font-weight:800;
  letter-spacing:.5px;
  display:flex;
  align-items:center;
  gap:8px;
}
.brand_dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px rgba(52,195,255,.8);
}

nav{
  margin-left:auto;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
nav a{
  color:var(--muted);
  text-decoration:none;
  padding:6px 12px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
}
nav a:hover,
nav a.active{
  background:rgba(52,195,255,.15);
  color:var(--text);
}
/* FIX: support both class names (so nothing breaks) */
.topbar_inner,
.topbar__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:18px;
}
/* FIX: Top nav links spacing + remove default blue */
.topbar__inner{
  flex-wrap: wrap;
  row-gap: 10px;
}

.nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;              /* <-- chipakna khatam */
  align-items: center;
}

/* Links ka default blue/underline remove */
.nav a,
.nav a:visited{
  color: rgba(233,241,255,.70);   /* muted */
  text-decoration: none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 999px;
  display: inline-block;
  line-height: 1.2;
}

/* Hover / Active */
.nav a:hover{
  color: rgba(233,241,255,1);
  background: rgba(255,255,255,.06);
}

.nav a.active{
  color: rgba(233,241,255,1);
  background: rgba(31,78,216,.22);
  border: 1px solid rgba(31,78,216,.35);
}

/* Mobile: agar space kam ho to horizontal scroll clean */
@media (max-width: 720px){
  .nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .nav a{ white-space: nowrap; }
}
/* ===== HERO ===== */
                                 
.hero{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:34px;
  box-shadow:var(--shadow);
}
h1{margin:0;font-size:40px;line-height:1.1}
.sub{color:var(--muted);margin-top:12px}
                                 
 @media(max-width:768px){

.hero{
padding:22px;
}

.vbHero_title{
font-size:26px;
line-height:1.2;
}

.vbHero_sub{
font-size:14px;
}

.vbHero_cta{
flex-direction:column;
gap:12px;
}

.btn{
width:100%;
justify-content:center;
}

}                                

/* ===== CARDS ===== */
.card{
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}
                                 
.grid{display:grid;gap:18px}
@media(min-width:860px){
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
}

/* ===== BUTTON ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(52,195,255,.4);
  background: linear-gradient(
    180deg,
    rgba(6,20,35,0.85),
    rgba(6,20,35,0.95)
);
  color:var(--text);
  font-weight:700;
  text-decoration:none;
}
.btn:hover{
 background: linear-gradient(
    180deg,
    rgba(6,20,35,0.85),
    rgba(6,20,35,0.95)
);
}

/* ===== FOOTER ===== */
.vbFormWrap{padding:28px 14px;}
.vbFormCard{
  max-width:720px;margin:0 auto;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:18px 16px;
  box-shadow:0 14px 50px rgba(0,0,0,.25);
}
.vbFormTitle{margin:0 0 6px;font-size:28px;letter-spacing:.2px;}
.vbFormIntro{margin:0 0 14px;color:rgba(233,241,255,.78);line-height:1.5;}

.vbForm{display:grid;gap:10px;}
.vbLabel{font-weight:600;font-size:14px;color:rgba(233,241,255,.92);}
.vbInput,.vbSelect{
  width:100%;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.14);
  color:#e9f1ff;
  border-radius:12px;
  padding:12px 12px;
  outline:none;
}
.vbInput::placeholder{color:rgba(233,241,255,.55);}
.vbInput:focus,.vbSelect:focus{border-color:rgba(43,108,255,.8);}

.vbGroup{display:grid;gap:8px;padding-top:4px;}
.vbChecks,.vbRadios{display:grid;gap:6px;}
.vbCheck,.vbRadio{
  display:flex;gap:10px;align-items:center;
  padding:10px 10px;border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}
.vbBtn{
  margin-top:6px;
  border:none;cursor:pointer;
  padding:12px 14px;border-radius:14px;
  background:linear-gradient(90deg,#1f4ed8,#2b6cff);
  color:white;font-weight:700;
}
.vbBtn:disabled{opacity:.65;cursor:not-allowed;}
.vbNote{margin:8px 0 0;color:rgba(233,241,255,.70);font-size:13px;}
.vbMsg{margin-top:8px;font-size:14px;}
.vbMsg.ok{color:#7CFFB2;}
.vbMsg.err{color:#FF8C8C;}
footer{
  margin-top:40px;
  border-top:1px solid var(--border);
  background:rgba(6,20,35,.9);
}
.footer_inner{
  max-width:var(--max);
  margin:0 auto;
  padding:18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
}
 @media(max-width:768px){
.footer_inner{
flex-direction:column;
text-align:center;
gap:20px;
}
}                                
.footer_links{display:flex;gap:14px}
.footer_links a{color:var(--muted);text-decoration:none}
.footer_links a:hover{color:var(--text)}
     .footer_links a:hover{
  color:var(--text);
}

.footer{
  position:relative;
}

.footer:before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(
        90deg,
        rgba(0,255,255,0.05),
        rgba(0,255,255,0.6),
        rgba(0,255,255,0.05)
    );
}         

/* ===== MOBILE FIX ===== */
@media(max-width:768px){
  .container,.wrap{padding:26px 14px 50px}
  h1{font-size:28px}
  nav{justify-content:center;margin-top:8px}
  .topbar_inner{flex-direction:column;align-items:flex-start}
}



/* ===== HERO SLIDER ===== */
.hero-slider{
  position: relative;
  width: 100%;
  height: 520px;                 /* DESKTOP/LAPTOP */
  overflow: hidden;
  border-radius: 18px;
  background: #0b1220;
}

.hs-track{height:100%;position:relative}

.hs-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.02);
  transition: opacity 600ms ease, transform 900ms ease;
}
.hs-slide.is-active{
  opacity:1;
  transform:scale(1);
  z-index:1;
}

/* full cover */
.hs-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  background-color:#0b1b2a;
  filter:saturate(1.05);
}

.hs-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  text-align:left;
  padding: clamp(18px, 4vw, 56px);
  color:#fff;
  background: linear-gradient(90deg, rgba(7,12,24,0.78), rgba(7,12,24,0.25), rgba(7,12,24,0.0));
}
.hs-overlay h1, .hs-overlay h2{
  margin: 0 0 10px 0;
  font-size: clamp(22px, 3.2vw, 46px);
  line-height: 1.15;
}
.hs-overlay p{
  margin: 0 0 18px 0;
  max-width: 52ch;
  opacity: 0.92;
  font-size: clamp(14px, 1.35vw, 18px);
}
.hs-actions{display:flex;flex-wrap:wrap;gap:10px}

.hs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.22);
  color:#fff;
  text-decoration:none;
}
.hs-btn.primary{
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.14);
}
.hs-btn:hover{transform: translateY(-1px)}

/* Nav arrows */
.hs-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.25);
  color:#fff;
  cursor:pointer;
  z-index:5;
  display:grid;
  place-items:center;
  font-size:26px;
  line-height:1;
}
.hs-prev{left:12px}
.hs-next{right:12px}
.hs-nav:hover{background: rgba(0,0,0,0.38)}

/* Dots */
.hs-dots{
  position:absolute;
  left:0; right:0; bottom:12px;
  display:flex;
  gap:8px;
  justify-content:center;
  z-index:6;
}
.hs-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.18);
  cursor:pointer;
}
.hs-dot.is-active{background: rgba(255,255,255,0.9)}

@media (prefers-reduced-motion: reduce){
  .hs-slide{ transition:none; }
}

/* MOBILE slider */
@media (max-width: 767px){
  .hero-slider{height: 380px;}
  .hs-slide img{object-position: center 25%;}
}
/* ===== /HERO SLIDER ===== */
.music-btn{
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 9999;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  font-size: 18px;
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.music-btn:hover{
  background: rgba(255,255,255,0.18);
}
/* FIX: keep ticker from covering slider */
.hero-slider{ margin-top: 12px; }

/* mobile: ticker + menu zyada height lete hain */
@media (max-width: 768px){
  .hero-slider{ margin-top: 16px; }
}
/* FIX: mobile nav compact */
@media (max-width: 768px){
  nav{
    gap: 8px;
  }
  nav a{
    padding: 6px 10px;
    font-size: 13px;
  }
  .btn{ padding: 9px 14px; }
}
.hs-slide img{
  border-radius:18px;
}
/* ===== Campaign Process (Mobile Fix) ===== */
.processGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
}

.processStep{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  min-width:0;           /* IMPORTANT: text cut fix */
}

.stepNum{
  font-weight:900;
  font-size:18px;
  margin-bottom:6px;
}

.stepTitle{
  font-weight:800;
  font-size:16px;
  margin-bottom:6px;
}

.stepText{
  color: var(--muted);
  line-height:1.35;
  word-break: break-word;
}

/* Tablet */
@media (max-width: 900px){
  .processGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile */
@media (max-width: 520px){
  .processGrid{ grid-template-columns: 1fr; }
  .processStep{ padding:14px; }
}

.social-links {
  margin-top: 18px;
  display: flex;
  gap: 14px;
}

.social-links a {
  align-items: center;
justify-content: center;
width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  color: #eaf0ff;
  font-size: 18px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.social-links a:hover {
box-shadow: 0 6px 14px rgba(82,195,255,.25);
  background: rgba(82,195,255,0.18);
  transform: translateY(-2px);
}
.follow-title{
  margin: 16px 0 10px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
/* ===== Collab Gate (Home) ===== */
.collabGate{
  margin: 22px 0;
}
.collabGate__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 35px rgba(0,0,0,.20);
}
.collabGate__head h2{
  margin: 0 0 6px;
  font-size: 22px;
}
.collabGate__head p{
  margin: 0 0 14px;
  opacity: .85;
}
.collabGate__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px){
  .collabGate__grid{ grid-template-columns: 1fr; }
}
.collabGate__card{
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.08);
}
.collabGate__label{
  display:block;
  font-weight: 600;
  margin-bottom: 8px;
  opacity: .9;
}
.collabGate__select{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.25);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  outline: none;
}
.collabGate__select:focus{
  border-color: rgba(0,176,244,.55);
}
.collabGate__actions{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.collabGate__hint{
  font-size: 13px;
  opacity: .85;
}
/* FORCE dark fields for creator form (even if .field class missing) */
#creator-form input,
#creator-form select,
#creator-form textarea{
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 14px !important;
  border-radius: 12px !important;

  background: rgba(255,255,255,.08) !important;
  color: #e9f1ff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  outline: none !important;
}

#creator-form input::placeholder,
#creator-form textarea::placeholder{
  color: rgba(233,241,255,.55) !important;
}

#creator-form select option{
  background: #0b1422 !important;
  color: #e9f1ff !important;
}

/* Autofill white/yellow fix */
#creator-form input:-webkit-autofill,
#creator-form input:-webkit-autofill:hover,
#creator-form input:-webkit-autofill:focus{
  -webkit-text-fill-color: #e9f1ff !important;
  -webkit-box-shadow: 0 0 0px 1000px #0b1422 inset !important;
  transition: background-color 9999s ease-in-out 0s;
}
/* ===== Creator form dropdown white fix ===== */
select.field{
  background-color: rgba(255,255,255,.06) !important;
  color: #e9f1ff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Dropdown list items */
select.field option{
  background-color: #0b1220 !important;
  color: #e9f1ff !important;
}

/* For some browsers: the opened dropdown panel */
select.field optgroup{
  background-color: #0b1220 !important;
  color: #e9f1ff !important;
}

/* If your select does NOT have class="field" */
select{
  background-color: rgba(255,255,255,.06) !important;
  color: #e9f1ff !important;
}
select option{
  background-color: #0b1220 !important;
  color: #e9f1ff !important;
}
  /* ===== Unified Form UI (Brands + Creators) ===== */

.field{
  width:100%;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#e9f1ff;
  outline:none;
  transition:.15s ease;
}

.field::placeholder{ color: rgba(233,241,255,.55); }

.field:focus{
  border-color: rgba(120,170,255,.35);
  box-shadow: 0 0 0 3px rgba(60,120,255,.12);
}

select.field{
  background-color: rgba(255,255,255,.06) !important;
  color:#e9f1ff !important;
}

select.field option,
select.field optgroup{
  background:#0b1220 !important;
  color:#e9f1ff !important;
}

/* Fix “white” dropdown look as much as browser allows */
select.field:focus option{ background:#0b1220 !important; color:#e9f1ff !important; }

/* consistent grids like brands */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
@media(max-width:900px){ .grid2,.grid3{grid-template-columns:1fr} }

.formTitle{margin:0 0 6px 0}
.formSub{margin:0 0 12px 0; color: rgba(233,241,255,.70); line-height:1.6}

.formBox{padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
.formActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}

.statusOk{border:1px solid rgba(0,255,180,.25)!important;background:rgba(0,255,180,.10)!important;padding:10px 12px;border-radius:14px}
.statusErr{border:1px solid rgba(255,70,70,.25)!important;background:rgba(255,70,70,.10)!important;padding:10px 12px;border-radius:14px}
/* ===== Confirm checkbox FIX (mobile + desktop) ===== */
.confirm-row{
  display:flex !important;
  flex-direction:column !important;   /* checkbox upar, text neeche */
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  width:100% !important;
  margin:18px auto 0 !important;
  text-align:center !important;
}

.confirm-row input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  margin:0 !important;
  flex:0 0 auto !important;
  cursor:pointer !important;
}

.confirm-row label{
  position:static !important;
  width:100% !important;
  max-width:520px !important;
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  color:var(--muted) !important;
  font-size:14px !important;
  line-height:1.4 !important;
  white-space:normal !important;
  text-align:center !important;
  cursor:pointer !important;
}
/* ===== Knowledge Base FINAL link style ===== */
.kbCard a,
.kbCard a:visited{
  color: #e9f1ff !important;   /* clean white */
  text-decoration: none;
  font-weight: 500;
}

.kbCard a:hover{
  color: #6db8ff !important;   /* premium blue */
  text-decoration: underline;
}

.kbCard li a{
  display: inline-block;
  margin: 6px 0;

footer{
  margin-top: 40px;
}
body{
  min-height: auto !important;
}


  
.vbHero h1 {
  margin-bottom: 10px;
}
.vbHero__cta {
  margin-top: 14px;
}
                                 /* FIX: Mobile header navigation clean */
@media (max-width: 768px){
  .nav{
    display: none !important;
  }

  .topbar__inner{
    justify-content: space-between;
  }
}
                                 /* FIX: Mobile page cut / no scroll issue */
html, body{
  height: auto !important;
  min-height: 100%;
  overflow-y: auto !important;
}

main, .container{
  height: auto !important;
  min-height: unset !important;
  overflow: visible !important;
}

  nav{
    margin-left: 0 !important;
    flex: 1;
    justify-content: center;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding: 6px 0;
  }

  nav a{
    white-space: nowrap;
    padding: 7px 10px;
    font-size: 13px;
  }
} 
                                 /* ===== FIX: Mobile bottom cut (safe) ===== */
html, body{
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
}

.wrap, .container{
  padding-bottom: 90px; /* end space so last card/button not cut */
}
 /* Buttons fly-in + small float then settle */
.hs-actions .float-btn{
  opacity: 0 !important;
  transform: translateY(-70px) scale(.98) !important;
  animation: flyFloatIn 2.6s cubic-bezier(.2,.9,.2,1) forwards !important;
  will-change: transform, opacity;
}

/* Stagger delay (4 buttons) */
.hs-actions .float-btn:nth-child(1){ animation-delay: .15s !important; }
.hs-actions .float-btn:nth-child(2){ animation-delay: .35s !important; }
.hs-actions .float-btn:nth-child(3){ animation-delay: .55s !important; }
.hs-actions .float-btn:nth-child(4){ animation-delay: .75s !important; }

@keyframes flyFloatIn{
  0%   { opacity:0; transform: translateY(-70px) scale(.98); }
  60%  { opacity:1; transform: translateY(10px) scale(1); }  /* little overshoot */
  80%  { opacity:1; transform: translateY(-6px) scale(1); }  /* float feel */
  100% { opacity:1; transform: translateY(0) scale(1); }
}
/* Center the "Creators & Editors. Matched Right." block */
.hero-matching,
.matching-block,
.creators-editors-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* Headline center */
.hero-matching h1,
.creators-editors-hero h1 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Paragraph center */
.hero-matching p,
.creators-editors-hero p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Buttons center */
.hero-matching .hs-actions,
.creators-editors-hero .hs-actions {
  justify-content: center;
}
                                 /* ===== VB Premium Polish (SAFE) ===== */

/* Better readability */
body{
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Consistent container spacing */
.container, .wrap{
  width: min(1100px, 92vw);
  margin-left: auto;
  margin-right: auto;
}

/* Section breathing space */
section{
  scroll-margin-top: 90px;
}

/* Cards: more premium */
.card, .panel, .box{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 50px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}

/* Buttons: premium hover */
a.btn, button.btn, .hs-btn, .cta{
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
a.btn:hover, button.btn:hover, .hs-btn:hover, .cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}
a.btn:active, button.btn:active, .hs-btn:active, .cta:active{
  transform: translateY(0px);
}

/* Text blocks max width for clean look */
p{
  max-width: 72ch;
}

/* Mobile spacing fix */
@media (max-width: 768px){
  .container, .wrap{ width: 92vw; }
  h1{ font-size: 30px; }
  h2{ font-size: 20px; }
}
                                 /* Center + breathing space for matching hero block */
.matching-hero, .creators-editors-hero, .hero-matching{
  padding: 26px 20px;
  margin: 14px auto 18px;
  text-align: center;
}
.matching-hero .hs-actions,
.creators-editors-hero .hs-actions,
.hero-matching .hs-actions{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
                                 @media (max-width: 520px){
  .hs-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .hs-actions a{
    justify-content: center;
    text-align: center;
  }
}
                                 /* Brand/logo bigger */
.topbar .brand,
.brand{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
}

.brand .brand-dot,
.topbar .brand-dot{
  width: 12px;
  height: 12px;
}
                                 @media (max-width: 900px){
  /* Hide long nav on mobile so buttons don't cut */
  .nav{ display: none !important; }

  /* Topbar spacing */
  .topbar__inner{
    gap: 10px !important;
    padding: 12px 0 !important;
  }

  /* Keep CTA buttons visible */
  .cta, .hs-btn, .btn{
    white-space: nowrap;
  }
}
   /* ===== Hero CTA Medium Animation (Premium + Non-distracting) ===== */
.hero .btn--primary,
.vbHero .btn--primary,
.hero a.btn--primary,
.vbHero a.btn--primary{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform, box-shadow, filter;
  animation: vbCtaPulse 2.6s ease-in-out infinite;
}

/* subtle sheen sweep */
.hero .btn--primary::after,
.vbHero .btn--primary::after,
.hero a.btn--primary::after,
.vbHero a.btn--primary::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 18%, transparent 36%);
  transform: translateX(-140%);
  animation: vbSheen 3.6s ease-in-out infinite;
  pointer-events:none;
}

/* pause animation on hover/focus (looks premium) */
.hero .btn--primary:hover,
.vbHero .btn--primary:hover,
.hero .btn--primary:focus-visible,
.vbHero .btn--primary:focus-visible{
  animation-play-state: paused;
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.hero .btn--primary:hover::after,
.vbHero .btn--primary:hover::after,
.hero .btn--primary:focus-visible::after,
.vbHero .btn--primary:focus-visible::after{
  animation-play-state: paused;
  opacity: .6;
}

/* keyframes: medium intensity (no dancing) */
@keyframes vbCtaPulse{
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 10px 28px rgba(52,195,255,.16); }
  50%      { transform: translateY(-1px) scale(1.02); box-shadow: 0 14px 38px rgba(52,195,255,.26); }
}

@keyframes vbSheen{
  0%   { transform: translateX(-140%); opacity:.0; }
  20%  { opacity:.55; }
  45%  { transform: translateX(140%); opacity:.0; }
  100% { transform: translateX(140%); opacity:.0; }
}

/* mobile: slightly calmer */
@media (max-width: 768px){
  .hero .btn--primary,
  .vbHero .btn--primary,
  .hero a.btn--primary,
  .vbHero a.btn--primary{
    animation-duration: 3.0s;
  }
  .hero .btn--primary::after,
  .vbHero .btn--primary::after,
  .hero a.btn--primary::after,
  .vbHero a.btn--primary::after{
    animation-duration: 4.2s;
  }
}

/* accessibility: if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero .btn--primary,
  .vbHero .btn--primary,
  .hero a.btn--primary,
  .vbHero a.btn--primary{
    animation: none !important;
  }
  .hero .btn--primary::after,
  .vbHero .btn--primary::after,
  .hero a.btn--primary::after,
  .vbHero a.btn--primary::after{
    animation: none !important;
  }
}
    /* === Hero Micro Trust Line === */
.hero-trust{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  letter-spacing: .2px;
}

.hero-trust .dot{
  opacity: .4;
}

@media (max-width:768px){
  .hero-trust{
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
  }
}
    /* === Career Section Clean === */
.careerSection{
  padding: 70px 16px;
}

.careerHead{
  text-align: center;
  margin-bottom: 22px;
}

.careerHead h2{
  margin: 0 0 8px;
}

.careerHead p{
  margin: 0;
  opacity: .75;
}

.careerGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 980px){
  .careerGrid{ grid-template-columns: 1fr; }
}

.careerCard{
  display: block;
  padding: 22px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none;
  color: rgba(255,255,255,.92);
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.careerCard h3{
  margin: 0 0 8px;
  font-size: 18px;
}

.careerCard p{
  margin: 0 0 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.45;
}

.careerMeta{
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,.80);
}

.careerCard:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.075);
  border-color: rgba(52,195,255,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.careerCta{
  margin-top: 18px;
  text-align: center;
}
    /* === Career Cards FORCE FIX === */
.careerSection a,
.careerCard,
.careerCard *{
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
}

.careerCard{
  display: block;
  padding: 22px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  transition: all .25s ease;
}

.careerCard:hover{
  transform: translateY(-3px);
  background: rgba(255,255,255,.08);
  border-color: rgba(52,195,255,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.careerCard h3{
  margin: 0 0 8px;
  font-size: 18px;
}

.careerCard p{
  margin: 0 0 12px;
  color: rgba(255,255,255,.7) !important;
}

.careerMeta{
  font-size: 13px;
  font-weight: 700;
  opacity: .85;
}
    careerIcon{
  margin-right:10px;
  font-size:16px;
  color: var(--accent);
  opacity:.85;
}

.careerCard h3{
  display:flex;
  align-items:center;
}
    /* ============================
   
    /* ===== VB HERO (Homepage Core) ===== */
.vbHero{padding:56px 0 24px}
.vbHero__inner{text-align:center;max-width:960px;margin:0 auto}
.vbHero__badge{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-weight:800;
  font-size:12px;
  letter-spacing:.3px;
  margin-bottom:14px
}
.vbHero__title{
  font-size:38px;
  line-height:1.15;
  margin-bottom:12px
}
.vbHero__sub{
  max-width:720px;
  margin:0 auto 18px;
  opacity:.78;
  line-height:1.6
}
.vbHero__bullets{
  margin-top:14px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
  font-weight:700;
  opacity:.9
}
.vbHero__bullets .dot{opacity:.4}

@media(max-width:700px){
  .vbHero{padding:42px 0 18px}
  .vbHero__title{font-size:28px}
}
    /* ===== VB VIDEO STRIP (Horizontal Clickable) ===== */
.vbVideoStrip{padding:26px 0 10px}
.vbVideoStrip__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:6px
}
.vbVideoStrip__title{font-size:18px;margin:0}
.vbVideoStrip__sub{opacity:.75;margin:0 0 12px;line-height:1.5}

.vbVideoStrip__actions{display:flex;gap:8px}
.vbVS_btn{
  width:36px;height:36px;border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.92);
  font-weight:900;font-size:18px;cursor:pointer
}
.vbVS_btn:active{transform:translateY(1px)}

.vbVS{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:12px;
}
.vbVS__track{
  display:flex;gap:12px;
  overflow-x:auto;scroll-behavior:smooth;
  padding-bottom:6px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
    @media(max-width:768px){
.vbVS_track{
animation-duration:40s;
}
}
    
.vbVS__track::-webkit-scrollbar{display:none}
    

.vbVS__card{
  flex:0 0 auto;
  width:230px;
  text-decoration:none;
  border-radius:16px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.vbVS__thumb{width:100%;height:130px;object-fit:cover;display:block}
.vbVS__meta{padding:10px 10px 12px}
.vbVS__kicker{font-size:12px;opacity:.70;margin-bottom:4px;font-weight:800;letter-spacing:.2px}
.vbVS__name{font-size:13px;opacity:.92;font-weight:800;line-height:1.3}

.vbVideoStrip__note{margin-top:10px;opacity:.65;font-size:12px}

@media(max-width:700px){
  .vbVS__card{width:200px}
  .vbVS__thumb{height:120px}
}
    vbVS {
  overflow: visible;
}

.vbVS__track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.vbVS__card {
  min-width: 220px;
  flex-shrink: 0;
}
    /* ===== VIDEO STRIP FIX ===== */

.vbVS__card{
  width:240px;
  background:rgba(255,255,255,.03);
  transition:transform .25s ease;
}

.vbVS__card:hover{
  transform:translateY(-4px);
}

.vbVS__thumb{
  width:100%;
  height:160px;       /* thoda bada kar diya */
  object-fit:cover;
  display:block;
  border-radius:12px 12px 0 0;
  filter:none !important;
  opacity:1 !important;
}
    .vbVideoStrip{
  padding: 60px 0;
  background: linear-gradient(180deg, #0d2238 0%, #0f2a44 100%);
}

.vbVS__card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}

.vbVS__card:hover{
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.35);
}
    /* ===== VB Featured Work polish ===== */
.vbVideoStrip{
  padding: 56px 0;
  background: linear-gradient(180deg, rgba(8,26,43,.0) 0%, rgba(8,26,43,.55) 40%, rgba(8,26,43,.0) 100%);
}

.vbVS__card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.vbVS__card:hover{
  transform: translateY(-6px);
  border-color: rgba(52,195,255,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

.vbVS__thumb{
  filter: saturate(1.05) contrast(1.05);
}
    /* ===== VB HERO REFINE ===== */
.vbHero{
  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.14), transparent 55%),
              radial-gradient(1000px 500px at 90% 90%, rgba(52,195,255,.14), transparent 55%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
}

.vbHero__title{
  color: rgba(255,255,255,.96);
  text-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.vbHero__sub{
  color: rgba(233,241,255,.78);
}
    /* ===== VB VIDEO STRIP REFINE ===== */
.vbVideoStrip{
  margin-top: 18px;
}

.vbVS{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px;
}

.vbVS__card{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

.vbVS__name{
  color: rgba(255,255,255,.92);
}

.vbVS__kicker{
  color: rgba(233,241,255,.78);
}
    @media(max-width:768px){

  .vbVS{
    padding:10px;
  }

  .vbVS__card{
    min-width:85%;
  }
.nav__more{ position: relative; }
.nav__drop{ position: absolute; top: calc(100% + 10px); right: 0; z-index: 999999; }
.nav__drop.is-open{ display: grid !important; }
  .vbVideoStrip__title{
    font-size:20px;
  }

}
    /* ===== NAV MORE FIX (dropdown visible + not clipped) ===== */
header,
.topbar,
.topbar__inner{
  overflow: visible !important;
}



/* safety: topbar ke upar na aaye */
.topbar{ 
  z-index: 999; 
}
    /* === NAV MORE: force dropdown to float above + never clip === */
.topbar,
.topbar__inner,
.nav{
  overflow: visible !important;
}

.nav__more{
  position: relative !important;
}

.nav__drop{
  position: absolute !important;
  top: calc(100% + 10px) !important;
  right: 0 !important;
  left: auto !important;

  z-index: 999999 !important;

  display: none;               /* default hidden */
  max-height: none !important; /* stop inner scrollbar */
  overflow: visible !important;
}

/* open state */
.nav__drop.is-open{
  display: grid !important;
}
    .topbar{ z-index: 999999 !important; }
.nav__moreBtn{ position: relative; z-index: 9999999 !important; pointer-events: auto !important; }
    /* ===== More dropdown: mobile-friendly + always clickable ===== */
.nav__more { position: relative; }

.nav__drop{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 9999999;
}

/* MOBILE: dropdown ko full width + screen ke andar */
@media (max-width: 768px){
  .nav{ position: relative; }
  .nav__more{ position: static; }               /* important */
  .nav__drop{
    left: 12px;
    right: 12px;
    width: auto;
    top: calc(100% + 12px);
  }

  .nav__moreBtn{
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
  }
}
    /* ===== NAV MORE (Yahoo/Google Mega Menu) ===== */

.nav__more{ position: relative; }

/* Desktop: Mega menu full width, centered */
.nav__drop{
  position: fixed;              /* important: screen ke hisaab se */
  left: 50%;
  transform: translateX(-50%);
  top: 64px;                    /* agar header height alag ho to 64/70/80 adjust */
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 110px);
  overflow: auto;

  display: none;
  padding: 18px 18px;

  background: rgba(10,25,40,.95);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  z-index: 99999;
}

.nav__drop.is-open{ display: grid; }

/* 3 columns desktop (Yahoo jaisa) */
.nav__drop{
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px 18px;
}

/* group styling */
.nav__group{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px;
}

.nav__label{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
  margin-bottom: 8px;
}

.nav__item{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: rgba(255,255,255,.9);
}

.nav__item:hover{
  background: rgba(255,255,255,.08);
}

/* Mobile: full width + 1 column */
@media (max-width: 768px){
  .nav__drop{
    top: 64px;                  /* mobile header height ke hisaab se */
    width: calc(100vw - 16px);
    grid-template-columns: 1fr;
    max-height: calc(100vh - 90px);
  }
}
    /* ===== NAV MORE FINAL OVERRIDE (put at VERY END of style.css) ===== */

.nav__more{ position: relative; }

.nav__drop{
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  top: 74px !important; /* agar upar/neeche ho to 64/70/80 try kar lena */
  width: min(1100px, calc(100vw - 32px)) !important;

  max-height: calc(100vh - 110px) !important;
  overflow: auto !important;

  display: none;
  padding: 18px !important;

  background: rgba(10,25,40,.95) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(12px) !important;

  z-index: 999999 !important;
}

.nav__drop.is-open{ display: grid !important; }

.nav__drop{
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 14px 18px !important;
}

@media (max-width: 768px){
  .nav__drop{
    top: 64px !important;
    width: calc(100vw - 16px) !important;
    grid-template-columns: 1fr !important;
    max-height: calc(100vh - 90px) !important;
  }
}
    /* ===== MOBILE NAV FIX: show logo + main nav, hide mega menu ===== */
@media (max-width: 768px){
  .logo{ display:block !important; }

  /* show primary links on mobile */
  .nav{ display:flex !important; gap:12px; flex-wrap:wrap; align-items:center; }

  /* More dropdown mega menu mobile pe off (warna UI tootay ga) */
  .nav__drop{ display:none !important; }
  .nav__drop.is-open{ display:none !important; }

  /* keep button visible */
  .nav__moreBtn{ display:inline-flex !important; }

  /* header layout */
  .topbar__inner{ display:flex !important; align-items:center; justify-content:space-between; gap:10px; }
}
    /* === HEADER HEIGHT BALANCE FIX === */

.topbar,
.header,
.navbar {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.vbMasterTicker {
    margin-top: 6px !important;
}
    /* === FIX: Mobile par "More" clickable === */
@media (max-width: 768px){
  #navMoreBtn,
  .nav_moreBtn,
  .nav_more {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1000000 !important;
    position: relative !important;
  }

  /* agar kisi overlay ne click block kiya hua ho */
  .topbar,
  .topbar_inner,
  .nav {
    overflow: visible !important;
  }
}
    /* ===== MOBILE: More button clickable fix ===== */
@media (max-width: 768px){

  /* More button ko click-able banao */
  #navMoreBtn{
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 999999 !important;
  }

  /* agar kisi parent par pointer-events none laga hua ho to override */
  #navMore,
  .nav_more,
  .nav,
  .topbar,
  .topbar_inner{
    pointer-events: auto !important;
  }

  /* dropdown clip na ho */
  .topbar, .topbar_inner{ overflow: visible !important; }
}
    /* ===== MOBILE: header + More dropdown fix (no-desktop mode) ===== */
@media (max-width: 768px){

  /* header ko sab se upar rakho */
  header.topbar{
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
  }
  .topbar_inner,
  .nav{
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
  }

  /* More button always clickable */
  #navMoreBtn{
    position: relative !important;
    z-index: 1000000 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  #navMore, .nav_more{ pointer-events: auto !important; }

  /* dropdown ko screen ke andar aur header ke neeche show karo */
  #navDrop{
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 70px !important;          /* agar upar/neeche ho to 64/74 try kar lena */
    width: min(1100px, calc(100vw - 24px)) !important;
    max-height: calc(100vh - 90px) !important;
    overflow: auto !important;
    z-index: 1000001 !important;
  }

  /* yeh sections aksar header par overlap kar ke click block kar dete hain */
  .vbMasterTicker,
  .vbHero,
  .hero,
  .hero-slider{
    position: relative !important;
    z-index: 1 !important;
  }
}
    /* ===== FIX: Mobile par More/Home clicks block na hon (vbMasterTicker overlay) ===== */
@media (max-width: 768px){

  /* Header always top */
  header.topbar{
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
  }
  .topbar_inner,
  .nav{
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
  }

  /* Master ticker ko header ke clicks se door rakho */
  .vbMasterTicker{
    position: relative !important;  /* sticky OFF on mobile */
    top: 0 !important;
    z-index: 1 !important;          /* header se neeche */
    pointer-events: none !important;/* clicks block na kare */
  }

  /* Extra top space balance */
  header.topbar{ margin-bottom: 0 !important; }
  .vbMasterTicker{ margin: 10px auto 0 !important; padding: 6px 0 !important; }
}
    /* ================================
   FINAL NAV MORE FIX (MOBILE + DESKTOP)
   Paste at VERY END of style.css
==================================*/

/* 1) Ensure header + nav always clickable above everything */
header.topbar,
.topbar,
.topbar__inner,
.wrap.topbar__inner,
.nav{
  position: relative !important;
  z-index: 999999 !important;
  overflow: visible !important;
}

/* 2) More button must always receive clicks */
#navMoreBtn{
  position: relative !important;
  z-index: 1000000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

/* 3) Dropdown default hidden (only opens when .is-open) */
#navDrop{
  display: none;
}

/* 4) Desktop: dropdown fixed mega menu centered */
@media (min-width: 769px){
  #navDrop{
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 74px !important;
    width: min(1100px, calc(100vw - 32px)) !important;
    max-height: calc(100vh - 110px) !important;
    overflow: auto !important;

    background: rgba(10,25,40,.95) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.45) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 1000001 !important;

    grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
    gap: 14px 18px !important;
    padding: 18px !important;
  }

  #navDrop.is-open{ display: grid !important; }
}

/* 5) Mobile: dropdown full width + open allowed (IMPORTANT) */
@media (max-width: 768px){

  /* aapke file me kahin .nav display:none hai — usko force show */
  .nav{ 
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* Mobile pe dropdown ko kabhi bhi "display:none !important" na rehne do */
  #navDrop{
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 74px !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 90px) !important;
    overflow: auto !important;

    background: rgba(10,25,40,.97) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 60px rgba(0,0,0,.45) !important;
    backdrop-filter: blur(12px) !important;
    z-index: 1000001 !important;

    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  #navDrop.is-open{ display: grid !important; }

  /* Ticker/hero overlays clicks block na karein */
  .vbMasterTicker,
  .vbHero,
  .hero,
  .hero-slider{
    z-index: 1 !important;
  }
}
    /* =========================
   MOBILE NAV BALANCE (CLEAN)
   paste at VERY END
========================= */
@media (max-width: 768px){

  /* Header layout balanced */
  .topbar__inner{
    display:flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 12px !important;
  }

  /* Logo center */
  .logo{
    font-size: 18px !important;
    font-weight: 800 !important;
    text-align:center !important;
  }

  /* Nav row: center & tidy */
  .nav{
    width: 100% !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  /* More button premium look */
  #navMoreBtn{
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: rgba(255,255,255,.92) !important;
    padding: 8px 14px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
  }

  /* Dropdown: centered, not too wide, not too low */
  #navDrop{
    top: 118px !important; /* header ke neeche */
    width: min(520px, calc(100vw - 18px)) !important;
    border-radius: 18px !important;
    padding: 14px !important;
  }

  /* Dropdown groups tighter */
  .nav__group{
    padding: 12px !important;
    border-radius: 14px !important;
  }

  /* Make overlay effect (background dim) */
  body.nav-open::before{
    content:"";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 999998;
  }

  /* Dropdown above overlay */
  #navDrop{ z-index: 1000001 !important; }
}
    /* =========================
   MOBILE HOME: Above-the-fold upgrade
   ========================= */

/* 1) Mobile pe ticker hata do */
@media (max-width: 768px){
  .vbMasterTicker{ display:none !important; }
}

/* 2) Mobile pe hero ko thora compact + clean */
@media (max-width: 768px){
  .vbHero{ padding: 22px 0 12px !important; }
  .vbHero__title{ font-size: 30px !important; line-height: 1.15 !important; }
  .vbHero__sub{ font-size: 14px !important; opacity: .82 !important; }
  .vbHero__bullets{ margin-top: 10px !important; font-size: 12px !important; }
}
    @media (max-width:768px){
  .vbOnlyDesktop{ display:none !important; }
}
    /* ===== MOBILE: Hero compact so Featured Work comes in first screen ===== */
@media (max-width: 768px){

  /* ticker mobile pe hide (agar abhi bhi hai) */
  .vbOnlyDesktop{ display: none !important; }

  /* hero compact */
  .vbHero{ padding: 18px 0 10px !important; }
  .vbHero__inner{ padding: 0 12px !important; }

  .vbHero__badge{ margin-bottom: 10px !important; }
  .vbHero__title{
    font-size: 28px !important;
    line-height: 1.12 !important;
    margin-bottom: 10px !important;
  }
  .vbHero__sub{
    margin: 0 auto 12px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* CTA + bullets tight */
  .vbHero__cta{ margin-top: 10px !important; }
  .vbHero__bullets{ margin-top: 10px !important; }

  /* Featured Work ko hero se chipka do */
  .vbVideoStrip{ padding-top: 12px !important; margin-top: 0 !important; }
}
    /* ===== Featured Work: auto-marquee on mobile (ticker style) ===== */
@media (max-width: 768px){
  .vbVS__track{
    scroll-behavior: auto !important;
  }

  

  .vbVS:hover .vbVS__track{
    animation-play-state: paused;
  }

  
}
    /* ===== Featured Work: JS Auto Marquee (safe) ===== */
.vbVS__track{
  overflow-x: auto;
scroll-behavior: smooth;
  position: relative;
}

.vbVS__marquee{
  display: inline-flex;
  align-items: stretch;
  gap: 12px;
  will-change: transform;
}

.vbVS__marquee.is-animating{
  animation-name: vbVS_marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.vbVS__track.is-paused .vbVS__marquee.is-animating{
  animation-play-state: paused;
}



/* mobile first */
@media (max-width: 768px){
  .vbVS__track{
    overflow: hidden;
  }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .vbVS__marquee.is-animating{
    animation: none !important;
    transform: none !important;
  }
}
    /* ===== Featured Work: Mobile thumbnails desktop-style (NO CUT) ===== */

/* Track */
.vbVS__track{
  overflow: hidden;
}

/* Cards: mobile par desktop jaisa size */
@media (max-width: 768px){
  .vbVS__marquee{
    gap: 14px !important;
  }

  .vbVS__card{
    width: 260px !important;      /* desktop-ish */
    flex: 0 0 auto !important;
    border-radius: 16px !important;
  }

  /* Thumbnail: no crop */
  .vbVS__thumb{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important; /* YouTube vibe */
    object-fit: cover; /* agar bilkul crop nahi chahiye to contain kar do */
    display: block !important;
  }

  /* Meta: text overlap na ho */
  .vbVS__meta{
    padding: 10px 12px 12px !important;
  }

  .vbVS__name{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.25 !important;
  }
}

/* Agar tum “zero crop” chahte ho (bilkul nahi cut) to ye ON kar do:
@media (max-width: 768px){
  .vbVS__thumb{ object-fit: contain !important; background: rgba(0,0,0,.18); }
}
*/
    /* =========================
   VB VIDEO STRIP — MOBILE 2-CARDS (NO CROP) — OPTION A
   Paste at VERY END of style.css
========================= */

.vbVS{
  overflow: hidden;
}

.vbVS__track{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vbVS__track::-webkit-scrollbar{ display:none; }

/* Desktop/tablet normal */
.vbVS__card{
  flex: 0 0 auto;
  width: 240px;
  border-radius: 16px;
  overflow: hidden;
}

/* Thumb: NO CROP + controlled height */
.vbVS__thumb{
  width: 100%;
  aspect-ratio: 16 / 9;              /* height control */
  height: auto;
  object-fit: contain;               /* NO CUT */
  object-position: center;
  display: block;
    /* =========================================================
   VB FEATURED WORK — PRO MARQUEE (FIX SIZE + AUTO SCROLL)
   Paste this at VERY END of style.css
========================================================= */

/* viewport */
.vbVS{
  position: relative;
  overflow: hidden !important;      /* marquee look */
  width: 100%;
  border-radius: 18px;
}

/* track */
.vbVS__track{
  display: flex !important;
  align-items: center;
  gap: 12px !important;
  width: max-content;
  will-change: transform;

  /* auto animation */
 

/* pause on hover (desktop) */
@media (hover:hover){
  .vbVS:hover .vbVS__track{ animation-play-state: paused; }
}

/* respect reduced motion (mobile accessibility) */
@media (prefers-reduced-motion: reduce){
  .vbVS{ overflow-x: auto !important; }
  .vbVS__track{
    animation: none !important;
    padding-bottom: 6px;
  }
}

/* card sizing — SAME FEEL in desktop ON/OFF */
.vbCard{
  flex: 0 0 auto !important;
  width: clamp(170px, 28vw, 260px) !important;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
}

/* thumbnail — NO CROP (contain) */
.vbCard__img{
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  display: block;
  object-fit: contain !important;     /* no crop */
  object-position: center;
  background: #0b0f14;                /* fills empty sides */
}

/* optional: arrows (buttons) — keep visible only on wide screens */
.vbVideoStrip__actions{ display:flex; gap:10px; }
@media (max-width: 860px){
  .vbVideoStrip__actions{ display:none !important; }
}

@keyframes vbVS_marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-1 * var(--vbVS-distance, 900px))); }
}
    vbVS__track{
  animation: vbVS_marquee var(--vbVS-dur, 28s) linear infinite;
}
    @keyframes vbVS_marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-1 * var(--vbVS-distance, 900px))); }
}
    .vbAuthority{
  margin-top:30px;
  padding-top:10px;
    max-width:1100px;
margin-left:auto;
margin-right:auto;
}

.vbAuthGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin-top:20px;
}

.vbAuthTitle{
  font-weight:700;
  font-size:15px;
  margin-bottom:10px;
}

.vbAuthText{
  font-size:13px;
  opacity:0.8;
  line-height:1.6;
}

.vbAuthList{
  padding-left:18px;
  font-size:13px;
  opacity:0.85;
  line-height:1.7;
}

@media(max-width:900px){
  .vbAuthGrid{
    grid-template-columns:1fr;
  }
}
    /* FIX: Remove white box behind More button */
.topbar .menu-item,
.topbar .menu-item a,
.topbar .dropdown-toggle {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
    @media (max-width: 768px){
  .topbar nav{
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
}
 /* ===== Mobile Panel FIX ===== */

.vbMobilePanel {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  background: #ffffff;
  z-index: 99999;
  padding: 20px;
  display: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.vbMobilePanel.is-open {
  display: block;
}
    /* ===== Mobile Drawer Menu (Premium) ===== */

/* Burger button look */
#vbBurger{
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Drawer panel */
#vbMobilePanel{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: min(82vw, 320px);
  padding: 18px 16px;
  background: rgba(8, 16, 32, 0.98);
  backdrop-filter: blur(10px);
  box-shadow: 18px 0 40px rgba(0,0,0,.35);
  z-index: 10001;

  transform: translateX(-105%);
  transition: transform .28s ease;
}

/* Open state */
#vbMobilePanel.is-open{
  transform: translateX(0);
}

/* Links style */
#vbMobilePanel a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  margin: 6px 0;
  border-radius: 12px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-size: 16px;
}

#vbMobilePanel a:hover{
  background: rgba(255,255,255,.08);
}

/* Overlay (backdrop) */
.vbOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10000;
  opacity: 0;
  transition: opacity .2s ease;
}

.vbOverlay.show{
  opacity: 1;
}

/* Stop body scroll when menu open */
body.vbNoScroll{
  overflow: hidden;
}
/* Desktop: burger hide */
@media (min-width: 901px){
  #vbBurger{ display:none !important; }
}

/* Mobile: top nav hide, burger show */
@media (max-width: 900px){
  .vbNav{ display:none !important; }
  #vbBurger{ display:inline-flex !important; }
}   
    /* =========================
   VB Mobile Drawer Menu
   (Sidat-style clean)
========================= */

/* drawer */
#vbMobilePanel{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: min(84vw, 320px);
  padding: 16px 14px;
  background: rgba(8, 16, 32, 0.98);
  backdrop-filter: blur(10px);
  box-shadow: 18px 0 40px rgba(0,0,0,.35);
  z-index: 10001;

  transform: translateX(-105%);
  transition: transform .28s ease;
}

#vbMobilePanel.is-open{
  transform: translateX(0);
}

/* top row */
#vbMobilePanel .vbMobileTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 12px;
}

#vbMobilePanel .vbMobileTop strong{
  color:#fff;
  font-size: 16px;
  letter-spacing: .2px;
}

/* close btn */
#vbCloseMenu{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
}

/* links */
#vbMobilePanel a{
  display:flex;
  align-items:center;
  padding: 12px 12px;
  margin: 6px 0;
  border-radius: 12px;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-size: 16px;
}

#vbMobilePanel a:hover{
  background: rgba(255,255,255,.08);
}

/* active link */
#vbMobilePanel a.active{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.14);
}

/* burger button style */
#vbBurger{
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

/* overlay */
.vbOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10000;
  opacity: 0;
  transition: opacity .2s ease;
}
.vbOverlay.show{ opacity: 1; }

body.vbNoScroll{ overflow:hidden; }

/* Desktop/Mobile toggle */
@media (min-width: 901px){
  #vbBurger{ display:none !important; }
}
@media (max-width: 900px){
  .vbNav{ display:none !important; }
  #vbBurger{ display:inline-flex !important; }
}
    /* ==============================
   HEADER COLORS + BURGER SHOW ALL
   Paste at END of style.css
============================== */

/* Header links + logo WHITE */
.vbHeader a,
.vbHeader .vbLogo,
.vbHeader .vbLogo span{
  color:#fff !important;
  text-decoration:none !important;
}

/* Hover */
.vbHeader a:hover{
  opacity:.9;
}

/* Burger button ALWAYS show (desktop + mobile) */
#vbBurger{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff !important;      /* ☰ icon white */
  cursor:pointer;
}

/* Agar kisi global CSS ne links ko blue kar diya ho */
.vbHeader a:visited,
.vbHeader a:active{
  color:#fff !important;
}

/* Optional: top nav ko bhi white ensure */
.vbNav a{
  color:#fff !important;
}

/* Optional: logo underline remove if browser default */
.vbLogo{
  text-decoration:none !important;
}
    /* ===== Force white nav & logo ===== */
.vbHeader a,
.vbNav a,
.vbLogo {
  color: #fff !important;
  text-decoration: none;
}

/* ===== Burger always visible ===== */
#vbBurger{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background:transparent;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
}

/* Hide normal nav on all screens */
.vbNav{
  display:none !important;
}

/* ===== Mobile Panel styling ===== */
#vbMobilePanel{
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:260px;
  background:#0f172a;
  padding:20px;
  z-index:9999;
}

#vbMobilePanel a{
  display:block;
  padding:12px 0;
  color:#fff;
  text-decoration:none;
}

#vbMobilePanel[hidden]{
  display:none !important;
}

.vbNoScroll{
  overflow:hidden;
}
    /* ===== Header layout: burger top-right ===== */
.vbHeaderInner{
  position: relative;
}

/* Burger ko right corner */
#vbBurger{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
}

/* Agar logo aur burger overlap kar rahe hon to */
.vbLogo{
  display: inline-block;
  padding-right: 60px; /* burger ke liye space */
}

/* ===== Mobile panel links vertical (upar se neechay) ===== */
#vbMobilePanel a{
  display: block !important;
  width: 100%;
  padding: 12px 0;
}

/* Extra: links ka gap clean */
#vbMobilePanel{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
    #vbMobilePanel{
  white-space: normal !important;
}
#vbMobilePanel a{
  white-space: normal !important;
}
    /* ================================
   HEADER: Logo left, Burger RIGHT
   ================================ */
    #vbBurger{
  margin-left:auto;
  position:relative;
  z-index:10001;
}
#vbMobilePanel{ z-index:10000; }

.vbHeaderInner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Logo ka color white + underline off */
.vbLogo,
.vbLogo:link,
.vbLogo:visited{
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Desktop nav normal */
.vbNav{
  display: flex;
  gap: 18px;
}

/* CTA buttons side */
.vbHeaderCtas{
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Burger right side */
#vbBurger{
  margin-left: auto;
}

/* Desktop: burger hide */
@media (min-width: 901px){
  #vbBurger{ display:none !important; }
  #vbMobilePanel{ display:none !important; }
}

/* Mobile: top nav + ctas hide, burger show */
@media (max-width: 900px){
  .vbNav{ display:none !important; }
  .vbHeaderCtas{ display:none !important; }
  #vbBurger{ display:inline-flex !important; }
}


/* ================================
   MOBILE DRAWER: Clean vertical menu
   ================================ */
    /* Mobile drawer links clean (no blue/underline) */
#vbMobilePanel a{
  color:#fff !important;
  text-decoration:none !important;
  display:block;
  padding:10px 0;
}
#vbMobilePanel a:hover{ opacity:.9; }

/* Drawer base */
#vbMobilePanel{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 280px;
  padding: 16px 16px 20px;
  background: #0b1f3a;   /* dark/navy look */
  z-index: 9999;

  /* slide effect */
  transform: translateX(-110%);
  transition: transform .25s ease;
}

/* Jab hidden attribute remove ho, panel show */
#vbMobilePanel:not([hidden]){
  transform: translateX(0);
}

/* Top row (Menu + X) */
#vbMobilePanel .vbMobileTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* Links clean (no blue / no underline) */
#vbMobilePanel a{
  display: block !important;
  padding: 10px 6px;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 10px;
}

/* Hover/active feel */
#vbMobilePanel a:hover{
  background: rgba(255,255,255,.10);
}
/* ===== Enterprise Header (VibrantBiz) ===== */
.vbHeader{ position:sticky; top:0; z-index:999; background:#0b1f3a; }
.vbHeaderInner{ display:flex; align-items:center; gap:16px; padding:12px 14px; }
.vbLogo{ color:#fff !important; text-decoration:none !important; font-weight:700; letter-spacing:.2px; }

.vbNav{ display:flex; align-items:center; gap:10px; }
.vbNavLink{ color:#fff !important; text-decoration:none !important; padding:10px 10px; border-radius:10px; }
.vbNavLink:hover{ background:rgba(255,255,255,.08); }

.vbNavItem{ position:relative; }
.vbDropBtn{
  background:transparent; border:1px solid rgba(255,255,255,.18);
  color:#fff; padding:9px 10px; border-radius:10px; cursor:pointer;
}
.vbDrop{
  position:absolute; top:calc(100% + 10px); left:0;
  min-width:240px; padding:10px; border-radius:14px;
  background:rgba(10,15,25,.98); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
    display: none;
}
.vbDrop a{ display:block; padding:10px 12px; border-radius:12px; color:#fff !important; text-decoration:none !important; }
.vbDrop a:hover{ background:rgba(255,255,255,.08); }
    @media (min-width: 901px){
  .vbNavItem:hover .vbDrop{
    display: block !important;
  }
}

.vbHeaderRight{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.vbCta{
  background:#1e40af; color:#fff !important; text-decoration:none !important;
  padding:10px 14px; border-radius:12px; font-weight:600;
}
.vbBurger{
  width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08);
  color:#fff; cursor:pointer;
}

/* ===== Mobile Drawer ===== */
.vbMobilePanel{
  position:fixed; top:0; left:0; height:100vh; width:min(84vw,320px);
  background:#0b1f3a; padding:16px; z-index:10000;
}
.vbMobileTop{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; color:#fff; }
.vbClose{ width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; }

.vbMobileSection{ margin:10px 0; }
.vbMobileTitle{ color:rgba(255,255,255,.70); font-size:13px; margin:10px 0 6px; }
.vbMobilePanel a{ display:block; color:#fff !important; text-decoration:none !important; padding:10px 10px; border-radius:12px; }
.vbMobilePanel a:hover{ background:rgba(255,255,255,.08); }
.vbMobileCta{ margin-top:10px; background:#1e40af; text-align:center; font-weight:600; }

/* Responsive */
@media (min-width: 901px){
  #vbBurger{ display:none !important; }
  #vbMobilePanel{ display:none !important; }
}
@media (max-width: 900px){
  .vbNav{ display:none !important; }
  #vbBurger{ display:inline-flex !important; }
} 
    /* ===============================
   DESKTOP DROPDOWN (Platform/Resources/Company)
   =============================== */

/* nav layout */
.vbNav{
  display: flex;
  align-items: center;
  gap: 14px;
}

/* each dropdown item */
.vbNavItem{
  position: relative;
}

/* dropdown button */
.vbDropBtn{
  background: transparent;
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}

/* dropdown panel */
.vbDrop{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: rgba(11,18,42,.98);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  z-index: 9999;

  /* hide default */
  display: none;
}
    .vbHeaderInner{ position: relative; }

#vbBurger{
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10001;
}

/* links inside dropdown */
.vbDrop a{
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  color: #e9f1ff;
  text-decoration: none;
}

.vbDrop a:hover{
  background: rgba(82,195,255,.14);
}

/* show dropdown on hover (desktop) */
@media (min-width: 901px){
  .vbNavItem{ position: relative; }

  /* hover open */
  .vbNavItem:hover .vbDrop{
    display: block;
  }

  /* IMPORTANT: hidden ho to hamesha band rahe */
  .vbNavItem .vbDrop[hidden]{
    display: none !important;
  }
}

/* dropdown links */
.vbDrop a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:#fff !important;
  text-decoration:none !important;
}

.vbDrop a:hover{
  background:rgba(255,255,255,.08);
}

/* show only on hover (desktop only) */
@media (min-width: 901px){
  .vbNavItem:hover > .vbDrop{
    display:block;
  }
}

/* prevent clipping */
.vbHeader,
.vbHeaderInner,
.vbNav{
  overflow:visible;
}
  /* Mobile: top dropdown nav band, burger ON */
@media (max-width: 900px){
  .vbNav{ display:none !important; }
  .vbHeaderRight{ display:none !important; }  /* CTA area mobile me drawer me jayega */
  #vbBurger{ display:inline-flex !important; }
} 
    /* ===== Text Only Enterprise Nav ===== */
    .vbHeader,
.vbHeaderInner,
.vbNav {
  overflow: visible;
}

.vbNav{
  display:flex;
  align-items:center;
  gap:28px;
}

/* Remove old button look */
.vbDropBtn{
  all:unset;
}

/* Text navigation */
.vbNavText{
  position:relative;
  cursor:pointer;
  color:#ffffff;
  font-weight:500;
  padding:6px 0;
}

/* Animated underline */
.vbNavText::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:2px;
  background:#52c3ff;
  transition:width .25s ease;
}

.vbNavText:hover::after{
  width:100%;
}

/* Arrow rotate animation */
.vbArrow{
  font-size:12px;
  margin-left:6px;
  transition:transform .2s ease;
}

.vbNavText:hover .vbArrow{
  transform:rotate(180deg);
}
    .vbCampaignGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:20px;
}

.vbCampaignCard{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:16px;
  overflow:hidden;
  transition:0.3s ease;
}

.vbCampaignCard:hover{
  transform:translateY(-5px);
  border-color:rgba(255,255,255,0.2);
}

.vbCampaignCard img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

.vbCampaignText{
  padding:15px;
}

.vbCampaignText h3{
  margin-bottom:8px;
  font-size:18px;
}

.vbCampaignText p{
  font-size:14px;
  opacity:0.85;
  line-height:1.5;
}

@media(max-width:900px){
  .vbCampaignGrid{
    grid-template-columns:1fr;
  }
}
    VB MASTER TICKER (ONE ONLY)
============================ */
:root{
  --vbMT-top: var(--topbarH, 68px);
  --vbMT-speed: 28s; /* MEDIUM */
}

.vbMasterTicker{
  position: sticky;
  top: var(--vbMT-top);
  z-index: 998;
  background: rgba(10,15,24,.70);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.vbMT__inner{
  max-width: var(--max, 1160px);
  margin: 0 auto;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vbMT__badge{
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .22em;
  padding: 6px 10px;
  border-radius: 999px;
  color: #061019;
  background: linear-gradient(90deg, #7c6fff, #2dd4bf, #22c55e);
  white-space: nowrap;
}

.vbMT__track{
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.vbMT__row{
  display: inline-flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
  padding-left: 100%;
  animation: vbMTMove var(--vbMT-speed) linear infinite;
  will-change: transform;
}

.vbMT__item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255,255,255,.88);
}

.vbMT__sep{
  opacity: .55;
}

.vbMT__tag{
  font-weight: 800;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

.vbMT__muted{
  color: rgba(255,255,255,.70);
  font-weight: 700;
}

/* #vbMasterTicker:hover .vbMT__row{ animation-play-state: paused; } */
@keyframes vbMTMove{
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@media (max-width: 768px){
  :root{ --vbMT-speed: 34s; } /* mobile: slightly slower */
  .vbMT__inner{ padding: 8px 12px; }
  .vbMT__item{ font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .vbMT__row{ animation: none; padding-left: 0; }
}
/* ============================ */
   /* ===== VB MASTER TICKER ===== */
.vbMasterTicker{
  position: relative;
  margin: 14px auto 0;
  width: min(1200px, calc(100% - 24px));
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
}

.vbMT__inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 10px 12px;
}

.vbMT__badge{
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,255,180,.12);
  border: 1px solid rgba(0,255,180,.35);
}

.vbMT__track{
  position: relative;
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.vbMT__run{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: vbMT_scroll 28s linear infinite;
}
    /* Hover par pause */
#vbMasterTicker:hover .vbMT__run{
  animation-play-state: paused !important;
}

.vbMT__row{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-right: 28px;
}

.vbMT__item{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 13px;
}

.vbMT__tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 800;
  background: rgba(52,195,255,.12);
  border: 1px solid rgba(52,195,255,.28);
}

.vbMT__muted{
  opacity: .70;
  font-weight: 700;
}

.vbMT__sep{
  opacity: .35;
  font-weight: 900;
}

@keyframes vbMT_scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 520px){
  .vbMT__item{ font-size: 12px; }
}

    /* ===== VB HEADER FINAL CLEAN FIX ===== */

header.topbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  background: rgba(4, 22, 58, 0.96) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

header.topbar .wrap.topbar__inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  min-height:78px !important;
  padding:12px 18px !important;
  position:relative !important;
  z-index:2 !important;
}

header.topbar .logo{
  display:flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  position:relative !important;
  z-index:3 !important;
}

header.topbar .logo a{
  display:inline-flex !important;
  align-items:center !important;
  text-decoration:none !important;
}

.vb-logo{
  display:block !important;
  height:44px !important;
  width:auto !important;
  max-width:none !important;
}

.menu-toggle{
  display:none !important;
  background:none !important;
  border:none !important;
  color:#ffffff !important;
  font-size:28px !important;
  line-height:1 !important;
  cursor:pointer !important;
  padding:4px 8px !important;
  position:relative !important;
  z-index:4 !important;
}

header.topbar .nav{
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  flex:1 1 auto !important;
  justify-content:center !important;
  position:relative !important;
  z-index:3 !important;
}

header.topbar .nav a{
  color:#eaf1ff !important;
  text-decoration:none !important;
  font-size:15px !important;
  font-weight:600 !important;
  white-space:nowrap !important;
  display:inline-block !important;
  pointer-events:auto !important;
}

.header-cta{
  flex:0 0 auto !important;
  position:relative !important;
  z-index:3 !important;
}

@media (max-width: 992px){
  .menu-toggle{
    display:block !important;
  }

  .header-cta{
    display:none !important;
  }

  header.topbar .nav{
    display:none !important;
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    background:#07224d !important;
    border-top:1px solid rgba(255,255,255,0.08) !important;
    padding:16px 18px 20px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
    z-index:99999 !important;
  }

  header.topbar .nav.nav-open{
    display:flex !important;
  }

  header.topbar .nav a{
    font-size:16px !important;
    width:100% !important;
    padding:4px 0 !important;
  }

  .vb-logo{
    height:40px !important;
  }
}

@media (max-width: 576px){
  header.topbar .wrap.topbar__inner{
    min-height:72px !important;
    padding:10px 14px !important;
  }

  .vb-logo{
    height:38px !important;
  }

  .menu-toggle{
    font-size:26px !important;
  }
}
    /* ===== VB LOGO FORCE FIX ===== */
header.topbar .logo img.vb-logo{
  height: 38px !important;
  width: auto !important;
  max-height: 38px !important;
  max-width: none !important;
  object-fit: contain !important;
}
    @media (max-width: 576px){
  header.topbar .logo img.vb-logo{
    height: 34px !important;
    max-height: 34px !important;
  }
}
    /* VB SUPER FORCE LOGO FIX */
#vb-header header.topbar .logo img.vb-logo{
  height: 36px !important;
  max-height: 36px !important;
  width: auto !important;
  max-width: 160px !important;
  object-fit: contain !important;
  display: block !important;
}

#vb-header header.topbar .logo{
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

#vb-header header.topbar{
  overflow: hidden !important;
}

@media (min-width: 993px){
  #vb-header header.topbar .logo img.vb-logo{
    height: 42px !important;
    max-height: 42px !important;
    max-width: 190px !important;
  }
}
    /* ===== VB ICON GRID MENU FINAL ===== */

#vb-header{
  position:relative;
  z-index:99999;
}

header.topbar{
  position:sticky;
  top:0;
  z-index:99999;
  background:rgba(4,22,58,0.96);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

header.topbar .wrap.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:72px;
  padding:10px 16px;
  position:relative;
}

header.topbar .logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.vb-logo{
  display:block;
  height:42px !important;
  width:auto !important;
  max-width:190px !important;
  object-fit:contain !important;
}

.desktop-nav{
  display:flex;
  align-items:center;
  gap:16px;
  flex:1 1 auto;
  justify-content:center;
}

.desktop-nav a{
  color:#eaf1ff;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
}

.header-cta{
  flex:0 0 auto;
}

.apps-toggle{
  display:none;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  color:#ffffff;
  font-size:24px;
  line-height:1;
  border-radius:10px;
  width:44px;
  height:44px;
  cursor:pointer;
}



@media (max-width: 900px){
  .desktop-nav,
  .header-cta{
    display:none;
  }

  .apps-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  header.topbar .wrap.topbar__inner{
    min-height:68px;
    padding:10px 14px;
  }

  .vb-logo{
    height:38px !important;
    max-width:170px !important;
  }
}
    /* ===== VB APPS PANEL FINAL REAL FIX ===== */

#vb-header .apps-panel{
  display:none !important;
  position:absolute !important;
  top:78px !important;
  right:14px !important;
  width:min(92vw, 360px) !important;
  background:#f3f4f7 !important;
  border-radius:22px !important;
  padding:18px !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.35) !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:14px !important;
  z-index:999999 !important;
}

#vb-header .apps-panel.apps-open{
  display:grid !important;
}

#vb-header .app-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  text-decoration:none !important;
  color:#1d2433 !important;
  background:#ffffff !important;
  border-radius:18px !important;
  padding:16px 10px !important;
  min-height:92px !important;
  text-align:center !important;
}

#vb-header .app-icon{
  font-size:24px !important;
  line-height:1 !important;
}

#vb-header .app-label{
  font-size:14px !important;
  font-weight:600 !important;
}

#vb-header .apps-toggle{
  display:none !important;
}

@media (max-width: 900px){
  #vb-header .apps-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #vb-header .desktop-nav,
  #vb-header .header-cta{
    display:none !important;
  }
}

@media (min-width: 901px){
  #vb-header .apps-panel{
    display:none !important;
  }
}
#vb-header .apps-toggle{
  display:none !important;
}

#vb-header .apps-panel{
  display:none !important;
  position:absolute !important;
  top:78px !important;
  right:14px !important;
  width:min(92vw, 360px) !important;
  background:#f3f4f7 !important;
  border-radius:22px !important;
  padding:18px !important;
  box-shadow:0 20px 50px rgba(0,0,0,0.35) !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:14px !important;
  z-index:999999 !important;
}

#vb-header .apps-panel.apps-open{
  display:grid !important;
}

#vb-header .app-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  text-decoration:none !important;
  color:#1d2433 !important;
  background:#ffffff !important;
  border-radius:18px !important;
  padding:16px 10px !important;
  min-height:92px !important;
  text-align:center !important;
}

#vb-header .app-icon{
  font-size:24px !important;
  line-height:1 !important;
}

#vb-header .app-label{
  font-size:14px !important;
  font-weight:600 !important;
}

@media (max-width: 900px){
  #vb-header .apps-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #vb-header .desktop-nav,
  #vb-header .header-cta{
    display:none !important;
  }
}

@media (min-width: 901px){
  #vb-header .apps-panel{
    display:none !important;
  }
}
    /* ===== VB ULTIMATE HEADER FIX ===== */

#vb-header .apps-panel{
  display:none !important;
}

#vb-header .apps-panel.apps-open{
  display:grid !important;
}

#vb-header .app-item{
  text-decoration:none !important;
  color:#1d2433 !important;
}

#vb-header .app-item:link,
#vb-header .app-item:visited,
#vb-header .app-item:hover,
#vb-header .app-item:active{
  text-decoration:none !important;
  color:#1d2433 !important;
}

#vb-header a{
  text-decoration:none !important;
}

#vb-header .vb-logo{
  height:42px !important;
  width:auto !important;
  max-width:190px !important;
  display:block !important;
  object-fit:contain !important;
}

@media (max-width: 900px){
  #vb-header .desktop-nav,
  #vb-header .header-cta{
    display:none !important;
  }

  #vb-header .apps-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #vb-header .vb-logo{
    height:38px !important;
    max-width:170px !important;
  }
}

@media (min-width: 901px){
  #vb-header .apps-panel{
    display:none !important;
  }

  #vb-header .apps-toggle{
    display:none !important;
  }
}
    /* Header nav links */
#vb-header nav a{
color:#dbe7ff;
text-decoration:none;
}

/* hover */
#vb-header nav a:hover{
color:#ffffff;
}

/* active page */
#vb-header nav a.active{
color:#ffffff;
font-weight:600;
}
   kb-hero{
margin-bottom:30px;
}

.kb-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:40px;
}

.kb-card{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:14px;
padding:22px;
}

.kb-card h3{
margin-bottom:12px;
}

.kb-card ul{
list-style:none;
padding:0;
}

.kb-card li{
margin:8px 0;
}

.kb-card a{
color:#dbe7ff;
text-decoration:none;
}

.kb-card a:hover{
color:#7bb4ff;
}

.kb-process{
margin-top:30px;
}

.kb-steps{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:15px;
}

.step{
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
padding:18px;
border-radius:12px;
}
    /* ===== HOME MOBILE VISIBILITY + SPACING FIX ===== */

@media (max-width: 900px){

  .whySection,
  .commitSection,
  .servicesSection,
  .processSection,
  .caseStudySection,
  .ecosystemSection{
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .whySection h2,
  .commitSection h2,
  .servicesSection h2,
  .processSection h2,
  .caseStudySection h2,
  .ecosystemSection h2{
    color: #ffffff !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
  }

  .whySection p,
  .commitSection p,
  .servicesSection p,
  .processSection p,
  .caseStudySection p,
  .ecosystemSection p{
    color: rgba(234,241,255,0.88) !important;
    line-height: 1.75 !important;
  }

  .whyGrid,
  .commitGrid,
  .servicesGrid,
  .processGrid,
  .ecosystemGrid{
    gap: 18px !important;
    margin-top: 18px !important;
  }

  .whyCard,
  .commitCard,
  .serviceCard,
  .processCard,
  .ecosystemCard,
  .caseCard{
    padding: 22px !important;
    border-radius: 20px !important;
  }

  .whyCard h3,
  .commitCard h3,
  .serviceCard h3,
  .processCard h3,
  .ecosystemCard h3,
  .caseCard h3{
    color: #ffffff !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
  }

  .whyCard p,
  .commitCard p,
  .serviceCard p,
  .processCard p,
  .ecosystemCard p,
  .caseCard p{
    color: rgba(234,241,255,0.84) !important;
    line-height: 1.7 !important;
    margin-bottom: 0 !important;
  }

  .wrap,
  .page,
  .container{
    width: min(92vw, 100%) !important;
  }
}
    @media (max-width: 900px){
  .whySection .muted,
  .commitSection .muted,
  .servicesSection .muted,
  .processSection .muted,
  .caseStudySection .muted,
  .ecosystemSection .muted,
  .whyCard .muted,
  .commitCard .muted,
  .serviceCard .muted,
  .processCard .muted,
  .caseCard .muted{
    color: rgba(234,241,255,0.82) !important;
  }
}
    /* ===== MOBILE VISUAL FIX – VIBRANTBIZ HOME ===== */

@media (max-width: 900px){

  /* section spacing */
  section{
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  /* container breathing space */
  .wrap,
  .page,
  .container{
    width: min(92vw,100%) !important;
  }

  /* headings */
  h1,h2,h3{
    color:#ffffff !important;
    line-height:1.25 !important;
  }

  /* paragraphs */
  p{
    color:rgba(234,241,255,0.88) !important;
    line-height:1.7 !important;
  }

  /* muted text fix */
  .muted{
    color:rgba(234,241,255,0.78) !important;
  }

  /* grid spacing */
  .whyGrid,
  .commitGrid,
  .servicesGrid,
  .processGrid,
  .ecosystemGrid{
    gap:20px !important;
    margin-top:18px !important;
  }

  /* card spacing */
  .whyCard,
  .commitCard,
  .serviceCard,
  .processCard,
  .ecosystemCard,
  .caseCard{
    padding:24px !important;
    border-radius:20px !important;
  }

  /* card headings */
  .whyCard h3,
  .commitCard h3,
  .serviceCard h3,
  .processCard h3,
  .ecosystemCard h3,
  .caseCard h3{
    margin-bottom:10px !important;
    color:#ffffff !important;
  }

  /* card paragraph */
  .whyCard p,
  .commitCard p,
  .serviceCard p,
  .processCard p,
  .ecosystemCard p,
  .caseCard p{
    color:rgba(234,241,255,0.84) !important;
  }

  /* hero spacing */
  .hero{
    padding-top:60px !important;
    padding-bottom:40px !important;
  }

  /* buttons spacing */
  .btn{
    margin-top:8px;
  }

}
    .goog-te-menu-value span{
font-weight:600;
}
    #google_translate_element{
margin-left:20px;
}
    /* RTL languages */
body.rtl {
direction: rtl;
text-align: right;
}

/* LTR languages */
body.ltr {
direction: ltr;
text-align: left;
}
    /* ===== Safe RTL/LTR fix without disturbing Google Translator ===== */

/* English default */
body {
  direction: ltr;
  text-align: left;
}

/* Jab Google Translate Urdu ya Arabic kare */
body.translated-rtl,
body.translated-rtl p,
body.translated-rtl h1,
body.translated-rtl h2,
body.translated-rtl h3,
body.translated-rtl h4,
body.translated-rtl h5,
body.translated-rtl h6,
body.translated-rtl li,
body.translated-rtl .card,
body.translated-rtl .sectionTitle,
body.translated-rtl .muted,
body.translated-rtl .kpi,
body.translated-rtl span,
body.translated-rtl div {
  direction: rtl;
  text-align: right;
}

/* English fields readable rahain */
body.translated-rtl input[type="email"],
body.translated-rtl input[type="url"],
body.translated-rtl input[type="number"] {
  direction: ltr;
  text-align: left;
}

/* Lists */
body.translated-rtl ul,
body.translated-rtl ol {
  padding-right: 22px;
  padding-left: 0;
}

/* Logo aur translator ko force na karo */
.logo,
.logo * ,
#google_translate_element,
#google_translate_element * {
  direction: ltr;
}
    body{direction:ltr;text-align:left;}
body.translated-rtl, body.translated-rtl p, body.translated-rtl h1, body.translated-rtl h2, body.translated-rtl h3, body.translated-rtl h4, body.translated-rtl h5, body.translated-rtl h6, body.translated-rtl li, body.translated-rtl span, body.translated-rtl div{direction:rtl;text-align:right;}
body.translated-rtl input[type="email"], body.translated-rtl input[type="url"], body.translated-rtl input[type="number"]{direction:ltr;text-align:left;}
body.translated-rtl ul, body.translated-rtl ol{padding-right:22px;padding-left:0;}
.logo, .logo *, #google_translate_element, #google_translate_element *{direction:ltr;}
    body {
  direction: ltr;
  text-align: left;
}

body.translated-rtl h1,
body.translated-rtl h2,
body.translated-rtl h3,
body.translated-rtl h4,
body.translated-rtl h5,
body.translated-rtl h6,
body.translated-rtl p,
body.translated-rtl li,
body.translated-rtl .sectionTitle,
body.translated-rtl .muted {
  direction: rtl;
  text-align: right;
}

body.translated-rtl input[type="email"],
body.translated-rtl input[type="url"],
body.translated-rtl input[type="number"] {
  direction: ltr;
  text-align: left;
}

body.translated-rtl ul,
body.translated-rtl ol {
  padding-right: 22px;
  padding-left: 0;
}
    /* English default */
body {
direction: ltr;
text-align: left;
}

/* Urdu / Arabic */
body.rtl-lang h1,
body.rtl-lang h2,
body.rtl-lang h3,
body.rtl-lang h4,
body.rtl-lang h5,
body.rtl-lang h6,
body.rtl-lang p,
body.rtl-lang li,
body.rtl-lang span,
body.rtl-lang div {
direction: rtl;
text-align: right;
}

/* Email fields readable */
body.rtl-lang input[type="email"],
body.rtl-lang input[type="url"],
body.rtl-lang input[type="number"] {
direction: ltr;
text-align: left;
}

/* Lists */
body.rtl-lang ul,
body.rtl-lang ol {
padding-right:22px;
padding-left:0;
}
    /* ===== INDEX RTL HARD FIX ===== */

html[dir="rtl"] body,
body.rtl-lang{
  direction: rtl !important;
  text-align: right !important;
}

/* lower home sections */
html[dir="rtl"] .vbWhy,
html[dir="rtl"] .vbCommit,
html[dir="rtl"] .vbServices,
html[dir="rtl"] .vbProcess,
html[dir="rtl"] .vbVisuals,
html[dir="rtl"] .vbTrustStrip,
html[dir="rtl"] #case-studies,
body.rtl-lang .vbWhy,
body.rtl-lang .vbCommit,
body.rtl-lang .vbServices,
body.rtl-lang .vbProcess,
body.rtl-lang .vbVisuals,
body.rtl-lang .vbTrustStrip,
body.rtl-lang #case-studies{
  direction: rtl !important;
  text-align: right !important;
}

/* wrappers */
html[dir="rtl"] .wrap,
html[dir="rtl"] .container,
html[dir="rtl"] .page,
body.rtl-lang .wrap,
body.rtl-lang .container,
body.rtl-lang .page{
  direction: rtl !important;
  text-align: right !important;
}

/* grids */
html[dir="rtl"] .vbWhyGrid,
html[dir="rtl"] .vbCommitGrid,
html[dir="rtl"] .vbServicesGrid,
html[dir="rtl"] .vbProcessGrid,
html[dir="rtl"] .vbVisualGrid,
html[dir="rtl"] .kpi,
body.rtl-lang .vbWhyGrid,
body.rtl-lang .vbCommitGrid,
body.rtl-lang .vbServicesGrid,
body.rtl-lang .vbProcessGrid,
body.rtl-lang .vbVisualGrid,
body.rtl-lang .kpi{
  direction: rtl !important;
}

/* cards */
html[dir="rtl"] .vbWhyCard,
html[dir="rtl"] .vbCommitCard,
html[dir="rtl"] .vbServiceCard,
html[dir="rtl"] .vbProcessCard,
html[dir="rtl"] .vbVisualCard,
html[dir="rtl"] #case-studies .card,
body.rtl-lang .vbWhyCard,
body.rtl-lang .vbCommitCard,
body.rtl-lang .vbServiceCard,
body.rtl-lang .vbProcessCard,
body.rtl-lang .vbVisualCard,
body.rtl-lang #case-studies .card{
  text-align: right !important;
  direction: rtl !important;
}

/* headings and text inside lower section cards */
html[dir="rtl"] .vbWhyCard h2,
html[dir="rtl"] .vbWhyCard h3,
html[dir="rtl"] .vbCommitCard h2,
html[dir="rtl"] .vbCommitCard h3,
html[dir="rtl"] .vbServiceCard h2,
html[dir="rtl"] .vbServiceCard h3,
html[dir="rtl"] .vbProcessCard h2,
html[dir="rtl"] .vbProcessCard h3,
html[dir="rtl"] .vbVisualCard h2,
html[dir="rtl"] .vbVisualCard h3,
html[dir="rtl"] #case-studies h2,
html[dir="rtl"] #case-studies h3,
html[dir="rtl"] .vbWhy p,
html[dir="rtl"] .vbCommit p,
html[dir="rtl"] .vbServices p,
html[dir="rtl"] .vbProcess p,
html[dir="rtl"] .vbVisuals p,
html[dir="rtl"] #case-studies p,
body.rtl-lang .vbWhyCard h2,
body.rtl-lang .vbWhyCard h3,
body.rtl-lang .vbCommitCard h2,
body.rtl-lang .vbCommitCard h3,
body.rtl-lang .vbServiceCard h2,
body.rtl-lang .vbServiceCard h3,
body.rtl-lang .vbProcessCard h2,
body.rtl-lang .vbProcessCard h3,
body.rtl-lang .vbVisualCard h2,
body.rtl-lang .vbVisualCard h3,
body.rtl-lang #case-studies h2,
body.rtl-lang #case-studies h3,
body.rtl-lang .vbWhy p,
body.rtl-lang .vbCommit p,
body.rtl-lang .vbServices p,
body.rtl-lang .vbProcess p,
body.rtl-lang .vbVisuals p,
body.rtl-lang #case-studies p{
  text-align: right !important;
  direction: rtl !important;
}

/* bullets / inline items */
html[dir="rtl"] .vbHero__bullets,
html[dir="rtl"] .vbTrustStrip__items,
body.rtl-lang .vbHero__bullets,
body.rtl-lang .vbTrustStrip__items{
  direction: rtl !important;
  justify-content: flex-start !important;
}

/* buttons row */
html[dir="rtl"] .vbHero__cta,
html[dir="rtl"] .btnRow,
body.rtl-lang .vbHero__cta,
body.rtl-lang .btnRow{
  direction: rtl !important;
  justify-content: flex-start !important;
}

/* keep translator and logo normal */
html[dir="rtl"] #google_translate_element,
html[dir="rtl"] .logo,
body.rtl-lang #google_translate_element,
body.rtl-lang .logo{
  direction: ltr !important;
  text-align: left !important;
}
    /* RTL FIX START */
html[dir="rtl"] .vbVisualGrid{
direction:rtl;
}

html[dir="rtl"] .vbVisualCard{
text-align:right;
}

html[dir="rtl"] .vbWhy,
html[dir="rtl"] .vbCommit,
html[dir="rtl"] .vbServices{
direction:rtl;
text-align:right;
}
/* RTL FIX END */