/* =========================
   ET-STYLE FONT SYSTEM
========================= */

/* Body / Navigation */
/* =========================================
   ET-LIKE TYPOGRAPHY SYSTEM (GLOBAL)
   Paste this at END of style.css
   Goal: compact + premium (like ET), not oversized
========================================= */

:root{
  /* Base text sizes */
  --fs-body: 15px;          /* desktop base */
  --fs-body-sm: 14px;       /* mobile base */
  --lh-body: 1.55;

  /* Muted */
  --muted: rgba(17,17,17,.72);

  /* Headings scale (ET style: strong but compact) */
  --h1: clamp(22px, 2.1vw, 26px);
  --h2: clamp(16px, 1.6vw, 20px);
  --h3: 14px;
  --h4: 13px;

  /* Card text */
  --card-title: 16px;
  --card-excerpt: 13px;

  /* Small meta */
  --meta: 12px;

  /* Fonts */
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Base */
html{ -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color:#111;
  text-rendering: optimizeLegibility;
}

/* Mobile */
@media (max-width: 560px){
  body{ font-size: var(--fs-body-sm); }
}

/* Links */
a{ color: inherit; }
a:hover{ text-decoration: none; }

/* Headings */
h1,h2,h3,h4{
  font-family: var(--font-head);
  color:#111;
  letter-spacing: -0.2px;
  line-height: 1.15;
  margin: 0;
}
h1{ font-size: var(--h1); font-weight: 700; }
h2{ font-size: var(--h2); font-weight: 700; }
h3{ font-size: var(--h3); font-weight: 500; }
h4{ font-size: var(--h4); font-weight: 400; }

/* Paragraphs */
p{
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}
@media (max-width: 560px){
  p{ font-size: 13.5px; }
}

/* Nav / menu text */
.nav__a,
.navDD__btn,
.mNav__a,
.mNav__dd summary{
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}

.glassHeader{ top: 42px; }

/* Small meta text everywhere */
small,
.t,
em,
.post time,
.railN,
.railT,
.heroLatest__card em{
  font-size: var(--meta);
  color: var(--muted);
}
/* ===== Sticky Top Breaking + Header (minimal) ===== */
.breaking--top{
  position: sticky;
  top: 0;
  z-index: 9999;
}

.glassHeader{
  position: sticky;
  top: 0;           /* default */
  z-index: 9998;
  background: #fff; /* so transparent overlap na ho */
}

/* ===== Your IO components (match ET-like compact look) ===== */

/* Category hero title + subtitle */
.catTitle{
  font-family: var(--font-head);
  font-size: var(--h1);
  font-weight: 800;
}
.catSub{
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* Home posts grid */
.post h3{
  font-family: var(--font-head);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.2px;
}
.post p{
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* Latest News Updates cards (heroLatest) */
.heroLatest__head h3{
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
}
.heroLatest__card h4{
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.heroLatest__card p{
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* Sector pages cards */
.card__ttl{
  font-family: var(--font-head);
  font-size: var(--card-title);
  line-height: 1.2;
}
.card__p{
  font-family: var(--font-body);
  font-size: var(--card-excerpt);
  line-height: 1.5;
  color: var(--muted);
}

/* Sidebar rails / lists */
.railT,
.sideTxt b{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

:root{
  --red:#8b0f0f;
  --yellow:#f3d400;
  --black:#0f1012;

  --bg:#f6f7fb;
  --card:#ffffff;
  --text:#101114;
  --muted:#6b6f76;
  --line:rgba(15,16,18,.10);

  --r16:16px;
  --r22:22px;
  --shadow:0 18px 60px rgba(15,16,18,.10);
  --shadow2:0 12px 30px rgba(15,16,18,.10);

  --wrap:1200px;
  --headerH: 76px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{

  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(243,212,0,.14), transparent 60%),
    radial-gradient(1200px 700px at 110% 20%, rgba(139,15,15,.10), transparent 55%),
    var(--bg);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.muted{color:var(--muted)}
.small{font-size:12px}

/* ==========================================
   FINAL: SIDE ADS (VISIBLE + NO OVERLAP)
   Paste at VERY END of CSS
========================================== */

:root{
  --adW: 160px;
  --adGap: 14px;
  --adGutter: calc(var(--adW) + var(--adGap) + 18px);

  /* breaking + header spacing */
  --adsTop: calc(var(--topBarH, 0px) + var(--headerH) + 18px);
}
/* =========================
   BREAKING BAR: DATE/TIME RIGHT SIDE
   SAFE PATCH
========================= */

/* Breaking bar container */
.breaking__in{
  display:flex !important;
  align-items:center !important;
}

/* Clock (date + time) right side push */
.clock{
  margin-left:auto !important;
  text-align:right;
  white-space:nowrap;
}

/* Mobile me bhi right hi rahe */
@media (max-width: 768px){
  .clock{
    margin-left:auto !important;
    font-size: 12.5px;
  }
}


/* Ads always visible on desktop */
.adFloat{
  display:flex !important;
  position:fixed !important;
  top: var(--adsTop) !important;
  width: var(--adW) !important;
  z-index: 999999 !important;
  height: min(600px, calc(100vh - var(--adsTop) - 16px)) !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.adFloat--left{ left: 12px !important; }
.adFloat--right{ right: 12px !important; }

.adFloat__box{
  display:block !important;
  width:100% !important;
  height:100% !important;          /* ✅ IMPORTANT */
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:hidden !important; 
}

.adImg{
  width: 100% !important;

  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}

/* ✅ Give content space so ads never overlap (desktop) */
@media (min-width: 1100px){
  body{
    padding-left: var(--adGutter) !important;
    padding-right: var(--adGutter) !important;
  }
  .wrap, .etWrap{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ✅ Mobile/tablet: hide ads */
@media (max-width: 1099px){
  .adFloat{ display:none !important; }
  body{ padding-left: 0 !important; padding-right: 0 !important; }
}


/* Top mini */
.topMini{background:linear-gradient(90deg,var(--black),#15161a);color:#fff}
.topMini__in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;flex-wrap:wrap}
.topMini__links{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.topMini__links a{opacity:.92;font-weight:900;font-size:13px}
.topMini__links a:hover{opacity:1;text-decoration:underline}
.topMini__right{display:flex;gap: 29px;align-items:center}
.topMini__headline{font-weight:900;opacity:.95}

.chip{padding:6px 10px;border-radius:999px;font-weight:1000;font-size:12px}
.chip--live{background:rgba(243,212,0,.16);border:1px solid rgba(243,212,0,.25);color:var(--yellow)}

/* Glass header */
.glassHeader{
  position:sticky;top:0;
  z-index:1200;                 /* was 50 */
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.72);
  border-bottom:1px solid rgba(15,16,18,.08);
}
.glassHeader__in{display:flex;justify-content:space-between;align-items:center;padding:20px 0;gap:12px}
.logo{display:flex;align-items:center;gap:12px}
/* =========================
   IMAGE LOGO STYLES
   ========================= */

.logo{
  display:flex;
  align-items:center;
  gap:12px;
}

/* logo image wrapper */
.logo__imgWrap{
  display:flex;
  align-items:center;
}

/* logo image */
.logo__img{
  height:44px;          /* desktop size */
  width:auto;
  display:block;
  object-fit:contain;
}

/* tablet */
@media(max-width:1100px){
  .logo__img{
    height:40px;
  }
}

/* mobile */
@media(max-width:768px){
  .logo__img{
    height:36px;
  }
}


.nav{display:flex;gap:30px;align-items:center}
.nav__a,
.navDD__btn{
  font-size:14px;
  font-weight:700;              /* same weight everywhere */
  letter-spacing:.1px;
  line-height:1;
}
.nav__a:hover{background:rgba(0, 0, 0, 0.06)}
.nav__a.active{
  font-weight:800;
}

.actions{display:flex;gap:10px;align-items:center}
.icon{
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(15,16,18,.10);
  background:rgba(255,255,255,.9);
  cursor:pointer;font-weight:1000;
   font-size:16px;
  font-weight:800;
}
.cta{
  padding:10px 12px;border-radius:14px;
  background:linear-gradient(135deg,var(--red),#5f0a0a);
  color:#fff;font-weight:1000;
  border:1px solid rgba(0,0,0,.08);
   font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
}
.cta:hover{filter:brightness(1.03)}
.burger{display:none;width:44px;height:40px;border-radius:14px;border:0;background:rgba(15,16,18,.08);cursor:pointer;font-weight:1000}

.navDD{position:relative; z-index:1300;} 
.navDD__btn{
  padding:10px 12px;border-radius:14px;border:0;background:transparent;
  font-weight:1000;cursor:pointer;
}
.navDD__btn:hover{background:rgba(15,16,18,.06)}
.navDD{ 
  position: relative; 
  z-index:1300;   /* ✅ gap bridge */
}
.mNav__dd{ position:relative; }
.mNav__dd summary{ cursor:pointer; }

/* ✅ open rahe jab tak user andar hai */
.mNav__dd[open]{ z-index: 9999; }


/* replace your current .navDD__panel block's top */
.navDD__panel{
  position:absolute;
  top: calc(100% - 6px);  /* ✅ button se chipka rahe */
  left:0;
  width:560px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,16,18,.10);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:12px;
  display:none;
  z-index:2100;
}

/* ✅ panel par mouse aate hi band na ho */
.navDD:hover .navDD__panel,
.navDD:focus-within .navDD__panel,
.navDD__panel:hover{
  display:block;
}

.navDD__panel strong{
  font-size:13px;
  font-weight:800;
}
.navDD__panel span{
  font-size:12px;
  font-weight:600;
}

.navDD__panel--small{width:260px}
.navDD__panel--events{width:340px}
.navDD__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.navDD__grid--single{grid-template-columns:1fr}
.navDD__panel a{
  font-size:13px;
  font-weight:650;
}
.navDD__panel a:hover{background:rgba(139,15,15,.06);border-color:rgba(139,15,15,.14)}
.navDD:hover .navDD__panel{display:block}

.mNav{display:none;border-top:1px solid rgba(15,16,18,.08);padding:12px 0}
.mNav__a{display:block;padding:7px 12px;border-radius:14px;}
.mNav__a:hover{background:rgba(15,16,18,.06)}
.mNav__dd summary{padding:10px 12px;border-radius:14px;font-weight:1000;cursor:pointer;
 font-size:14px;
  font-weight:750;
}
.mNav__dd summary:hover{background:rgba(15,16,18,.06)}
.mNav__dd a{display:block;padding:10px 18px;border-radius:14px;font-weight:900;color:rgba(15,16,18,.78);
font-size:13px;
  font-weight:650;
}
.mNav__dd a:hover{background:rgba(139,15,15,.06)}
/* 1) Header ko breaking se upar lao */
.glassHeader{ z-index: 2000 !important; }

/* 2) Dropdown ko aur upar lao */
.navDD__panel{ z-index: 2100 !important; }

/* 3) Breaking ko header se neeche rakho (optional but safe) */
.breaking{ z-index: 1500 !important; }

/* 4) Search modal ko sabse top lao */
.modal{ z-index: 9999 !important; }
@media(max-width:980px){
  .nav{display:none}
  .burger{display:inline-block}
  .mNav.isOpen{display:block}
}

/* Breaking ribbon */
.breaking{
  position: sticky;
  top: var(--headerH);
  z-index:1100;                 /* was 999 */
  background: linear-gradient(90deg,#121316,#181a20);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.breaking__in{
  min-height: 64px;
  display:flex;
  gap:12px;
  align-items:center;
  padding: 14px 0;
  flex-wrap:wrap;
}

.clock{font-weight:1000;opacity:.95}
.sep{opacity:.55;margin:0 10px}
.marquee{display:flex;gap:10px;align-items:center;flex:1;min-width:260px}
.marquee__badge{
  background:linear-gradient(135deg,var(--yellow),#ffe86a);
  color:#111;font-weight:1100;
  padding:6px 10px;border-radius:999px;font-size:12px
}
.marquee__text{font-weight:1000;opacity:.95;white-space:nowrap;overflow:hidden}
.marquee__text .mq{
  display:inline-block;
  padding-left:100%;
  white-space:nowrap;
  animation: mqmove 22s linear infinite;
}
.marquee:hover .mq{ animation-play-state:paused; }
@keyframes mqmove{ 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }

.breaking__ad{
  display:flex;gap:10px;align-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  padding:8px 12px;border-radius:14px;
}
.breaking__adTag{
  background:rgba(243,212,0,.18);
  border:1px solid rgba(243,212,0,.22);
  color:var(--yellow);
  padding:4px 8px;border-radius:999px;font-size:12px;font-weight:1100;
}
@media(max-width:980px){ .breaking__ad{display:none} }
@supports (padding: max(0px)){
  .glassHeader{ padding-top: env(safe-area-inset-top); }
}

/* Make header compact + aligned on mobile */
@media (max-width: 980px){
  .glassHeader__in{
    padding: 20px 0 !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .logo{ gap: 10px !important; }
  .logo__img{ height: 34px !important; width:auto !important; object-fit:contain; }

  .actions{
    margin-left: auto !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .cta{
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .icon{
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }

  .burger{
    width: 42px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }

  /* MOBILE NAV: overlay feel (no huge spacing) */
  .mNav{
    padding: 10px 0 !important;
  }
  .mNav__a,
  .mNav__dd summary{
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }
  .mNav__dd a{
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }
}

/* Extra small phones */
@media (max-width: 420px){
  .cta{ font-size: 12.5px !important; padding: 8px 9px !important; }
  .logo__img{ height: 32px !important; }
}

/* Main */
.main{padding:18px 0 0px}

/* Recommendation button */
.recRow{margin:12px 0 8px}
.recBtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(135deg,#c07a00,#f3b400);
  color:#fff;
  font-weight:1100;
  box-shadow:var(--shadow2);
  border:1px solid rgba(0,0,0,.12);
}

/* Hero layout */
.hero{
  display:grid;
  grid-template-columns: 1.6fr 380px;
  gap:16px;
  align-items:start;
}
@media(max-width:1100px){ .hero{grid-template-columns:1fr} }

/* Hero card */
.heroCard{
  border-radius:var(--r22);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,16,18,.10);
  background:rgba(255,255,255,.82);
}
.heroCard__media{
  position:relative;
  display:block;
  height:360px;
  background:
    linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,.14)),
    var(--bg) center/cover no-repeat;
}
.heroCard__overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(243,212,0,.22), transparent 55%),
    radial-gradient(900px 500px at 100% 30%, rgba(139,15,15,.22), transparent 60%);
}
.heroCard__meta{
  position:absolute;left:18px;top:18px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  z-index:2;
}
.pill2{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.18);
  color:#111;
  padding:7px 10px;border-radius:999px;
  font-weight:1100;font-size:12px;
}
.pill2--ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.18)}
.muted2{color:rgba(255,255,255,.80);font-weight:900;font-size:12px}

.heroCard__nav{
  position:absolute;right:18px;top:18px;
  display:flex;gap:8px;z-index:3;
}
.navBtn{
  width:44px;height:44px;border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.30);
  color:#fff;font-size:26px;font-weight:1100;
  cursor:pointer;
}
.navBtn:hover{background:rgba(0,0,0,.45)}

.dots{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:14px;display:flex;gap:8px;
  padding:8px 10px;border-radius:999px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.16);
  z-index:3;
}
.dotBtn{width:9px;height:9px;border-radius:999px;border:0;background:rgba(255,255,255,.55);cursor:pointer}
.dotBtn.isActive{background:var(--yellow)}

.heroCard__body{padding:16px 16px 18px}
.heroCard__body h1{margin:0;font-size:34px;letter-spacing:-.6px;line-height:1.05;font-weight:1200}
.heroCard__body p{margin:10px 0 0;color:rgba(15,16,18,.70);line-height:1.6}

.heroCard__btns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 14px;border-radius:16px;
  font-weight:1100;border:1px solid rgba(0,0,0,.08);
  background:linear-gradient(135deg,var(--red),#5f0a0a);
  color:#fff;
}
.btn--ghost{background:#fff;color:var(--red);border:1px solid rgba(139,15,15,.18)}
.btn:hover{filter:brightness(1.02)}

.miniStats{
  margin-top:14px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.miniStats__it{
  padding:10px 12px;border-radius:16px;
  background:rgba(15,16,18,.04);
  border:1px solid rgba(15,16,18,.06);
}
.miniStats__it span{display:block;color:var(--muted);font-size:12px;font-weight:900}
.miniStats__it strong{display:block;margin-top:4px;font-weight:1200}
/* youtube */
/* ===== Row: YT left + EPS right ===== */
.ioVArow{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr 360px; /* left YT, right EPS */
  gap:16px;
  align-items:start;
}

/* ===== YouTube card ===== */
.ioYT{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  height:312px;               /* ✅ SAME HEIGHT AS EPS AD */
}

.ioYT__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.ioYT__head h3{margin:0;font-size:16px;font-weight:900}
.ioYT__head a{font-size:13px;font-weight:800;color:#b91c1c;text-decoration:none}
.ioYT__head a:hover{text-decoration:underline}

/* ✅ Keep inside height */
.ioYT__grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:12px;
  height: calc(312px - 42px); /* head space minus */
}

/* Big video fixed */
.ioYT__main{
  border-radius:14px;
  overflow:hidden;
  background:#000;
  height:100%;
}
.ioYT__main iframe{
  width:100%;
  height:100%;
  display:block;
}

/* List fixed */
.ioYT__list{
  height:100%;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-right:4px;
}

/* Small cards */
.ioYTItem{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  transition:.15s ease;
}
.ioYTItem:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.08);
}
.ioYTItem.isActive{
  border-color:rgba(255,153,0,.55);
}

.ioYTThumb{
  width:52px;
  height:52px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(0,0,0,.18), rgba(255,153,0,.18));
  position:relative;
}
.ioYTThumb::after{
  content:"▶";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  text-shadow:0 6px 18px rgba(0,0,0,.45);
}

.ioYTTxt b{font-size:13px;line-height:1.2;display:block}
.ioYTTxt small{margin-top:4px;display:block;font-size:11px;color:rgba(0,0,0,.55)}

/* ===== EPS Ad ===== */
.ioEPS__ad{
  display:block;
  width:100%;
  height:312px;               /* ✅ SAME HEIGHT */
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  background-image:url('assets/EPS\ 2026\ Social\ Post\ \(1080\ x\ 1080\ px\).jpg.jpeg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* Responsive */
@media (max-width:980px){
  .ioVArow{grid-template-columns:1fr}
  .ioYT{height:auto}
  .ioYT__grid{grid-template-columns:1fr;height:auto}
  .ioYT__main{height:240px}
  .ioYT__list{max-height:260px}
  .ioEPS__ad{height:300px}
}

/* Rail */
.rail{display:grid;gap:14px}
.railBox{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(15,16,18,.10);
  border-radius:var(--r22);
  box-shadow:var(--shadow2);
  padding:12px;
  overflow:hidden;
}
.railBox__h{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 10px}
.railBox__h h3{margin:0;font-size:16px;font-weight:1100}
.railBox__h a{color:var(--red);font-weight:1000}
.railItem{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px;border-radius:16px;
  border:1px solid rgba(15,16,18,.06);
  background:rgba(255,255,255,.65);
  margin-top:10px;
}
.railItem:hover{background:rgba(139,15,15,.06);border-color:rgba(139,15,15,.14)}
.railN{
  width:34px;height:34px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(243,212,0,.20);
  border:1px solid rgba(243,212,0,.28);
  font-weight:1200;
}
.railT{font-weight:1100;line-height:1.25}
.event{display:block;padding:12px;border-radius:16px;border:1px solid rgba(15,16,18,.06);background:rgba(255,255,255,.65);margin-top:10px}
.event:hover{background:rgba(139,15,15,.06);border-color:rgba(139,15,15,.14)}
.event strong{display:block;font-weight:1100}
.event span{display:block;color:var(--muted);font-weight:900;font-size:12px;margin-top:4px}

.eventWrap{
  max-height:320px;
  overflow:auto;
  padding-right:6px;
}
.eventWrap::-webkit-scrollbar{ width:8px; }
.eventWrap::-webkit-scrollbar-thumb{ background: rgba(139,15,15,.18); border-radius: 999px; }
.eventWrap::-webkit-scrollbar-track{ background: rgba(15,16,18,.06); border-radius: 999px; }

/* ===== Latest News block (fills white space under hero) ===== */

.heroLatest{
  margin-top:28px;   /* gap upar se */
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,0.08);
}


.heroLatest__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.heroLatest__head h3{
  font-size:16px;
  margin:0;
}

.heroLatest__head a{
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  color:inherit;
  opacity:.75;
}

/* Latest News Updates — 4 cards (2x2) */
.heroLatest__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;

}
/* ✅ Latest News: allow 6 items (3+3) nicely */
.heroLatest__grid{
  grid-auto-rows: minmax(0, auto);
}

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

.heroLatest__card{
  display:flex;
  gap:10px;
  padding:12px;
  border:1px solid rgba(17,17,17,.10);
  border-radius:14px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.heroLatest__card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.heroLatest__thumb{
  width:78px;
  height:58px;
  border-radius:12px;
  background:#eee;
  background-size:cover;
  background-position:center;
  flex:0 0 auto;
}

.heroLatest__txt b{
  display:block;
  font-family: Inter, sans-serif;
  font-size:14px;
  line-height:1.25;
  margin-bottom:4px;
}
.heroLatest__txt p{
  margin:0;
  font-family: Inter, sans-serif;
  font-size:12.5px;
  color: rgba(17,17,17,.70);
  line-height:1.35;
}
.heroLatest__txt small{
  display:block;
  margin-top:6px;
  font-family: Inter, sans-serif;
  font-size:12px;
  color: rgba(17,17,17,.60);
}
/* =========================
   RIGHT RAIL DUMMY AD (300x250)
========================= */

.railAd__dummy{
  height:250px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:10px;

  background:
    linear-gradient(135deg, rgba(139,15,15,.95), rgba(15,16,18,.95)),
    radial-gradient(400px 200px at 20% 10%, rgba(243,212,0,.35), transparent 60%);
  color:#fff;
  border-radius:18px;
  padding:18px;
}

.railAd__brand{
  font-size:18px;
  font-weight:1200;
  letter-spacing:.3px;
}

.railAd__title{
  font-size:14px;
  font-weight:800;
  opacity:.95;
  line-height:1.3;
}

.railAd__cta{
  margin-top:6px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(243,212,0,.95);
  color:#111;
  font-weight:1000;
  font-size:13px;
}

/* ===== Sponsors Marquee Slider (Improved) ===== */
.ioMarquee{
  overflow:hidden;
  width:100%;
  padding:18px 0;
  position:relative;
}

.ioMarquee__track{
  display:flex;
  align-items:center;
  gap:26px;
  width:max-content;
  animation: ioMarqueeScroll 22s linear infinite;
}

.ioMarquee:hover .ioMarquee__track{
  animation-play-state: paused;
}

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

/* Bigger, cleaner sponsor boxes */
.ioLogoBox{
  background:#fff;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:16px;
  padding:18px 22px;
  min-width:220px;
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
}

.ioLogoBox img{
  max-height:70px;
  max-width:160px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}


/* sponsor logo box (works with your existing ioLogoBox too) */
.ioLogoBox{
  background:#fff;
  border:1px solid rgba(0,0,0,0.10);
  border-radius:12px;
  padding:12px 14px;
  min-width:160px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ioLogoBox img{
  height:55px;
  width:auto;
  object-fit:contain;
  display:block;
}


/* left label */
.ioArticlesLabel{
  font-size:13px;
  font-weight:1000;
  letter-spacing:.6px;
  padding:6px 12px;
  border-radius:999px;

  background:linear-gradient(135deg,var(--yellow),#ffe86a);
  color:#111;
}

/* right text */
.ioArticlesSub{
  font-size:11px;
  font-weight:800;
  opacity:.9;
  white-space:nowrap;
}

/* mobile */
@media(max-width:680px){
  .ioArticlesTop{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
  }
}

/* one article row */
.ioArt{
  display:grid;
  grid-template-columns: 88px 1fr;
  gap:12px;
  align-items:center;

  padding:12px;
  border-radius:16px;

  background:rgba(255,255,255,.78);
  border:1px solid rgba(15,16,18,.10);
  box-shadow: 0 10px 22px rgba(15,16,18,.06);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ioArt:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15,16,18,.10);
  border-color: rgba(139,15,15,.18);
}

/* image box (dummy) */
.ioArt__img{
  width:88px;
  height:66px;
  border-radius:14px;

  background:
    radial-gradient(360px 160px at 20% 30%, rgba(243,212,0,.35), transparent 55%),
    linear-gradient(135deg, rgba(139,15,15,.20), rgba(15,16,18,.10));

  border:1px solid rgba(15,16,18,.10);
}

/* text */
.ioArt__text h5{
  margin:0;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
  color:#0f1012;
}

.ioArt__text span{
  display:inline-block;
  margin-top:6px;
  font-size:12px;
  font-weight:900;
  color:rgba(15,16,18,.60);
}

/* category badge look */
.ioArt__text span{
  padding:4px 10px;
  border-radius:999px;
  background:rgba(243,212,0,.18);
  border:1px solid rgba(243,212,0,.25);
}

/* Responsive */
@media(max-width:620px){
  .ioArt{
    grid-template-columns: 70px 1fr;
  }
  .ioArt__img{
    width:70px;
    height:56px;
  }
}

.ioLogoBox{
  height:120px;
  border-radius:16px;
  border:1px dashed rgba(15,16,18,.20);
  background:rgba(255,255,255,.8);
  display:grid; place-items:center;
  font-weight:1100; color:rgba(15,16,18,.55);
}
.ioCenter{padding:12px}
.ioVideo{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(15,16,18,.10);
  background:#000;
}
.ioVideo iframe{
  width:100%;
  height:340px;
  border:0;
  display:block;
}
.ioSide__events{padding:12px; display:grid; gap:10px;}
.ioSide__events a{
  display:block;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(15,16,18,.08);
  background:rgba(255,255,255,.7);
}
.ioSide__events a:hover{background:rgba(139,15,15,.06);border-color:rgba(139,15,15,.14)}
.ioSide__events strong{display:block; font-weight:1200}
.ioSide__events span{display:block; color:var(--muted); font-weight:900; font-size:12px; margin-top:4px}

/* Tabs */
.tabs{margin-top:18px;background:rgba(255,255,255,.80);border:1px solid rgba(15,16,18,.10);border-radius:var(--r22);box-shadow:var(--shadow);padding:14px}
.tabs__top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tabs__top h2{margin:0;font-size:18px;font-weight:1200}
.tabs__btns{position:relative;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tBtn{
  padding:9px 10px;border:0;border-radius:12px;
  background:transparent;cursor:pointer;
  font-weight:1100;color:rgba(15,16,18,.74);
}
.tBtn:hover{color:var(--red)}
.tBtn.isActive{color:var(--black)}
.tLine{
  position:absolute;left:0;bottom:-6px;height:3px;width:44px;
  background:linear-gradient(90deg,var(--yellow),#ffe86a);
  border-radius:999px;
  transition: all .22s ease;
}

.tPanel{display:none;margin-top:14px}
.tPanel.isOpen{display:block}

.postGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:980px){.postGrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.postGrid{grid-template-columns:1fr}}
.post{
  border-radius:var(--r22);
  background:rgba(255,255,255,.70);
  border:1px solid rgba(15,16,18,.08);
  box-shadow:0 12px 28px rgba(15,16,18,.06);
  overflow:hidden;
}
.post:hover{border-color:rgba(139,15,15,.16)}
.post__thumb{
  height:150px;
  background:
    radial-gradient(560px 260px at 15% 10%, rgba(243,212,0,.22), transparent 60%),
    linear-gradient(135deg, rgba(139,15,15,.16), rgba(15,16,18,.10));
}
.post__b{padding:12px 14px 14px}
.post__k{display:inline-block;color:var(--red);font-weight:1100;font-size:12px}
.post h3{margin:8px 0 6px;font-weight:1200;line-height:1.15}
.post p{margin:0;color:rgba(15,16,18,.70);line-height:1.55}
.post__thumb{
  width:100% !important;
  aspect-ratio:16/9 !important;
  border-radius:14px;
  overflow:hidden;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}

/* agar andar <img> inject ho raha ho */
.post__thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
}



/* =========================
   ET STYLE SLIM FOOTER
========================= */

.etWrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

.etFoot{
  width:100%;
  margin-top:18px;
  font-family: Inter, system-ui, Arial, sans-serif;
}

.etFoot__top{
  background: linear-gradient(180deg,#0b0c0f 0%, #07080b 100%);
  border-top:1px solid rgba(255,255,255,.10);
}

.etFoot__top .etWrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 29px 20PX;
  flex-wrap:wrap;
}

.etFoot__blk{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:180px;
}

.etFoot__ttl{
  color: rgba(255,255,255,.85);
  font-size:14px;
  font-weight:800;
  letter-spacing:.2px;
}

.etFoot__icons{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.etFoot__icons a{
  width:38px;height:38px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-weight:900;
  font-size:12px;
  transition:.15s ease;
}
.etFoot__icons a:hover{
  background: rgba(243,212,0,.95);
  color:#111;
}

.etFoot__apps{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.etFoot__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-weight:800;
  font-size:13px;
  transition:.15s ease;
}
.etFoot__btn:hover{ background: rgba(255,255,255,.18); }

.etFoot__btn--ghost{
  background: rgba(255,255,255,.06);
}

.etFoot__sep{
  width:1px;
  height:46px;
  background: rgba(255,255,255,.10);
}

.etFoot__right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:36px;
  flex-wrap:wrap;
}

.etFoot__brand--logo{
  display:flex;
  align-items:center;
}

.etFoot__logo{
      height: 40px;
    width: auto;
    display: block;
    padding-left: 78px;
}

@media (max-width:980px){
  .etFoot__logo{ height: 30px; }
}
@media (max-width:560px){
  .etFoot__logo{ height: 28px; }
}

.etFoot__member{
  padding:10px 14px;
  border-radius:12px;
  background: linear-gradient(135deg,#8b0f0f,#5f0a0a);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  font-weight:1000;
  font-size:13px;
  margin-left: 60px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.etFoot__copy{
  background:#05060a;
  border-top:1px solid rgba(255,255,255,.10);
  padding:10px 0;
}

.etFoot__copyIn{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  color: rgba(255,255,255,.85);
  font-size:12px;
  font-weight:800;
}

.etFoot__copySep{ opacity:.6; }

/* Responsive */
@media(max-width:900px){
  .etFoot__sep{ display:none; }
  .etFoot__right{ width:100%; justify-content:flex-start; margin-left:0; }
}



/* ===============================
   FIX: TOP BREAKING BAR VISIBLE
   =============================== */

/* 1) Top breaking bar ko header se upar lao */
.breaking.breaking--top{
  position: sticky;
  top: 0;
  z-index: 3000 !important;   /* header se upar */
}

/* 2) Header ko breaking bar ke niche sticky karo */
:root{
  --topBarH: 64px;            /* breaking bar height approx */
}

/* header ab breaking ke niche stick hoga */
.glassHeader{
  top: var(--topBarH) !important;
}

/* 3) Below-header breaking (blank slot + subscribe banner) */
.breaking.breaking--below{
  position: sticky;
  top: calc(var(--topBarH) + var(--headerH));
  z-index: 2500 !important;
}

/* 4) breaking layout improve */
.breaking__in{
  min-height: var(--topBarH);
}

/* 5) blank slot (future banner area) */
.breaking__slot{
  flex: 1;
  min-width: 240px;
  height: 44px;               /* blank space height */
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px dashed rgba(255,255,255,.18);
}

/* 6) clock visible right side */
.clock{
  font-weight: 1000;
  opacity: .95;
  white-space: nowrap;
}

/* 7) marquee always visible */
.marquee{
  min-width: 260px;
}

/* 8) subscribe banner height increase (as you asked) */
.breaking__ad{
  min-height: 54px;           /* height increased */
  padding: 12px 14px;         /* height feel */
}

/* mobile stacking */
@media(max-width:980px){
  :root{ --topBarH: 72px; }
  .glassHeader{ top: var(--topBarH) !important; }
  .breaking__slot{ width: 100%; }
}
/* =========================
   ALL-SCREENS RESPONSIVE PATCH
   Paste at VERY END
   (No color/gradient changes)
========================= */

/* 0) Global safety */
html, body{ overflow-x:hidden; }
img, video, iframe{ max-width:100%; height:auto; }

/* 1) Super wide dropdown must not overflow */
.navDD__panel{ max-width: calc(100vw - 32px); }

/* 2) Big desktops (1400+) */
@media (min-width: 1400px){
  .wrap{ padding-left: 18px; padding-right: 18px; }
}

/* 3) Desktop / laptop (1200 and down) */
@media (max-width: 1200px){
  :root{ --wrap: 1120px; }
}

/* 4) Small laptop / tablet landscape (1100 and down) */
@media (max-width: 1100px){
  :root{ --wrap: 980px; }

  /* hero becomes single column already in your CSS */
  .glassHeader__in{ flex-wrap: wrap; }
  .logo{ min-width: 220px; }
  .actions{ margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
}

/* 5) Tablet (980 and down) */
@media (max-width: 980px){
  :root{ --wrap: 900px; }

  /* your nav already hides & burger shows */
  .topMini__in{ gap: 10px; }
  .topMini__links a{ font-size: 12px; }

  /* dropdown panel safer on small */
  .navDD__panel{
    width: calc(100vw - 32px) !important;
    left: 0 !important;
  }

  /* breaking bar: avoid overflow */
  .breaking__in{ gap: 10px; }
  .marquee{ min-width: 220px; }
}

/* 6) Tablet portrait (768 and down) */
@media (max-width: 768px){
  :root{ --wrap: 720px; }

  .glassHeader__in{ gap: 10px; }
  .cta{ padding: 9px 10px; border-radius: 12px; font-size: 13px; }
  .icon{ width: 38px; height: 38px; border-radius: 12px; }

  /* hero */
  .heroCard__media{ height: 260px; }
  .heroCard__body h1{ font-size: 26px; line-height: 1.08; }
  .heroCard__body p{ font-size: 14px; }

  /* mini stats stack */
  .miniStats{ grid-template-columns: 1fr; }

  /* video responsive */
  .ioVideo iframe{ height: 220px; }

  /* spacing */
  .tabs{ padding: 12px; }
}

/* 7) Large mobile (620 and down) */
@media (max-width: 620px){
  :root{ --wrap: 600px; }

  .wrap{ padding-left: 14px; padding-right: 14px; }

  /* cards */
  .heroCard__body{ padding: 14px; }
  .railBox{ padding: 10px; }

  /* posts already 1 col in your CSS, reduce thumb */
  .post__thumb{ height: 140px; }

  /* io articles already reduced in your CSS */
}

/* 8) Mobile (480 and down) */
@media (max-width: 480px){
  :root{ --wrap: 480px; }

  .wrap{ padding-left: 12px; padding-right: 12px; }

  /* breaking bar tight */
  .marquee__text{ font-size: 12px; }
  .marquee__badge{ font-size: 11px; padding: 5px 8px; }

  /* buttons wrap nicely */
  .heroCard__btns{ gap: 8px; }
  .btn{ padding: 10px 12px; border-radius: 14px; }

  /* video */
  .ioVideo iframe{ height: 200px; }

  /* footer padding */
  .etFoot__top .etWrap{ padding: 18px 16px; }
}

/* 9) Small mobile (360 and down) */
@media (max-width: 360px){
  .heroCard__body h1{ font-size: 24px; }
  .topMini__links{ gap: 8px; }
  .chip{ font-size: 11px; padding: 5px 8px; }
}
/* ===== FIX: Desktop Sectors dropdown stable ===== */

/* 1) Ads should not steal clicks */
.adFloat{ pointer-events:none !important; }
.adFloat__box, .adFloat__box *{ pointer-events:auto !important; }

/* 2) dropdown top-most */
.glassHeader{ z-index: 4000 !important; }
.navDD{ position:relative !important; z-index: 4100 !important; }

/* 3) panel position: NO overlap, NO gap */
.navDD__panel{
  top: calc(100% + 10px) !important;
  left: 0 !important;
  display: none !important;
  z-index: 4200 !important;
}

/* 4) open stays on hover */
.navDD:hover .navDD__panel,
.navDD:focus-within .navDD__panel{
  display:block !important;
}
/* ✅ HIDE category label on cards */
/* =========================
   HIDE ALL CATEGORY / TAG LABELS (SITE-WIDE)
   Paste at VERY END of style.css
========================= */

/* Cards: category text (Power Sector / EV / Renewable...) */
.post__k,
.post .post__k{
  display:none !important;
}

/* If category shown as small badge/tag anywhere */
.heroLatest__tag,
.pill2,
.pill2--ghost,
.badge,
.tag,
.category,
.cat,
.catTag{
  display:none !important;
}

/* If category is shown as <span> above title in some layouts */
.post span.post__k,
.post .k,
.post .metaCat{
  display:none !important;
}

/* ioArt list: category badge (your CSS styles ioArt__text span as badge) */
.ioArt__text span{
  display:none !important;
}
/* =========================
   FOOTER (etFoot) RESPONSIVE ONLY
========================= */
.etFoot, .etFoot *{ box-sizing:border-box; }
.etFoot{ width:100%; max-width:100%; overflow-x:hidden; }

.etWrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* Desktop -> wrap enable */
.etFoot__top .etWrap{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.etFoot__blk,
.etFoot__right{
  flex: 1 1 240px;
  min-width: 0;
}

/* Tablet */
@media (max-width: 900px){
  .etFoot__right{
    flex: 1 1 100%;
    text-align:left;
    margin-left:0;
  }
}

.etFoot, .etFoot *{ box-sizing:border-box; }
.etFoot{ width:100%; max-width:100%; overflow-x:hidden; padding-bottom: env(safe-area-inset-bottom); }

.etWrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* Desktop/tablet: stop “space-between” creating big holes */
.etFoot__top .etWrap{
  justify-content: flex-start !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

/* Blocks should wrap normally */
.etFoot__blk,
.etFoot__right{
  flex: 1 1 240px !important;
  min-width: 0 !important;
}

/* Right area should not float too far */
.etFoot__right{
  margin-left: 0 !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

/* Mobile: stack + tighten + app buttons 2-column */
@media (max-width: 640px){
  .etFoot__top .etWrap{
    flex-direction: column !important;
    gap: 14px !important;
    padding: 18px 14px !important;
  }

  .etFoot__sep{ display:none !important; }

  .etFoot__apps{
    width:100% !important;
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .etFoot__btn{ width:100% !important; }

  /* Copy line compact */
  .etFoot__copyIn{
    padding: 10px 12px !important;
    text-align: center !important;
    line-height: 1.4 !important;
    gap: 8px 12px !important;
  }
  .etFoot__copySep{ display:none !important; }
}

/* Very small phone: app buttons 1 column */
@media (max-width: 380px){
  .etFoot__apps{ grid-template-columns: 1fr !important; }
}
/* =========================
   FOOTER GAP REDUCE (COMPACT LOOK)
   Paste at VERY END
========================= */

/* Footer top overall padding reduce */
.etFoot__top .etWrap{
  padding: 18px 16px !important;   /* was ~29px */
  gap: 14px !important;            /* block gap reduce */
}

/* Footer blocks vertical gap */
.etFoot__blk{
  gap: 6px !important;             /* inside block spacing */
}

/* Social icons row */
.etFoot__icons{
  gap: 8px !important;
}

/* App buttons spacing */
.etFoot__apps{
  gap: 8px !important;
}

/* Subscribe section spacing */
.etFoot__blk input,
.etFoot__blk button,
.etFoot__blk .etFoot__btn{
  margin-top: 4px !important;
}

/* Member + brand spacing */
.etFoot__right{
  gap: 36px !important;
}

/* Copy line spacing */
.etFoot__copy{
  padding: 8px 0 !important;
}

/* Mobile extra compact */
@media (max-width: 640px){
  .etFoot__top .etWrap{
    padding: 16px 14px !important;
    gap: 12px !important;
  }
}
/* =========================================
   RESPONSIVE ONLY — HERO BANNER IMAGE FULL (NO CUT)
   For: "Renewing Opportunities: Energizing Growth"
   Paste at VERY END of style.css
========================================= */

@media (max-width: 980px){

  /* ✅ If this banner is the hero image container */
  .heroCard__media{
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;      /* stable */
    overflow: visible !important;          /* stop crop by container */
    background-size: contain !important;   /* ✅ FULL banner visible */
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}
/* =========================================
   FINAL EASY FIX — TOP BANNER BOX HEIGHT MATCH
   (black strip + extra padding remove)
   Paste at VERY END of style.css
========================================= */

@media (max-width: 980px){
  .breaking__in{
    min-height:auto !important;
    padding: 8px 0 !important;
    background: transparent !important;
  }

  .breaking__slot{
    background: transparent !important;
    height:auto !important;
  }

  .breaking__slot a{
    height: 50% !important;
    background-size: contain !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-color: transparent !important;
  }
}


  /* Banner height 50% */
  .breaking__slot a{
    height: 50% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
  }
  /* =================================
   STICKY BREAKING + HEADER STACK
================================= */

/* height variables (auto JS override karega) */
:root{
  --io-breakH: 44px;
  --io-headH: 80px;
  --io-stackH: calc(var(--io-breakH) + var(--io-headH));
}

/* Breaking bar fixed top */
.breaking.breaking--top{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
}

/* Header fixed below breaking */
header.glassHeader{
  position: fixed !important;
  top: var(--io-breakH);
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99998;
  background: #fff; /* important */
}

/* Push page content down */
body{
  padding-top: var(--io-stackH) !important;
}

/* Mobile menu below stack */
@media (max-width:980px){
  #mNav{
    top: var(--io-stackH) !important;
  }
}
/* OneSignal bell + prompts always on top */
.onesignal-bell-container,
.onesignal-bell-launcher,
#onesignal-bell-container,
.onesignal-slidedown-container,
.onesignal-slidedown-dialog {
  z-index: 2147483647 !important;
}
   /* base */
    .topSlimBanner {
      width: 100%;
      background: #000;
      display: none;
      /* default hide */
      justify-content: center;
      box-sizing: border-box;
    }

    /* ✅ banner height yahin control hogi */
    .topSlimBanner a {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(800px, calc(100% - 0px));
      height: 28px;
      /* desktop banner height */
    }

    /* ✅ image force fit inside height */
    .topSlimBanner img {
      width: 100%;
      height: 100%;
      /* ✅ IMPORTANT */
      display: block;
      object-fit: contain;
      /* crop nahi hoga */
    }

    /* desktop only */
    @media (min-width: 601px) {
      .topSlimBanner--desktop {
        display: flex !important;
      }
    }

    /* mobile only */
    @media (max-width: 600px) {
      .topSlimBanner {
        padding: 0px 0;
      }

      .topSlimBanner a {
        width: calc(100% - 0px);
        height: 44px;
        /* ✅ mobile banner height */
      }

      .topSlimBanner--mobile {
        display: flex !important;
      }
    }

    /* ===== Right Rail Video Ad (ET style) ===== */
    .etVideo {
      width: 100%;
      height: auto;
      display: block;
      border: 1px solid rgba(0, 0, 0, .25);
      background: #fff;
      object-fit: contain;
      /* center-fit like ET */
    }

    @media (max-width: 900px) {
      .etVideo {
        height: auto;
        aspect-ratio: 16/9;
      }
    }

    /* ==============================
   STICKY: Breaking bar + Header
================================ */

    /* Breaking bar fixed top */
    .breaking.breaking--top {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9999;
    }

    /* Header fixed below breaking */
    #glassHeader {
      position: fixed;
      top: var(--breakH, 44px);
      /* JS will set exact height */
      left: 0;
      right: 0;
      z-index: 9998;
    }

    /* body/top spacing so content doesn't go under fixed bars */
    body {
      padding-top: calc(var(--breakH, 44px) + var(--headH, 72px));

      @media (max-width: 600px) {
        .breaking.breaking--top {
          position: static;
        }

        #glassHeader {
          position: static;
          top: auto;
        }

        body {
          padding-top: 0;
        }
      }
    }
/* ===============================
   IO NOTIFICATION – HEADER BELOW
   =============================== */

.ioNotifyFloat{
  position: fixed;
  top: 0px;
    left: 555px;          /* Left side */
  z-index: 9999;
  pointer-events: none;  /* ads disturb nahi karega */
}

.ioNotifyCard{
  width: 320px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  pointer-events: auto; /* button clickable rahe */
  border: 1px solid #eee;
}

/* Glow top line */
.ioNotifyGlow{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background: linear-gradient(90deg,#8b0000,#ffcc00);
}

/* Top section */
.ioNotifyTop{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

.ioNotifyIcon{
  font-size:22px;
}

.ioNotifyKicker{
  font-size:12px;
  font-weight:600;
  color:#8b0000;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.ioNotifyTitle{
  font-size:15px;
  font-weight:700;
  color:#111;
}

/* Description */
.ioNotifyDesc{
  font-size:13px;
  color:#555;
  line-height:1.5;
  margin-bottom:14px;
}

/* Button */
.ioNotifyBtn{
  width:100%;
  background:#8b0000;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 12px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:.3s;
}

.ioNotifyBtn:hover{
  background:#600000;
}

/* Note */
.ioNotifyNote{
  font-size:11px;
  color:#777;
  margin-top:10px;
}

/* Close button */
.ioNotifyX{
  position:absolute;
  top:10px;
  right:10px;
  border:none;
  background:transparent;
  font-size:14px;
  cursor:pointer;
  color:#888;
}

.ioNotifyX:hover{
  color:#000;
}

/* ===== Mobile Safe ===== */
@media (max-width: 768px){
  .ioNotifyFloat{
    left:50%;
    transform:translateX(-50%);
    top:100px;
  }
  .ioNotifyCard{
    width:90vw;
  }
}
/* ===============================
   IO ALERT – PREMIUM GLASS UI
   =============================== */

.ioNotifyCard{
  width: 340px;
  border-radius: 18px;
  padding: 22px 20px 18px;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', sans-serif;

  /* 🔥 Glass Effect */
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(255,255,255,0.5);
  box-shadow:
    0 25px 60px rgba(0,0,0,0.15),
    0 8px 20px rgba(139,0,0,0.08);

  transition: all .4s ease;
}

.ioNotifyCard:hover{
  transform: translateY(-4px);
  box-shadow:
    0 30px 70px rgba(0,0,0,0.2),
    0 10px 30px rgba(139,0,0,0.12);
}

/* 🔥 Animated Top Glow */
.ioNotifyGlow{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background: linear-gradient(90deg,#8b0000,#ffcc00,#8b0000);
  background-size:200% 100%;
  animation: glowMove 3s linear infinite;
}

@keyframes glowMove{
  0%{background-position:0% 0}
  100%{background-position:200% 0}
}

/* Header */
.ioNotifyTop{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:12px;
}

.ioNotifyIcon{
  font-size:24px;
  background: linear-gradient(135deg,#8b0000,#ffcc00);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.ioNotifyKicker{
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  color:#8b0000;
  text-transform:uppercase;
}

.ioNotifyTitle{
  font-size:16px;
  font-weight:700;
  color:#111;
}

/* Description */
.ioNotifyDesc{
  font-size:13px;
  color:#444;
  line-height:1.6;
  margin-bottom:18px;
}

/* 🔥 Modern Button */
.ioNotifyBtn{
  width:100%;
  border:none;
  border-radius:12px;
  padding:12px 14px;
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  position:relative;
  overflow:hidden;

  background: linear-gradient(135deg,#8b0000,#b00000);
  color:#fff;

  box-shadow: 0 10px 25px rgba(139,0,0,0.3);
  transition: all .3s ease;
}

.ioNotifyBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(139,0,0,0.45);
}

/* subtle shine effect */
.ioNotifyBtn::after{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background: linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  transition: .6s;
}

.ioNotifyBtn:hover::after{
  left:100%;
}

/* Note */
.ioNotifyNote{
  font-size:11px;
  color:#666;
  margin-top:12px;
}

/* Close */
.ioNotifyX{
  position:absolute;
  top:12px;
  right:14px;
  border:none;
  background:transparent;
  font-size:16px;
  cursor:pointer;
  color:#777;
  transition:.2s;
}

.ioNotifyX:hover{
  color:#8b0000;
  transform:rotate(90deg);
}

/* Mobile Safe */
@media(max-width:768px){
  .ioNotifyCard{
    width:92vw;
  }
}
/* ===============================
   PREMIUM NEWS CURSOR (Black/Yellow/Maroon)
   Desktop only
================================ */

/* theme colors */
:root{
  --c-black:#0b0f14;
  --c-yellow:#facc15;
  --c-maroon:#7a1f2b;
}

/* ✅ Touch devices pe off */
@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }

  .ioCursorDot,
  .ioCursorRing{
    position:fixed;
    top:0; left:0;
    pointer-events:none;
    z-index:999999;
    transform:translate(-50%,-50%);
  }

  /* Dot (maroon) */
  .ioCursorDot{
    width:7px; height:7px;
    border-radius:50%;
    background:var(--c-maroon);
    box-shadow:0 0 0 2px rgba(11,15,20,.18);
  }

  /* Ring (yellow) */
  .ioCursorRing{
    width:34px; height:34px;
    border-radius:50%;
    border:2px solid rgba(250,204,21,.75);
    box-shadow:0 8px 24px rgba(11,15,20,.18);
    transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    backdrop-filter: blur(1px);
  }

  /* hover state */
  body.ioCursorHover .ioCursorRing{
    transform:translate(-50%,-50%) scale(1.25);
    border-color:rgba(250,204,21,.95);
    box-shadow:0 0 22px rgba(250,204,21,.28), 0 10px 30px rgba(11,15,20,.22);
  }

  /* click feel */
  body.ioCursorDown .ioCursorRing{
    transform:translate(-50%,-50%) scale(.95);
  }
}
:root{
  --c-black:#0b0f14;
  --c-yellow:#facc15;
  --c-maroon:#7a1f2b;
}

/* Desktop only */
@media (hover:hover) and (pointer:fine){

  .ioCursorDot,
  .ioCursorRing{
    position:fixed;
    top:0; left:0;
    pointer-events:none;
    z-index:9999999;
    transform:translate(-50%,-50%);
  }

  .ioCursorDot{
    width:7px;height:7px;border-radius:50%;
    background:var(--c-maroon);
    box-shadow:0 0 0 2px rgba(11,15,20,.18);
  }

  .ioCursorRing{
    width:34px;height:34px;border-radius:50%;
    border:2px solid rgba(250,204,21,.85);
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    box-shadow:0 10px 30px rgba(11,15,20,.25);
  }

  body.ioCursorHover .ioCursorRing{
    transform:translate(-50%,-50%) scale(1.25);
    border-color:rgba(250,204,21,.98);
    box-shadow:0 0 22px rgba(250,204,21,.28), 0 10px 30px rgba(11,15,20,.25);
  }

  body.ioCursorDown .ioCursorRing{
    transform:translate(-50%,-50%) scale(.95);
  }
}
/* =====================================================
   IO PREMIUM CURSOR (Ring + Dot + HAND on Hover) — NO HTML
   ✅ Yellow + Maroon theme
   ✅ Hover pe hand cursor feel (system pointer + ring expand)
   ===================================================== */

/* Desktop mouse only */
@media (hover:hover) and (pointer:fine){

  /* Default hide system cursor */
  html, body { cursor: none !important; }

  /* When hovering clickable: show HAND (system pointer) */
  html.ioHand, html.ioHand body { cursor: pointer !important; }

  /* Ring */
  .ioCursorRing{
    position: fixed;
    left: 0; top: 0;
    width: 34px; height: 34px;
    border: 2px solid #ffcc00;             /* Yellow */
    border-radius: 999px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2147483647;

    background: rgba(128, 0, 0, 0.08);     /* Light maroon tint */
    box-shadow:
      0 0 18px rgba(255, 204, 0, 0.28),
      0 0 0 10px rgba(255, 204, 0, 0.08);

    transition: width .18s ease, height .18s ease, border-color .18s ease, box-shadow .2s ease, background .2s ease;
    will-change: transform;
  }

  /* Dot */
  .ioCursorDot{
    position: fixed;
    left: 0; top: 0;
    width: 8px; height: 8px;
    background: #800000;                   /* Maroon */
    border-radius: 999px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2147483647;

    box-shadow: 0 0 12px rgba(128, 0, 0, 0.45);
    will-change: transform;
  }

  /* Hover (clickable area) */
  .ioCursorRing.isHover{
    width: 48px; height: 48px;
    border-color: #800000;                 /* Maroon border */
    background: rgba(255, 204, 0, 0.10);
    box-shadow:
      0 0 22px rgba(128, 0, 0, 0.35),
      0 0 0 14px rgba(128, 0, 0, 0.10);
  }

  /* Mouse Down */
  .ioCursorRing.isDown{
    width: 38px; height: 38px;
  }
}

/* Mobile / touch devices -> normal cursor */
@media (hover:none), (pointer:coarse){
  html, body { cursor: auto !important; }
}
/* =========================
   SPONSORS BEFORE BANNER
   ========================= */
.ioSponsorAd{
  width:100%;
  margin: 16px 0 10px;
  background: #f6f7fb;
  border: 1px solid #e6e9f0;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.ioSponsorAd__link{
  display:block;
  width:100%;
}

.ioSponsorAd__img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 10px;

}

/* Desktop leaderboard look */
@media (min-width: 992px){
  .ioSponsorAd{
   
  }
  .ioSponsorAd__img{
    max-height: 110px;   /* 970x90/100 feel */
    background:#000;     /* optional, premium feel */
  }
}

/* Mobile */
@media (max-width: 600px){
  .ioSponsorAd{
    margin: 12px 0 8px;
  }

  .ioSponsorAd__img{
    max-height: 120px; /* 320x100 feel */
    object-fit: contain;
  }
}
/* =========================
   FINAL MAC FOOTER FIX
   Contact left + Logo right
========================= */

.etFoot__top .etWrap{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  flex-wrap:nowrap !important;
}

.etFoot__blk{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}

.etFoot__right{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:12px !important;
  flex:0 0 auto !important;
  min-width:auto !important;
}

.etFoot__member{
  margin-left:0 !important;
  white-space:nowrap !important;
}

.etFoot__logo{
  padding-left:0 !important;
  margin-left:0 !important;
  height:32px !important;
  width:auto !important;
  display:block !important;
}

/* MacBook / small laptop */
@media (min-width: 900px) and (max-width: 1100px){
  .etFoot__top .etWrap{
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  .etFoot__member{
    font-size:12px !important;
    padding:8px 12px !important;
  }

  .etFoot__logo{
    height:28px !important;
  }
}

/* Tablet/mobile */
@media (max-width: 899px){
  .etFoot__top .etWrap{
    flex-wrap:wrap !important;
  }

  .etFoot__right{
    width:100% !important;
    margin-left:0 !important;
    justify-content:flex-start !important;
  }

  .etFoot__logo{
    height:28px !important;
  }
}
/* =========================
   FOOTER RIGHT STACK FIX
   Logo upar + Subscribe niche
========================= */

.etFoot__right{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:10px !important;
}

/* logo */
.etFoot__logo{
  height:34px;
  width:auto;
}

/* subscribe button */
.etFoot__member{
  margin:0 !important;
}

/* mobile me left align */
@media (max-width:900px){

  .etFoot__right{
    align-items:flex-start !important;
  }

}