/* =========================================================
   Invest Telangana — /resources/ redesign  (scope: body.tgn-res)

   This RESTYLES the existing Elementor markup rather than replacing it, so
   every word, number, image and table on the page is untouched — the brief was
   explicitly "keep the content as it is". Same design language as /home-new/:
   Manrope + Newsreader, #0B4EA2 blue, #0E8A45 green, mint on dark.

   PALETTE CONSTRAINT: no orange / saffron / yellow / pink anywhere. Several of
   the theme's defaults are orange, so they are overridden below.
   ========================================================= */

body.tgn-res {
  --blue:#0B4EA2; --blue-d:#083C7D; --blue-ink:#06203F;
  --green:#0E8A45; --green-d:#0A6B35; --mint:#7EDDA4; --sky:#8FC3FF;
  --ink:#101828; --muted:#667085; --line:#E4E7EC; --tint:#F5F8FD;
  --ease:cubic-bezier(.22,.61,.36,1);
}

body.tgn-res{font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}

/* ---------------- section rhythm + grounds ----------------
   NEVER stripe by section index. On this page a heading and the body it
   introduces are SEPARATE top-level Elementor sections, so alternating per
   section drew the colour change straight between a title and its own content
   and made them read as two unrelated blocks. The JS instead walks the page and
   gives every section from one h2 up to the next h2 the SAME group class, so a
   background change only ever happens at a real section boundary. */
body.tgn-res .elementor-section.elementor-top-section{padding-block:clamp(30px,3.4vw,48px)}
body.tgn-res .elementor-top-section.tgn-gA{background-color:#fff!important}
body.tgn-res .elementor-top-section.tgn-gB{background-color:var(--tint)!important}
/* a group's first section carries the top padding, the last carries the bottom,
   so a multi-section group still reads as one continuous block */
body.tgn-res .elementor-top-section.tgn-gmid{padding-block:0!important}
body.tgn-res .elementor-top-section.tgn-gtop{padding-bottom:0!important}
body.tgn-res .elementor-top-section.tgn-gend{padding-top:0!important}

/* ---------------- typography ---------------- */
body.tgn-res .elementor-widget-heading .elementor-heading-title{
  font-family:'Manrope',sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.14;color:var(--ink);
  /* the theme force-uppercases headings; sentence case reads better in the new
     system. !important because Elementor's per-element CSS also sets it. */
  text-transform:none!important}
body.tgn-res .elementor-widget-heading h2.elementor-heading-title{font-size:clamp(26px,3.4vw,42px)}
body.tgn-res .elementor-widget-heading h3.elementor-heading-title{font-size:clamp(19px,2.2vw,25px)}
/* accent rule under every section heading */
body.tgn-res .elementor-widget-heading h2.elementor-heading-title::after{
  content:'';display:block;width:54px;height:3px;margin-top:16px;
  background:linear-gradient(90deg,var(--blue),var(--green))}
/* the JS tags centred headings so the rule sits under the text, not off to the left */
body.tgn-res .elementor-heading-title.tgn-c::after{margin-inline:auto}
body.tgn-res .elementor-heading-title.tgn-rt::after{margin-inline:auto 0}
body.tgn-res .elementor-widget-text-editor{font-size:15.6px;line-height:1.78;color:var(--muted)}
body.tgn-res .elementor-widget-text-editor b,
body.tgn-res .elementor-widget-text-editor strong{color:var(--ink);font-weight:800}
body.tgn-res .elementor-widget-text-editor a{color:var(--blue);font-weight:700;border-bottom:1px solid rgba(11,78,162,.35);transition:border-color .25s,color .25s}
body.tgn-res .elementor-widget-text-editor a:hover{color:var(--green);border-bottom-color:var(--green)}

/* dividers become hairlines in the new palette */
body.tgn-res .elementor-widget-divider .elementor-divider-separator{border-top-color:var(--line)!important}

/* ---------------- tables ---------------- */
body.tgn-res .jet-table{border-collapse:separate;border-spacing:0;width:100%;
  border:1px solid var(--line);background:#fff;overflow:hidden}
body.tgn-res .jet-table__head-cell{
  background:var(--blue-ink)!important;color:#fff!important;
  font-size:11.5px!important;font-weight:800!important;letter-spacing:1.4px;text-transform:uppercase;
  padding:15px 11px!important;vertical-align:middle;border:0!important}
body.tgn-res .jet-table__head-cell .jet-table__cell-text{color:#fff!important}
body.tgn-res .jet-table__body-cell{
  padding:15px 11px!important;font-size:14.2px!important;color:var(--ink)!important;
  border:0!important;border-top:1px solid var(--line)!important;vertical-align:middle;background:#fff!important}
body.tgn-res .jet-table__body-row{transition:background .25s}
body.tgn-res .jet-table__body-row:hover .jet-table__body-cell{background:var(--tint)!important}
/* first column carries the institution name — give it weight */
body.tgn-res .jet-table__body-cell:first-child{font-weight:800}
/* Rank column reads as a badge — but ONLY on a table whose last column really is
   a rank. The JS tags those; without it the second table's "Institutions" counts
   would be styled as ranks too. */
body.tgn-res .jet-table.tgn-ranked .jet-table__body-cell:last-child .jet-table__cell-text{
  display:inline-block;padding:5px 11px;background:rgba(14,138,69,.10);
  color:var(--green)!important;font-weight:800;font-size:13.4px;white-space:nowrap}
body.tgn-res .jet-table-wrapper{overflow-x:auto}
/* The table was ~12px wider than its wrapper, so a stray horizontal scrollbar
   sat under it. Border-box stops the 1px borders adding to width:100%, and
   letting long tokens break lowers the min-content width so the table fits.
   Content is untouched -- this only changes where lines may wrap. */
body.tgn-res .jet-table{box-sizing:border-box;max-width:100%;table-layout:auto}
body.tgn-res .jet-table__head-cell,
body.tgn-res .jet-table__body-cell{box-sizing:border-box;overflow-wrap:break-word;hyphens:none}

/* ---------------- raven counters ---------------- */
body.tgn-res .elementor-widget-raven-counter{padding:22px 20px;background:#fff;border:1px solid var(--line);
  transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s}
body.tgn-res .elementor-widget-raven-counter:hover{transform:translateY(-5px);
  box-shadow:0 24px 48px -28px rgba(6,32,63,.4);border-color:#D6DEEA}
body.tgn-res .raven-counter-number-wrapper,
body.tgn-res .raven-counter-number{font-family:'Manrope',sans-serif!important;font-weight:800!important;
  letter-spacing:-.03em;color:var(--blue)!important}
body.tgn-res .raven-counter-title{font-size:13.4px!important;font-weight:700;color:var(--muted)!important;margin-top:6px}

/* ---------------- buttons ---------------- */
body.tgn-res .elementor-widget-raven-button .raven-button,
body.tgn-res .elementor-button{
  background:var(--green)!important;color:#fff!important;border-radius:0!important;
  font-weight:800!important;letter-spacing:.01em;padding:15px 28px!important;
  transition:background .28s,transform .28s var(--ease)}
body.tgn-res .elementor-widget-raven-button .raven-button:hover,
body.tgn-res .elementor-button:hover{background:var(--green-d)!important;transform:translateY(-2px)}

/* ---------------- images ---------------- */
body.tgn-res .elementor-widget-image img{border:1px solid var(--line);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
body.tgn-res .elementor-widget-image:hover img{transform:translateY(-4px);box-shadow:0 26px 52px -30px rgba(6,32,63,.45)}

/* ---------------- scroll reveal (added by the JS) ---------------- */
body.tgn-res .tgn-r{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
body.tgn-res .tgn-r.is-in{opacity:1;transform:none}

/* =========================================================
   DE-ORANGE — the theme and JetElements ship orange defaults
   ========================================================= */
body.tgn-res .jet-bar-chart .jet-bar-chart__bar,
body.tgn-res .jet-bar-chart__bar-inner{background-color:var(--blue)!important}
body.tgn-res .jet-table__head-cell,
body.tgn-res .jet-table__cell{border-color:var(--line)!important}

@media (max-width:1200px){
  body.tgn-res .jet-table__head-cell,
  body.tgn-res .jet-table__body-cell{padding:13px 7px!important}
  body.tgn-res .jet-table__body-cell{font-size:13.2px!important}
  body.tgn-res .jet-table__head-cell{font-size:10.6px!important;letter-spacing:.7px}
  body.tgn-res .jet-table.tgn-ranked .jet-table__body-cell:last-child .jet-table__cell-text{
    padding:4px 8px;font-size:12.6px}
}

@media (max-width:950px){
  body.tgn-res .jet-table__head-cell,
  body.tgn-res .jet-table__body-cell{padding:11px 5px!important}
  body.tgn-res .jet-table__body-cell{font-size:12.4px!important}
  body.tgn-res .jet-table__head-cell{font-size:10px!important;letter-spacing:.4px}
  body.tgn-res .jet-table.tgn-ranked .jet-table__body-cell:last-child .jet-table__cell-text{
    padding:3px 6px;font-size:11.8px}
}

@media (max-width:880px){
  body.tgn-res .jet-table__head-cell,
  body.tgn-res .jet-table__body-cell{padding:10px 4px!important}
  body.tgn-res .jet-table__body-cell{font-size:11.9px!important}
  body.tgn-res .jet-table__head-cell{font-size:9.6px!important;letter-spacing:.2px}
}

@media (max-width:820px){
  body.tgn-res .elementor-section.elementor-top-section{padding-block:30px}
}

@media (prefers-reduced-motion:reduce){
  body.tgn-res *,body.tgn-res *::before,body.tgn-res *::after{animation:none!important;transition-duration:.01ms!important}
  body.tgn-res .tgn-r{opacity:1;transform:none}
}