@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Outfit:wght@100..900&display=swap');

:root {
    --primary: #2563eb;
    --primary-dark: #1e40af;
    --secondary: #f59e0b;
    --accent: #8b5cf6;
    --success: #10b981;
    --dark: #0f172a;
    --glass: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-dark: rgba(15, 23, 42, 0.7);
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--dark);
    scroll-behavior: smooth;
    background-color: #f8fafc;
}

h1,
h2,
h3,
h4,
.font-heading {
    font-family: 'Outfit', sans-serif;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.glass-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.05);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.02),
        0 10px 15px -3px rgba(0, 0, 0, 0.03),
        0 20px 25px -5px rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.glass-card:hover {
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.05),
        0 30px 40px -10px rgba(0, 0, 0, 0.04);
}

.glass-dark {
    background: var(--glass-dark);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.text-gradient-primary {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hover-lift {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.1);
}

.admission-roadmap-line {
    position: relative;
    padding-left: 3.5rem;
}

.admission-roadmap-line::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 2.5rem;
    bottom: -1.5rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary), transparent);
}

.admission-roadmap-line:last-child::before {
    display: none;
}

.step-circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background: white;
    border: 3px solid var(--primary);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.hero-gradient-overlay {
    background: linear-gradient(to top, #0f172a 0%, rgba(15, 23, 42, 0.7) 40%, transparent 100%);
}

.accent-blob {
    position: absolute;
    width: 400px;
    height: 400px;
    filter: blur(100px);
    border-radius: 50%;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-20px) rotate(2deg);
    }
}

.animate-float-slow {
    animation: float 6s ease-in-out infinite;
}

.card-decoration {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
    opacity: 0.05;
    filter: blur(20px);
    pointer-events: none;
}

.btn-premium {
    background: #0f172a;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-premium::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.btn-premium:hover {
    background: #1e293b;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
}

.btn-premium:hover::after {
    transform: translateX(100%);
}

.btn-primary-glow {
    background: var(--primary);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 4px 15px rgba(37, 99, 235, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.btn-primary-glow:hover {
    background: var(--primary-dark);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.5);
}

.nav-link-active {
    color: var(--primary);
}

.nav-link-active::after {
    width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════
   COLLEGE DETAIL — professional portal theme (matches homepage)
   Blue + orange, glassmorphism, mobile-first. Uses the rx-* class names
   already present in the markup so no template changes are needed.
   ═══════════════════════════════════════════════════════════════════ */

body { background-color: var(--bg, #F5F8FC) !important; }
h1, h2, h3, h4, .font-heading { font-family: 'Plus Jakarta Sans', Inter, sans-serif !important; letter-spacing: -.02em; }

/* ── Hero ───────────────────────────────────────────────────── */
.rx-hero {
    position: relative;
    min-height: clamp(320px, 42vh, 430px);
    display: flex; align-items: flex-end; overflow: hidden;
    background: linear-gradient(120deg, #16386F 0%, #1E50A0 58%, #2A62C9 100%);
}
.rx-hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: .16; transform: scale(1.04);
}
.rx-hero-veil {
    position: absolute; inset: 0;
    background: radial-gradient(760px 400px at 86% -18%, rgba(249,115,22,.20), transparent 60%),
                linear-gradient(180deg, rgba(12,32,68,.15) 0%, rgba(12,32,68,.55) 100%);
}
.rx-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1200px; margin: 0 auto; padding: 34px 32px 30px; }

.rx-crumbs { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7); margin-bottom: 16px; flex-wrap: wrap; text-transform: none; letter-spacing: 0; }
.rx-crumbs a { color: rgba(255,255,255,.7); transition: color .2s; }
.rx-crumbs a:hover { color: #fff; }
.rx-crumbs span { opacity: .5; }
.rx-crumb-current { color: #fff !important; opacity: 1 !important; }

.rx-hero-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.rx-hero-lede { max-width: 760px; }

.rx-eyebrow {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: none;
    color: #FBBF24; margin-bottom: 12px;
}
.rx-eyebrow .rx-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }

.rx-hero-title {
    font-family: 'Plus Jakarta Sans', Inter, sans-serif !important;
    font-weight: 800; color: #fff;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1.14; letter-spacing: -.025em; margin: 0 0 12px;
}
.rx-hero-sub { color: rgba(255,255,255,.82); font-size: clamp(.95rem,1.2vw,1.05rem); line-height: 1.55; max-width: 660px; margin: 0 0 20px; font-weight: 400; }

.rx-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.rx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 24px; border-radius: 10px;
    font-size: 14px; font-weight: 700; letter-spacing: .01em;
    transition: all .22s ease; cursor: pointer;
}
.rx-btn-gold { background: #F97316; color: #fff; box-shadow: 0 10px 24px -10px rgba(249,115,22,.7); }
.rx-btn-gold:hover { background: #EA6A0C; transform: translateY(-1px); }
.rx-btn-gold i { transition: transform .3s; }
.rx-btn-gold:hover i { transform: translateX(3px); }
.rx-btn-ghost {
    background: rgba(255,255,255,.13); color: #fff; border: 1px solid rgba(255,255,255,.25);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.rx-btn-ghost:hover { background: #fff; color: #1E50A0; }

/* glass fact rail */
.rx-hero-rail {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px;
    min-width: 280px;
}
.rx-rail-item {
    background: rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255,255,255,.2); border-radius: 12px;
    padding: 14px 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    transition: .25s;
}
.rx-rail-item:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.rx-rail-val { font-weight: 800; color: #fff; font-size: 1.15rem; line-height: 1.15; letter-spacing: -.01em; }
.rx-rail-label { font-size: 10.5px; font-weight: 650; color: rgba(255,255,255,.75); margin-top: 4px; }

/* ── Content surfaces ───────────────────────────────────────── */
.glass-card { border-radius: 14px !important; border: 1px solid #E5EAF1 !important; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 30px -20px rgba(15,23,42,.2) !important; }
.glass-card:hover { border-color: #CFDCEF !important; }

/* accent bars & links back to portal blue/orange */
.bg-blue-600, span.w-1\.5.bg-blue-600 { background-color: #1E50A0 !important; }
.text-indigo-600, .text-blue-600 { color: #1E50A0 !important; }
.bg-indigo-50, .bg-blue-50\/50 { background-color: #EEF3FB !important; }

#college-key-facts th { color: #64748B !important; font-weight: 650; }
#college-key-facts td { color: #0F172A !important; }
#college-key-facts tr { border-bottom: 1px solid #E5EAF1; }

/* sticky section nav → frosted */
.bg-white\/60.backdrop-blur-2xl {
    background: rgba(255,255,255,.82) !important;
    -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid #E5EAF1 !important;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .rx-hero { min-height: auto; }
    .rx-hero-inner { padding: 24px 18px 24px; }
    .rx-hero-grid { flex-direction: column; align-items: stretch; gap: 18px; }
    .rx-hero-rail { min-width: 0; width: 100%; }
}
@media (max-width: 640px) {
    .rx-hero-title { font-size: clamp(1.4rem, 6.2vw, 1.85rem); }
    .rx-hero-sub { font-size: .93rem; }
    .rx-hero-cta .rx-btn { flex: 1 1 auto; }
    .rx-rail-val { font-size: 1rem; }
    .accent-blob { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   COLLEGE DETAIL — PHONE TYPOGRAPHY & SPACING LAYER
   Every tab (Courses & Fees, Admission, Cutoff, Placements, …) renders
   inside .cd-tabwrap. Each of those sections was written at a different
   time against a desktop canvas, so on a phone they arrived with
   different heading sizes, label sizes, card padding and button shapes —
   the page read as several websites stacked together.

   These rules impose ONE scale on all of them:
       section title 17px · block title 14px · card title 12.5px
       body 13px · label 8.5px · value 12px
       card padding 12px · radius 14px · button 38px/10px uppercase
   Structural changes (what goes two-up, what is hidden) stay in the
   individual section files.

   !important throughout: Tailwind's CDN injects utilities after this file.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ── type scale ─────────────────────────────────────────── */
    .cd-tabwrap h2 { font-size: 17px !important; line-height: 1.22 !important; letter-spacing: -.01em; }
    .cd-tabwrap h3 { font-size: 14px !important; line-height: 1.28 !important; }
    .cd-tabwrap h4 { font-size: 12.5px !important; line-height: 1.3 !important; }
    .cd-tabwrap p,
    .cd-tabwrap li,
    .cd-tabwrap dd  { font-size: 13px !important; line-height: 1.6 !important; }

    /* oversized display utilities inside a tab all collapse to the value size */
    .cd-tabwrap .text-4xl, .cd-tabwrap .text-3xl, .cd-tabwrap .text-2xl,
    .cd-tabwrap .md\:text-4xl, .cd-tabwrap .md\:text-3xl,
    .cd-tabwrap .md\:text-2xl { font-size: 15px !important; line-height: 1.2 !important; }
    .cd-tabwrap .text-xl, .cd-tabwrap .text-lg { font-size: 13.5px !important; line-height: 1.25 !important; }

    /* the many hand-tuned micro sizes (8px…11px) land on two steps */
    .cd-tabwrap .text-\[8px\], .cd-tabwrap .text-\[9px\], .cd-tabwrap .text-\[10px\],
    .cd-tabwrap dt, .cd-tabwrap .uppercase.tracking-widest { font-size: 8.5px !important; letter-spacing: .08em !important; }
    .cd-tabwrap .text-\[11px\], .cd-tabwrap .text-\[12px\], .cd-tabwrap .text-\[13px\],
    .cd-tabwrap .text-xs { font-size: 11.5px !important; }
    .cd-tabwrap .text-sm { font-size: 12.5px !important; }
    .cd-tabwrap .italic { font-style: normal !important; }   /* italic body copy reads as broken on a phone */

    /* ── surfaces ───────────────────────────────────────────── */
    .cd-tabwrap .rounded-\[3rem\], .cd-tabwrap .rounded-\[2rem\],
    .cd-tabwrap .rounded-3xl, .cd-tabwrap .rounded-2xl { border-radius: 14px !important; }
    .cd-tabwrap .rounded-xl { border-radius: 12px !important; }
    .cd-tabwrap .p-10, .cd-tabwrap .p-8, .cd-tabwrap .p-6, .cd-tabwrap .p-5 { padding: 12px !important; }
    .cd-tabwrap .px-6, .cd-tabwrap .px-5 { padding-left: 12px !important; padding-right: 12px !important; }
    .cd-tabwrap .py-5, .cd-tabwrap .py-4 { padding-top: 10px !important; padding-bottom: 10px !important; }
    .cd-tabwrap .gap-8, .cd-tabwrap .gap-6, .cd-tabwrap .gap-5 { gap: 10px !important; }
    .cd-tabwrap .space-y-8 > * + *, .cd-tabwrap .space-y-6 > * + * { margin-top: 14px !important; }
    .cd-tabwrap .mt-16, .cd-tabwrap .mt-12, .cd-tabwrap .mt-10 { margin-top: 18px !important; }
    .cd-tabwrap .mb-10, .cd-tabwrap .mb-8, .cd-tabwrap .mb-6 { margin-bottom: 12px !important; }
    /* Decorative blobs cost paint and clip oddly in a 165px card. `:empty` is what
       separates them from the round badges that carry a step number or a count —
       hiding those too made the admission stepper lose its 1-2-3-4. */
    .cd-tabwrap div.absolute.rounded-full:empty { display: none !important; }

    /* ── controls: one button shape everywhere ──────────────── */
    .cd-tabwrap button:not(.cd-keep),
    .cd-tabwrap a.inline-flex[class*="bg-"],
    .cd-tabwrap a[class*="rounded"][class*="bg-indigo"] {
        min-height: 38px; padding: 10px 14px !important; border-radius: 12px !important;
        font-size: 10px !important; letter-spacing: .1em !important;
    }
    .cd-tabwrap button:active { transform: scale(.97); }

    /* ── tables: never let an imported table stretch the page ── */
    .cd-tabwrap table { display: block; overflow-x: auto; white-space: nowrap; font-size: 11.5px !important; }
    .cd-tabwrap td, .cd-tabwrap th { padding: 8px 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE
   portal.css already remaps the Tailwind greys the page is mostly built
   from. What it cannot reach is the handful of surfaces this file pins
   with `!important` — it loads after portal.css, so on an equal-specificity
   tie these rules win. Left alone they held the enquiry card and the sticky
   section nav white while the text on them had already been lightened, which
   is the white-on-white the detail page showed.

   Values are the same ones portal.css uses for --card / --line / --ink, spelt
   out rather than read through var(): several of the rules below also have to
   beat an !important literal, and matching that literally keeps the winner
   obvious when reading the cascade.
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .glass-card {
    background: #151E30 !important;
    border-color: #24314A !important;
}
[data-theme="dark"] .glass-card:hover { border-color: #2F3F5E !important; }

/* The frosted section nav. Same veil, mixed from the page ground instead of
   from white, so the tab labels keep their contrast while scrolling. */
[data-theme="dark"] .bg-white\/60.backdrop-blur-2xl {
    background: rgba(11, 18, 32, .86) !important;
    border-bottom-color: #24314A !important;
}

[data-theme="dark"] #college-key-facts th { color: #94A5BD !important; }
[data-theme="dark"] #college-key-facts td { color: #E8EEF8 !important; }
[data-theme="dark"] #college-key-facts tr { border-bottom-color: #24314A; }

/* Soft blue fills used behind labels and the "applying to" strip. */
[data-theme="dark"] .bg-indigo-50,
[data-theme="dark"] .bg-blue-50\/50 { background-color: #16233C !important; }
[data-theme="dark"] .text-indigo-600,
[data-theme="dark"] .text-blue-600 { color: #7BA5F5 !important; }
[data-theme="dark"] .bg-blue-600,
[data-theme="dark"] span.w-1\.5.bg-blue-600 { background-color: #5B8DEF !important; }