/* ==========================================================
   PROFILE PAGES — Institute / School / College  (includes/profile-ui.php)
   ----------------------------------------------------------
   Saari classes "pf-" prefix se hain, isliye site ki baaki CSS
   par koi asar nahi. Har entity ka rang-roop PHP se aata hai:
   --pf-c1 / --pf-c2 / --pf-c3  (id ke hisaab se 8 palettes).
   Animations "prefers-reduced-motion" par band ho jaati hain.
   Ye file sirf in teeno public pages par load hoti hai.
   ========================================================== */

.pf {
    --pf-c1: #4f46e5;
    --pf-c2: #7c3aed;
    --pf-c3: #db2777;
    padding: 22px 0 56px;
}
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf :where(h1, h2, p) { margin: 0; }      /* :where = specificity 0, taaki neeche ke margins jeetein */
.pf :where(a) { text-decoration: none; }

/* ---------- reveal on scroll (sirf JS chalne par — warna sab dikhta hai) ---------- */
.pf-js .pf-reveal { opacity: 0; transform: translateY(20px); }
.pf-js .pf-reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .6s ease var(--d, 0ms), transform .6s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
}

/* ==========================================================
   HERO
   ========================================================== */
.pf-hero {
    position: relative;
    isolation: isolate;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(120deg, var(--pf-c1), var(--pf-c2) 55%, var(--pf-c3));
    background-size: 200% 200%;
    animation: pfGrad 16s ease infinite;
    box-shadow: 0 26px 60px -28px rgba(30, 27, 58, .55);
}
.pf-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }   /* clipping yahin — hero khud overflow:visible rehta hai taaki share menu kate nahi */
.pf-hero-bg::after {            /* text hamesha padhne layak rahe */
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 12, 40, .10) 0%, rgba(15, 12, 40, .42) 100%);
}
.pf-hero-cover {
    position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px);
    object-fit: cover; opacity: .24; filter: blur(3px) saturate(1.3);
}
.pf-blob { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .55; animation: pfFloat 18s ease-in-out infinite; }
.pf-blob.b1 { width: 340px; height: 340px; background: var(--pf-c3); top: -130px; right: -70px; }
.pf-blob.b2 { width: 300px; height: 300px; background: var(--pf-c1); bottom: -150px; left: 8%; animation-delay: -6s; }
.pf-blob.b3 { width: 200px; height: 200px; background: #fbbf24; top: 18%; left: 58%; opacity: .32; animation-delay: -11s; }
.pf-dots {
    position: absolute; inset: 0; z-index: 1; opacity: .5;
    background: radial-gradient(rgba(255, 255, 255, .26) 1.3px, transparent 1.7px) 0 0 / 24px 24px;
    -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 60%);
            mask-image: linear-gradient(115deg, #000 0%, transparent 60%);
}

.pf-hero-inner { position: relative; z-index: 2; padding: 26px 34px 62px; }

.pf-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .88);
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
    transition: background .2s ease, color .2s ease;
}
.pf-back:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.pf-hero-main { display: flex; align-items: center; gap: 26px; margin-top: 22px; }

/* logo — rangeen ghoomti frame ke saath */
.pf-logo {
    flex: 0 0 auto; width: 132px; height: 132px; padding: 4px;
    border-radius: 34px;
    background: linear-gradient(135deg, #fff, var(--pf-c3), #fbbf24, #fff);
    background-size: 300% 300%;
    animation: pfGrad 7s ease infinite;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, .45);
}
.pf-logo-in {
    position: relative; width: 100%; height: 100%;
    border-radius: 30px; background: #fff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.pf-logo-ini {
    font-size: 44px; font-weight: 800; letter-spacing: -1px; line-height: 1;
    background: linear-gradient(135deg, var(--pf-c1), var(--pf-c3));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.pf-logo-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; padding: 9px; background: #fff;
}

.pf-hero-info { min-width: 0; flex: 1 1 auto; }
.pf-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.pf-tag {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    padding: 5px 12px; border-radius: 999px; color: #fff;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .32);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pf-verified {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 800; padding: 5px 12px 5px 8px; border-radius: 999px;
    color: #047857; background: #fff;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4);
}
.pf-verified svg { color: #10b981; flex: 0 0 auto; }
.pf-verified::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
    background: linear-gradient(100deg, transparent, rgba(16, 185, 129, .28), transparent);
    animation: pfShine 3.6s ease-in-out infinite;
}

.pf-title {
    font-size: clamp(24px, 3.6vw + .6rem, 42px);
    font-weight: 800; line-height: 1.14; letter-spacing: -.6px;
    color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .22);
    overflow-wrap: anywhere;
}
.pf-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pf-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: #fff;
    padding: 7px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pf-pill small { font-size: 12px; font-weight: 500; opacity: .85; }
.pf-pill-star { background: rgba(251, 191, 36, .28); border-color: rgba(253, 224, 71, .55); }

/* ---------- buttons ---------- */
.pf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; }
.pf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 11px 22px; border-radius: 999px; border: 0;
    font-family: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.2;
    cursor: pointer; text-align: center; white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.pf-btn:hover { transform: translateY(-2px); }
.pf-btn:active { transform: translateY(0) scale(.98); }
.pf-btn:focus-visible, .pf-tabs a:focus-visible, .pf-g:focus-visible, .pf-more-btn:focus-visible,
.pf-lb button:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.pf-btn-block { width: 100%; }
.pf-btn-light { background: #fff; color: #1e1b3a; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.pf-btn-light:hover { color: #1e1b3a; box-shadow: 0 14px 28px -10px rgba(0, 0, 0, .55); }
.pf-btn-glass { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pf-btn-glass:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.pf-btn-grad {
    color: #fff; background: linear-gradient(120deg, var(--pf-c1), var(--pf-c2) 60%, var(--pf-c3));
    background-size: 180% 100%; background-position: 0 0;
    box-shadow: 0 12px 24px -10px var(--pf-c2);
}
.pf-btn-grad:hover { color: #fff; background-position: 100% 0; }
.pf-btn-wa { color: #fff; background: linear-gradient(120deg, #16a34a, #22c55e); box-shadow: 0 12px 24px -12px #16a34a; }
.pf-btn-wa:hover { color: #fff; }
.pf-btn-ghost { color: var(--pf-c1); background: #fff; border: 1.5px solid var(--pf-c1); }
.pf-btn-ghost:hover { color: #fff; background: var(--pf-c1); }

/* site ka wishlist button hero ke rang me */
.pf-hero .wish-btn {
    min-height: 46px; padding: 11px 20px; gap: 8px; font-size: 14.5px; font-weight: 700;
    color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .4);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pf-hero .wish-btn .wish-tx { font-size: 14.5px; font-weight: 700; }
.pf-hero .wish-btn:hover { color: #fff; background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .6); transform: translateY(-2px); }
.pf-hero .wish-btn.is-on { color: #e11d48; background: #fff; border-color: #fff; }
.pf-hero .wish-btn.is-on:hover { color: #e11d48; background: #fff; }

/* share menu */
.pf-share { position: relative; display: none; }
.pf-js .pf-share { display: block; }
.pf-share-menu {
    position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 20; min-width: 200px; padding: 8px;   /* upar kholta hai — neeche stats/tabs se takrata */
    background: #fff; border-radius: 18px; border: 1px solid var(--color-border);
    box-shadow: 0 24px 50px -16px rgba(30, 27, 58, .45);
    animation: pfPop .18s ease;
}
.pf-share-menu[hidden] { display: none; }
.pf-share-menu.is-down { bottom: auto; top: calc(100% + 10px); }
.pf-hero.share-open { z-index: 495; }        /* menu tab-bar (490) ke upar, header (500) ke neeche */
.pf-share-menu a, .pf-share-menu button {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 10px 12px; border: 0; border-radius: 12px; background: transparent;
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--color-text); cursor: pointer; text-align: left;
}
.pf-share-menu a:hover, .pf-share-menu button:hover { background: var(--color-bg); color: var(--color-text); }
.pf-share-menu em { font-style: normal; }
.pf-share-menu span {
    width: 28px; height: 28px; border-radius: 9px; flex: 0 0 auto;
    display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800;
}

/* ==========================================================
   STATS  (hero ke neeche halka sa overlap)
   ========================================================== */
.pf-stats {
    position: relative; z-index: 3;
    display: flex; flex-wrap: wrap; gap: 14px;          /* flex: aakhri row ke card bhi barabar failte hain */
    margin: -34px 22px 0;
}
.pf-stat {
    flex: 1 1 190px; min-width: 0;
    display: flex; align-items: center; gap: 14px; padding: 16px 18px;
    background: #fff; border: 1px solid var(--color-border); border-radius: 20px;
    box-shadow: 0 16px 34px -18px rgba(30, 27, 58, .38);
    transition: transform .25s ease, box-shadow .25s ease;
}
.pf-stat:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -18px rgba(30, 27, 58, .45); }
.pf-stat-ic {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 15px;
    display: grid; place-items: center; font-size: 23px; color: #fff;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 10px 18px -8px #6366f1;
}
.pf-stat.s1 .pf-stat-ic { background: linear-gradient(135deg, #f97316, #ec4899); box-shadow: 0 10px 18px -8px #f97316; }
.pf-stat.s2 .pf-stat-ic { background: linear-gradient(135deg, #10b981, #0d9488); box-shadow: 0 10px 18px -8px #10b981; }
.pf-stat.s3 .pf-stat-ic { background: linear-gradient(135deg, #0ea5e9, #6366f1); box-shadow: 0 10px 18px -8px #0ea5e9; }
.pf-stat.s4 .pf-stat-ic { background: linear-gradient(135deg, #ec4899, #f43f5e); box-shadow: 0 10px 18px -8px #ec4899; }
.pf-stat b { display: block; white-space: nowrap; font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.5px; color: var(--color-text); font-variant-numeric: tabular-nums; }
.pf-stat small { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }

/* ==========================================================
   SECTION TABS  (JS se top par chipakte hain — main.js jaisa)
   ========================================================== */
.pf-tabs-slot { margin: 26px 0 18px; }
.pf-tabs {
    position: relative; z-index: 490;
    background: rgba(255, 255, 255, .94); border: 1px solid var(--color-border);
    border-radius: 999px; box-shadow: var(--shadow-sm);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pf-tabs-in {
    display: flex; gap: 6px; padding: 6px; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pf-tabs-in::-webkit-scrollbar { display: none; }
.pf-tabs a {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 17px; border-radius: 999px; white-space: nowrap;
    font-size: 13.5px; font-weight: 700; color: var(--color-text-muted);
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.pf-tabs a:hover { color: var(--pf-c1); background: rgba(79, 70, 229, .07); }
.pf-tabs a.is-active {
    color: #fff; background: linear-gradient(120deg, var(--pf-c1), var(--pf-c2));
    box-shadow: 0 8px 16px -8px var(--pf-c2);
}
.pf-tabs.is-fixed {
    position: fixed; left: 0; right: 0; border-radius: 0; border-width: 0 0 1px;
    box-shadow: 0 8px 22px -12px rgba(30, 27, 58, .3);
}
.pf-tabs.is-fixed .pf-tabs-in { max-width: 1240px; margin: 0 auto; padding: 8px 20px; }

/* ==========================================================
   LAYOUT + CARDS
   ========================================================== */
.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 24px; align-items: start; }
.pf-main, .pf-aside { min-width: 0; }

.pf-card {
    position: relative; overflow: hidden;
    background: #fff; border: 1px solid var(--color-border); border-radius: 24px;
    padding: 26px 28px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.pf-card::before {
    content: ''; position: absolute; left: 0; top: 22px; bottom: 22px; width: 4px; border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--pf-c1), var(--pf-c3));
}
.pf-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 19px; font-weight: 800; letter-spacing: -.2px; color: var(--color-text); }
.pf-h small { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
.pf-h-ic {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    font-size: 19px; color: #fff; background: linear-gradient(135deg, var(--pf-c1), var(--pf-c2));
    box-shadow: 0 8px 16px -8px var(--pf-c2);
}
.pf-label { margin-bottom: 9px; font-size: 11.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: var(--color-text-muted); }

/* ---------- gallery ---------- */
.pf-gal { display: grid; gap: 10px; }
.pf-gal.n1 { grid-template-columns: 1fr; grid-auto-rows: 340px; }
.pf-gal.n2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 250px; }
.pf-gal.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, 175px); }
.pf-gal.n3 .pf-g:first-child { grid-row: span 2; }
.pf-gal.n4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; }
.pf-gal.n5 { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 150px); }
.pf-gal.n5 .pf-g:first-child { grid-column: span 2; grid-row: span 2; }
.pf-g.is-extra { display: none; }
.pf-g {
    position: relative; display: block; padding: 0; border: 0; border-radius: 18px; overflow: hidden;
    background: linear-gradient(135deg, #e0e7ff, #fce7f3); cursor: zoom-in; min-width: 0; min-height: 0;
}
.pf-g img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pf-g::after {
    content: '\1F50D'; position: absolute; right: 10px; top: 10px;
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
    background: rgba(255, 255, 255, .92); box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
    opacity: 0; transform: scale(.7); transition: opacity .25s ease, transform .25s ease;
}
.pf-g:hover img { transform: scale(1.08); }
.pf-g:hover::after { opacity: 1; transform: none; }
.pf-g-more {
    position: absolute; inset: 0; z-index: 1; display: grid; place-items: center;
    font-size: 22px; font-weight: 800; color: #fff; letter-spacing: .3px;
    background: linear-gradient(135deg, rgba(30, 27, 58, .62), rgba(124, 58, 237, .6));
}

/* ---------- about ---------- */
.pf-about-text { font-size: 15.5px; line-height: 1.85; color: var(--color-text); overflow-wrap: anywhere; }
.pf-js .pf-clamp:not(.is-open):not(.is-short) {
    max-height: 9.6em; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
            mask-image: linear-gradient(180deg, #000 62%, transparent);
}
.pf-more-btn {
    margin-top: 10px; padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--pf-c1); background: rgba(79, 70, 229, .08);
    transition: background .2s ease;
}
.pf-more-btn:hover { background: rgba(79, 70, 229, .16); }
.pf-more-btn[hidden] { display: none; }

/* ---------- academics ---------- */
.pf-acad { display: grid; gap: 20px; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 700; line-height: 1.3;
    color: var(--cf); background: var(--cbg); border: 1px solid var(--cb);
    transition: transform .2s ease, box-shadow .2s ease;
}
.pf-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 14px -8px var(--cf); }
.pf-chip-lg { padding: 9px 17px; font-size: 13.5px; }
.pf-chip.c0 { --cbg: #eef2ff; --cf: #4338ca; --cb: #c7d2fe; }
.pf-chip.c1 { --cbg: #fff7ed; --cf: #c2410c; --cb: #fed7aa; }
.pf-chip.c2 { --cbg: #f0fdfa; --cf: #0f766e; --cb: #99f6e4; }
.pf-chip.c3 { --cbg: #fdf2f8; --cf: #be185d; --cb: #fbcfe8; }
.pf-chip.c4 { --cbg: #f0f9ff; --cf: #0369a1; --cb: #bae6fd; }
.pf-chip.c5 { --cbg: #faf5ff; --cf: #7e22ce; --cb: #e9d5ff; }
.pf-range { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pf-range span {
    padding: 9px 18px; border-radius: 14px; font-size: 14px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--pf-c1), var(--pf-c2));
}
.pf-range span:last-child { background: linear-gradient(135deg, var(--pf-c2), var(--pf-c3)); }
.pf-range i { font-style: normal; font-size: 20px; font-weight: 800; color: var(--color-text-muted); }

/* ---------- fees / facilities ---------- */
.pf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.pf-tile {
    display: flex; align-items: center; gap: 13px; padding: 15px 16px; border-radius: 18px;
    background: var(--tb); border: 1px solid var(--tbd);
}
.pf-tile.t0, .pf-infra-item.t0 { --tb: linear-gradient(135deg, #eef2ff, #f5f3ff); --tbd: #ddd6fe; --ti: #6366f1; }
.pf-tile.t1, .pf-infra-item.t1 { --tb: linear-gradient(135deg, #fff7ed, #fef2f2); --tbd: #fed7aa; --ti: #f97316; }
.pf-tile.t2, .pf-infra-item.t2 { --tb: linear-gradient(135deg, #f0fdfa, #ecfdf5); --tbd: #a7f3d0; --ti: #10b981; }
.pf-tile.t3, .pf-infra-item.t3 { --tb: linear-gradient(135deg, #f0f9ff, #eef2ff); --tbd: #bae6fd; --ti: #0ea5e9; }
.pf-tile.t4, .pf-infra-item.t4 { --tb: linear-gradient(135deg, #fdf2f8, #fff1f2); --tbd: #fbcfe8; --ti: #ec4899; }
.pf-tile.t5, .pf-infra-item.t5 { --tb: linear-gradient(135deg, #faf5ff, #fdf4ff); --tbd: #e9d5ff; --ti: #a855f7; }
.pf-tile-ic {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
    font-size: 21px; color: #fff; background: var(--ti); box-shadow: 0 8px 16px -8px var(--ti);
}
.pf-tile small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); }
.pf-tile b { display: block; margin-top: 2px; font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--color-text); overflow-wrap: anywhere; }
.pf-fac { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-fac-item {
    display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px;
    font-size: 14px; font-weight: 700; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0;
}
.pf-fac-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: #fff; box-shadow: 0 4px 10px -4px rgba(22, 101, 52, .4); }
.pf-fac-item em { font-style: normal; font-weight: 800; color: #16a34a; }

/* ==========================================================
   SIDEBAR — contact + location
   ========================================================== */
.pf-contact {
    overflow: hidden; margin-bottom: 20px;
    background: #fff; border: 1px solid var(--color-border); border-radius: 26px;
    box-shadow: 0 22px 44px -26px rgba(30, 27, 58, .45);
    scroll-margin-top: 140px;
}
.pf-contact-top {
    padding: 22px 24px; color: #fff;
    background: linear-gradient(130deg, var(--pf-c1), var(--pf-c2) 55%, var(--pf-c3));
    background-size: 200% 200%; animation: pfGrad 12s ease infinite;
}
.pf-contact-top h2 { font-size: 20px; font-weight: 800; letter-spacing: -.2px; color: #fff; }
.pf-contact-top p { margin-top: 3px; font-size: 13px; opacity: .9; }
.pf-contact-body { padding: 22px 24px 24px; }
.pf-blur {
    margin-bottom: 14px; padding: 15px 16px; border-radius: 16px; background: var(--color-bg);
    filter: blur(5px); user-select: none; pointer-events: none;
}
.pf-blur p { margin: 0 0 6px; font-size: 14px; }
.pf-blur p:last-child { margin: 0; }
.pf-note { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--color-text-muted); }
.pf-contact-body > .pf-note:last-child { margin: 14px 0 0; font-size: 12.5px; }
.pf-crow {
    display: flex; align-items: center; gap: 13px; padding: 12px 14px; margin-bottom: 10px;
    border-radius: 16px; background: var(--color-bg); overflow-wrap: anywhere;
}
.pf-crow-ic {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center;
    font-size: 18px; background: #fff; box-shadow: 0 6px 14px -8px rgba(30, 27, 58, .5);
}
.pf-crow small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); }
.pf-crow b { display: block; margin-top: 1px; font-size: 14.5px; font-weight: 700; color: var(--color-text); }
.pf-crow b a { color: var(--pf-c1); }
.pf-cta-stack { display: grid; gap: 10px; margin-top: 16px; }

.pf-loc { overflow: hidden; margin-bottom: 20px; background: #fff; border: 1px solid var(--color-border); border-radius: 24px; box-shadow: var(--shadow-sm); }
.pf-map {
    position: relative; height: 116px; overflow: hidden;
    background:
        linear-gradient(rgba(255, 255, 255, .5) 2px, transparent 2px) 0 0 / 34px 34px,
        linear-gradient(90deg, rgba(255, 255, 255, .5) 2px, transparent 2px) 0 0 / 34px 34px,
        linear-gradient(135deg, #bfdbfe, #c7d2fe 50%, #fbcfe8);
}
.pf-map::before {
    content: ''; position: absolute; left: -10%; right: -10%; top: 46%; height: 16px; transform: rotate(-8deg);
    background: rgba(255, 255, 255, .75); border-radius: 8px;
}
.pf-pin {
    position: absolute; left: 50%; top: 50%; font-size: 38px; line-height: 1;
    transform: translate(-50%, -80%); filter: drop-shadow(0 8px 6px rgba(30, 27, 58, .35));
    animation: pfBounce 2.2s ease-in-out infinite;
}
.pf-map::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border-radius: 50%;
    transform: translate(-50%, -50%); border: 2px solid var(--pf-c3); animation: pfPulse 2.2s ease-out infinite;
}
.pf-loc-body { padding: 18px 22px 22px; }
.pf-loc-body p { margin-bottom: 14px; font-size: 14.5px; font-weight: 700; line-height: 1.5; color: var(--color-text); overflow-wrap: anywhere; }

/* ==========================================================
   SAME-CITY INSTITUTES
   ========================================================== */
.pf-related { margin-top: 18px; }
.pf-h2 { margin-bottom: 16px; font-size: 21px; font-weight: 800; letter-spacing: -.3px; color: var(--color-text); }
.pf-h2 span { background: linear-gradient(120deg, var(--pf-c1), var(--pf-c3)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pf-rel-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.pf-rel {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
    padding: 20px 18px 18px; background: #fff; border: 1px solid var(--color-border); border-radius: 22px;
    box-shadow: var(--shadow-sm); color: var(--color-text);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pf-rel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--r1), var(--r2), var(--r3)); }
.pf-rel:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -20px rgba(30, 27, 58, .45); border-color: var(--r1); color: var(--color-text); }
.pf-rel-logo {
    position: relative; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 18px; overflow: hidden;
    display: grid; place-items: center; font-size: 18px; color: #fff;
    background: linear-gradient(135deg, var(--r1), var(--r3));
}
.pf-rel-logo b { font-weight: 800; }
.pf-rel-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 5px; background: #fff; }
.pf-rel-info { min-width: 0; display: block; }
.pf-rel-info strong {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 15px; font-weight: 800; line-height: 1.3;
}
.pf-rel-info small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-rel-info em { display: flex; gap: 6px; margin-top: 7px; font-style: normal; }
.pf-rel-info em i { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.pf-rel-v { color: #047857; background: #d1fae5; }
.pf-rel-s { color: #b45309; background: #fef3c7; }

/* ==========================================================
   LIGHTBOX
   ========================================================== */
.pf-lb {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(12, 10, 30, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    animation: pfFade .2s ease;
}
.pf-lb[hidden] { display: none; }
.pf-lb-fig { margin: 0; max-width: min(1100px, 92vw); text-align: center; }
.pf-lb-fig img {
    display: inline-block; max-width: 100%; max-height: 80vh; border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6); opacity: 0; transform: scale(.97);
    transition: opacity .25s ease, transform .25s ease;
}
.pf-lb-fig img.is-in { opacity: 1; transform: none; }
.pf-lb-fig figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; }
.pf-lb-fig figcaption #pfLbCap { font-size: 15px; font-weight: 700; color: #fff; }
.pf-lb-fig figcaption #pfLbCount { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; color: rgba(255, 255, 255, .7); }
.pf-lb button { font-family: inherit; cursor: pointer; border: 0; color: #fff; background: rgba(255, 255, 255, .14); transition: background .2s ease; }
.pf-lb button:hover { background: rgba(255, 255, 255, .3); }
.pf-lb-x { position: absolute; top: 16px; right: 18px; width: 46px; height: 46px; border-radius: 50%; font-size: 30px; line-height: 1; }
.pf-lb-nav { position: absolute; top: 50%; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; font-size: 36px; line-height: 1; padding-bottom: 4px; }
.pf-lb-nav.prev { left: 18px; }
.pf-lb-nav.next { right: 18px; }

/* ==========================================================
   ANIMATIONS
   ========================================================== */
@keyframes pfGrad   { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes pfFloat  { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(34px, -22px) scale(1.12); } 66% { transform: translate(-26px, 20px) scale(.92); } }
@keyframes pfShine  { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes pfBounce { 0%, 100% { transform: translate(-50%, -80%); } 50% { transform: translate(-50%, -105%); } }
@keyframes pfPulse  { 0% { transform: translate(-50%, -50%) scale(.5); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(4.5); opacity: 0; } }
@keyframes pfPop    { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes pfFade   { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .pf *, .pf *::before, .pf *::after, .pf-lb, .pf-lb * { animation: none !important; transition: none !important; }
    .pf-js .pf-reveal { opacity: 1; transform: none; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1024px) {
    .pf-layout { grid-template-columns: 1fr; }
    .pf-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
    .pf-aside > * { margin-bottom: 0; }
}

@media (max-width: 768px) {
    .pf { padding-top: 14px; }
    .pf-hero { border-radius: 24px; }
    .pf-hero-inner { padding: 20px 20px 54px; }
    .pf-logo { width: 104px; height: 104px; border-radius: 28px; }
    .pf-logo-in { border-radius: 24px; }
    .pf-logo-ini { font-size: 36px; }
    .pf-stats { margin: -32px 12px 0; gap: 10px; }
    .pf-stat { flex: 1 1 calc(50% - 5px); padding: 13px 14px; gap: 11px; border-radius: 18px; }
    .pf-stat-ic { width: 42px; height: 42px; font-size: 20px; border-radius: 13px; }
    .pf-stat b { font-size: 19px; }
    .pf-card { padding: 22px 20px; border-radius: 22px; }
    .pf-aside { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .pf-hero-inner { padding: 18px 16px 52px; }
    .pf-logo { width: 94px; height: 94px; border-radius: 26px; }
    .pf-logo-in { border-radius: 22px; }
    .pf-logo-ini { font-size: 32px; }
    .pf-tag { font-size: 10.5px; letter-spacing: 1.1px; padding: 5px 10px; }
    .pf-pills { gap: 6px; margin-top: 12px; }
    .pf-pill { font-size: 12.5px; padding: 6px 11px; }
    .pf-tile { padding: 12px 14px; }
    .pf-hero-main { flex-direction: column; text-align: center; gap: 14px; margin-top: 14px; }
    .pf-back { font-size: 12.5px; }
    .pf-eyebrow, .pf-pills { justify-content: center; }
    .pf-actions { margin-top: 22px; }
    .pf-actions { gap: 8px; }
    .pf-actions .pf-btn-light { flex: 1 1 100%; }
    /* Save / Website / Share: ek hi row me barabar baant lo (2 ho ya 3) */
    .pf-actions > .wish-btn, .pf-actions > .pf-share, .pf-actions > .pf-btn-glass { flex: 1 1 88px; min-width: 0; }
    .pf-actions > .wish-btn, .pf-actions > .pf-btn-glass, .pf-share .pf-btn { justify-content: center; padding: 10px 12px; font-size: 13.5px; }
    .pf-actions > .wish-btn .wish-tx { font-size: 13.5px; }
    .pf-share .pf-btn { width: 100%; }
    .pf-share-menu { left: auto; right: 0; }

    .pf-tabs-slot { margin: 20px 0 14px; }
    .pf-tabs a { padding: 9px 14px; font-size: 13px; }
    .pf-tabs.is-fixed .pf-tabs-in { padding: 7px 12px; }

    /* gallery: swipe karne wala carousel */
    .pf-gal, .pf-gal.n1, .pf-gal.n2, .pf-gal.n3, .pf-gal.n4, .pf-gal.n5 {
        display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
        margin: 0 -20px; padding: 0 20px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .pf-gal::-webkit-scrollbar { display: none; }
    .pf-g, .pf-g.is-extra { display: block; flex: 0 0 80%; height: 210px; scroll-snap-align: center; }
    .pf-gal.n1 .pf-g { flex-basis: 100%; }
    .pf-g-more { display: none; }
    .pf-g::after { opacity: 1; transform: none; width: 30px; height: 30px; }

    .pf-h { font-size: 17.5px; }
    .pf-tiles { grid-template-columns: 1fr; }
    .pf-chip-lg { padding: 8px 14px; font-size: 13px; }

    .pf-rel-row {
        display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
        margin: 0 -20px; padding: 4px 20px 10px; scrollbar-width: none;
    }
    .pf-rel-row::-webkit-scrollbar { display: none; }
    .pf-rel { flex: 0 0 82%; scroll-snap-align: center; }

    .pf-lb-nav { width: 44px; height: 44px; font-size: 30px; margin-top: -22px; }
    .pf-lb-nav.prev { left: 8px; }
    .pf-lb-nav.next { right: 8px; }
    .pf-lb-x { top: 10px; right: 10px; }
}

@media (max-width: 380px) {
    .pf-stat { flex-basis: 100%; }
    .pf-title { font-size: 23px; }
}

@media print {
    .pf-tabs-slot, .pf-actions, .pf-lb, .pf-related, .pf-blob, .pf-dots { display: none !important; }
    .pf-js .pf-reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================
   ADDITIONS for School / College pages
   ========================================================== */

/* ---------- hero: badi banner photo ---------- */
.pf-hero.has-banner { animation: none; }
.pf-hero.has-banner .pf-hero-cover { inset: 0; width: 100%; height: 100%; opacity: 1; filter: none; }
.pf-hero.has-banner .pf-hero-bg::after {
    background: linear-gradient(180deg, rgba(15, 12, 40, .10) 0%, rgba(15, 12, 40, .28) 36%, rgba(15, 12, 40, .88) 100%);
}
.pf-tint {
    position: absolute; inset: 0; mix-blend-mode: soft-light; opacity: .9;
    background: linear-gradient(120deg, var(--pf-c1), var(--pf-c2) 55%, var(--pf-c3));
}
.pf-hero.has-banner .pf-hero-inner { padding-top: 190px; }
.pf-hero.has-banner .pf-back { position: absolute; top: 22px; left: 34px; }

/* "Admissions Open" — jalta hua hara dot */
.pf-open {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 800; padding: 5px 13px; border-radius: 999px; color: #fff;
    background: linear-gradient(120deg, #16a34a, #22c55e); box-shadow: 0 8px 18px -8px rgba(22, 163, 74, .8);
}
.pf-open i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pfLive 1.6s ease-out infinite; }
@keyframes pfLive { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .85); } 100% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } }
.pf-pill-link { transition: background .2s ease, transform .2s ease; }
.pf-pill-link:hover { color: #fff; background: rgba(255, 255, 255, .3); transform: translateY(-1px); }

/* ---------- gallery captions ---------- */
.pf-g-cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 28px 12px 10px; text-align: left;
    font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #fff;
    background: linear-gradient(180deg, transparent, rgba(15, 12, 40, .8));
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- rich About + video ---------- */
.pf-rich { font-size: 15.5px; line-height: 1.85; color: var(--color-text); overflow-wrap: anywhere; }
.pf-video { border-radius: 18px; overflow: hidden; }
.pf-sub { margin: 22px 0 12px; font-size: 14px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); }
.pf-card > .pf-sub:first-of-type { margin-top: 0; }
.pf-footnote { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }

/* ---------- course cards ---------- */
.pf-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.pf-course {
    position: relative; overflow: hidden; padding: 20px 18px 16px;
    background: #fff; border: 1px solid var(--color-border); border-radius: 20px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pf-course::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--cc1), var(--cc2)); }
.pf-course:hover { transform: translateY(-4px); box-shadow: 0 20px 36px -22px rgba(30, 27, 58, .5); border-color: var(--cc1); }
.pf-course.g0 { --cc1: #6366f1; --cc2: #8b5cf6; }
.pf-course.g1 { --cc1: #f97316; --cc2: #ec4899; }
.pf-course.g2 { --cc1: #10b981; --cc2: #0d9488; }
.pf-course.g3 { --cc1: #0ea5e9; --cc2: #6366f1; }
.pf-course h3 { margin: 0 0 4px; font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--color-text); overflow-wrap: anywhere; }
.pf-course > p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.55; color: var(--color-text-muted); }
.pf-course-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--color-border); }
.pf-course-meta div { min-width: 0; }
.pf-course-meta small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--color-text-muted); }
.pf-course-meta b { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; }

/* ---------- admission steps ---------- */
.pf-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.pf-step { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 20px; background: var(--sbg); border: 1px solid var(--sb); }
.pf-step.g0 { --sb: #ddd6fe; --sbg: linear-gradient(135deg, #eef2ff, #f5f3ff); --sn: linear-gradient(135deg, #6366f1, #8b5cf6); }
.pf-step.g1 { --sb: #fed7aa; --sbg: linear-gradient(135deg, #fff7ed, #fef2f2); --sn: linear-gradient(135deg, #f97316, #ec4899); }
.pf-step.g2 { --sb: #a7f3d0; --sbg: linear-gradient(135deg, #f0fdfa, #ecfdf5); --sn: linear-gradient(135deg, #10b981, #0d9488); }
.pf-step.g3 { --sb: #bae6fd; --sbg: linear-gradient(135deg, #f0f9ff, #eef2ff); --sn: linear-gradient(135deg, #0ea5e9, #6366f1); }
.pf-step-n {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
    font-size: 18px; font-weight: 800; color: #fff; background: var(--sn); box-shadow: 0 10px 18px -10px rgba(30, 27, 58, .6);
}
.pf-step h3 { margin: 2px 0 4px; font-size: 15px; font-weight: 800; line-height: 1.35; color: var(--color-text); overflow-wrap: anywhere; }
.pf-step p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-text-muted); overflow-wrap: anywhere; }
.pf-window {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; padding: 14px 18px;
    border-radius: 18px; color: #fff; font-weight: 700;
    background: linear-gradient(120deg, var(--pf-c1), var(--pf-c2) 60%, var(--pf-c3));
}
.pf-window small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: .85; }
.pf-window b { font-size: 15px; }
.pf-window i { font-style: normal; font-size: 20px; opacity: .8; }

/* ---------- infrastructure ---------- */
.pf-infra { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pf-infra-item { display: flex; align-items: flex-start; gap: 13px; padding: 15px 16px; border-radius: 18px; background: var(--tb); border: 1px solid var(--tbd); }
.pf-infra-item .pf-tile-ic { margin-top: 1px; }
.pf-infra-item h3 { margin: 0 0 3px; font-size: 14.5px; font-weight: 800; line-height: 1.35; color: var(--color-text); overflow-wrap: anywhere; }
.pf-infra-item p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); overflow-wrap: anywhere; }

/* ---------- responsive table ---------- */
.pf-table-wrap { border: 1px solid var(--color-border); border-radius: 18px; overflow: hidden; background: #fff; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pf-table th {
    padding: 13px 16px; text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: #fff; background: transparent;
}
.pf-table thead { background: linear-gradient(120deg, var(--pf-c1), var(--pf-c2) 60%, var(--pf-c3)); }   /* poori patti par ek gradient (cells me seam nahi) */
.pf-table td { padding: 13px 16px; border-top: 1px solid var(--color-border); vertical-align: top; color: var(--color-text); overflow-wrap: anywhere; }
.pf-table tbody tr:nth-child(even) td { background: rgba(79, 70, 229, .035); }
.pf-table tbody tr:hover td { background: rgba(79, 70, 229, .08); }
.pf-table td:first-child { font-weight: 700; }

/* ---------- contact form ---------- */
.pf-form { display: grid; gap: 12px; }
.pf-form label { display: grid; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; color: var(--color-text-muted); }
.pf-form input {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: 14px; background: #fff;
    font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--color-text);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.pf-form input:focus { outline: none; border-color: var(--pf-c2); box-shadow: 0 0 0 4px rgba(124, 58, 237, .14); }
.pf-error { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: #fef2f2; color: #b91c1c; font-size: 13px; font-weight: 600; }
.pf-loc-body p.pf-loc-adr { margin-top: -6px; font-size: 13.5px; font-weight: 500; color: var(--color-text-muted); }

/* ---------- reviews (shared .pr-* block) ---------- */
.pf-main .pr-wrap { margin-top: 6px; scroll-margin-top: 150px; }
.pf-main .pr-head h3 { font-size: 19px; }

@media (max-width: 768px) {
    .pf-hero.has-banner .pf-hero-inner { padding-top: 120px; }
    .pf-hero.has-banner .pf-back { top: 16px; left: 16px; }
}

@media (max-width: 640px) {
    .pf-hero.has-banner .pf-hero-inner { padding-top: 96px; }
    .pf-courses, .pf-infra { grid-template-columns: 1fr; }
    .pf-course-meta { grid-template-columns: 1fr 1fr; }
    .pf-window { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 13px 16px; }
    .pf-window > span, .pf-window > i { display: none; }

    .pf-table thead { display: none; }
    .pf-table, .pf-table tbody, .pf-table tr, .pf-table td { display: block; width: 100%; }
    .pf-table tr { padding: 12px 16px; border-top: 1px solid var(--color-border); }
    .pf-table tbody tr:first-child { border-top: 0; }
    .pf-table td { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border: 0; text-align: right; background: none !important; }
    .pf-table td::before { content: attr(data-label); flex: 0 0 auto; font-weight: 700; text-align: left; color: var(--color-text-muted); }
    .pf-table td:first-child { display: block; padding-bottom: 6px; font-size: 15.5px; text-align: left; }
    .pf-table td:first-child::before { display: none; }
}