/* =========================
   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;
}

/* Small meta text everywhere */
small,
.t,
em,
.post time,
.railN,
.railT,
.heroLatest__card em{
  font-size: var(--meta);
  color: var(--muted);
}

/* ===== 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);
}

/* 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;
  height: 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:10px;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:12px 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:10px;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:10px 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} }

/* 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 expo-ads.jpg');
  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:42px;
  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:12px;
  flex-wrap:wrap;
}

.etFoot__brand{
  color:#fff;
  font-weight:900;
  line-height:1.05;
  text-align:right;
}
.etFoot__brand b{
  display:block;
  color: #f3d400; /* yellow */
  font-weight:1000;
}

.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;
  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;
  }
}

/* Mobile */
@media (max-width: 560px){
  .etFoot__top .etWrap{
    flex-direction:column;
    gap:14px;
  }
  .etFoot__sep{ display:none; }     /* separators remove */
  .etFoot__blk, .etFoot__right{ width:100%; }

  .etFoot__copyIn{
    display:flex;
    flex-wrap:wrap;
    gap:8px 12px;
  }
  .etFoot__copySep{ display:none; }
}