:root{--primary:#1a2e6b;--primary-dark:#111e4a;--primary-light:#2a4090;--accent:#f5c518;--accent-dark:#d4a800;--accent-light:#ffd740;--text:#1a1a2e;--text-muted:#5a6480;--text-light:#8892a4;--surface:#fff;--surface-alt:#f7f8fc;--surface-card:#fff;--border:#e2e6ef;--border-light:#eef0f8;--shadow-sm:0 1px 3px rgba(26,46,107,.08);--shadow-md:0 4px 16px rgba(26,46,107,.12);--shadow-lg:0 8px 32px rgba(26,46,107,.16);--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--font-heading:'Plus Jakarta Sans',system-ui,sans-serif;--font-body:'Plus Jakarta Sans',system-ui,sans-serif;--max-width:1200px;--nav-h:64px}
*,*::before,*::after{box-sizing:border-box;padding:10}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px;overflow-x:hidden}
body{font-family:var(--font-body);color:var(--text);background:var(--surface);line-height:1.6;-webkit-font-smoothing:antialiased;padding:10; overflow-x:hidden !important}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:local('Plus Jakarta Sans')}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{width:100%;max-width:var(--max-width);margin-inline:auto;padding-inline:20px}
.skip-link{position:absolute;top:-50px;left:0;background:var(--primary);color:#fff;padding:8px 16px;z-index:10000;transition:top .2s;border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{top:0}

h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.25;color:var(--primary-dark)}
h1{font-size:clamp(1.75rem,4vw,2.5rem)}
h2{font-size:clamp(1.35rem,3vw,1.875rem)}
h3{font-size:clamp(1.1rem,2vw,1.375rem)}

.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--primary-dark);font-weight:700;padding:11px 24px;border-radius:var(--radius-md);border:none;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s;white-space:nowrap;font-size:.9375rem;line-height:1}
.btn-primary:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--primary);font-weight:600;padding:10px 22px;border-radius:var(--radius-md);border:2px solid var(--primary);cursor:pointer;transition:background .2s,color .2s;font-size:.9375rem;white-space:nowrap;line-height:1}
.btn-secondary:hover{background:var(--primary);color:#fff}

.section-title{font-size:clamp(1.35rem,2.5vw,1.75rem);color:var(--primary-dark);margin-bottom:8px}
.section-sub{color:var(--text-muted);font-size:.9375rem;margin-bottom:28px}
.section-header{text-align:center;margin-bottom:36px}

.card{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}

.badge-new{display:inline-flex;align-items:center;background:var(--accent);color:var(--primary-dark);font-size:.65rem;font-weight:800;padding:2px 7px;border-radius:99px;letter-spacing:.05em;text-transform:uppercase}
.badge-fresher{background:#e8f5e9;color:#2e7d32}
.badge-exp{background:#e3f2fd;color:#1565c0}
.badge-intern{background:#fff3e0;color:#e65100}

@media(max-width:768px){.container{padding-inline:16px}}



/* ============================================================
   ADSENSE AD SLOTS — MOBILE-FIRST CSS
   Rules:
   - No overflow:hidden (breaks sticky/fixed elements)
   - contain:layout instead (CLS-safe)
   - Reserved height prevents layout shift
   - Responsive for all mobile screen widths
   ============================================================ */

/* ── Base slot wrapper ───────────────────────────────────── */
.ad-slot {
  display: block;
  width: 100%;
  margin: 16px auto;
  text-align: center;
  contain: layout;          /* CLS-safe, no overflow:hidden */
}

/* The actual <ins> tag */
.ad-slot ins.adsbygoogle {
  display: block !important;
  margin: 0 auto;
}

/* ── In-article / content ad (between sections) ─────────── */
.ad-slot--inline {
  min-height: 100px;        /* Reserve space before ad fills */
}

/* ── Top-of-page banner ──────────────────────────────────── */
.ad-slot--banner {
  min-height: 90px;
}

/* ── Sidebar / sticky ad (desktop only) ─────────────────── */
.ad-slot--sidebar {
  min-height: 250px;
}

/* ── Below-content / footer ad ──────────────────────────── */
.ad-slot--footer {
  min-height: 100px;
  margin-bottom: 24px;
}

/* ── Interstitial / large rectangle ─────────────────────── */
.ad-slot--rect {
  min-height: 250px;
}


/* ============================================================
   MOBILE BREAKPOINTS
   320px  → very small (Galaxy A series, older iPhones)
   360px  → most Android flagships
   375px  → iPhone SE / 12 mini
   390px  → iPhone 14/15
   412px  → Pixel / large Android
   ============================================================ */

/* ── 320px and up (base mobile) ─────────────────────────── */
@media (max-width: 359px) {
  .ad-slot {
    margin: 10px auto;
  }
  .ad-slot ins.adsbygoogle {
    width: 300px !important;   /* Safe fixed width for tiny screens */
    height: auto !important;
  }
  .ad-slot--inline,
  .ad-slot--footer {
    min-height: 100px;
  }
  .ad-slot--banner {
    min-height: 50px;          /* 320×50 mobile banner */
  }
}

/* ── 360px–374px (common Android) ───────────────────────── */
@media (min-width: 360px) and (max-width: 374px) {
  .ad-slot ins.adsbygoogle {
    width: 336px !important;
    height: auto !important;
  }
}

/* ── 375px–389px (iPhone SE, 12 mini) ───────────────────── */
@media (min-width: 375px) and (max-width: 389px) {
  .ad-slot ins.adsbygoogle {
    width: 360px !important;
    height: auto !important;
  }
}

/* ── 390px–411px (iPhone 14/15) ─────────────────────────── */
@media (min-width: 390px) and (max-width: 411px) {
  .ad-slot ins.adsbygoogle {
    width: 375px !important;
    height: auto !important;
  }
}

/* ── 412px–767px (large Android, small tablets) ─────────── */
@media (min-width: 412px) and (max-width: 767px) {
  .ad-slot ins.adsbygoogle {
    width: 100% !important;
    max-width: 468px !important;
    height: auto !important;
  }
}

/* ── Tablet (768px–1023px) ───────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .ad-slot ins.adsbygoogle {
    min-width: 600px !important;   /* Leaderboard fits tablets */
    height: auto !important;
  }
  .ad-slot--banner {
    min-height: 90px;
  }
}

/* ── Desktop (1024px+) ───────────────────────────────────── */
@media (min-width: 1024px) {
  .ad-slot ins.adsbygoogle {
    width: 100% !important;
    height: auto !important;
  }
  .ad-slot--sidebar {
    position: sticky;
    top: 80px;                 /* Below navbar */
  }
}


/* ============================================================
   CLS GUARD — Filled state
   Once AdSense fills the slot it adds data-ad-status="filled"
   Remove reserved min-height so no dead whitespace remains
   ============================================================ */
.ad-slot ins.adsbygoogle[data-ad-status="filled"] {
  min-height: unset !important;
}

/* Hide unfilled slots cleanly — no blank white space */
.ad-slot ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
  min-height: 0 !important;
}