/* Google Font Playfair Display (footer and menu headings): each page that loads this file links them
   in its <head>, right after dept_main.css (faster than an @import here). */

:root {
    /* Main Color Palette */
    --navy: #0b2d6e;
    --navy-deep: #061840;
    --royal: #1a4fbd;
    --sky: #3b82d8;
    --sky-light: #5b9fe8;
    --pale: #eef4fc;
    --pale2: #f5f9ff;
    --gold: #c8991e;
    --gold-light: #e8b830;
    --white: #ffffff;
    --glass: rgba(255, 255, 255, 0.85);

    /* Text & Borders */
    --text: #0d1f40;
    --text-mid: #3a5075;
    --text-light: #6b88aa;
    --border: #d0e2f5;
    --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
     --brand-primary: #0A3263;
            --brand-sky: #0056B3;
            --brand-light-blue: #F0F5FA;
            --brand-dark-text: #1E293B;
            --brand-muted-text: #64748B;
            --brand-border: #E2E8F0;
             --obe-color-navy: #0B192C;
            --obe-color-blue: #1E3E62;
            --obe-color-gold: #D4AF37;
            --obe-color-gold-bg: #FFFBEB;
            --obe-color-border: #E2E8F0;
            --obe-color-bg: #F8FAFC;
            --obe-color-surface: #FFFFFF;
            --obe-color-text: #1E293B;
            --obe-color-muted: #64748B;
            --obe-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --obe-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }

/* (Removed: a stray "}" here plus the "* { margin:0; padding:0; box-sizing:border-box }" reset after it.
    Browsers were already ignoring that reset because of the stray brace, so removing both changes nothing.) */

section { 
    padding: 40px 2%; 
}

.container { 
    max-width: 1180px; 
    margin: 0 auto; 
    width: 100%;
}

.section-tag { 
    display: inline-block; 
       font-size: 1.1rem;
    font-weight: 600; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    color: var(--royal); 
    background: var(--pale); 
    border: 1px solid #c8ddf5; 
    padding: 4px 13px; 
    border-radius: 20px; 
    margin-bottom: 14px; 
}

.section-title { 
    font-family: 'Playfair Display', serif; 
    font-size: clamp(24px, 4vw, 40px); 
    color: var(--navy); 
    font-weight: 700; 
    line-height: 1.2; 
    margin-bottom: 14px; 
}

.section-sub { 
    color: #000; 
    font-size: clamp(14px, 2vw, 15.5px); 
    max-width: 620px; 
    line-height: 1.75; 
    font-weight: 500; 
}

.text-center { text-align: center; }
.text-center .section-sub { margin: 0 auto; }
.accent-bar { width: 52px; height: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 2px; margin: 18px 0 22px; }

/* --- HERO SECTION --- */
/* --- CAPTION BOXES --- */
.caption-box {
    position: absolute;
    bottom: 0%;
    padding: 0px 20px;
    border-radius: 4px;
    z-index: 5;
    max-width: 650px;
  
    animation: fadeInUp 0.8s ease-out;margin-bottom: 2.5rem;
}

.caption-box:not(.right-bottom) {
    left: 0%;
    

}

.caption-box.right-bottom {
    right: 6%;
    border-top-left-radius: 24px;
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
    border-right: 0px solid var(--gold); 
    text-align: right;
}

.caption-box h2 { color: #fff; font-size: clamp(2.5rem, 3vw, 1.7rem); font-weight: 900; margin-bottom: 8.5rem; }
.caption-box p { color: #fff; font-size: clamp(1rem, 2vw, 1.35rem); font-weight: 500; }

/* --- ADMISSIONS PANEL (HERO) --- */
.admissions-panel {
    position: absolute;
    right:0%;
    top: 30%;
    transform: translateY(-50%);
    background-color: #1158ce;
   
   
    padding: 0px;
    text-align: center;
    z-index: 5;
    max-width: 160px;
    width: 100%;
    animation: fadeInRight 0.8s ease-out;
}.cta-btn { display: block; width: 100%; padding: 10px 0px; font-size: 0.95rem; font-weight: 700; text-decoration: none; text-transform: capitalize; border-radius: 6px; transition: all 0.25s ease; }.cta-btn.secondary { background-color: transparent; color: var(--white); border: 0px solid rgba(255, 255, 255, 0.4); }
.cta-btn.secondary:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }

/* --- PROGRAMME CARDS --- */
.prog-section { background: var(--pale2); padding:0px 0% 0}
.prog-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 22px; 
    margin-top: 48px; 
}
.prog-card { background: #061840; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 30px 16px; transition: .25s; position: relative; overflow: hidden;margin:0.3rem }
.prog-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--sky), var(--gold)); transform: scaleX(0); transition: .3s; transform-origin: left; }
.prog-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(10,45,107,.3); border-color: rgba(59,130,216,.4); }
.prog-card:hover::after { transform: scaleX(1); }.prog-card h3 { font-family: 'Playfair Display', serif; font-size: 17px; color: #f2b233; margin-bottom: 9px; font-weight: 700; }
.prog-card p { font-size: 13.5px; color: rgba(255,255,255,.8); line-height: 1.65; margin-bottom: 18px; }
.prog-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.prog-tag { background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; letter-spacing: .3px; }
.prog-link { color: var(--gold-light); font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; background-color:#061840; padding:0.5rem }
.prog-link:hover { color: #fff; }
.prog-link::after { content: '→'; transition: .2s; }
.prog-link:hover::after { transform: translateX(3px); }

/* --- SYLLABUS --- */.syl-card { border: 1px solid var(--border); border-radius: 14px; padding: 28px; transition: .25s; }
.syl-card:hover { border-color: var(--sky-light); box-shadow: 0 12px 40px rgba(10,45,107,.07); }
.syl-card h3 { font-family: 'Playfair Display', serif; font-size: 18px; color: var(--navy); margin-bottom: 16px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
/* --- DEPARTMENTS --- */
/* --- STUDENT HUB --- */
.student-hub { background: var(--pale2); }
.hub-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px; 
    margin-top: 48px; 
}
.hub-card { background: #061840; border: 1px solid var(--border); border-radius: 14px; padding: 10px; transition: .25s; align-items: flex-start; gap: 18px; }
.hub-card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(10,45,107,.09); border-color: rgba(59,130,216,.3); }.hub-body h3 { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: #d6a726; margin-bottom: 7px; }
.hub-body p { font-size:0.95rem; color: #fff; line-height: 1.6; }
.hub-body a { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #d6a726; text-decoration: none; }
.hub-body a:hover { color: var(--navy); }
.hub-body a::after { content: '→'; font-size: 12px; transition: .2s; }
.hub-body a:hover::after { transform: translateX(3px); }

/* --- CAREERS --- */
.careers-section { background: #fff; }.careers-text .section-tag { display: block; width: fit-content; }
.careers-text p { font-size: 15px; color: var(--text-mid); line-height: 1.8; margin-bottom: 16px; font-weight: 300; }
/* --- ADMISSIONS BANNER --- */
.admissions-banner { background: linear-gradient(135deg, var(--navy-deep), var(--navy)); color: #fff; padding: 60px 6%; text-align: center; position: relative; overflow: hidden; border-radius: 12px; margin: 40px auto; max-width: 1180px; }
.admissions-banner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.01) 0, rgba(255,255,255,.01) 1px, transparent 1px, transparent 40px); }
.admissions-banner h2 { font-family: 'Playfair Display', serif; font-size: clamp(24px, 4vw, 38px); font-weight: 700; margin-bottom: 14px; position: relative; z-index: 1; }
.admissions-banner p { color: rgba(255,255,255,.7); font-size: 15px; max-width: 520px; margin: 0 auto 28px; line-height: 1.7; position: relative; z-index: 1; }
.btn-group { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.btn-gold { background: var(--gold); color: var(--navy-deep); font-weight: 700; font-size: 14px; padding: 14px 30px; border-radius: 5px; text-decoration: none; transition: .2s; display: inline-flex; align-items: center; gap: 8px; }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(200,153,30,.4); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.4); color: #fff; font-weight: 500; font-size: 14px; padding: 14px 30px; border-radius: 5px; text-decoration: none; transition: .2s; display: inline-flex; align-items: center; gap: 8px; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* --- ACHIEVEMENTS --- */
/* --- TESTIMONIALS --- */
.ticker {
      background:var(--navy);
      display: flex;
      align-items: center;
      overflow: hidden;
      font-size: 12.5px;
    }

    .hero-ticker {
      /* Changed from absolute to fixed */
      position: fixed; 
      bottom: 0;
      left: 0;
      right: 0;
      
      /* High z-index ensures it stays above other content */
      z-index: 999; 
      
      background:#061840;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      
      /* Ensures it spans the full viewport width */
      width: 100%; 
    }

    .ticker-badge {
      background:#f2b233;
      color: var(--navy-deep);
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 9px 16px;
      white-space: nowrap;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .ticker-badge::before {
      content: '📌';
      font-size: 12px;
    }

    .ticker-track {
      overflow: hidden;
      flex: 1;
    }

    .ticker-inner {
      display: flex;
      animation: scroll-ticker 32s linear infinite;
      white-space: nowrap;
      color: rgba(255, 255, 255, .85);
      font-size: 15px;
    }

    .ticker-inner span {
      padding: 9px 48px;
    }

    .ticker-inner span::after {
      content: '◆';
      margin-left: 48px;
      color: var(--gold);
      font-size: 8px;
    }

    /* --- Added Close Button CSS --- */
    .ticker-close-btn {
      background: #f2b233;
      color: rgba(6, 24, 64, 1);
      border: none;
      font-size: 22px;
      font-weight: bold;
      padding: 0 16px;
      cursor: pointer;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* --- Added Animation Keyframes --- */
    @keyframes scroll-ticker {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    /* --- Added Stop on Hover Rule --- */
    .ticker-track:hover .ticker-inner {
      animation-play-state: paused;
    }
/* ──────────────────────────────────────────────────────────────────────────
   MEDIAS QUERIES - FOR MAX RESPONSIVENESS
   ────────────────────────────────────────────────────────────────────────── */

/* Tablets / Small Laptops */
@media (max-width: 1024px) {
    section { padding: 60px 4%; }
    /* Pull captions and panels out of absolute positions so they stack nicely */
    .caption-box, .caption-box.right-bottom {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: 550px;
        margin: 20px 0;
        text-align: left;
        border-radius: 12px;
    }

    .admissions-panel {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: 550px;
        margin-top: 20px;
        animation: fadeInUp 0.8s ease-out;
    }}

/* Mobile Devices */
@media (max-width: 480px) {
    section { padding: 40px 4%; }
    .admissions-panel {
        padding: 30px 20px;
    }
    .caption-box {
        padding: 20px;
    }
    
    .syl-card {
        padding: 20px;
    }

    .ticker-inner span {
        padding: 9px 24px; /* shortens scroll gaps on small screen viewports */
    }
    .ticker-inner span::after {
        margin-left: 24px;
    }
}

/* ─── FOOTER ─── */
footer{background:#04102a;color:rgba(255,255,255,.65);padding:45px 48px 50px;}
.footer-inner{max-width:1200px;margin:0 auto}.footer-brand-logo{width:64px;height:64px;object-fit:contain;margin-bottom:16px;filter:brightness(1.2)}
.footer-brand-name{font-family:'Playfair Display',serif;font-size:clamp(26px,3vw,20px);color:#fff;margin-bottom:6px;font-weight:700}.footer-brand-desc{font-size:15px;line-height:1.75;}
.footer-contact{margin-top:20px;display:flex;flex-direction:column;gap:7px;font-size:15px; margin-bottom: 12px}
.footer-contact a{color:var(--gold-light);text-decoration:none;font-size:15px;}
.footer-contact a:hover{color:#fff}
footer h5{color:#fff;font-size:clamp(26px,3vw,20px);font-family:'Playfair Display',serif;font-weight:700;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}
footer ul{list-style:none}
footer ul li{margin-bottom:9px}
footer ul li a{color:rgba(255,255,255,.95);text-decoration:none;font-size:15px;transition:.18s}
footer ul li a:hover{color:var(--gold-light);padding-left:4px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:22px;display:flex;justify-content:space-between;align-items:center;font-size:15px;flex-wrap:wrap;gap:10px}
.footer-bottom a{color:rgba(255,255,255,.35);text-decoration:none;margin-left:18px;transition:.15s;font-size:15px;}
.footer-bottom a:hover{color:var(--gold-light)}

.department-menu{
    background:#061840;
    border:1px solid #ddd;
}

.department-menu ul{
    list-style:none;
    margin:0;
    padding:0;
}

.department-menu li{
    border-bottom:1px solid #d5d5d5;
}

.department-menu a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 20px;
    color:#f2b233;
    text-decoration:none;
    transition:.3s;
}

.department-menu a:hover,
.department-menu a.active{
    background:#fff;
    color:#c79b43;
}

.department-menu i{
    color:#c79b43;
}

.sticky-menu{
    position:sticky;
    top:20px;
}

/* Sections */

.content-section{
    background:#fff;
    padding:40px;
    margin-bottom:25px;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.section-title{
   
    color:#041e42;
    font-size:32px;
    font-weight:700;
    margin-bottom:25px;
}

.content-section p{
    line-height:20px;
    font-size: 0.95rem;
    color: #000;
    text-align: left;
}

/* Vision Mission */

.vm-card{
    background:#fff;
    padding:35px;
    height:100%;
    box-shadow:0 5px 20px rgba(0,0,0,.05);
    position:relative;
    font-size: 0.9rem;
    color: #000;
}

.vm-card ul li{
    font-size: 0.95rem;
    padding: 0px;
}

.vm-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:5px;
    height:80px;
    background:#c79b43;
}

.vm-title{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
    font-size: 0.95rem;
}

.vm-title p{
    
    font-size: 0.95rem;
}

.vm-title i{
    color:#c79b43;
    font-size:28px;
}

.vm-title h2{
 
    color:#041e42;
    font-size:32px;
    font-weight:600;
    margin:0;
}

/* HOD */

.hod-box{
    display:flex;
    gap:30px;
    align-items:center;
}

.hod-img{
    width:180px;
    height:220px;
    object-fit:cover;
    border-radius:6px; border:1px solid #061840;
}

/* Faculty */
.faculty-card{
    background:#fff;
    border:1px solid #ddd;
    border-radius:8px;
    padding:20px 10px;
    text-align:center;
    transition:.3s;
    height:100%;
}

.faculty-card:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(0,0,0,.1);
}

.faculty-card img{
    width:150px;
    height:150px;
    object-fit:cover;
    border-radius:5px;
    margin-bottom:15px;
}

.faculty-card h5{
    color:#333;
    font-weight:900;
    font-size: 0.9rem ;
}

.faculty-card p{
    color:#727272;
    font-size: 0.6rem;
    text-align: center;font-weight:700;letter-spacing: -0.1px;
    line-height: 20px;
}

.faculty-card b{
 
    font-size: 0.7rem;
   color:#000;
}

.view-btn{
    background:#0a2f5d;
    color:#fff;
    padding:8px 25px;
    text-decoration:none;
    border-radius:4px;
    font-size: 0.7rem;letter-spacing: -0.1px;
}

.view-btn:hover{
    background:#c99a3d;
    color:#fff;
}

.pagination .page-link{
    color:#0a2f5d;
}

.pagination .active .page-link{
    background:#0a2f5d;
    border-color:#0a2f5d;
}

/* Events */
@media(max-width:991px){

.section-title{
    font-size:38px;
}

.vm-title h2{
    font-size:32px;
}

.hod-box{
    flex-direction:column;
    text-align:center;
}

.sticky-menu{
   position: -webkit-sticky; /* For Safari compatibility */
    position: sticky;
    top: 100px; /* Adjust this value so the menu stays below your main top header menu1.php */
    z-index: 100;

}

}
        /* --- Global Section Branding Headers --- */
        /* --- Control Buttons Framework --- */
        /* --- Pixel Perfect Custom CSS Grid Layout Architecture --- */
       .event-card-grid {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e8eef3;
    box-shadow: 0 4px 15px rgba(4, 42, 84, 0.012);
    display: grid;
    /* Uses responsive flexible columns instead of fixed pixels */
    grid-template-columns: 90px minmax(140px, 180px) 1fr auto;
    align-items: center;
    overflow: hidden;
    gap: 0;
}

/* --- Grid Items Compartments --- */
.date-badge {
    background-color: #022954; 
    color: #ffffff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 105px;
}

.date-badge .day {
    font-size: 1rem;
    font-weight: 700;
    line-height: 0.95;
}

.date-badge .day-range {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.date-badge .header-compact {
    font-size: 1rem;
}

.date-badge .month {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: 4px;
}

.date-badge .year {
    font-size: 0.72rem;
    font-weight: 500;
    opacity: 0.85;
}

/* Structural Spacing Containers */
.title-column {
    padding: 15px;
}

.desc-column {
    padding: 15px 20px;
}

.metrics-column {
    padding: 15px 20px 15px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; /* Keeps participants pushed cleanly to the right */
}

/* --- Element Typography --- */
.event-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #022954;
    line-height: 1.35;
    margin-bottom: 4px;
}

.event-description {
    font-size: 0.88rem;
    color: #4b586c;
    line-height: 1.45;
    margin-bottom: 0;
}

.label-participants {
    font-size: 0.75rem;
    font-weight: 500;
    color: #7a8ba3;
    display: block;
    margin-bottom: 1px;
}

.count-text {
    font-size: 1rem;
    font-weight: 700;
}

/* --- Component Pill Badge Configurations --- */
.badge-pill {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
}

/* --- Color Matched Design Themes --- */
.pill-blue, .pill-green, .pill-gold, .pill-purple, 
.pill-pink, .pill-teal, .pill-lightblue, .pill-terracotta { 
    background-color: #fef8e6; 
    color: #f2b233; 
}

.text-tag-blue, .text-tag-gold { color: #f2b233; }
.circle-gold { 
    background-color: #fef8e6; 
    color: #f2b233; 
}
.icon-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Dynamic Viewport Breakpoints --- */

/* Intermediate Tablet View (768px - 991px) */
@media (max-width: 991.98px) {
    .event-card-grid {
        grid-template-columns: 80px 1fr auto;
        grid-template-areas: 
            "badge title metrics"
            "badge desc  desc";
    }

    .date-badge { grid-area: badge; }
    .title-column { grid-area: title; padding: 12px 15px 5px 15px; }
    .metrics-column { grid-area: metrics; padding: 12px 15px 5px 0; }
    .desc-column { grid-area: desc; padding: 0 15px 12px 15px; }/* Optional: Hide tag pill on tablet to save horizontal space */
}

/* Full Mobile View (< 576px) */
@media (max-width: 575.98px) {
    .event-card-grid {
        grid-template-columns: 1fr;
        grid-template-areas: none;
    }

    .date-badge {
        width: 100%;
        min-height: auto;
        padding: 10px;
    }

    .title-column, .metrics-column, .desc-column {
        padding: 10px 15px;
    }
}

.sjcc-mou-wrapper{
    max-width:1100px;
    margin:auto;
    background:#ffffff;
    border-radius:30px;
    padding:20px;
    position:relative;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

.sjcc-mou-wrapper::before{
    content:"";
    position:absolute;
    width:200px;
    height:280px;
    background:#0b2f59;
    border-radius:50%;
    top:-150px;
    left:-150px;
}

.sjcc-mou-wrapper::after{
    content:"";
    position:absolute;
    width:200px;
    height:280px;
    background:#0b2f59;
    border-radius:50%;
    bottom:-150px;
    right:-150px;
}

/*==========================
      TITLE
==========================*/
/*==========================
       CARD
==========================*/

.sjcc-mou-card{
    background:#fff;
    border-radius:20px;
    padding:6px;
    margin-bottom:22px;
    position:relative;
    z-index:2;
    box-shadow:0 8px 25px rgba(0,0,0,0.08);
    transition:0.3s;
}

.sjcc-mou-card:hover{
    transform:translateY(-4px);
}

/*==========================
       ICON
==========================*/

.sjcc-mou-icon{
    width:72px;
    height:72px;
    background:#0b2f59;
    border-radius:50%;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin:auto;
}

/*==========================
       TEXT
==========================*/

.sjcc-mou-title{
    font-size:18px;
    font-weight:700;
    color:#0b2f59;
    margin-bottom:2px;
}

.sjcc-mou-subtitle{
    color:#666;
    font-size:13px;
}

/*==========================
      YEAR BOX
==========================*/

.sjcc-mou-year-box{
    background:#f5f7fb;
    border-radius:16px;
    padding:18px;
    text-align:center;
}

.sjcc-mou-year-box i{
    font-size:28px;
    color:#0b2f59;
    margin-bottom:10px;
}

.sjcc-mou-year{
    font-size:10px;
    font-weight:700;
    color:#0b2f59;
}

.sjcc-mou-renew{
    color:#666;
    font-size:15px;
}

/*==========================
      MOBILE
==========================*/

@media(max-width:768px){

    .sjcc-mou-wrapper{
        padding:25px;
    }
    .sjcc-mou-title{
        font-size:22px;
        text-align:center;
        margin-top:15px;
    }

    .sjcc-mou-subtitle{
        text-align:center;
    }

    .sjcc-mou-year-box{
        margin-top:20px;
    }

}

 /* Custom Palette Colors */
        .bg-navy { background-color: #1a365d; }        .bg-card-light { background-color: #fcfbf7; }
        
        /* Banner Settings */
        .report-banner {
            border-bottom: 4px solid #bfa15f; /* Gold accent line */
            padding: 1.5rem 2rem;
        }
        .banner-subtitle {
            font-size: 0.9rem;
            letter-spacing: 1px;
            font-weight: 500;
        }
        .banner-title {
            font-weight: 700;
            font-size: 1.8rem;
        }

        /* Section Header Badges */
        /* Institutional Performance Custom Styling */
        .stat-badge-gold {
            background-color: #dfba6b;
            color: #000000;
            font-weight: 700;
            font-size: 0.8rem;
            padding: 0.25rem 0.6rem;
            display: inline-block;
            letter-spacing: 0.5px;
        }
        .stat-badge-teal {
            background-color: #82b2b1;
            color: #000000;
            font-weight: 700;
            font-size: 0.8rem;
            padding: 0.25rem 0.6rem;
            display: inline-block;
            letter-spacing: 0.5px;
        }
        .stat-pass-rate {
            font-weight: 700;
            font-size: 1rem;
            margin-top: 0.3rem;
            margin-bottom: 0.1rem;
        }
        .stat-award-text {
            font-size: 0.75rem;
            color: #777777;
            line-height: 1.3;
        }
        
        /* Custom Bullet Indicators */
        .list-item-container {
            position: relative;
            padding-left: 1.5rem;
        }
        .list-bullet-gold::before {
            content: "•";
            color: #dfba6b;
            font-size: 1.8rem;
            position: absolute;
            left: 0;
            top: -0.6rem;
        }
        .list-bullet-teal::before {
            content: "•";
            color: #82b2b1;
            font-size: 1.8rem;
            position: absolute;
            left: 0;
            top: -0.6rem;
        }

        /* Spotlight Spotlight Cards */
        .spotlight-card {
            border: 1px solid #e9e7df;
            border-radius: 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        .profile-img {
            width: 75px;
            height: 85px;
            object-fit: cover;
            border: 1px solid #dddddd;
        }
        .profile-name {
            font-weight: 900;
            font-size: 1rem;
            letter-spacing: 0.5px;
            text-transform: capitalize;
            color: #846a35;
        }
        .profile-rank {
            font-size: 0.88rem;
            font-weight: 500;
            color: #111111;
        }
        /* ==========================================================================
           BLOCK: Main Site Header / Navbar
           ========================================================================== */
        /* ==========================================================================
           BLOCK: Careers Page Hero Section
           ========================================================================== */
        /* ==========================================================================
           BLOCK: Alert Notification Ribbon
           ========================================================================== */
        .alert-banner {
           background-color:#061840; /* Rich Blue Background */
            border: 2px solid #f2b233;  /* Metallic Golden Border */
            border-radius: 8px;
            padding: 15px 20px;
            color: var(--brand-sky);
            display: flex;
            align-items: center;
        }
        .alert-banner__icon {
            font-size: 24px;
            margin-right: 15px;
            color: #d6a726;
        }
        .alert-banner__title {
            font-size: 15px; 
            color: #fff;
        }
        .alert-banner__text {
            font-size: 13px; color: #fff;
        }

        /* ==========================================================================
           BLOCK: Modern Dashboard Component Cards
           ========================================================================== */
        .dashboard-card {
            background: #f6f4f0;
            border: 1px solid var(--brand-border);
            border-radius: 12px;
            padding: 24px;
            height: 100%;
        }
        .dashboard-card__header {
            font-size: 16px;
            font-weight: 700;
            color: var(--brand-primary);
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .dashboard-card__header-icon {
            margin-right: 10px;
            font-size: 18px;
        }
        /* Elements inside Dashboard Card: Layout Grids */
        .dashboard-card__recruiter-grid {
            display: grid;
            grid-template-columns: repeat(4, 2fr);
            gap: 12px;
        }
        .dashboard-card__roles-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        /* ==========================================================================
           BLOCKS: Embedded Discrete Items (Badges, Pills)
           ========================================================================== */
        .company-logo-badge {
            border: 1px solid #F1F5F9;
            border-radius: 6px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px;
            background: #FFFFFF;
            box-shadow: 0 1px 2px rgba(0,0,0,0.02);
            font-weight: 700;
            color: #475569;
            font-size: 12px;
            text-align: center;
            box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 20px 25px -5px rgba(13, 27, 42, 0.2);
        }
        /* Item Modifiers for branded logo colors */
        .company-logo-badge--jpm { color: #2563EB; font-style: italic; }
        .company-logo-badge--gs { color: #1E3A8A; }
        .company-logo-badge--deloitte { color: #000000; }
        .company-logo-badge--zomato { color: #E11D48; font-weight: 800; }

        .job-role-pill {
            background: #F8FAFC;
            border: 1px solid #D4AF37;
            border-radius: 6px;
            padding: 10px 12px;
            font-size: 12px;
            font-weight: 500;
            color: #334155;
            display: flex;
            align-items: center;
            box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    0 20px 25px -5px rgba(13, 27, 42, 0.2);
        }
        .job-role-pill__icon {
            color: var(--brand-sky);
            margin-right: 8px;
            font-size: 12px;
            width: 14px;
            text-align: center;

        }

        /* ==========================================================================
           BLOCK: Metric Metric Display Cards (Bottom Section)
           ========================================================================== */
        .metric-card {
            background: #13244a;
            border: 1px solid var(--brand-border);
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            height: 100%;
            color: #f2b233;
        }
        .metric-card__icon-wrap {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #f2b233;
            font-size: 21px;
            margin-bottom: 12px;
        }
        /* Modifiers for Contextual Metric Styling */
        .metric-card--placements .metric-card__icon-wrap { background-color: ; }
        .metric-card--internships .metric-card__icon-wrap { background-color: ; }
        .metric-card--education .metric-card__icon-wrap { background-color: ; }
        .metric-card--explore .metric-card__icon-wrap { background-color: ; }
        
        .metric-card__title {
            font-size: 14px;
            font-weight: 700;
            color:#f2b233;
            margin-bottom: 2px;
        }
        .metric-card__subtitle {
            font-size: 11px;
            color: var(--brand-muted-text);
            margin-bottom: 12px;
            color: #f2b233;
        }
        .metric-card__value {
            font-size: 28px;
            font-weight: 700;
            color: #f2b233;

        }
        /* Metric specific color helpers */
        .metric-card__value--green { color: #f2b233; }
        .metric-card__value--orange { color: #f2b233; }
        .metric-card__value--purple { color: #f2b233; font-weight: 800; }
        
        .metric-card__action-btn {
            background-color: #062247;
            color: white;
            font-size: 10px;
            font-weight: 500;
            padding: 8px 16px;
            border-radius: 6px;
            width: 100%;
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .metric-card__action-btn:hover {
            background-color: #0A3263;
            color: white;
        }

        /* ==========================================================================
           BLOCK: Global Footing Panel
           ========================================================================== */
        .site-footer {
            background-color: #061830;
            color: #94A3B8;
            font-size: 12px;
            padding: 20px 0;
            margin-top: 40px;
        }
        /* Responsive Breakdowns */
        @media (max-width: 1200px) {
            .dashboard-card__recruiter-grid { grid-template-columns: repeat(4, 1fr); }
            .dashboard-card__roles-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .dashboard-card__recruiter-grid { grid-template-columns: repeat(3, 1fr); }
            .dashboard-card__roles-grid { grid-template-columns: repeat(1, 1fr); }        }

      .social-bar { position: fixed; top: 500px;  right: 0;
    overflow: hidden; transform: translateY(-50%); z-index: 999; font-family: "Google Sans", sans-serif;  }  /* was DM Sans; Google Sans as on the home page */
.social-bar a {
    display: flex; align-items: center; width: 180px; height: 45px; margin: 2px 0;
    color: #fff; text-decoration: none; border-radius: 30px 0 0 30px;
    overflow: hidden; position: relative; transform: translateX(130px);
    transition: 0.4s ease;
}
.social-bar a:hover { transform: translateX(0); }
.social-bar a i { width: 50px; text-align: center; font-size: 18px; }.instagram { background: radial-gradient(circle at 30% 107%, 
    #fdf497 0%, 
    #fdf497 5%, 
    #fd5949 45%, 
    #d6249f 60%, 
    #285AEB 90%); }
.youtube { background: #ff0000; }
.linkedin { background: #0077b5; }  
#about,
#vision, 
#mission, 
#hod, 
#programmes, 
#faculty, 
#Collaboration, 
#activities, 
#research, 
#association_activities, 
#achievements, 
#student_achievements {
    scroll-margin-top: 120px; 
}

.obe-page {
            max-width: 100%;
            margin: 0 auto;
            padding: 0 04px;
            width:;
        }

        /* Top Bar */
        /* Hero Header */
        /* Key Metrics Row */
        .obe-metrics {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 32px;
        }

        @media (max-width: 768px) {
            .obe-metrics { grid-template-columns: repeat(2, 1fr); }
        }

        .obe-kpi {
            background: var(--obe-color-surface);
            border: 1px solid var(--obe-color-border);
            border-radius: 10px;
            padding: 20px 24px;
            box-shadow: var(--obe-shadow-sm);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .obe-kpi:hover {
            transform: translateY(-2px);
            box-shadow: var(--obe-shadow-md);
        }

        .obe-kpi__value {
            font-size: 1.85rem;
            font-weight: 800;
            color: var(--obe-color-navy);
            line-height: 1.2;
            margin-bottom: 4px;
        }

        .obe-kpi__label {
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--obe-color-muted);
        }

        /* Content Blocks */
        /* Quote Callout */
        /* Grid Cards */
        /* Table */
        /* Governance Footer Panel */
        .obe-footer {
            background: #061840;
            color: #f2b233;
            border-radius: 12px;
            padding: 32px 40px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            box-shadow: var(--obe-shadow-md);
        }

        @media (max-width: 768px) {
            .obe-footer { grid-template-columns: repeat(2, 1fr); }
        }

        .obe-footer__column {
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            padding-right: 12px;
        }

        .obe-footer__column:last-child {
            border-right: none;
        }

        .obe-footer__label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #94A3B8;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .obe-footer__value {
            font-size: 0.95rem;
            font-weight: 600;
            color: #f2b233;
        }

        .obe-footer__subtext {
            font-size: 0.8rem;
            color: #CBD5E1;
            font-weight: 400;
        }

  /* Renamed Container */
    .roles-table-wrapper {
      width: 100%;
      max-width: 1000px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 2rem;
      box-shadow: 
        0 10px 25px -5px rgba(15, 23, 42, 0.05),
        0 8px 10px -6px rgba(15, 23, 42, 0.01);
    }

    /* Renamed Table Element */
    .industry-roles-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 0.75rem;
    }

    /* Renamed Header */
    .industry-roles-table thead th {
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #64748b;
      padding: 0 1.25rem 0.75rem;
      text-align: left;
      border-bottom: 2px solid #f1f5f9;
    }

    .industry-roles-table thead th:first-child {
      width: 30%;
    }

    /* Renamed Row Styles */
    .industry-roles-table tbody tr {
      background: #ffffff;
      transition: all 0.25s ease;
    }

    .industry-roles-table tbody tr:hover {
      background: #f8fafc;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
    }

    .industry-roles-table tbody td:first-child {
      border-top-left-radius: 12px;
      border-bottom-left-radius: 12px;
      border-left: 1px solid #e2e8f0;
    }

    .industry-roles-table tbody td:last-child {
      border-top-right-radius: 12px;
      border-bottom-right-radius: 12px;
      border-right: 1px solid #e2e8f0;
    }

    .industry-roles-table tbody td {
      padding: 1.1rem 1.25rem;
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
      vertical-align: middle;
    }

    /* Renamed Sector Column Classes */
    .sector-heading-box {
      font-weight: 600;
      font-size: 1rem;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .status-marker-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #6366f1;
      flex-shrink: 0;
    }

    /* Color variations */
    tr:nth-child(3n+1) .status-marker-dot { background: #6366f1; }
    tr:nth-child(3n+2) .status-marker-dot { background: #ec4899; }
    tr:nth-child(3n+3) .status-marker-dot { background: #0284c7; }

    /* Renamed Roles List Classes */
    .roles-tag-group {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .job-title-pill {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 0.85rem;
      font-weight: 500;
      padding: 0.35rem 0.75rem;
      border-radius: 8px;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .job-title-pill:hover {
      background: #e0e7ff;
      border-color: #818cf8;
      color: #3730a3;
      transform: translateY(-1px);
    }

    /* Mobile Responsiveness */
    @media (max-width: 768px) {
      .roles-table-wrapper {
        padding: 1rem;
        border-radius: 16px;
      }

      .industry-roles-table thead {
        display: none;
      }

      .industry-roles-table, 
      .industry-roles-table tbody, 
      .industry-roles-table tr, 
      .industry-roles-table td {
        display: block;
        width: 100%;
      }

      .industry-roles-table tbody tr {
        margin-bottom: 1rem;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
      }

      .industry-roles-table tbody td:first-child,
      .industry-roles-table tbody td:last-child {
        border-radius: 0;
        border: none;
      }

      .industry-roles-table tbody td {
        padding: 1rem;
        border: none;
      }

      .industry-roles-table tbody td:first-child {
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 0.75rem;
      }
    }

.activity-card {
      width: 100%;
      max-width: 1200px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 1.5rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .card-title {
      margin-top: 0;
      margin-bottom: 1.25rem;
      font-size: 1.25rem;
      color: #1e293b;
    }
    .activity-list {
      margin: 0;
      padding-left: 1rem;
      list-style-position: outside;
    }

    .activity-item {
      margin-bottom: 0.4rem;
      font-size: 0.875rem;
      line-height: 1.4;
      color: #475569;
    }

    .activity-item:last-child {
      margin-bottom: 0;
    }

  /* Top Department Header */
    /* Officer Profile Card */
    /* Shortcut Action Buttons */
    /* Main Content Container */
    /* Bootstrap Accordion Styling Override */

/* ##########################################################################
   ADDITIONS – October 2026
   1. Styles for the new sections (sliders, coordinators, associations)
   2. Fluid text for every element in this file
   3. Responsive layout: phone < 576 | tablet 576–991 | small laptop 992–1199 |
      desktop | projector >= 1920 | 4K >= 2560
   ########################################################################## */

/* ==========================================================================
   TABBED IMAGE SLIDER (.sa-*)
   Used by: dpt_bba_studentachievements.php (department Student Achievements)
   and the ACCA / CMA / CIMA results sections on the programme pages.
   Script: sa_slider_script.php. All classes start with "sa-" so they do not
   clash with the existing .arrow / .prev / .next / .subtitle rules above.
   ========================================================================== */




/* Tabs (years / sessions / categories) */
.sa-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}










/* Slider */



















/* Shown when a tab has no images yet */





@media (max-width: 768px) {
  .sa-slide img { max-height: 260px; }
}

@media (max-width: 480px) {
  .sa-slider { border-radius: 6px; }
  .sa-slide img { max-height: 200px; }
  .sa-arrow { width: 28px; height: 28px; font-size: 13px; }
  .sa-prev { left: 6px; }
  .sa-next { right: 6px; }
  .sa-tab { padding: 5px 12px; font-size: 13px; }
}

@media (hover: none) {
  .sa-arrow { background: rgba(0, 0, 0, 0.6); }
}

/* ==========================================================================
   PROFESSIONAL PROGRAMMES PAGES (.pp-*)
   Coordinators (300 x 300 photos), coordinator messages, associations,
   testimonials tabs, ACCA exam table. Used by Department_of_ProfessionalProgrammes.php,
   BCom_Analytics.php, BCom_InternationalAccountingFinance.php,
   BCom_ProfessionalStrategicFinance.php and bba_ProfessionalFinanceAccountancy.php.
   ========================================================================== */

/* Sub-headings inside a section */




.pp-list {
  padding-left: 1.25rem;
  margin-bottom: 0.5rem;
}





/* Coordinator / person cards */










.pp-person-reg {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 6px;
  background: #f4f5f8;
  color: #2c3e50;
  font-size: 0.85rem;
}



.pp-person-link:hover { background: #0b2d6e; color: #ffffff; }

/* Coordinator message */






.pp-message-sign {
  margin-bottom: 0;
  text-align: left !important;
}

/* Associations */




/* Testimonials – video tab */
/* ACCA exam structure table */










@media (max-width: 767px) {
  .pp-people { justify-content: center; }
  .pp-message { padding: 1rem; }
  .pp-table tbody th { white-space: normal; }
}

/* ==========================================================================
   FLUID TEXT – ALL DEPARTMENT PAGES
   Generated from every font-size in this file. Each element keeps the size it
   already had on a 1366px laptop (shown in the comment) and then changes
   smoothly with the screen width – no jumps between devices:
     text      : ~92% on phones/tablets -> 100% at 1366 -> 110% at 1920 -> up to 125% on 4K
     headings  : ~73% on phones -> 84% on tablets -> 100% at 1366 -> 115% at 1920 -> up to 130%
   Formula: clamp(smallest, base + share-of-screen-width, largest).
   "html " in front of each selector makes these win over older fixed sizes
   in other stylesheets without needing !important.
   ========================================================================== */
html .section-tag { font-size: clamp(16.19px, 13.260px + 0.3177vw, 22px); }  /* 17.6px at 1366 */
html .section-sub { font-size: clamp(14.26px, 11.678px + 0.2798vw, 19.38px); }  /* 15.5px at 1366 */
html .caption-box h2 { font-size: clamp(28.8px, 25.203px + 1.0832vw, 52px); }  /* 40px at 1366 */
html .caption-box p { font-size: clamp(19.87px, 16.274px + 0.3899vw, 27px); }  /* 21.6px at 1366 *//* 13.6px at 1366 *//* 32px at 1366 *//* 16px at 1366 */
html .cta-btn { font-size: clamp(13.98px, 11.452px + 0.2744vw, 19px); }  /* 15.2px at 1366 *//* 24px at 1366 */
html .prog-card h3 { font-size: clamp(15.64px, 12.808px + 0.3069vw, 21.25px); }  /* 17px at 1366 */
html .prog-card p { font-size: clamp(12.42px, 10.171px + 0.2437vw, 16.88px); }  /* 13.5px at 1366 */
html .prog-tag { font-size: clamp(9.66px, 7.911px + 0.1895vw, 13.12px); }  /* 10.5px at 1366 */
html .prog-link { font-size: clamp(11.96px, 9.795px + 0.2346vw, 16.25px); }  /* 13px at 1366 */
html .syl-card h3 { font-size: clamp(16.56px, 13.562px + 0.3249vw, 22.5px); }  /* 18px at 1366 *//* 10px at 1366 *//* 13.5px at 1366 *//* 14px at 1366 *//* 13px at 1366 *//* 56px at 1366 *//* 22px at 1366 *//* 13.5px at 1366 *//* 10px at 1366 *//* 11.5px at 1366 *//* 24px at 1366 */
html .hub-body h3 { font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); }  /* 16px at 1366 */
html .hub-body p { font-size: clamp(13.98px, 11.452px + 0.2744vw, 19px); }  /* 15.2px at 1366 */
html .hub-body a { font-size: clamp(11.5px, 9.418px + 0.2256vw, 15.62px); }  /* 12.5px at 1366 */
html .hub-body a::after { font-size: clamp(11.04px, 9.041px + 0.2166vw, 15px); }  /* 12px at 1366 */
html .careers-text p { font-size: clamp(13.8px, 11.302px + 0.2707vw, 18.75px); }  /* 15px at 1366 *//* 36px at 1366 *//* 12px at 1366 *//* 16px at 1366 *//* 12px at 1366 */
html .admissions-banner h2 { font-size: clamp(27.36px, 23.943px + 1.0290vw, 49.4px); }  /* 38px at 1366 */
html .admissions-banner p { font-size: clamp(13.8px, 11.302px + 0.2707vw, 18.75px); }  /* 15px at 1366 */
html .btn-gold { font-size: clamp(12.88px, 10.548px + 0.2527vw, 17.5px); }  /* 14px at 1366 */
html .btn-ghost { font-size: clamp(12.88px, 10.548px + 0.2527vw, 17.5px); }  /* 14px at 1366 *//* 56px at 1366 *//* 22px at 1366 *//* 14px at 1366 *//* 10px at 1366 *//* 22px at 1366 *//* 15px at 1366 *//* 12.5px at 1366 */
html .ticker { font-size: clamp(11.5px, 9.418px + 0.2256vw, 15.62px); }  /* 12.5px at 1366 */
html .ticker-badge { font-size: clamp(13.8px, 11.302px + 0.2707vw, 18.75px); }  /* 15px at 1366 */
html .ticker-badge::before { font-size: clamp(11.04px, 9.041px + 0.2166vw, 15px); }  /* 12px at 1366 */
html .ticker-inner { font-size: clamp(13.8px, 11.302px + 0.2707vw, 18.75px); }  /* 15px at 1366 */
html .ticker-inner span::after { font-size: clamp(7.36px, 6.027px + 0.1444vw, 10px); }  /* 8px at 1366 */
html .ticker-close-btn { font-size: clamp(20.24px, 16.576px + 0.3971vw, 27.5px); }  /* 22px at 1366 */
html .footer-brand-name { font-size: clamp(18.72px, 16.382px + 0.7041vw, 33.8px); }  /* 26px at 1366 *//* 15px at 1366 */
html .footer-brand-desc { font-size: clamp(13.8px, 11.302px + 0.2707vw, 18.75px); }  /* 15px at 1366 */
html .footer-contact { font-size: clamp(13.8px, 11.302px + 0.2707vw, 18.75px); }  /* 15px at 1366 */
html .footer-contact a { font-size: clamp(13.8px, 11.302px + 0.2707vw, 18.75px); }  /* 15px at 1366 */
html footer h5 { font-size: clamp(18.72px, 16.382px + 0.7041vw, 33.8px); }  /* 26px at 1366 */
html footer ul li a { font-size: clamp(13.8px, 11.302px + 0.2707vw, 18.75px); }  /* 15px at 1366 */
html .footer-bottom { font-size: clamp(13.8px, 11.302px + 0.2707vw, 18.75px); }  /* 15px at 1366 */
html .footer-bottom a { font-size: clamp(13.8px, 11.302px + 0.2707vw, 18.75px); }  /* 15px at 1366 */
html .section-title { font-size: clamp(23.04px, 20.163px + 0.8666vw, 41.6px); }  /* 32px at 1366 */
html .content-section p { font-size: clamp(13.98px, 11.452px + 0.2744vw, 19px); }  /* 15.2px at 1366 */
html .vm-card { font-size: clamp(13.25px, 10.849px + 0.2599vw, 18px); }  /* 14.4px at 1366 */
html .vm-card ul li { font-size: clamp(13.98px, 11.452px + 0.2744vw, 19px); }  /* 15.2px at 1366 */
html .vm-title { font-size: clamp(13.98px, 11.452px + 0.2744vw, 19px); }  /* 15.2px at 1366 */
html .vm-title p { font-size: clamp(13.98px, 11.452px + 0.2744vw, 19px); }  /* 15.2px at 1366 */
html .vm-title i { font-size: clamp(20.16px, 17.642px + 0.7582vw, 36.4px); }  /* 28px at 1366 */
html .vm-title h2 { font-size: clamp(23.04px, 20.163px + 0.8666vw, 41.6px); }  /* 32px at 1366 */
html .faculty-card h5 { font-size: clamp(13.25px, 10.849px + 0.2599vw, 18px); }  /* 14.4px at 1366 */
html .faculty-card p { font-size: clamp(8.83px, 7.233px + 0.1733vw, 12px); }  /* 9.6px at 1366 */
html .faculty-card b { font-size: clamp(10.3px, 8.438px + 0.2022vw, 14px); }  /* 11.2px at 1366 */
html .view-btn { font-size: clamp(10.3px, 8.438px + 0.2022vw, 14px); }  /* 11.2px at 1366 *//* 13.6px at 1366 *//* 42.4px at 1366 *//* 15.68px at 1366 *//* 14.4px at 1366 *//* 14.4px at 1366 *//* 14.72px at 1366 */
html .date-badge .day { font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); }  /* 16px at 1366 */
html .date-badge .day-range { font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); }  /* 16px at 1366 */
html .date-badge .header-compact { font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); }  /* 16px at 1366 */
html .date-badge .month { font-size: clamp(10.6px, 8.680px + 0.2079vw, 14.4px); }  /* 11.52px at 1366 */
html .date-badge .year { font-size: clamp(10.6px, 8.680px + 0.2079vw, 14.4px); }  /* 11.52px at 1366 */
html .event-title { font-size: clamp(12.51px, 10.247px + 0.2455vw, 17px); }  /* 13.6px at 1366 */
html .event-description { font-size: clamp(12.95px, 10.608px + 0.2541vw, 17.6px); }  /* 14.08px at 1366 */
html .label-participants { font-size: clamp(11.04px, 9.041px + 0.2166vw, 15px); }  /* 12px at 1366 */
html .count-text { font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); }  /* 16px at 1366 */
html .badge-pill { font-size: clamp(11.48px, 9.403px + 0.2253vw, 15.6px); }  /* 12.48px at 1366 *//* 42px at 1366 *//* 20px at 1366 */
html .sjcc-mou-icon { font-size: clamp(17.28px, 15.122px + 0.6499vw, 31.2px); }  /* 24px at 1366 */
html .sjcc-mou-title { font-size: clamp(16.56px, 13.562px + 0.3249vw, 22.5px); }  /* 18px at 1366 */
html .sjcc-mou-subtitle { font-size: clamp(11.96px, 9.795px + 0.2346vw, 16.25px); }  /* 13px at 1366 */
html .sjcc-mou-year-box i { font-size: clamp(20.16px, 17.642px + 0.7582vw, 36.4px); }  /* 28px at 1366 */
html .sjcc-mou-year { font-size: clamp(9.2px, 7.534px + 0.1805vw, 12.5px); }  /* 10px at 1366 */
html .sjcc-mou-renew { font-size: clamp(13.8px, 11.302px + 0.2707vw, 18.75px); }  /* 15px at 1366 */
html .banner-subtitle { font-size: clamp(13.25px, 10.849px + 0.2599vw, 18px); }  /* 14.4px at 1366 */
html .banner-title { font-size: clamp(20.74px, 18.147px + 0.7799vw, 37.44px); }  /* 28.8px at 1366 *//* 15.2px at 1366 */
html .stat-badge-gold { font-size: clamp(11.78px, 9.644px + 0.2310vw, 16px); }  /* 12.8px at 1366 */
html .stat-badge-teal { font-size: clamp(11.78px, 9.644px + 0.2310vw, 16px); }  /* 12.8px at 1366 */
html .stat-pass-rate { font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); }  /* 16px at 1366 */
html .stat-award-text { font-size: clamp(11.04px, 9.041px + 0.2166vw, 15px); }  /* 12px at 1366 */
html .list-bullet-gold::before { font-size: clamp(20.74px, 18.147px + 0.7799vw, 37.44px); }  /* 28.8px at 1366 */
html .list-bullet-teal::before { font-size: clamp(20.74px, 18.147px + 0.7799vw, 37.44px); }  /* 28.8px at 1366 */
html .profile-name { font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); }  /* 16px at 1366 */
html .profile-rank { font-size: clamp(12.95px, 10.608px + 0.2541vw, 17.6px); }  /* 14.08px at 1366 *//* 12px at 1366 *//* 42px at 1366 *//* 16px at 1366 *//* 22px at 1366 *//* 26px at 1366 *//* 13px at 1366 *//* 11px at 1366 */
html .alert-banner__icon { font-size: clamp(17.28px, 15.122px + 0.6499vw, 31.2px); }  /* 24px at 1366 */
html .alert-banner__title { font-size: clamp(13.8px, 11.302px + 0.2707vw, 18.75px); }  /* 15px at 1366 */
html .alert-banner__text { font-size: clamp(11.96px, 9.795px + 0.2346vw, 16.25px); }  /* 13px at 1366 */
html .dashboard-card__header { font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); }  /* 16px at 1366 */
html .dashboard-card__header-icon { font-size: clamp(16.56px, 13.562px + 0.3249vw, 22.5px); }  /* 18px at 1366 *//* 13px at 1366 */
html .company-logo-badge { font-size: clamp(11.04px, 9.041px + 0.2166vw, 15px); }  /* 12px at 1366 */
html .job-role-pill { font-size: clamp(11.04px, 9.041px + 0.2166vw, 15px); }  /* 12px at 1366 */
html .job-role-pill__icon { font-size: clamp(11.04px, 9.041px + 0.2166vw, 15px); }  /* 12px at 1366 */
html .metric-card__icon-wrap { font-size: clamp(19.32px, 15.822px + 0.3790vw, 26.25px); }  /* 21px at 1366 */
html .metric-card__title { font-size: clamp(12.88px, 10.548px + 0.2527vw, 17.5px); }  /* 14px at 1366 */
html .metric-card__subtitle { font-size: clamp(10.12px, 8.288px + 0.1986vw, 13.75px); }  /* 11px at 1366 */
html .metric-card__value { font-size: clamp(20.16px, 17.642px + 0.7582vw, 36.4px); }  /* 28px at 1366 */
html .metric-card__action-btn { font-size: clamp(9.2px, 7.534px + 0.1805vw, 12.5px); }  /* 10px at 1366 */
html .site-footer { font-size: clamp(11.04px, 9.041px + 0.2166vw, 15px); }  /* 12px at 1366 *//* 16px at 1366 */
html .social-bar a i { font-size: clamp(16.56px, 13.562px + 0.3249vw, 22.5px); }  /* 18px at 1366 *//* 13.6px at 1366 *//* 12px at 1366 *//* 36px at 1366 *//* 16.8px at 1366 */
html .obe-kpi__value { font-size: clamp(21.31px, 18.651px + 0.8016vw, 38.48px); }  /* 29.6px at 1366 */
html .obe-kpi__label { font-size: clamp(11.78px, 9.644px + 0.2310vw, 16px); }  /* 12.8px at 1366 *//* 20px at 1366 *//* 15.6px at 1366 *//* 16px at 1366 *//* 15.6px at 1366 *//* 14px at 1366 *//* 14.4px at 1366 *//* 12.8px at 1366 *//* 12px at 1366 */
html .obe-footer__label { font-size: clamp(10.3px, 8.438px + 0.2022vw, 14px); }  /* 11.2px at 1366 */
html .obe-footer__value { font-size: clamp(13.98px, 11.452px + 0.2744vw, 19px); }  /* 15.2px at 1366 */
html .obe-footer__subtext { font-size: clamp(11.78px, 9.644px + 0.2310vw, 16px); }  /* 12.8px at 1366 */
html .industry-roles-table thead th { font-size: clamp(11.78px, 9.644px + 0.2310vw, 16px); }  /* 12.8px at 1366 */
html .sector-heading-box { font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); }  /* 16px at 1366 */
html .job-title-pill { font-size: clamp(12.51px, 10.247px + 0.2455vw, 17px); }  /* 13.6px at 1366 */
html .card-title { font-size: clamp(18.4px, 15.069px + 0.3610vw, 25px); }  /* 20px at 1366 *//* 13.6px at 1366 */
html .activity-item { font-size: clamp(12.88px, 10.548px + 0.2527vw, 17.5px); }  /* 14px at 1366 *//* 16px at 1366 *//* 13.6px at 1366 *//* 13.6px at 1366 */
html .sa-subtitle { font-size: clamp(12.88px, 10.548px + 0.2527vw, 17.5px); }  /* 14px at 1366 */
html .sa-tab { font-size: clamp(12.88px, 10.548px + 0.2527vw, 17.5px); }  /* 14px at 1366 */
html .sa-arrow { font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); }  /* 16px at 1366 */
html .sa-counter { font-size: clamp(11.96px, 9.795px + 0.2346vw, 16.25px); }  /* 13px at 1366 */
html .pp-subtitle { font-size: clamp(19.87px, 16.274px + 0.3899vw, 27px); }  /* 21.6px at 1366 */
html .pp-subhead { font-size: clamp(15.46px, 12.658px + 0.3032vw, 21px); }  /* 16.8px at 1366 */
html .pp-list li { font-size: clamp(13.98px, 11.452px + 0.2744vw, 19px); }  /* 15.2px at 1366 */
html .pp-person-name { font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); }  /* 16px at 1366 */
html .pp-person-role { font-size: clamp(11.78px, 9.644px + 0.2310vw, 16px); }  /* 12.8px at 1366 */
html .pp-person-reg { font-size: clamp(12.51px, 10.247px + 0.2455vw, 17px); }  /* 13.6px at 1366 */
html .pp-person-link { font-size: clamp(12.51px, 10.247px + 0.2455vw, 17px); }  /* 13.6px at 1366 */
html .pp-message p { font-size: clamp(13.98px, 11.452px + 0.2744vw, 19px); }  /* 15.2px at 1366 */
html .pp-assoc-name { font-size: clamp(17.28px, 15.122px + 0.6499vw, 31.2px); }  /* 24px at 1366 */
html .pp-assoc-body p { font-size: clamp(13.98px, 11.452px + 0.2744vw, 19px); }  /* 15.2px at 1366 */
html .pp-table { font-size: clamp(13.54px, 11.091px + 0.2657vw, 18.4px); }  /* 14.72px at 1366 */
html .content-section > p { font-size: clamp(13.98px, 11.452px + 0.2744vw, 19px) !important; }  /* 15.2px at 1366 */
html .vm-card > p { font-size: clamp(13.98px, 11.452px + 0.2744vw, 19px) !important; }  /* 15.2px at 1366 */
html body { font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); }  /* 16px at 1366 */

/* ==========================================================================
   RESPONSIVE LAYOUT – DEPARTMENT & PROGRAMME PAGES (whole website)
   Applies automatically to every page built on the department template
   (<section class="prog-section"> containing the .department-menu), except the
   association pages (.assoc-wrap), which have their own layout.
   Breakpoints: phone < 576 | tablet 576–991 | small laptop 992–1199 | desktop | projector >= 1920
   ========================================================================== */

.prog-section:has(.department-menu):not(.assoc-wrap) .content-section:not(.row > *) { padding: clamp(20px, 1.9vw + 14px, 64px); overflow-wrap: anywhere; }  /* 40px at 1366 */
.prog-section:has(.department-menu):not(.assoc-wrap) .vm-card { padding: clamp(18px, 1.6vw + 13px, 56px); overflow-wrap: anywhere; }  /* 35px at 1366 */
.prog-section:has(.department-menu):not(.assoc-wrap) .content-section > p,
.prog-section:has(.department-menu):not(.assoc-wrap) .vm-card > p,
.prog-section:has(.department-menu):not(.assoc-wrap) .pp-list li,
.prog-section:has(.department-menu):not(.assoc-wrap) .pp-message p { line-height: 1.65; }
.prog-section:has(.department-menu):not(.assoc-wrap) img { max-width: 100%; }
.prog-section:has(.department-menu):not(.assoc-wrap) .hod-img { height: auto; aspect-ratio: 180 / 220; }
.prog-section:has(.department-menu):not(.assoc-wrap) .prog-grid { grid-template-columns: minmax(0, 1fr);  /* one card per column, never wider than it */ }
/* tables size their columns as before (the card's "break anywhere" rule made columns narrower) */
.prog-section:has(.department-menu):not(.assoc-wrap) table { overflow-wrap: normal; }
@media (max-width: 991.98px) {
  .prog-section:has(.department-menu):not(.assoc-wrap) table.table { display: block; max-width: 100%; overflow-x: auto;  /* wide tables scroll inside the card (phones/tablets) */ }
}
.prog-section:has(.department-menu):not(.assoc-wrap) .d-flex > * { min-width: 0;  /* flex children may shrink, so tables inside them cannot overflow */ }
.prog-section:has(.department-menu):not(.assoc-wrap) .sa-slide img { max-height: clamp(200px, 23vw, 600px); }
.prog-section:has(.department-menu):not(.assoc-wrap) .sa-arrow { width: clamp(28px, 1.5vw + 20px, 52px); height: clamp(28px, 1.5vw + 20px, 52px); font-size: clamp(13px, 0.6vw + 10px, 24px); }

@media (max-width: 991.98px) {
  .prog-section:has(.department-menu):not(.assoc-wrap) { padding-top: 48px; }
  .prog-section:has(.department-menu):not(.assoc-wrap) > section { padding-left: 0; padding-right: 0; }
  .prog-section:has(.department-menu):not(.assoc-wrap) .sticky-menu { position: static; top: auto; z-index: auto;  /* menu no longer sticks over content */ }
  .prog-section:has(.department-menu):not(.assoc-wrap) .hod-img { width: 180px; }
}

@media (min-width: 576px) and (max-width: 1199.98px) {
  .prog-section:has(.department-menu):not(.assoc-wrap) .row > .prog-grid.col-md-4 { flex: 0 0 50%; max-width: 50%;  /* 2 programme cards per row */ }
}

@media (max-width: 575.98px) {
  .prog-section:has(.department-menu):not(.assoc-wrap) { padding-top: 24px; }
  .prog-section:has(.department-menu):not(.assoc-wrap) > section { padding-top: 16px; padding-bottom: 16px; }
  .prog-section:has(.department-menu):not(.assoc-wrap) .content-section,
  .prog-section:has(.department-menu):not(.assoc-wrap) .vm-card { margin-bottom: 18px; }
  .prog-section:has(.department-menu):not(.assoc-wrap) .content-section .container { padding-left: 0; padding-right: 0; }
  .prog-section:has(.department-menu):not(.assoc-wrap) .sjcc-mou-wrapper { padding: 16px; border-radius: 18px; }
  .prog-section:has(.department-menu):not(.assoc-wrap) .vm-title { gap: 10px; }
  .prog-section:has(.department-menu):not(.assoc-wrap) p { text-align: left;  /* justified text leaves big gaps on narrow screens */ }
  .prog-section:has(.department-menu):not(.assoc-wrap) .pp-person-photo { width: 260px; }
  .prog-section:has(.department-menu):not(.assoc-wrap) .pp-message { padding: 1rem 0.9rem; }
}

@media (min-width: 1920px) {
  .prog-section:has(.department-menu):not(.assoc-wrap) > section > .container-fluid { max-width: 1760px; margin-left: auto; margin-right: auto;  /* readable line length on projectors */ }
  .prog-section:has(.department-menu):not(.assoc-wrap) .sjcc-mou-wrapper { max-width: 1400px; }
  .prog-section:has(.department-menu):not(.assoc-wrap) .pp-people { gap: 36px; }
}

@media (min-width: 2560px) {
  .prog-section:has(.department-menu):not(.assoc-wrap) > section > .container-fluid { max-width: 2240px; }
  .prog-section:has(.department-menu):not(.assoc-wrap) .sjcc-mou-wrapper { max-width: 1800px; }
}

/* Recruiter logo grid ("Where Our Students Go"): logos had a fixed 100px width,
   so the grid overflowed on phones. Logos now shrink to fit their tile. */




/* ==========================================================================
   RESPONSIVE FIXES FOR SHARED BLOCKS (all department pages)
   ========================================================================== */

/* Card grids: a card may never be wider than the screen (old minimums of
   220–320px overflowed small phones) */
.hub-grid        { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* Hero caption: the old rule kept a 136px gap under the heading on every screen */
.caption-box h2 { margin-bottom: clamp(1rem, 6vw, 8.5rem); }

/* Footer: 4 columns on desktop, 2 on tablet, 1 on phone */
@media (max-width: 1024px) {  footer { padding: 40px 24px 50px; }
}
@media (max-width: 720px) {  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-bottom a { margin-left: 10px; margin-right: 10px; }
}

/* Tables and wide blocks scroll inside their card instead of stretching the page */
.roles-table-wrapper { max-width: 100%; overflow-x: auto; }

/* Phones */
@media (max-width: 575.98px) {  .obe-metrics { grid-template-columns: 1fr 1fr; gap: 12px; }  .dashboard-card { padding: 18px; }
  .admissions-banner { padding: 40px 18px; margin: 24px 12px; }
  .btn-gold, .btn-ghost { padding: 12px 20px; }
}

/* Projector / large screens: wider containers so content uses the screen,
   but lines stay readable */
@media (min-width: 1920px) {
  .container { max-width: 1440px; }  .admissions-banner { max-width: 1440px; }
  .roles-table-wrapper, .activity-card { max-width: 1440px; }
}
@media (min-width: 2560px) {
  .container { max-width: 1840px; }  .admissions-banner { max-width: 1840px; }
  .roles-table-wrapper, .activity-card { max-width: 1840px; }
}

/* Activity cards on phones: the tablet layout gave each part a named grid area;
   with the areas removed on phones they all landed in the same cell and overlapped.
   One column, date as a strip on top. */


/* Activities table (3 categories side by side): on phones the three narrow
   columns broke words into single letters. Below 768px it becomes one column:
   heading, its list, next heading, its list ... */


/* Job-role tags: long titles wrap instead of running out of their box on phones */


/* Data tables on phones: columns keep a readable width and the table scrolls
   sideways inside its card, instead of squeezing words into fragments */


/* ##########################################################################
   PAGE COMPONENTS (moved here from the pages, October 2026)
   Previously each page carried these in its own <style> blocks.
   ########################################################################## */

/* ===== Shared by all department pages: safety net, tabs, sliders, coordinator
   cards, association tabs, hero, phone menu bar, tables ===== */
/* ---------- Safety net: nothing may make the page wider than the screen ----------
   (the site header from menu1.php currently loses its own styles, so its logo
   renders at full image size; these rules keep the page inside the screen) */
html { overflow-x: hidden; }
body { max-width: 100%; overflow-x: clip;  /* clip (not hidden) so the sticky menu bar keeps working */ }
img, video, iframe { max-width: 100%; }
img { height: auto; }

/* ---------- Tabs ---------- */









/* ---------- Slider ---------- */















/* ---------- Coordinator / person cards ---------- */












/* ---------- Coordinator message page ---------- */


  /* room for the quote mark */

/* Message pages have no hero: give the content its own breathing room under the site header */









/* ---------- Coordinator message ---------- */






/* ---------- Headings, lists, notes, table ---------- */













/* ---------- Video testimonials ---------- */
/* ---------- Recruiter logos ("Where Our Students Go") fit small phones ---------- */



/* Programme cards: each column holds one card, so it may never be wider than its column */


/* ---------- Hero (video + caption + Admissions), all screen sizes ---------- */






/* Caption: programme name + Contact Us, bottom-left of the video */

.pp-hero .caption-box h2 {
  margin: 0 0 clamp(12px, 1.6vw, 22px); padding: 0; color: #fff; background: none;
  font-family: var(--bs-body-font-family, system-ui, sans-serif); font-style: normal;
  font-size: clamp(1.6rem, 3.4vw, 3.4rem); font-weight: 800; line-height: 1.15; text-align: left;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}


      /* empty box (content is commented out) */
/* Admissions: tab on the right edge, vertically centred */






/* Cards with a fixed width (e.g. style="width: 18rem") never grow wider than their
   column, so they cannot run over the text next to them */
.prog-section .card { max-width: 100%; }

/* ---------- SIDE MENU – SAME LOOK ON EVERY PAGE ----------
   Every side menu (department, programme, About, Exams, Library, Associations ...)
   looks like the B.Com (Professional – Strategic Finance) page: navy list,
   18px × 20px items with light dividers, gold text, white on hover.
   Text: 16px on a 1366px laptop, growing smoothly on projectors. */
.prog-section .department-menu { background: #061840; border: 1px solid #ddd; border-radius: 0; overflow: visible; }
.prog-section .department-menu ul { margin: 0; padding: 0; list-style: none; }
.prog-section .department-menu li { border-top: 0; border-bottom: 1px solid #d5d5d5; list-style: none !important; margin-left: 0; }
.prog-section .department-menu li::marker { content: none; }
.prog-section .department-menu li:last-child { border-bottom: 0; }
.prog-section .department-menu a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 18px 20px; color: #f2b233; text-decoration: none; transition: .3s;
  font-size: clamp(14.72px, 12.055px + 0.2888vw, 20px); font-weight: 400; line-height: 1.5;
}
.prog-section .department-menu a:hover { background: #fff; color: #c79b43; }
.prog-section .department-menu i { color: #c79b43; font-size: 1em; margin-left: 0; }
/* entries with a sub-list (e.g. Faculty, Syllabus): same style, slightly indented */
.prog-section .department-menu li ul a { padding: 14px 20px 14px 32px; font-size: clamp(13.8px, 11.3px + 0.2708vw, 18.75px); }
@media (min-width: 992px) {
  .prog-section .department-menu.sticky-menu { position: sticky; top: 20px; }
}

/* ---------- Side menu on phones & tablets (all pages with a side menu) ----------
   Desktop keeps the sidebar exactly as it was. Below 992px every menu in the side
   column folds into one bar ("Menu" / "Department Menu" + current page or section)
   that stays under the site header while scrolling; tapping it opens the same
   vertical list with arrows. The script in footer.php adds .pp-dm-box/.pp-dm-panel. */

@media (min-width: 992px) {
  .pp-dm-box, .pp-dm-panel { display: contents; }
}
@media (max-width: 991.98px) {
  
  
  
  
  
  

  /* the side column is "unwrapped" so the bar can stay in view over the whole page;
     anything else in that column (e.g. a contact card) stays where it was */
  .pp-dm-flat { display: contents !important; }
  .pp-dm-flat > br { display: none; }
  .pp-dm-flat > :not(.pp-dm-flat):not(.pp-dm-box):not(script):not(style):not(br),
  .pp-dm-box {
    flex: 0 0 auto; width: calc(100% - var(--bs-gutter-x, 1.5rem)); max-width: none;
    margin-left: calc(var(--bs-gutter-x, 1.5rem) * .5); margin-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    margin-top: var(--bs-gutter-y, 0);
  }
  .pp-dm-box { position: sticky; top: var(--pp-dm-top, 70px); z-index: 900; border-radius: 12px; box-shadow: 0 8px 22px rgba(4, 30, 66, .22); }
  .pp-dm-box.pp-dm-open { z-index: 1001;  /* open list sits above the floating side buttons */ }

  .pp-dm-toggle {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin: 0;
    padding: 9px 16px 9px 10px; border: 0; border-radius: 12px; background: #061840; color: #fff;
    text-align: left; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent;
  }
  .pp-dm-open .pp-dm-toggle { border-radius: 12px 12px 0 0; }
  
  
  
  
  
  
  

  /* the list: drops down over the page, scrolls on its own if taller than the screen */
  .pp-dm-panel {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - var(--pp-dm-top, 70px) - 76px); max-height: calc(100dvh - var(--pp-dm-top, 70px) - 76px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: #061840; border-top: 1px solid rgba(199, 155, 67, .4); border-radius: 0 0 12px 12px;
    box-shadow: 0 16px 32px rgba(4, 30, 66, .35);
  }
  .pp-dm-open .pp-dm-panel { display: block; }
  .pp-dm-panel > br { display: none; }
  .pp-dm-panel .department-menu {
    position: static !important; top: auto !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  .pp-dm-panel .department-menu + .department-menu,
  .pp-dm-panel > * + .ap-siblings { border-top: 2px solid rgba(199, 155, 67, .45) !important; }
  .pp-dm-panel .department-menu ul { margin: 0 !important; padding: 0 !important; background: transparent !important; }
  .pp-dm-panel .department-menu li { border-bottom: 1px solid rgba(255, 255, 255, .08) !important; margin: 0 !important; }
  .pp-dm-panel .department-menu li:last-child { border-bottom: 0 !important; }
  .pp-dm-panel .department-menu a {
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 50px; padding: 12px 18px !important; color: #fff !important; font-size: .95rem; line-height: 1.35; background: transparent !important;
    border: 0 !important; border-radius: 0 !important; width: 100% !important; box-sizing: border-box;
  }
  .pp-dm-panel .department-menu a i { flex: 0 0 auto; font-size: .8rem; color: #c79b43; transition: transform .2s ease; }
  .pp-dm-panel .department-menu a:active { background: rgba(255, 255, 255, .08) !important; }
  .pp-dm-panel .department-menu a.pp-dm-here,
  .pp-dm-panel .department-menu a.active { background: #fff !important; color: #b8891a !important; font-weight: 600; }

  /* entries with their own sub-list: tap to show it */
  .pp-dm-panel .pp-dm-parent > ul { display: none !important; background: rgba(255, 255, 255, .05) !important; }
  .pp-dm-panel .pp-dm-parent.pp-dm-sub-open > ul { display: block !important; }
  .pp-dm-panel .pp-dm-parent > a i { transform: rotate(90deg); }
  .pp-dm-panel .pp-dm-parent.pp-dm-sub-open > a i { transform: rotate(-90deg); }
  .pp-dm-panel .pp-dm-parent > ul a { min-height: 46px; padding-left: 34px !important; font-size: .9rem; color: #dfe3ec !important; }
  .pp-dm-panel .pp-dm-parent-link > a i { padding: 10px 12px; margin: -10px -12px -10px 0; border-left: 1px solid rgba(255, 255, 255, .15); }
  .pp-dm-panel .pp-dm-parent > ul li[style] { margin-left: 0 !important; padding-left: 18px; }

  /* association pages: the "other associations" list inside the same panel */
  .pp-dm-panel .ap-siblings { margin: 0 !important; padding: 12px 0 4px !important; background: transparent !important; border: 0; box-shadow: none !important; }
  /* sections land just below the header + menu bar */
  
}

/* Activity cards never wider than the screen */



/* Activity cards on phones: the tablet layout gave each part a named grid area;
   with the areas removed on phones they all landed in the same cell and overlapped.
   One column, date as a strip on top. */


/* Activities table (3 categories side by side): on phones the three narrow
   columns broke words into single letters. Below 768px it becomes one column:
   heading, its list, next heading, its list ... */


/* Job-role tags: long titles wrap instead of running out of their box on phones */


/* Data tables on phones: columns keep a readable width and the table scrolls
   sideways inside its card, instead of squeezing words into fragments */
@media (max-width: 767.98px) {
  .prog-section table.table td, .prog-section table.table th { min-width: 8.5rem; overflow-wrap: normal; word-break: normal; hyphens: manual; }
  .prog-section table.table tr > :first-child { min-width: 3.5rem; }
}

/* ---------- Phones ---------- */


/* ---------- HOME PAGE QUICK LINKS on phones ----------
   Six tiles in a compact 3 x 2 grid instead of three tall rows of two,
   so the section takes about a third of the screen. */
/* tablets: three per row as well, slightly larger */

/* ===== B.Sc. department page (bsc_economics.php) ===== *//* ===== B.Sc page: year tabs > semester drop-downs, magazines, testimonials ===== */
/* Student Research table */
/* phones: each research entry becomes a card with labels */

/* Video Testimonials: one row that scrolls sideways */

/* HOD photo (300 x 300) */
html .prog-section .hod-img.bsc-hod-photo { width: clamp(180px, 15vw, 260px) !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover; border-radius: 10px; flex-shrink: 0; }

/* ===== B.Sc. Student Achievements slider (bsc_student_slide.php) ===== */
  .ach-carousel-inner {
    width: 100%;
    position: relative;
    box-sizing: border-box;
  }

  /* Hide radio controls */
  .ach-carousel-inner input[type="radio"] {
    display: none !important;
  }

  /* Carousel Viewport */
  .ach-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  /* Slide Track */
  .ach-track {
    display: flex;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
  }

  /* Slide Group Base */
  .ach-slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: flex;
    gap: 15px;
    box-sizing: border-box;
    padding: 10px 0;
    align-items: stretch;
  }

  /* Achievement Card Flex Behavior (3 cards = 33% width, 2 cards = 50% width) */
  .ach-card {
    flex: 1 1 0;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .ach-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  }

  /* Profile Avatar */
  .ach-profile-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #007bff;
    margin-bottom: 12px;
    flex-shrink: 0;
  }

  /* Card Typography */
  .ach-desc p {
    color: #475569;
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 0 0 12px 0;
    text-align: center;
  }

  .ach-name {
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 600;
    margin-top: auto;
    width: 100%;
  }

  /* Scrollable Container for Group Cards (Slide 3) */
  .ach-name-list {
    max-height: 90px;
    overflow-y: auto;
    font-size: 0.8rem;
    line-height: 1.45;
    padding-right: 4px;
    text-align: center;
  }

  .ach-name-list::-webkit-scrollbar {
    width: 4px;
  }
  .ach-name-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }

  /* Pagination Dots */
  .ach-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
  }

  .ach-dot-label {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #cbd5e1;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  /* Slide Transitions (6 Slides Total) */
  #ach-s1:checked ~ .ach-carousel .ach-track { transform: translateX(0%); }
  #ach-s2:checked ~ .ach-carousel .ach-track { transform: translateX(-100%); }
  #ach-s3:checked ~ .ach-carousel .ach-track { transform: translateX(-200%); }
  #ach-s4:checked ~ .ach-carousel .ach-track { transform: translateX(-300%); }
  #ach-s5:checked ~ .ach-carousel .ach-track { transform: translateX(-400%); }
  #ach-s6:checked ~ .ach-carousel .ach-track { transform: translateX(-500%); }

  /* Active Dot Styling */
  #ach-s1:checked ~ .ach-dots .dot1,
  #ach-s2:checked ~ .ach-dots .dot2,
  #ach-s3:checked ~ .ach-dots .dot3,
  #ach-s4:checked ~ .ach-dots .dot4,
  #ach-s5:checked ~ .ach-dots .dot5,
  #ach-s6:checked ~ .ach-dots .dot6 {
    background-color: #007bff;
    transform: scale(1.15);
  }

  .ach-dot-label:focus-visible { outline: 2px solid #007bff; outline-offset: 3px; }
  .ach-profile-img { background: #f1f5f9; }

  @media (max-width: 768px) {
    .ach-slide {
      flex-direction: column;
      gap: 12px;
    }
    .ach-card { flex: 0 0 auto; padding: 16px 14px; }
    .ach-name { margin-top: 4px; }
    .ach-dots { gap: 12px; }
    .ach-dot-label { width: 12px; height: 12px; }
  }

/* ===== B.Com (Accounting and Taxation) page (BCom_AccountingTaxation.php) and photo heroes ===== */
.pp-hero .video-hero .pp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.acc-subhead { margin: 18px 0 10px; font-size: 1.2rem; font-weight: 700; color: #041e42; }
.acc-media { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.acc-logo { max-width: 240px; margin: 0 auto; }
.acc-ach { margin: 0 auto; }
.acc-acts { display: flex; flex-direction: column; gap: 22px; }
.acc-act { padding: 20px; border: 1px solid #e3e9f2; border-radius: 12px; background: #fff; box-shadow: 0 4px 14px rgba(6, 24, 64, .06); }
.acc-act-title { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: #061840; }
.acc-act-sub { margin: 0 0 8px !important; font-weight: 600; color: #b8891a !important; }
.acc-act p { line-height: 1.6; }
.acc-act-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; margin-top: 12px; }
.acc-act-photos img { width: 100%; height: clamp(180px, 18vw, 320px); object-fit: cover; border-radius: 8px; display: block; }
.acc-syllabus { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.acc-syl-btn {
  display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 16px; border-radius: 8px;
  background: #1158ce; color: #fff; font-weight: 700; text-decoration: none; transition: background .2s, transform .2s;
}
.acc-syl-btn:hover { background: #0b45a8; color: #fff; transform: translateY(-2px); }
.acc-syl-btn i { color: #f2b233; font-size: 1.15rem; }
@media (max-width: 575.98px) {
  .acc-act { padding: 14px; }
  .acc-act-photos img { height: auto; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   B.Sc. department page (bsc_economics.php)
   Moved here from the page's own <style> blocks. Every selector is scoped to
   .bsc-page, a class that only bsc_economics.php carries (on its hero, its main
   content section and its careers section), so none of these rules can reach
   the other department pages that share this stylesheet.
   ========================================================================== */
/* Justify running prose (this page only). */

/* Academic-year dropdown + single-semester table, shared by Department
   Activities, Association Activities, Newsletters/Magazines via .ay-scope. */
















/* The site header is fixed, 80px tall; pin the bar just below it so Hide is always reachable. */








/* Description stays in the markup for search but is hidden in the card;
   "Read more" opens it in a small message box. */
















/* Cards laid out 3 across. */
















/* Hero: no colour over the video itself (the hero-bg overlay is removed). Only the
   heading gets a see-through band, so the video still shows through it. With
   Contact Us gone, the heading sits on the caption's baseline. */

/* Category pill hidden on the cards; the message box still shows it. */

/* Slow strip of activity photographs (set duplicated for a seamless loop).
   NOTE: placeholder photographs - swap the four <img> sources in each
   .img-group (both copies) when the real ones arrive. */








/* Testimonials - one card at a time, auto-rotating. */













/* Testimonials sit beside a Video Testimonials column. */









/* width:100% gives the tiles a fixed reference width, so the cover images' own
   640px size (or anything in the shared stylesheet) cannot stretch the strip.
   The script also sets each tile's width in pixels. */


















/* The tile widths are set from the panel width; without these the panel could
   grow to fit the tiles, which re-sized the tiles, and so on without end. */








/* A table nested inside a panel cell (the placements table) is plain data. */




/* Student Research - same table look as Placement Highlights. */







/* Newsletter / magazine issue links hover in grey. */



/* Placement Highlights - year buttons open a table directly. */





/* Newsletters / Magazines - two tabs, and a grid of issue links. */










/* Student Achievements - a continuous marquee (list duplicated once). */













/* ---- PASTE THIS WHOLE BLOCK AT THE VERY END OF THE LIVE dept_main.css ----
   Do not replace dept_main.css with any other copy; only add this block. */

/* ==========================================================================
   B.Sc. department page (bsc_economics.php)
   Moved here from the page's own <style> blocks. Every selector is scoped to
   .bsc-page, a class that only bsc_economics.php carries (on its hero, its main
   content section and its careers section), so none of these rules can reach
   the other department pages that share this stylesheet.
   ========================================================================== */
/* Justify running prose (this page only). */
.bsc-page #hod p,
.bsc-page #about p,
.bsc-page #achievements p,
.bsc-page #activities .event-description,
.bsc-page #association_activities .event-description {
    text-align: justify;
    text-justify: inter-word;
}
/* Academic-year dropdown + single-semester table, shared by Department
   Activities, Association Activities, Newsletters/Magazines via .ay-scope. */
.bsc-page .ay-scope .ay-switch { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 22px; }
.bsc-page .ay-scope .ay-dd { position: relative; }
.bsc-page .ay-scope .ay-btn {
    font: inherit; font-size: .95rem; font-weight: 600; letter-spacing: .02em;
    padding: 10px 20px; border: 1px solid #061840; border-radius: 4px;
    background: #061840; color: #fff; cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.bsc-page .ay-scope .ay-btn:hover { background: #0a2a5c; border-color: #0a2a5c; }
.bsc-page .ay-scope .ay-btn.is-active {
    background: #061840; border-color: #061840; color: #fff;
    box-shadow: inset 0 -3px 0 #f2b233;
}
.bsc-page .ay-scope .ay-btn:focus-visible { outline: 2px solid #1158ce; outline-offset: 2px; }
.bsc-page .ay-scope .ay-caret { font-size: .7em; line-height: 1; transition: transform .2s; }
.bsc-page .ay-scope .ay-btn[aria-expanded="true"] .ay-caret { transform: rotate(180deg); }
.bsc-page .ay-scope .ay-menu {
    position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 100%;
    background: #fff; border: 1px solid #cfd6e2; border-radius: 4px;
    box-shadow: 0 8px 20px rgba(6, 24, 64, .16); padding: 6px; white-space: nowrap;
}
.bsc-page .ay-scope .ay-menu[hidden] { display: none; }
.bsc-page .ay-scope .ay-item {
    display: flex; align-items: center; justify-content: flex-start;
    width: 100%; font: inherit; font-size: .92rem; text-align: left;
    padding: 9px 14px; border: 0; border-radius: 3px; background: transparent;
    color: #061840; cursor: pointer;
}
.bsc-page .ay-scope .ay-item:hover { background: #eef2f9; }
.bsc-page .ay-scope .ay-item.is-selected { background: #061840; color: #fff; font-weight: 600; }
.bsc-page .ay-scope .ay-panel[hidden] { display: none; }
.bsc-page .ay-scope .ay-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.bsc-page .ay-scope .ay-table > thead > tr > th {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: #061840; color: #fff; text-align: left;
    padding: 6px 14px;
    font-size: .85rem; font-weight: 600; line-height: 1.5;
    border-bottom: 2px solid #f2b233;
}
/* The site header is fixed, 80px tall; pin the bar just below it so Hide is always reachable. */
.bsc-page .ay-scope .ay-table > thead { position: sticky; top: 80px; z-index: 5; }
.bsc-page .ay-scope .ay-th-text { display: inline; }
.bsc-page .ay-scope .ay-th-text > span {
    display: inline; font-size: .78rem; font-weight: 400; opacity: .8;
}
.bsc-page .ay-scope .ay-th-text > span::before { content: "\00A0\00B7\00A0"; opacity: .55; }
.bsc-page .ay-scope .ay-table > tbody > tr > td { padding: 16px; border: 1px solid #dbe1ea; border-top: 0; background: #fff; }
.bsc-page .ay-scope .ay-table .event-card-grid { margin: 0 0 18px; }
.bsc-page .ay-scope .ay-table .event-card-grid:last-child { margin-bottom: 0; }
.bsc-page .ay-scope .ay-empty { margin: 0; color: #6b7280; font-style: italic; text-align: left; }
/* Description stays in the markup for search but is hidden in the card;
   "Read more" opens it in a small message box. */
.bsc-page .ay-scope .evt-grid .event-description { display: none; }
.bsc-page .ay-scope .evt-more-btn {
    font: inherit; font-size: .85rem; font-weight: 600; letter-spacing: .01em;
    color: #1158ce; background: none; border: 0; padding: 2px 0; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
}
.bsc-page .ay-scope .evt-more-btn::after { content: "\2192"; font-size: .95em; line-height: 1; }
.bsc-page .ay-scope .evt-more-btn:hover { text-decoration: underline; }
.bsc-page .ay-scope .evt-more-btn:focus-visible { outline: 2px solid #1158ce; outline-offset: 2px; border-radius: 2px; }
.bsc-page .evt-dialog {
    width: min(460px, calc(100vw - 32px));
    padding: 24px 26px 26px; border: 1px solid #cfd6e2; border-radius: 8px;
    box-shadow: 0 18px 50px rgba(6, 24, 64, .28); color: #1f2937; background: #fff;
}
.bsc-page .evt-dialog::backdrop { background: rgba(6, 24, 64, .45); }
.bsc-page .evt-dialog-close {
    position: absolute; top: 10px; right: 12px;
    font-size: 1.4rem; line-height: 1; color: #6b7280;
    background: none; border: 0; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.bsc-page .evt-dialog-close:hover { background: #eef2f9; color: #061840; }
.bsc-page .evt-dialog-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin: 0 0 10px; padding-right: 28px;
}
.bsc-page .evt-dialog-date {
    background: #022954; color: #fff; font-size: .75rem; font-weight: 700;
    padding: 4px 10px; border-radius: 4px;
}
.bsc-page .evt-dialog-pill {
    background: #fdf1d8; color: #8a6114; font-size: .75rem; font-weight: 600;
    padding: 4px 12px; border-radius: 50px;
}
.bsc-page .evt-dialog-pill:empty { display: none; }
.bsc-page .evt-dialog-title {
    font-size: 1rem; font-weight: 700; color: #022954; line-height: 1.35; margin: 0 0 10px;
}
.bsc-page .evt-dialog-body {
    margin: 0; font-size: .92rem; line-height: 1.6;
    text-align: justify; text-justify: inter-word;
}
.bsc-page .ay-scope .evt-grid .date-badge {
    flex: 0 0 auto; height: auto; min-height: 0; width: auto; align-self: flex-start;
}
/* Cards laid out 3 across. */
.bsc-page .ay-scope .evt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.bsc-page .ay-scope .evt-grid .event-card-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 14px;
    height: 100%;
}
.bsc-page .ay-scope .evt-grid .date-badge {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
    width: auto;
    min-height: 0;
    padding: 5px 10px;
    border-radius: 4px;
}
.bsc-page .ay-scope .evt-grid .date-badge .day { font-size: .85rem; line-height: 1; }
.bsc-page .ay-scope .evt-grid .date-badge .month,
.bsc-page .ay-scope .evt-grid .date-badge .year { font-size: .72rem; margin-top: 0; }
.bsc-page .ay-scope .evt-grid .date-badge .day-range { font-size: .8rem; }
.bsc-page .ay-scope .evt-grid .title-column,
.bsc-page .ay-scope .evt-grid .desc-column { width: 100%; padding: 0; }
.bsc-page .ay-scope .evt-grid .event-title { font-size: .9rem; margin-bottom: 6px; }
.bsc-page .ay-scope .evt-grid .badge-pill { white-space: normal; }
.bsc-page .ay-scope .evt-grid .desc-column { margin-top: auto; }
@media (max-width: 991.98px) {
    .bsc-page .ay-scope .evt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .bsc-page .ay-scope .evt-grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 575.98px) {
    .bsc-page .ay-scope .ay-switch { gap: 8px; }
    .bsc-page .ay-scope .ay-btn { flex: 1 1 auto; justify-content: center; padding: 10px 12px; font-size: .88rem; }
    .bsc-page .ay-scope .ay-table > tbody > tr > td { padding: 12px; }
}
.bsc-page .ay-scope .ay-hide {
    flex: 0 0 auto; font: inherit; font-size: .74rem; font-weight: 600;
    color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 4px; padding: 2px 9px; cursor: pointer; line-height: 1.4;
    white-space: nowrap;
}
.bsc-page .ay-scope .ay-hide:hover { background: rgba(255, 255, 255, .26); }
.bsc-page .ay-scope .ay-hide:focus-visible { outline: 2px solid #f2b233; outline-offset: 2px; }
/* Hero: no colour over the video itself (the hero-bg overlay is removed). Only the
   heading gets a see-through band, so the video still shows through it. With
   Contact Us gone, the heading sits on the caption's baseline. */
.pp-hero.bsc-page .caption-box h2 {
    display: inline-block;
    margin-bottom: 0;
    padding: 10px 24px;
    border-radius: 6px;
    background: rgba(4, 18, 41, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
/* Category pill hidden on the cards; the message box still shows it. */
.bsc-page .ay-scope .evt-grid .badge-pill { display: none; }
/* Slow strip of activity photographs (set duplicated for a seamless loop).
   NOTE: placeholder photographs - swap the four <img> sources in each
   .img-group (both copies) when the real ones arrive. */
.bsc-page .ay-scope .img-marquee { --ig: 16px; overflow: hidden; margin-top: 22px; }
.bsc-page .ay-scope .img-track {
    display: flex; gap: var(--ig); width: max-content;
    will-change: transform;
    animation: img-scroll 21s linear infinite;
}
.bsc-page .ay-scope .img-marquee:hover .img-track { animation-play-state: paused; }
.bsc-page .ay-scope .img-group { display: flex; gap: var(--ig); flex: 0 0 auto; }
.bsc-page .ay-scope .img-group img {
    display: block; width: 220px; height: 150px;
    object-fit: cover; border-radius: 8px; background: #eef2f7;
}
@keyframes img-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - (var(--ig) / 2))); }
}
@media (prefers-reduced-motion: reduce) {
    .bsc-page .ay-scope .img-track { animation: none; }
    .bsc-page .ay-scope .img-marquee { overflow-x: auto; }
}
@media (max-width: 575.98px) {
    .bsc-page .ay-scope .img-group img { width: 170px; height: 118px; }
}
/* Testimonials - one card at a time, auto-rotating. */
.bsc-page #testimonials .tst-card {
    display: grid;
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
    min-height: 0;
    margin: 0;
    background: linear-gradient(135deg, #0a2350 0%, #061840 55%, #041129 100%);
    border: 1px solid #e3e8f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(4, 42, 84, .07);
}
.bsc-page #testimonials .tst-photo { position: relative; background: #041129; }
.bsc-page #testimonials .tst-photo img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
}
.bsc-page #testimonials .tst-now {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 34px 18px 14px;
    background: linear-gradient(to top, rgba(4, 17, 41, .92) 30%, rgba(4, 17, 41, 0));
    color: #fff;
}
.bsc-page #testimonials .tst-now span { display: block; font-size: .74rem; line-height: 1.3; opacity: .85; }
.bsc-page #testimonials .tst-now strong { display: block; font-size: .84rem; line-height: 1.35; color: #f2b233; margin-top: 2px; }
.bsc-page #testimonials .tst-body {
    position: relative; margin: 0; padding: 30px 34px;
    background: none; color: #eef2f9;
    display: flex; flex-direction: column; justify-content: center;
}
.bsc-page #testimonials .tst-body::before {
    content: "\201C"; position: absolute; top: 10px; right: 26px;
    font-family: Georgia, "Times New Roman", serif; font-size: 3.6rem; line-height: 1;
    color: #f2b233; opacity: .45;
}
.bsc-page #testimonials .tst-quote {
    margin: 0; font-size: .7rem; line-height: 1.5; font-style: italic;
    text-align: left; position: relative; z-index: 1;
}
.bsc-page #testimonials .tst-who {
    margin-top: 14px; padding-top: 10px;
    border-top: 1px solid rgba(242, 178, 51, .28);
}
.bsc-page #testimonials .tst-name {
    margin: 0; font-size: .95rem; font-weight: 700; letter-spacing: .01em; color: #f2b233;
}
.bsc-page #testimonials .tst-degree { margin: 2px 0 0; font-size: .75rem; color: #cdd7e6; }
@media (max-width: 767.98px) {
    .bsc-page #testimonials .tst-card { grid-template-columns: 1fr; min-height: 0; }
    .bsc-page #testimonials .tst-photo img { aspect-ratio: 4 / 3; height: auto; }
    .bsc-page #testimonials .tst-body { padding: 24px 22px 26px; }
    .bsc-page #testimonials .tst-body::before { font-size: 3rem; right: 16px; }
}
/* Testimonials sit beside a Video Testimonials column. */
.bsc-page #testimonials .tst-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: stretch;
}
.bsc-page #testimonials .tst-col { min-width: 0; display: flex; }
.bsc-page #testimonials .tst-slider { flex: 1 1 auto; min-width: 0; display: flex; }
.bsc-page #testimonials .tst-viewport { flex: 1 1 auto; min-width: 0; }
.bsc-page #testimonials .tst-track { height: 100%; }
.bsc-page #testimonials .vt-card {
    display: flex; flex-direction: column;
    background: none; border: 0; border-radius: 0; padding: 0;
}
.bsc-page #testimonials .tst-head { position: relative; }
.bsc-page #testimonials .vt-head {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 340px; margin: 0; padding: 0; background: none; border: 0;
}
/* Phones: the 340px "Video Testimonials" heading sat on top of "Testimonials"
   and ran off the left edge. Below 768px it is hidden here and shown again
   as a label above the video card instead. */
@media (max-width: 767.98px) {
    .bsc-page #testimonials .tst-head .vt-head { display: none; }
    .bsc-page #testimonials .vt-card::before { content: "Video Testimonials"; display: block; margin: 0 0 12px;
        font-size: 1.4rem; font-weight: 700; color: #061840; text-align: center; }
}
.bsc-page #testimonials .vt-viewport {
    overflow: hidden; flex: 1 1 auto;
    display: flex; align-items: center;
}
/* width:100% gives the tiles a fixed reference width, so the cover images' own
   640px size (or anything in the shared stylesheet) cannot stretch the strip.
   The script also sets each tile's width in pixels. */
.bsc-page #testimonials .vt-track { display: flex; gap: 10px; width: 100%; will-change: transform; }
.bsc-page #testimonials .vt-slot { flex: 0 0 calc((100% - 10px) / 2); min-width: 0; }
.bsc-page #testimonials .vt-box {
    position: relative; display: block; width: 100%; padding: 0;
    aspect-ratio: 9 / 16;
    border: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
    background: #061840;
}
.bsc-page #testimonials .vt-box.is-empty { cursor: default; }
.bsc-page #testimonials .vt-close {
    position: absolute; top: 6px; right: 6px; z-index: 2;
    width: 24px; height: 24px; padding: 0;
    font: 700 16px/1 system-ui, sans-serif;
    color: #fff; background: rgba(4, 17, 41, .72);
    border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%;
    cursor: pointer;
}
.bsc-page #testimonials .vt-close:hover { background: rgba(4, 17, 41, .95); }
.bsc-page #testimonials .vt-close:focus-visible { outline: 2px solid #f2b233; outline-offset: 2px; }
.bsc-page #testimonials .vt-replay {
    position: absolute; top: 6px; right: 34px; z-index: 2;
    width: 24px; height: 24px; padding: 0;
    font: 700 14px/1 system-ui, sans-serif;
    color: #fff; background: rgba(4, 17, 41, .72);
    border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%;
    cursor: pointer;
}
.bsc-page #testimonials .vt-replay:hover { background: rgba(4, 17, 41, .95); }
.bsc-page #testimonials .vt-replay:focus-visible { outline: 2px solid #f2b233; outline-offset: 2px; }
.bsc-page #testimonials .vt-cover {
    position: absolute; inset: 0;   /* out of the layout flow, so its size never moves the tile */
    display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .85;
}
.bsc-page #testimonials .vt-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.bsc-page #testimonials .vt-play::after {
    content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
    border-style: solid; border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #061840;
}
.bsc-page #testimonials .vt-box:hover .vt-play { background: #fff; }
.bsc-page #testimonials .vt-box:focus-visible { outline: 2px solid #1158ce; outline-offset: 2px; }
.bsc-page #testimonials .vt-embed {
    position: relative; width: 100%; aspect-ratio: 9 / 16;
    overflow: hidden; border-radius: 8px; background: #000;
}
.bsc-page #testimonials .vt-embed iframe {
    position: absolute; left: 0; top: 0;
    width: 340px; height: 760px; max-width: none; border: 0; display: block;
    transform-origin: top left;
}
@media (max-width: 991.98px) {
    .bsc-page #testimonials .tst-columns { grid-template-columns: minmax(0, 1fr); }
    /* single column: keep the video strip a phone-sized panel, centred */
    .bsc-page #testimonials .vt-card { width: 100%; max-width: 360px; margin: 0 auto; }
}
/* The tile widths are set from the panel width; without these the panel could
   grow to fit the tiles, which re-sized the tiles, and so on without end. */
.bsc-page #testimonials .vt-card { min-width: 0; }
.bsc-page #testimonials .vt-viewport { width: 100%; min-width: 0; }
.bsc-page #testimonials .tst-viewport { overflow: hidden; }
.bsc-page #testimonials .tst-track {
    display: flex;
    align-items: stretch;
    transition: transform .6s cubic-bezier(.77, 0, .175, 1);
    will-change: transform;
}
.bsc-page #testimonials .tst-track > .tst-card { flex: 0 0 100%; max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
    .bsc-page #testimonials .tst-track { transition: none; }
}
@media (max-width: 991.98px) {
    .bsc-page #testimonials .tst-photo { width: 260px; }
}
@media (max-width: 575.98px) {
    .bsc-page #testimonials .tst-photo { float: none; width: auto; margin: -22px -22px 16px; }
    .bsc-page #testimonials .tst-photo img { aspect-ratio: 4 / 3; }
    .bsc-page #testimonials .tst-body::before { font-size: 3.2rem; }
}
/* A table nested inside a panel cell (the placements table) is plain data. */
.bsc-page .ay-scope .ay-table td table { width: 100%; border-collapse: collapse; background: #fff; }
.bsc-page .ay-scope .ay-table td table th,
.bsc-page .ay-scope .ay-table td table td {
    display: table-cell; padding: 10px 14px; border: 1px solid #dbe1ea;
    font-size: .86rem; text-align: left; vertical-align: top;
}
.bsc-page .ay-scope .ay-table td table thead th {
    background: #f2f5fa; color: #061840; font-weight: 700; border-bottom: 2px solid #cfd8e6;
}
.bsc-page .ay-scope .ay-table td table tbody tr:nth-child(even) td { background: #fafbfd; }
/* Student Research - same table look as Placement Highlights. */
.bsc-page #research .res-table { width: 100%; border-collapse: collapse; background: #fff; margin: 0; }
.bsc-page #research .res-table th,
.bsc-page #research .res-table td {
    padding: 10px 14px; border: 1px solid #dbe1ea;
    font-size: .86rem; text-align: left !important; vertical-align: top;
}
.bsc-page #research .res-table thead th {
    background: #f2f5fa; color: #061840; font-weight: 700; border-bottom: 2px solid #cfd8e6;
}
.bsc-page #research .res-table tbody tr:nth-child(even) td { background: #fafbfd; }
.bsc-page #research .res-table th:first-child,
.bsc-page #research .res-table td:first-child { width: 64px; }
.bsc-page #research .res-table th:nth-child(4),
.bsc-page #research .res-table td:nth-child(4) { width: 90px; white-space: nowrap; }
@media (max-width: 767.98px) {
    .bsc-page #research .res-table { display: block; overflow-x: auto; }
}
/* Newsletter / magazine issue links hover in grey. */
.bsc-page #magazine .pub-grid > a {
    background: #e5e8ee !important; color: #061840 !important;
    border: 1px solid #cfd5df; box-shadow: none;
}
.bsc-page #magazine .pub-grid > a:hover { background: #d3d8e0 !important; color: #061840 !important; }
.bsc-page #magazine .ay-item:hover { background: #e5e8ee; }
/* Placement Highlights - year buttons open a table directly. */
.bsc-page #placement_highlights .pl-btn { cursor: pointer; }
.bsc-page #placement_highlights .ay-panel[hidden] { display: none; }
.bsc-page #association_activities .assoc-intro {
    margin: 0 0 20px;
    font-size: .92rem;
    line-height: 1.75;
    color: #334155;
    text-align: justify;
    text-justify: inter-word;
}
.bsc-page #association_activities .assoc-name {
    font-weight: 700;
    font-size: 1.08em;
    color: #061840;
    letter-spacing: .01em;
}
#careers.bsc-page .higher-ed-header {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f0;
}
/* Newsletters / Magazines - two tabs, and a grid of issue links. */
.bsc-page #magazine .pub-switch { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.bsc-page #magazine .pub-tab {
    font: inherit; font-size: .92rem; font-weight: 600; letter-spacing: .01em;
    padding: 9px 22px; border: 1px solid #061840; border-radius: 50px;
    background: #fff; color: #061840; cursor: pointer;
    transition: background .2s, color .2s;
}
.bsc-page #magazine .pub-tab:hover { background: #eef2f9; }
.bsc-page #magazine .pub-tab.is-active { background: #061840; color: #fff; }
.bsc-page #magazine .pub-tab:focus-visible { outline: 2px solid #1158ce; outline-offset: 2px; }
.bsc-page #magazine .pub-panel[hidden] { display: none; }
.bsc-page #magazine .pub-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.bsc-page #magazine .pub-grid > a { width: 100%; margin: 0; }
@media (max-width: 991.98px) {
    .bsc-page #magazine .pub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .bsc-page #magazine .pub-grid { grid-template-columns: 1fr; }
}
/* Student Achievements - a continuous marquee (list duplicated once). */
.bsc-page #student_achievements .sa-marquee { --sa-gap: 16px; overflow: hidden; position: relative; }
.bsc-page #student_achievements .sa-track {
    display: flex;
    gap: var(--sa-gap);
    width: max-content;
    will-change: transform;
    animation: sa-scroll var(--sa-dur, 90s) linear infinite;
}
.bsc-page #student_achievements .sa-marquee:hover .sa-track { animation-play-state: paused; }
.bsc-page #student_achievements .sa-group {
    display: flex; gap: var(--sa-gap); flex: 0 0 auto; align-items: flex-start; padding: 10px 0;
}
@keyframes sa-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - (var(--sa-gap) / 2))); }
}
.bsc-page #student_achievements .ach-card {
    flex: 0 0 var(--sa-card, 280px);
    width: var(--sa-card, 280px);
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: block;
    padding: 10px;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .03);
    transition: transform .3s ease, box-shadow .3s ease;
}
.bsc-page #student_achievements .ach-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, .06); }
.bsc-page #student_achievements .ach-profile-img {
    float: left;
    width: var(--sa-photo, 104px); height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover; object-position: center top;
    border: 0; border-radius: 0;
    margin: -10px 9px 7px -10px;
    background: #eef2f7;
}
.bsc-page #student_achievements .ach-desc { padding: 0; }
.bsc-page #student_achievements .ach-desc p {
    color: #475569; font-size: .62rem; line-height: 1.3; margin: 0; text-align: left;
}
.bsc-page #student_achievements .ach-name {
    margin-top: 4px; padding: 0;
    color: #0f172a; font-size: .65rem; line-height: 1.3; font-weight: 600; text-align: left;
}
@media (prefers-reduced-motion: reduce) {
    .bsc-page #student_achievements .sa-track { animation: none; }
    .bsc-page #student_achievements .sa-marquee { overflow-x: auto; }
}

/* =====================================================================
   Styles moved from the department pages' own <style> blocks.
   Each section only applies to its page: menu1.php prints <body class="dp-…">
   from $body_class, and every selector is wrapped in :where(.dp-…)
   (:where adds no specificity, so the cascade is the same as before).
   ===================================================================== */

/* ---------- BA_EnglishCommunicativeEnglishPsychology_TripleMajor.php — <style> block 1 (scope .dp-ba-englishcommunicativeenglishpsychology-triplemajor) ---------- */
    
    
    

/* ---------- BA_EnglishCommunicativeEnglishPsychology_TripleMajor.php — <style> block 3 (scope .dp-ba-englishcommunicativeenglishpsychology-triplemajor) ---------- */


/* ---------- Hero (image slider + caption + Admissions), all screen sizes ---------- */

/* the Admissions tab sits at the middle of the right edge, so the next arrow stays just left of it
   (--pp-adm-w is set by the script from the tab's real width) */


/* Caption: programme name + Contact Us, bottom-left of the video */




      /* empty box (content is commented out) */
/* Admissions: tab on the right edge, vertically centred */



/* Programme hero (same as Department_of_English.php): no blue tint over the photos, title on a see-through black box */



/* smaller programme title on the banner */

/* The site header is a solid bar fixed over the top of the page, so the slider
   starts below it on every screen size (otherwise it hides the top of the photos).
   --pp-header-h is set by the script below from the header's real height;
   78px / 70px are fallbacks if the script can't find the header. */






/* ---------- BA_EnglishCommunicativeEnglishPsychology_TripleMajor.php — <style> block 4 (scope .dp-ba-englishcommunicativeenglishpsychology-triplemajor) ---------- */







/* ---------- BA_EnglishCommunicativeEnglish_Media_Studies.php — <style> block 1 (scope .dp-ba-englishcommunicativeenglish-media-studies) ---------- */
    
    
    

/* ---------- BA_EnglishCommunicativeEnglish_Media_Studies.php — <style> block 3 (scope .dp-ba-englishcommunicativeenglish-media-studies) ---------- */


/* ---------- Hero (image slider + caption + Admissions), all screen sizes ---------- */

/* the Admissions tab sits at the middle of the right edge, so the next arrow stays just left of it
   (--pp-adm-w is set by the script from the tab's real width) */


/* Caption: programme name + Contact Us, bottom-left of the video */




      /* empty box (content is commented out) */
/* Admissions: tab on the right edge, vertically centred */



/* Programme hero (same as Department_of_English.php): no blue tint over the photos, title on a see-through black box */



/* smaller programme title on the banner */

/* The site header is a solid bar fixed over the top of the page, so the slider
   starts below it on every screen size (otherwise it hides the top of the photos).
   --pp-header-h is set by the script below from the header's real height;
   78px / 70px are fallbacks if the script can't find the header. */






/* ---------- BA_EnglishCommunicativeEnglish_Media_Studies.php — <style> block 4 (scope .dp-ba-englishcommunicativeenglish-media-studies) ---------- */







/* ---------- BCom_AccountingTaxation.php — <style> block 1 (scope .dp-bcom-accountingtaxation) ---------- */
      /* Hero: no blue tint over the video/photo (matches the plain-image reference) */      
      
      /* Hero title box: dark translucent panel with bold white text (reference style) */
      
      
      
      /* Empty decorative box (content is commented out) would show as a dark block */    

/* ---------- BCom_Analytics.php — <style> block 1 (scope .dp-bcom-analytics) ---------- */
/* Hero now sized to the 1600 x 650 slide ratio instead of the video */
/* hero box follows the slide (no fixed height), so the whole image shows *//* overlay: plain transparent dark layer (like the video page), no blue tint */
 /* no z-index: lets the arrows/dots sit above .hero-bg */



/* keep the hero overlay from blocking the slider controls */













/* Testimonials carousel */
/* stage: every slide sits in the same grid cell, so height never jumps */
/* left: navy panel with photo */
/* right: quote */
/* entrance animation for the active slide */


/* navigation pills with autoplay progress */

/* pop-up */



/* ---------- BCom_Analytics.php — <style> block 2 (scope .dp-bcom-analytics) ---------- */
      /* Floating left menu (moved by the script at the bottom; right column is not affected) */
      
    

/* ---------- BCom_Analytics.php — <style> block 3 (scope .dp-bcom-analytics) ---------- */
/* ═══ Syllabus buttons ═══ */















/* ═══ Programme Activities ═══ */



























/* ---------- BCom_BPMIndustryIntegrated.php — <style> block 2 (scope .dp-bcom-bpmindustryintegrated) ---------- */
    






  /* Partner Cards & Standardized Logo Frame */
  

  

  /* Fixed Container for All Logos */
  

  /* Standardized Image Properties */
  

  

  

  

  
    

/* ---------- BCom_InternationalAccountingFinance.php — <style> block 1 (scope .dp-bcom-internationalaccountingfinance) ---------- */
      /* Hero: no blue tint over the video/photo (matches the plain-image reference) */      
      
      /* Hero title box: dark translucent panel with bold white text (reference style) */
      
      
      
      /* Empty decorative box (content is commented out) would show as a dark block */
      
    

/* ---------- BCom_InternationalAccountingFinance.php — <style> block 2 (scope .dp-bcom-internationalaccountingfinance) ---------- */
      /* Floating left menu (moved by the script at the bottom; right column is not affected) */
      
      /* Syllabus buttons: same size, text centred, no overlap */
      
      
    

/* ---------- BCom_ProfessionalStrategicFinance.php — <style> block 1 (scope .dp-bcom-professionalstrategicfinance) ---------- */
      /* Hero: no blue tint over the video/photo (matches the plain-image reference) */      
      
      /* Hero title box: dark translucent panel with bold white text (reference style) */
      
      
      
      /* Empty decorative box (content is commented out) would show as a dark block */
      
    

/* ---------- BCom_ProfessionalStrategicFinance.php — <style> block 2 (scope .dp-bcom-professionalstrategicfinance) ---------- */
      /* Left menu and right content start on the same top line */
      
      /* Floating left menu (moved by the script at the bottom; right column is not affected) */
      
      
      
      
      
      /* Syllabus buttons: same size, text centred, no overlap */
      
      
    

/* ---------- BCom_Regular.php — <style> block 2 (scope .dp-bcom-regular) ---------- */
    






  /* Partner Cards & Standardized Logo Frame */
  

  

  /* Fixed Container for All Logos */
  

  /* Standardized Image Properties */
  

  

  

  

  
    

/* ---------- BCom_TravelTourism.php — <style> block 2 (scope .dp-bcom-traveltourism) ---------- */

  /* Partner Cards & Standardized Logo Frame */
  

  

  /* Fixed Container for All Logos */
  /* Standardized Image Properties */
  

  

  
    

/* ---------- BSC_EMDA.php — <style> block 2 (scope .dp-bsc-emda) ---------- */
/* Justify running prose. Scoped to this page only - dept_main.css is shared
   with the other department pages and is deliberately left untouched. */


/* ---------- BSC_EMDA.php — <style> block 3 (scope .dp-bsc-emda) ---------- */
/* Thin translucent band behind the hero heading only, so "Department of B.Sc."
   stays readable over the bright background video. Same as the B.Sc. department
   page. Kept on the h2 rather than the whole .caption-box, because dept_main.css
   gives that h2 a large bottom margin. */


/* ---------- Department_of_BusinessAdministration.php — <style> block 2 (scope .dp-department-of-businessadministration) ---------- */
/* ---------- Safety net: nothing may make the page wider than the screen ----------
   (the site header from menu1.php currently loses its own styles, so its logo
   renders at full image size; these rules keep the page inside the screen) */





/* ---------- Tabs ---------- */






/* ---------- Slider ---------- */








/* ---------- Coordinator / person cards ---------- */

/* ---------- Coordinator message page ---------- *//* room for the quote mark *//* Message pages have no hero: give the content its own breathing room under the site header */

/* ---------- Coordinator message ---------- */
/* ---------- Headings, lists, notes, table ---------- */
/* ---------- Video testimonials ---------- */
/* ---------- Recruiter logos ("Where Our Students Go") fit small phones ---------- */



/* Programme cards: each column holds one card, so it may never be wider than its column */


/* ---------- Hero (video + caption + Admissions), all screen sizes ---------- */
/* Caption: programme name + Contact Us, bottom-left of the video */

      /* empty box (content is commented out) */
/* Admissions: tab on the right edge, vertically centred */



/* ---------- Department menu on phones & tablets ----------
   Desktop keeps the sidebar list. Below 992px the list folds into one bar
   ("Department Menu · current section") that stays under the site header while
   scrolling; tapping it opens the same vertical list with arrows. */



/* Activity cards never wider than the screen */
/* Activity cards on phones: the tablet layout gave each part a named grid area;
   with the areas removed on phones they all landed in the same cell and overlapped.
   One column, date as a strip on top. */

/* ---------- Phones ---------- */


/* ---------- Department_of_BusinessAdministration.php — <style> block 3 (scope .dp-department-of-businessadministration) ---------- */
    
    
    
    
  

/* ---------- Department_of_BusinessAdministration.php — <style> block 4 (scope .dp-department-of-businessadministration) ---------- */
       

        /* Title styling */
        /* Dark blue bar for headings */
        

        /* Sub-bar for Date, Venue, Status */
        

        /* Link styling inside venue */
        

        /* Spacing for paragraphs */    

/* ---------- Department_of_Commerce.php — <style> block 2 (scope .dp-department-of-commerce) ---------- */
    






  /* Partner Cards & Standardized Logo Frame */
  /* Fixed Container for All Logos */
  /* Standardized Image Properties */
/* ---------- Department_of_English.php — <style> block 1 (scope .dp-department-of-english) ---------- */
    /* Video testimonials: MP4 playing inside its own tile */
    
    
    

    /* Instagram player sitting under the cover image (one-click play) */
    
    
    
    
    
    
    
    

    /* Testimonials + video testimonials layout. The B.Sc. Economics page gets these
       styles from a shared include that this page does not receive, so they are kept
       here, scoped to #testimonials, to make the section work on its own. */
    
    
    
    
    
    
    
    
    
    
    
    
    /* "Language Instructor at / London School of Speech" sits under the photo */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* Card colours: navy card, white quote, gold name - so the names stand out
       (written with !important so the shared stylesheet cannot turn them dark again) */
    
    
    
    
    
    
    
    
    
    

/* ---------- Department_of_English.php — <style> block 3 (scope .dp-department-of-english) ---------- */
/* ---------- Safety net: nothing may make the page wider than the screen ----------
   (the site header from menu1.php currently loses its own styles, so its logo
   renders at full image size; these rules keep the page inside the screen) */





/* ---------- Tabs ---------- */






/* ---------- Slider ---------- */








/* ---------- Coordinator / person cards ---------- */

/* ---------- Coordinator message page ---------- *//* room for the quote mark *//* Message pages have no hero: give the content its own breathing room under the site header */

/* ---------- Coordinator message ---------- */
/* ---------- Headings, lists, notes, table ---------- */
/* ---------- Video testimonials ---------- */
/* ---------- Recruiter logos ("Where Our Students Go") fit small phones ---------- *//* Programme cards: each column holds one card, so it may never be wider than its column */


/* ---------- Hero (image slider + caption + Admissions), all screen sizes ---------- */










/* the Admissions tab sits at the middle of the right edge, so the next arrow stays just left of it
   (--pp-adm-w is set by the script from the tab's real width) */




/* Caption: programme name + Contact Us, bottom-left of the video */




      /* empty box (content is commented out) */
/* Admissions: tab on the right edge, vertically centred */




/* Department of English hero: no blue tint over the photos, title on a see-through black box */



/* The site header is a solid bar fixed over the top of the page, so the slider
   starts below it on every screen size (otherwise it hides the top of the photos).
   --pp-header-h is set by the script below from the header's real height;
   78px / 70px are fallbacks if the script can't find the header. */




/* ---------- Department menu on phones & tablets ----------
   Desktop keeps the sidebar list. Below 992px the list folds into one bar
   ("Department Menu · current section") that stays under the site header while
   scrolling; tapping it opens the same vertical list with arrows. */



/* Activity cards never wider than the screen */
/* Activity cards on phones: the tablet layout gave each part a named grid area;
   with the areas removed on phones they all landed in the same cell and overlapped.
   One column, date as a strip on top. */

/* Activities table (3 categories side by side): on phones the three narrow
   columns broke words into single letters. Below 768px it becomes one column:
   heading, its list, next heading, its list ... */


/* Job-role tags: long titles wrap instead of running out of their box on phones */


/* ---------- Dropdown buttons (Department Activities, Career Paths, Higher Education) ---------- */












/* Testimonial / achievement posters: show the whole poster large enough to read */
/* ---------- Phones ---------- */


/* ---------- Department_of_English.php — <style> block 4 (scope .dp-department-of-english) ---------- */


































/* ---------- Department_of_ProfessionalProgrammes.php — <style> block 1 (scope .dp-department-of-professionalprogrammes) ---------- */
/* Floating left menu (desktop / laptop, 992px and up): stays in view while the right column scrolls.
   --pp-menu-top is set by script to the site header height + 16px. */


/* ---------- Department_of_ProfessionalProgrammes.php — <style> block 2 (scope .dp-department-of-professionalprogrammes) ---------- */
/* Message From HOD – professional two-column card */

/* left: profile */









/* right: message */










/* ---------- Department_of_ProfessionalProgrammes.php — <style> block 3 (scope .dp-department-of-professionalprogrammes) ---------- */
/* columns follow the available width: 4 across beside the side menu, fewer on smaller screens */





















/* ---------- Department_of_ProfessionalProgrammes.php — <style> block 4 (scope .dp-department-of-professionalprogrammes) ---------- */
  
  
  
  
  
  
  
  
  
  
  
  
  
  

/* ---------- Department_of_ProfessionalProgrammes.php — <style> block 5 (scope .dp-department-of-professionalprogrammes) ---------- */
  
  
  
  
  

/* ---------- Department_of_ProfessionalProgrammes.php — <style> block 6 (scope .dp-department-of-professionalprogrammes) ---------- */
  
  
  

/* ---------- Department_of_ProfessionalProgrammes.php — <style> block 7 (scope .dp-department-of-professionalprogrammes) ---------- */
/* Hero now sized to the 1600 x 650 slide ratio instead of the video */
/* hero box follows the slide (no fixed height), so the whole image shows */


/* overlay: plain transparent dark layer (like the video page), no blue tint */



 /* no z-index: lets the arrows/dots sit above .hero-bg */



/* keep the hero overlay from blocking the slider controls */















/* Testimonials carousel */











/* stage: every slide sits in the same grid cell, so height never jumps */




/* left: navy panel with photo */










/* right: quote */












/* entrance animation for the active slide */









/* navigation pills with autoplay progress */
















/* pop-up */



















/* ---------- bba_Entrepreneurship.php — <style> block 2 (scope .dp-bba-entrepreneurship) ---------- */

  /* Partner Cards & Standardized Logo Frame */
  /* Fixed Container for All Logos */
  /* Standardized Image Properties */    

/* ---------- bba_ProfessionalFinanceAccountancy.php — <style> block 1 (scope .dp-bba-professionalfinanceaccountancy) ---------- */
      /* Hero: no blue tint over the video/photo (matches the plain-image reference) */      
      
      /* Hero title box: dark translucent panel with bold white text (reference style) */
      
      
      
      /* Empty decorative box (content is commented out) would show as a dark block */
      
    

/* ---------- bba_Regular.php — <style> block 2 (scope .dp-bba-regular) ---------- */

  /* Partner Cards & Standardized Logo Frame */
  /* Fixed Container for All Logos */
  /* Standardized Image Properties */    

/* ---------- bcom-IndustryIntegratedLogistics.php — <style> block 2 (scope .dp-bcom-industryintegratedlogistics) ---------- */

  /* Partner Cards & Standardized Logo Frame */
  

  

  /* Fixed Container for All Logos */
  /* Standardized Image Properties */
  

  

  
    

/* ---------- bsc_economics.php — <style> block 1 (scope .dp-bsc-economics) ---------- */
    
    

    /* Video testimonials: MP4 playing inside its own tile */
    
    
    

    /* Instagram player sitting under the cover image (one-click play) */
    
    
    
    
    
    
    
    
    

/* ---------- obe.php — <style> block 2 (scope .dp-obe) ---------- */
    
    


       

    

    

    

    

    

      .table-container{width:100%;max-width:none;margin:22px 0 8px;background:#fff;border:1px solid var(--sjcc-border);border-radius:16px;box-shadow:0 10px 28px rgba(61,36,82,.06);overflow:hidden;}
.table-container table{width:100%;border-collapse:separate;border-spacing:0;}
.table-container th{background:var(--sjcc-blue);color:#fff;padding:15px 18px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;border:0;}
.table-container td{padding:15px 18px;color:#475569;font-size:14px;line-height:1.55;border-bottom:1px solid #f0ebf2;vertical-align:middle;}
.table-container tbody tr:nth-child(even){background:#fcfafc}.table-container tbody tr:hover{background:#f7f1f9}.table-container tbody tr:last-child td{border-bottom:0}
.table-container .sl-no{width:65px;color:var(--sjcc-purple);font-weight:800;}
@media(max-width:767px){
 .table-container{border-radius:12px;overflow:visible;background:transparent;box-shadow:none;border:0}
 .table-container table,.table-container thead,.table-container tbody,.table-container tr,.table-container th,.table-container td{display:block;width:100%}
 .table-container thead{display:none}.table-container tbody tr{margin-bottom:14px;padding:12px 14px;background:#fff!important;border:1px solid var(--sjcc-border);border-radius:14px;box-shadow:0 7px 18px rgba(61,36,82,.05)}
 .table-container td{display:flex;gap:12px;padding:8px 0;border-bottom:1px dashed #e9e3eb;font-size:13px}
 .table-container td:last-child{border-bottom:0}.table-container td:before{flex:0 0 95px;color:var(--sjcc-purple);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
 .table-container td:nth-child(1):before{content:"Sl. No."}.table-container td:nth-child(2):before{content:"Fest"}.table-container td:nth-child(3):before{content:"Host"}.table-container td:nth-child(4):before{content:"Date"}
}
.btn-grad {
  margin: 10px;
  padding: 15px 40px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
  outline: none;
   background-image: linear-gradient(to right, #4b6cb7 0%, #182848 51%, #4b6cb7 100%);
  border: none;text-decoration: none;
}

.btn-grad a{text-decoration: none;}

.btn-grad:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}

  /* Partner Cards & Standardized Logo Frame */
  .partner-card {
    background: #ffffff;
    border: 1px solid rgba(13, 44, 84, 0.08);
    border-radius: var(--border-radius);
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
  }

  .partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(13, 44, 84, 0.12);
  }

  /* Fixed Container for All Logos */
  .logo-wrapper {
    height:200px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
  }

  /* Standardized Image Properties */
  .partner-logo {
    max-width: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(10%);
    transition: filter 0.3s ease, transform 0.3s ease;
  }

  .partner-card:hover .partner-logo {
    filter: grayscale(0%);
    transform: scale(1.05);
  }

  .partner-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
  }

  .partner-body {
    padding: 1.75rem;
  }

  .partner-text {
    font-size: 0.96rem;
    color: var(--text-muted);
    text-align: justify;
    margin-bottom: 0;
  }

/* ---------- Tabs ---------- */









/* ---------- Slider ---------- */















/* ---------- Coordinator / person cards ---------- */












/* ---------- Coordinator message page ---------- */


  /* room for the quote mark */

/* Message pages have no hero: give the content its own breathing room under the site header */









/* ---------- Coordinator message ---------- */






/* ---------- Headings, lists, notes, table ---------- */













/* ---------- Video testimonials ---------- */





/* ---------- Recruiter logos ("Where Our Students Go") fit small phones ---------- */



/* Programme cards: each column holds one card, so it may never be wider than its column */


/* ---------- Hero (video + caption + Admissions), all screen sizes ---------- */


.pp-hero .video-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }


/* Caption: programme name + Contact Us, bottom-left of the video */




      /* empty box (content is commented out) */
/* Admissions: tab on the right edge, vertically centred */




@media (max-width: 575.98px) {
  .pp-hero { height: clamp(300px, 92vw, 420px); }
  
  
  
}
.pp-hero .caption-box, .pp-hero .admissions-panel{z-index:5;}
.pp-slider{position:absolute; inset:0;} /* no z-index: lets the arrows/dots sit above .hero-bg */
.pp-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity .9s ease, visibility .9s ease;
}
.pp-slide.is-active{opacity:1; visibility:visible;}
.pp-slide img{width:100%; height:100%; object-fit:cover; object-position:center; display:block; margin-top:0;}

.pp-slider-arrow{
  position:absolute; top:auto; bottom:14px; transform:none;   /* bottom corner, clear of the Admissions button */
  z-index:6;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(6,24,64,.55); color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .25s ease, color .25s ease;
}
.pp-slider-arrow:hover,.pp-slider-arrow:focus-visible{background:#f2b233; color:#061840; border-color:#f2b233; outline:none;}
.pp-slider-arrow.prev{left:auto; right:76px;}
.pp-slider-arrow.next{right:24px;}

.pp-slider-dots{
  position:absolute; left:50%; right:auto; transform:translateX(-50%); bottom:30px; z-index:6;
  display:flex; gap:8px;
}
.pp-slider-dots button{
  width:10px; height:10px; padding:0; border-radius:999px;
  border:1px solid #000; background:rgba(0,0,0,.35);
  cursor:pointer; transition:width .3s ease, background .3s ease;
}
.pp-slider-dots button.is-active{width:26px; background:#f2b233; border-color:#f2b233;}

@media (max-width:1024px){
  .pp-slider-arrow.prev{right:66px;}
  .pp-slider-arrow.next{right:16px;}
}
@media (max-width:576px){
  .pp-slider-arrow{width:34px; height:34px; font-size:.8rem;}
  .pp-slider-arrow{bottom:8px;}
  .pp-slider-arrow.prev{right:48px;}
  .pp-slider-arrow.next{right:8px;}
  .pp-slider-dots{bottom:20px; gap:6px;}
  .pp-slider-dots button{width:8px; height:8px;}
  .pp-slider-dots button.is-active{width:20px;}
  .pp-slide img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;margin-top: 0em;}
}
@media (prefers-reduced-motion:reduce){
  .pp-slide{transition:none;}
}

/* Testimonials carousel */
.pp-tc{
  --tc-navy:#061840; --tc-gold:#f2b233; --tc-blue:#1158ce; --tc-ink:#2c3a52; --tc-delay:7s;
  margin-top:8px;
}
.pp-tc-intro{color:#5a6780; margin:-4px 0 18px;}
.pp-tc-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.pp-tc-count{font-size:.95rem; letter-spacing:.12em; color:#8a95a8; font-weight:600;}
.pp-tc-count b{font-size:1.6rem; color:var(--tc-navy); letter-spacing:0;}
.pp-tc-arrows{display:flex; gap:10px;}
.pp-tc-arrow{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--tc-navy); background:#fff; color:var(--tc-navy);
  cursor:pointer; transition:background .25s, color .25s, transform .25s;
}
.pp-tc-arrow:hover,.pp-tc-arrow:focus-visible{background:var(--tc-navy); color:var(--tc-gold); outline:none;}
.pp-tc-arrow.prev:hover{transform:translateX(-3px);}
.pp-tc-arrow.next:hover{transform:translateX(3px);}

/* stage: every slide sits in the same grid cell, so height never jumps */
.pp-tc-stage{display:grid;}
.pp-tc-slide{
  grid-area:1 / 1;
  display:grid; grid-template-columns:300px 1fr;
  border-radius:22px; overflow:hidden;
  background:#fff; box-shadow:0 18px 50px rgba(6,24,64,.12);
  visibility:hidden; opacity:0;
  transition:opacity .5s ease, visibility .5s ease;
}
.pp-tc-slide.is-active{visibility:visible; opacity:1;}

/* left: navy panel with photo */
.pp-tc-visual{
  position:relative; background:var(--tc-navy);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:46px 24px 34px; isolation:isolate;
}
.pp-tc-visual::before{            /* dotted texture */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.18;
  background-image:radial-gradient(rgba(255,255,255,.9) 1px, transparent 1.2px);
  background-size:16px 16px;
}
.pp-tc-visual::after{             /* gold glow */
  content:""; position:absolute; width:260px; height:260px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(242,178,51,.35), transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-55%);
}
.pp-tc-tag{
  position:absolute; top:16px; left:16px;
  background:var(--tc-gold); color:var(--tc-navy);
  font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px;
}
.pp-tc-frame{position:relative; width:190px; height:190px;}
.pp-tc-frame::before{             /* offset gold frame */
  content:""; position:absolute; inset:0; border:3px solid var(--tc-gold);
  border-radius:28px; transform:translate(12px,12px) rotate(4deg);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.pp-tc-frame img{
  position:relative; width:100%; height:100%; object-fit:cover; display:block;
  border-radius:28px; box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.pp-tc-badge{
  margin-top:30px; color:#fff; font-size:.8rem; font-weight:600; text-align:center;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  padding:6px 14px; border-radius:999px; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.pp-tc-badge i{color:var(--tc-gold); margin-right:4px;}

/* right: quote */
.pp-tc-body{
  position:relative; padding:44px 46px 38px;
  display:flex; flex-direction:column; justify-content:center;
}
.pp-tc-body::before{              /* oversized quote mark */
  content:"\201C"; position:absolute; top:-18px; right:26px;
  font-family:Georgia, 'Times New Roman', serif; font-size:11rem; line-height:1;
  color:var(--tc-gold); opacity:.22; pointer-events:none;
}
.pp-tc-quote{
  position:relative; margin:0 0 26px;
  font-family:Georgia, 'Times New Roman', serif; font-style:italic;
  font-size:1.28rem; line-height:1.65; color:var(--tc-ink);
}
.pp-tc-person{border-left:4px solid var(--tc-gold); padding-left:14px;}
.pp-tc-name{font-size:1.2rem; font-weight:800; color:var(--tc-navy); margin:0 0 3px;}
.pp-tc-role{font-size:.9rem; color:var(--tc-blue); margin:0; line-height:1.5;}
.pp-tc-role span{
  display:inline-block; margin-left:8px; padding:1px 9px; border-radius:999px;
  background:#eef3fc; color:var(--tc-navy); font-size:.78rem; font-weight:700;
}
.pp-tc-view{
  align-self:flex-start; margin-top:24px;
  background:none; border:0; padding:0 0 3px; cursor:pointer;
  color:var(--tc-navy); font-weight:700; font-size:.92rem;
  background-image:linear-gradient(var(--tc-gold), var(--tc-gold));
  background-size:100% 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .3s ease, color .3s ease;
}
.pp-tc-view i{margin-left:6px; transition:transform .3s ease;}
.pp-tc-view:hover,.pp-tc-view:focus-visible{color:var(--tc-blue); outline:none;}
.pp-tc-view:hover i{transform:translateX(5px);}

/* entrance animation for the active slide */
.pp-tc-slide.is-active .pp-tc-frame{animation:ppTcPop .7s cubic-bezier(.2,.8,.2,1) both;}
.pp-tc-slide.is-active .pp-tc-frame::before{transform:translate(12px,12px) rotate(-4deg);}
.pp-tc-slide.is-active .pp-tc-tag,
.pp-tc-slide.is-active .pp-tc-badge{animation:ppTcUp .6s ease .25s both;}
.pp-tc-slide.is-active .pp-tc-quote{animation:ppTcUp .7s ease .1s both;}
.pp-tc-slide.is-active .pp-tc-person{animation:ppTcUp .7s ease .25s both;}
.pp-tc-slide.is-active .pp-tc-view{animation:ppTcUp .7s ease .4s both;}
@keyframes ppTcPop{from{opacity:0; transform:scale(.85) rotate(-3deg);} to{opacity:1; transform:none;}}
@keyframes ppTcUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}

/* navigation pills with autoplay progress */
.pp-tc-pills{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-top:20px;}
.pp-tc-pill{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:10px; text-align:left;
  padding:8px 12px 10px 8px; border-radius:14px;
  border:1px solid #e3e8f0; background:#fff; cursor:pointer;
  transition:background .3s, border-color .3s, transform .3s;
}
.pp-tc-pill:hover{border-color:var(--tc-gold); transform:translateY(-2px);}
.pp-tc-pill img{width:42px; height:42px; border-radius:10px; object-fit:cover; flex:none; filter:grayscale(60%); transition:filter .3s;}
.pp-tc-pill-text{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.pp-tc-pill-text b{font-size:.92rem; color:var(--tc-navy);}
.pp-tc-pill-text small{font-size:.74rem; color:#7a869b; font-weight:600; letter-spacing:.04em;}
.pp-tc-pill.is-active{background:var(--tc-navy); border-color:var(--tc-navy);}
.pp-tc-pill.is-active img{filter:none;}
.pp-tc-pill.is-active b{color:#fff;}
.pp-tc-pill.is-active small{color:var(--tc-gold);}
.pp-tc-progress{position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--tc-gold);}
.pp-tc.is-playing .pp-tc-pill.is-active .pp-tc-progress{animation:ppTcProgress var(--tc-delay) linear forwards;}
.pp-tc.is-paused .pp-tc-pill.is-active .pp-tc-progress{animation-play-state:paused;}
@keyframes ppTcProgress{from{width:0;} to{width:100%;}}

/* pop-up */
.pp-tc-modal{position:fixed; inset:0; z-index:10000; background:rgba(6,24,64,.72); display:flex; align-items:center; justify-content:center; padding:16px;}
.pp-tc-modal[hidden]{display:none;}
.pp-tc-modal-box{
  position:relative; background:#fff; border-radius:20px; width:100%; max-width:720px; max-height:88vh; overflow:auto;
  padding:0 0 30px; animation:ppTcUp .35s ease both;
}
.pp-tc-close{position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; border:0; background:rgba(255,255,255,.15); color:#fff; cursor:pointer; font-size:1rem; z-index:1;}
.pp-tc-close:hover{background:var(--tc-gold, #f2b233); color:#061840;}
.pp-tc-modal-head{display:flex; align-items:center; gap:18px; padding:26px 64px 26px 30px; background:#061840; margin-bottom:24px;}
.pp-tc-modal-head img{width:84px; height:84px; border-radius:18px; object-fit:cover; box-shadow:0 0 0 3px #f2b233;}
.pp-tc-modal-head h4{font-size:1.2rem; font-weight:800; color:#fff; margin:0 0 4px;}
.pp-tc-modal-head .pp-tc-role{color:#f2b233;}
.pp-tc-modal-head .pp-tc-role span{background:rgba(255,255,255,.12); color:#fff;}
.pp-tc-modal-text{padding:0 30px;}
.pp-tc-modal-text p{font-size:1rem; line-height:1.8; color:#38455c; margin:0 0 1em;}
.pp-tc-modal-text p:first-child::first-letter{float:left; font-family:Georgia,serif; font-size:3.2rem; line-height:.9; padding:4px 8px 0 0; color:#f2b233; font-weight:700;}
.pp-tc-modal-text p:last-child{margin-bottom:0;}

@media (max-width:860px){
  .pp-tc-slide{grid-template-columns:1fr;}
  .pp-tc-visual{padding:44px 20px 26px;}
  .pp-tc-frame{width:150px; height:150px;}
  .pp-tc-badge{margin-top:24px;}
  .pp-tc-body{padding:30px 22px 28px;}
  .pp-tc-body::before{font-size:8rem; top:-10px; right:12px;}
  .pp-tc-quote{font-size:1.08rem;}
}
@media (max-width:576px){
  .pp-tc-pills{display:flex; justify-content:center; gap:10px;}
  .pp-tc-pill{padding:5px 5px 8px;}
  .pp-tc-pill-text{display:none;}
  .pp-tc-arrow{width:38px; height:38px;}
  .pp-tc-modal-head{padding:22px 56px 22px 20px;}
  .pp-tc-modal-head img{width:64px; height:64px;}
  .pp-tc-modal-text{padding:0 20px;}
}
@media (prefers-reduced-motion:reduce){
  .pp-tc-slide, .pp-tc-slide *{animation:none !important; transition:none !important;}
}

 /* Hero: no blue tint over the video/photo (matches the plain-image reference) */
      .pp-hero .hero-bg { display: none !important; }
      .pp-hero .video-hero::before, .pp-hero .video-hero::after { display: none !important; background: none !important; }
      .pp-hero #bg-video, .pp-hero .pp-hero-img { filter: none !important; opacity: 1 !important; mix-blend-mode: normal !important; }
      /* Hero title box: dark translucent panel with bold white text (reference style) */
      .pp-hero .caption-box {
        background: rgba(30, 34, 44, 0.62) !important;
        background-image: none !important;
        border: 0 !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important;
        -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
        padding: 1rem 1.6rem !important;
      }
      .pp-hero .caption-box::before, .pp-hero .caption-box::after { display: none !important; }
      .pp-hero .caption-box h2 {
        color: #fff !important; font-weight: 800 !important; margin: 0;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
      }
      /* Empty decorative box (content is commented out) would show as a dark block */
      .pp-hero .caption-box.right-bottom { display: none !important; }
   
  
      /* Floating left menu (moved by the script at the bottom; right column is not affected) */
      #programmes .department-menu.sticky-menu { position: relative; top: auto; will-change: transform; }
      /* Syllabus buttons: same size, text centred, no overlap */
      #syllabus .pp-syllabus-btn {
        display: flex; align-items: center; justify-content: center; gap: .5rem;
        width: 100%; height: 100%; min-height: 64px; margin: 0;
        padding: .8rem 1rem; background: #1158ce; color: #fff;
        text-align: center; line-height: 1.35; white-space: normal; border-radius: 6px;
      }
      #syllabus .pp-syllabus-btn:hover, #syllabus .pp-syllabus-btn:focus { background: #0d47a8; color: #fff; }

       /* Left menu and right content start on the same top line */
      .pp-layout { align-items: flex-start; }
      /* Floating left menu (moved by the script at the bottom; right column is not affected) */
      .pp-layout .department-menu.sticky-menu { position: relative; top: auto; margin-top: 0; will-change: transform; }
      .pp-layout .pp-content > .vm-card { margin: 0 0 1.5rem 0; }
      .pp-layout .pp-content > .vm-card:first-child { margin-top: 0; }
      .pp-layout .pp-content .section-title { margin-top: 0; }
      
     
/* Video testimonials: MP4 playing inside its own tile */
    #testimonials .vt-embed-local { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #000; overflow: hidden; }
    #testimonials .vt-embed-local .vt-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
    #testimonials .vt-embed-local .vt-close,
    #testimonials .vt-embed-local .vt-replay { z-index: 2; }

    /* Instagram player sitting under the cover image (one-click play) */
    #testimonials .vt-slot.vt-live { position: relative; }
    #testimonials .vt-live-frame { position: absolute; inset: 0; overflow: hidden; background: #000; z-index: 0; border-radius: 8px; }
    #testimonials .vt-live-frame iframe {
        position: absolute; top: 0; left: 0; border: 0; display: block; transform-origin: 0 0;
        width: 340px !important; min-width: 340px !important; max-width: none !important;
        height: 760px !important; max-height: none !important;
    }
    #testimonials .vt-slot.vt-live .vt-cover { opacity: 1; }
    #testimonials .vt-slot.vt-live .vt-box { position: relative; z-index: 1; pointer-events: none; }
    #testimonials .vt-slot.vt-live-on .vt-box { visibility: hidden; }
    #testimonials .vt-live-close { display: none; position: absolute; z-index: 3; }
    #testimonials .vt-slot.vt-live-on .vt-live-close { display: block; }

    /* Testimonials + video testimonials layout. The B.Sc. Economics page gets these
       styles from a shared include that this page does not receive, so they are kept
       here, scoped to #testimonials, to make the section work on its own. */
    #testimonials, #testimonials *, #testimonials *::before, #testimonials *::after { box-sizing: border-box; }
    #testimonials .tst-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
    #testimonials .tst-head h2 { margin: 0; }
    #testimonials .tst-head .vt-head { flex: 0 0 auto; }
    #testimonials .tst-columns { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; margin-top: 18px; }
    #testimonials .tst-col, #testimonials .tst-slider, #testimonials .tst-viewport { min-width: 0; }
    #testimonials .tst-viewport { overflow: hidden; border-radius: 12px; }
    #testimonials .tst-track { display: flex; transition: transform .6s ease; }
    #testimonials .tst-card { flex: 0 0 100%; min-width: 0; margin: 0; display: grid; grid-template-columns: minmax(150px, 34%) minmax(0, 1fr); gap: 24px;
        align-items: start; padding: 24px; background: #fff; border: 1px solid #d0e2f5; border-radius: 12px; }
    #testimonials .tst-side { min-width: 0; }
    #testimonials .tst-photo { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 5; background: #061840; }
    #testimonials .tst-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    /* "Language Instructor at / London School of Speech" sits under the photo */
    #testimonials .tst-now { position: static !important; inset: auto !important; margin-top: 12px; padding: 0 0 0 12px !important;
        background: none !important; border-left: 3px solid #f2b233; }
    #testimonials .tst-now span { display: block; font-size: .78rem; color: #555; text-transform: uppercase; letter-spacing: .8px; }
    #testimonials .tst-now strong { display: block; font-size: .98rem; line-height: 1.35; color: #061840; }
    #testimonials .tst-body { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; height: 100%; }
    #testimonials .tst-quote { margin: 0 0 18px; font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.02rem; line-height: 1.75; color: #222; text-align: left; }
    #testimonials .tst-who { margin-top: auto; padding-top: 14px; border-top: 2px solid #f2b233; }
    #testimonials .tst-name { margin: 0; font-weight: 700; font-size: 1.05rem; color: #061840; }
    #testimonials .tst-degree { margin: 2px 0 0; font-size: .88rem; color: #555; }
    #testimonials .vt-card { position: relative; min-width: 0; }
    #testimonials .vt-viewport { overflow: hidden; border-radius: 8px; }
    #testimonials .vt-track { display: flex; gap: 10px; will-change: transform; }
    #testimonials .vt-slot { position: relative; flex: 0 0 calc(50% - 5px); aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: #061840; }
    #testimonials .vt-box { appearance: none; position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 8px;
        overflow: hidden; background: transparent; cursor: pointer; }
    #testimonials .vt-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
    #testimonials .vt-play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%;
        background: rgba(6, 24, 64, .75); border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); transition: background .25s, transform .25s; }
    #testimonials .vt-play::before { content: ""; position: absolute; left: 21px; top: 15px; border-style: solid; border-width: 11px 0 11px 17px;
        border-color: transparent transparent transparent #fff; }
    #testimonials .vt-box:hover .vt-play, #testimonials .vt-box:focus-visible .vt-play { background: #f2b233; transform: scale(1.08); }
    #testimonials .vt-box.is-empty { cursor: default; }
    #testimonials .vt-box.is-empty .vt-play { display: none; }
    #testimonials .vt-embed { position: relative; width: 100%; height: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 8px; background: #000; }
    #testimonials .vt-embed iframe { position: absolute; top: 0; left: 0; border: 0; width: 340px !important; max-width: none !important; height: 760px !important; max-height: none !important; }
    #testimonials .vt-close, #testimonials .vt-replay { position: absolute; top: 8px; z-index: 3; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
        background: rgba(0, 0, 0, .65); color: #fff; font-size: 20px; line-height: 32px; text-align: center; cursor: pointer; }
    #testimonials .vt-close { right: 8px; }
    #testimonials .vt-replay { left: 8px; font-size: 17px; }
    #testimonials .vt-close:hover, #testimonials .vt-replay:hover { background: #f2b233; color: #061840; }
    /* Card colours: navy card, white quote, gold name - so the names stand out
       (written with !important so the shared stylesheet cannot turn them dark again) */
    #testimonials .tst-card { background: linear-gradient(135deg, #061840 0%, #0b2d6e 100%) !important; border-color: #061840 !important; }
    #testimonials .tst-quote { color: #fff !important; }
    #testimonials .tst-who { border-top-color: #f2b233 !important; }
    #testimonials .tst-name { color: #f2b233 !important; }
    #testimonials .tst-degree { color: #dbe4f5 !important; }
    #testimonials .tst-now span { color: #dbe4f5 !important; }
    #testimonials .tst-now strong { color: #f2b233 !important; }
    @media (max-width: 991.98px) {
        #testimonials .tst-head .vt-head { display: none; }
        #testimonials .tst-columns { grid-template-columns: minmax(0, 1fr); }
        #testimonials .vt-card { width: 100%; max-width: 480px; margin: 10px auto 0; }
        #testimonials .vt-card::before { content: "Video Testimonials"; display: block; margin: 0 0 12px; font-family: 'Playfair Display', Georgia, serif;
            font-size: 1.4rem; font-weight: 700; color: #061840; text-align: center; }
    }
    @media (max-width: 575.98px) {
        #testimonials .tst-card { grid-template-columns: minmax(0, 1fr); padding: 18px; }
        #testimonials .tst-side { width: 100%; max-width: 260px; margin: 0 auto; }
    }


/* ---------- Tabs ---------- */
.sa-section { width: 100%; max-width: 100%; margin: 0 auto; color: #061840; }
.sa-subtitle { font-size: 0.9rem; color: #3a5075; margin: 0 0 12px; text-align: left; }
.sa-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; }
.sa-tab {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid #061840; background: #fff; color: #061840;
  padding: 7px 20px; border-radius: 999px; font: inherit; font-size: 0.9rem; font-weight: 600;
  line-height: 1.3; cursor: pointer; transition: background .25s, color .25s;
}
.sa-tab:hover { background: #eef4fc; }
.sa-tab.sa-is-active { background: #061840; color: #f2b233; }
.sa-panel { display: none; }
.sa-panel.sa-is-active { display: block; }

/* ---------- Slider ---------- */
.sa-slider {
  position: relative; width: 100%; max-width: 100%; overflow: hidden;
  border-radius: 10px; background: #fff; box-shadow: 0 6px 20px rgba(6, 24, 64, .12);
}
.sa-slider:focus-visible { outline: 3px solid #f2b233; outline-offset: 2px; }
.sa-track { display: flex; transition: transform .5s ease-in-out; touch-action: pan-y; }
.sa-slide { flex: 0 0 100%; min-width: 100%; max-width: 100%; }
.sa-slide img {
  display: block; width: 100%; max-width: 100%; height: auto;
  max-height: clamp(200px, 23vw, 600px); object-fit: contain; background: #fff;
}
.sa-arrow {
  appearance: none; -webkit-appearance: none;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: clamp(30px, 1.5vw + 20px, 52px); height: clamp(30px, 1.5vw + 20px, 52px);
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: rgba(6, 24, 64, .65); color: #fff;
  font-size: clamp(13px, .6vw + 10px, 22px); line-height: 1; cursor: pointer; padding: 0;
  transition: background .25s;
}
.sa-arrow:hover { background: rgba(6, 24, 64, .9); }
.sa-prev { left: 10px; }
.sa-next { right: 10px; }
.sa-counter { margin: 10px 0 0; text-align: center !important; font-size: 0.85rem; color: #3a5075; }
.sa-empty {
  display: none; margin: 0; padding: 26px 16px; border-radius: 10px; background: #fff;
  text-align: center !important; color: #3a5075; box-shadow: 0 6px 20px rgba(6, 24, 64, .08);
}
.sa-panel.sa-is-empty .sa-slider, .sa-panel.sa-is-empty .sa-counter { display: none; }
.sa-panel.sa-is-empty .sa-empty { display: block; }
.sa-panel.sa-single .sa-arrow, .sa-panel.sa-single .sa-counter { display: none; }

/* ---------- Coordinator / person cards ---------- */
.pp-people { display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-start; margin: 4px 0 0; }
.pp-person {
  position: relative; width: 340px; max-width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid #e3e9f2; border-radius: 14px; overflow: hidden;
  padding: 20px 20px 22px; text-align: center; box-shadow: 0 6px 20px rgba(6, 24, 64, .08);
  transition: transform .25s, box-shadow .25s;
}
.pp-person::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #c59b27; }
.pp-person:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(6, 24, 64, .14); }
.pp-person-photo {
  display: block; box-sizing: border-box; width: 300px; max-width: 100%; height: auto; aspect-ratio: 1 / 1;
  margin: 0 auto 16px; object-fit: cover; object-position: center top;
  border-radius: 12px; border: 3px solid #f2e6c4; background: #eef4fc;
}
.pp-person-initials {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 300px; max-width: 100%; aspect-ratio: 1 / 1; margin: 0 auto 16px; border-radius: 12px;
  background: #f5f1e6; color: #b8891a; border: 3px solid #f2e6c4;
  font-family: 'Playfair Display', serif; font-size: 4rem; font-weight: 700;
}
.pp-person-name { font-size: 1.1rem; font-weight: 700; color: #061840; line-height: 1.3; }
.pp-person-role {
  display: block; margin-top: 6px; color: #b8891a; font-size: 0.78rem; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
}
.pp-person-reg { margin-top: 10px; font-size: 0.85rem; color: #3a5075; }
.pp-person-link {
  display: inline-block; margin-top: 14px; padding: 8px 22px; border-radius: 6px;
  background: #c59b27; color: #fff !important; font-size: 0.85rem; font-weight: 700; text-decoration: none;
  transition: background .25s;
}
.pp-person-link:hover { background: #a9831d; }

/* ---------- Coordinator message page ---------- */
.pp-msg-layout { display: grid; grid-template-columns: 300px 1fr; gap: 32px; align-items: start; }
.pp-msg-layout .pp-person { width: 100%; }
.pp-msg-layout .pp-message { margin-top: 0; padding-top: 52px; }  /* room for the quote mark */
.pp-back-link { display: inline-block; margin-top: 20px; color: #0b2d6e; font-weight: 600; text-decoration: none; }
/* Message pages have no hero: give the content its own breathing room under the site header */
.pp-msg-page { padding-top: 24px; }
.pp-msg-page .vm-card { padding-top: 40px; }
.pp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 0.85rem; color: #3a5075; }
.pp-breadcrumb a { color: #0b2d6e; font-weight: 600; text-decoration: none; }
.pp-breadcrumb a:hover { color: #b8891a; }
.pp-breadcrumb span[aria-hidden] { color: #b8891a; }
.pp-back-link:hover { color: #b8891a; }
@media (max-width: 991.98px) {
  .pp-msg-layout { grid-template-columns: 1fr; }
  .pp-msg-layout .pp-person { max-width: 340px; margin: 0 auto; }
}

/* ---------- Coordinator message ---------- */
.pp-message {
  position: relative; margin-top: 28px; padding: 26px 30px 22px;
  background: #fbf8f0; border: 1px solid #efe3c4; border-left: 5px solid #c59b27; border-radius: 12px;
}
.pp-message::before {
  content: "\201C"; position: absolute; top: 4px; right: 22px;
  font-family: Georgia, serif; font-size: 5rem; line-height: 1; color: rgba(197, 155, 39, .25);
}
.pp-message .pp-subhead { margin-top: 0; }
.pp-message p { margin: 0 0 12px; font-size: 0.95rem; line-height: 1.7; color: #1f2937; text-align: left; }
.pp-message .pp-message-sign { margin: 18px 0 0; padding-top: 14px; border-top: 1px dashed #e0cf9f; color: #061840; line-height: 1.5; }

/* ---------- Headings, lists, notes, table ---------- */
.pp-subhead {
  margin: 1.5rem 0 .75rem; padding-left: 10px; border-left: 4px solid #c79b43;
  font-size: 1.05rem; font-weight: 700; color: #041e42;
}
.pp-subtitle { margin: 1.5rem 0 1rem; font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; color: #041e42; }
.pp-assoc-name { margin: .5rem 0 .75rem; font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: #041e42; }
.pp-assoc-body p { font-size: 0.95rem; line-height: 1.7; color: #000; }
.pp-list { padding-left: 1.25rem; margin: 0 0 .5rem; }
.pp-list li { margin-bottom: .5rem; font-size: 0.95rem; line-height: 1.6; color: #000; list-style: disc; }
.pp-note { color: #3a5075; font-style: italic; }
.pp-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; margin-top: 1rem; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; background: #fff; }
.pp-table th, .pp-table td { border: 1px solid #d0e2f5; padding: 10px 14px; text-align: left; vertical-align: top; color: #000; }
.pp-table thead th { background: #061840; color: #f2b233; }
.pp-table tbody th { background: #f5f9ff; color: #041e42; white-space: nowrap; }

/* ---------- Video testimonials ---------- */


.pp-video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #061840; }
.pp-video iframe, .pp-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Recruiter logos ("Where Our Students Go") fit small phones ---------- */
.dashboard-card__recruiter-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)) !important; }
.dashboard-card__recruiter-grid > * { min-width: 0; }
.company-logo-badge img { max-width: 100% !important; max-height: 100%; height: auto; object-fit: contain; }
/* Programme cards: each column holds one card, so it may never be wider than its column */
.prog-grid { grid-template-columns: minmax(0, 1fr); }

/* ---------- Hero (image slider + caption + Admissions), all screen sizes ---------- */
.pp-hero {
  position: relative; width: 100%; overflow: hidden; background: #061840;
  aspect-ratio: 1600 / 650;            /* slides are 1600 x 650 */
  height: auto; min-height: 340px;     /* small screens keep room for the caption; image crops at the sides */
}
.pp-hero .video-hero { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; }
.pp-hero .hero-bg { z-index: 3; pointer-events: none; }

.pp-hero .video-hero .hero-bg {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(6, 24, 64, .78) 0%, rgba(6, 24, 64, .35) 55%, rgba(6, 24, 64, .15) 100%);
}
.pp-hero .scroll-indicator {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: rgba(255, 255, 255, .85); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
}
/* Caption: programme name + Contact Us, bottom-left of the video */
.pp-hero .caption-box,
.pp-hero .caption-box:not(.right-bottom) {
  position: absolute; z-index: 5; left: clamp(16px, 5vw, 96px); right: auto; bottom: clamp(36px, 8%, 96px); top: auto;
  width: auto; max-width: min(760px, calc(100% - 32px)); margin: 0; padding: 0; text-align: left; background: none;
  border-radius: 0;
}
.pp-hero .caption-box h2 {
  margin: 0 0 clamp(12px, 1.6vw, 22px); padding: 0; color: #fff; background: none;
  font-size: clamp(1.6rem, 3.4vw, 3.4rem); font-weight: 800; line-height: 1.15; text-align: left;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.pp-hero .caption-box .cta-btn {
  display: inline-block; width: auto; max-width: 100%; margin: 0 !important;
  padding: clamp(9px, .8vw, 14px) clamp(22px, 2vw, 34px); border-radius: 6px;
  background: #1158ce !important; color: #fff; font-size: clamp(.9rem, .9vw, 1.1rem); font-weight: 700; text-align: center;
  flex: none; transition: background .25s;
}
.pp-hero .caption-box .cta-btn:hover { background: #0d47a8 !important; }
.pp-hero .caption-box.right-bottom { display: none; }      /* empty box (content is commented out) */
/* Admissions: tab on the right edge, vertically centred */
.pp-hero .admissions-panel {
  position: absolute; z-index: 6; right: 0; left: auto; top: 50%; bottom: auto; transform: translateY(-50%);
  width: auto; max-width: none; margin: 0; padding: 0; background: #1158ce; border-radius: 8px 0 0 8px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); animation: none;
}
.pp-hero .admissions-panel .cta-btn {
  display: block; width: auto; padding: clamp(10px, 1vw, 16px) clamp(16px, 1.6vw, 28px);
  color: #fff; font-size: clamp(.8rem, .85vw, 1.05rem); font-weight: 800; letter-spacing: 1px; text-align: center;
}
.pp-hero .admissions-panel .cta-btn:hover { background: rgba(255, 255, 255, .12); }

/* Department of English hero: no blue tint over the photos, title on a see-through black box */
.pp-hero .video-hero .hero-bg { display: none !important; background: none !important; }
.pp-hero .caption-box { background: transparent !important; box-shadow: none !important; }
.pp-hero .caption-box h2 {
  display: inline-block; margin-bottom: 0; padding: clamp(8px, 1vw, 16px) clamp(14px, 1.8vw, 28px);
  background: rgba(0, 0, 0, .5) !important; border-radius: 8px; text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
/* The site header is a solid bar fixed over the top of the page, so the slider
   starts below it on every screen size (otherwise it hides the top of the photos).
   --pp-header-h is set by the script below from the header's real height;
   78px / 70px are fallbacks if the script can't find the header. */
.pp-hero { margin-top: var(--pp-header-h, 78px); }
@media (max-width: 991.98px) {
  .pp-hero { margin-top: var(--pp-header-h, 70px); }
}
@media (max-width: 575.98px) {
  .pp-hero { min-height: 300px; }
  .pp-hero .caption-box, .pp-hero .caption-box:not(.right-bottom) { bottom: 40px; }
  .pp-hero .admissions-panel { top: 16px; transform: none; }
  .pp-hero .scroll-indicator { display: none; }
}

/* ---------- Department menu on phones & tablets ----------
   Desktop keeps the sidebar list. Below 992px the list folds into one bar
   ("Department Menu · current section") that stays under the site header while
   scrolling; tapping it opens the same vertical list with arrows. */
.department-menu > .pp-dm-toggle { display: none; }   /* the older in-menu bar: hidden until its script has run (the bar made by footer.php sits in .pp-dm-box and must stay visible) */
@media (max-width: 991.98px) {
  .prog-section .department-menu > ul { display: block !important; overflow: visible !important; }
  .prog-section .department-menu li { display: block !important; flex: none !important; border-right: 0 !important; }
  .prog-section .department-menu li > ul { display: block !important; }
  .prog-section .department-menu a { white-space: normal !important; padding: 16px 20px !important; }
  .prog-section .department-menu a i { display: inline-block !important; }
  .prog-section .sticky-menu { position: static !important; }

  /* the bar (only when the script below has run) */
  .pp-dm-col { position: sticky; top: var(--pp-dm-top, 70px); z-index: 900; }
  .pp-dm-col.pp-dm-col-open { z-index: 1001;  /* open list sits above the floating side buttons */ }
  .prog-section .department-menu.pp-dm-ready { position: relative !important; top: auto !important; background: transparent; border: 0; border-radius: 12px; box-shadow: 0 8px 22px rgba(4, 30, 66, .22); }
  .pp-dm-ready .pp-dm-toggle {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin: 0;
    padding: 9px 16px 9px 10px; border: 0; border-radius: 12px; background: #061840; color: #fff;
    text-align: left; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent;
  }
  .pp-dm-ready.pp-dm-open .pp-dm-toggle { border-radius: 12px 12px 0 0; }
  .pp-dm-toggle:focus-visible { outline: 3px solid #c79b43; outline-offset: 2px; }
  .pp-dm-icon { flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(199, 155, 67, .18); color: #c79b43; font-size: 1.05rem; }
  .pp-dm-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
  .pp-dm-label { font-size: .68rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #c79b43; }
  .pp-dm-current { font-size: 1rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-dm-caret { flex: 0 0 auto; color: #c79b43; transition: transform .25s ease; }
  .pp-dm-open .pp-dm-caret { transform: rotate(180deg); }

  /* the list: drops down over the page, scrolls on its own if taller than the screen */
  .prog-section .department-menu.pp-dm-ready > ul {
    display: none !important; position: absolute; left: 0; right: 0; top: 100%;
    max-height: calc(100vh - var(--pp-dm-top, 70px) - 76px); max-height: calc(100dvh - var(--pp-dm-top, 70px) - 76px);
    overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: #061840; border-top: 1px solid rgba(199, 155, 67, .4); border-radius: 0 0 12px 12px;
    box-shadow: 0 16px 32px rgba(4, 30, 66, .35);
  }
  .prog-section .department-menu.pp-dm-ready.pp-dm-open > ul { display: block !important; }
  .prog-section .department-menu.pp-dm-ready li { border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .prog-section .department-menu.pp-dm-ready li:last-child { border-bottom: 0; }
  .prog-section .department-menu.pp-dm-ready a {
    display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 50px; padding: 12px 18px !important; color: #fff; font-size: .95rem; line-height: 1.35; background: transparent;
  }
  .prog-section .department-menu.pp-dm-ready a i { flex: 0 0 auto; font-size: .8rem; transition: transform .2s ease; }
  .prog-section .department-menu.pp-dm-ready a:active { background: rgba(255, 255, 255, .08); }
  .prog-section .department-menu.pp-dm-ready a.pp-dm-here { background: #fff; color: #c79b43; font-weight: 600; }

  /* "Department Activities": tap to show its three links */
  .prog-section .department-menu.pp-dm-ready .pp-dm-parent > ul { display: none !important; background: rgba(255, 255, 255, .05); }
  .prog-section .department-menu.pp-dm-ready .pp-dm-parent.pp-dm-sub-open > ul { display: block !important; }
  .prog-section .department-menu.pp-dm-ready .pp-dm-parent > a i { transform: rotate(90deg); }
  .prog-section .department-menu.pp-dm-ready .pp-dm-parent.pp-dm-sub-open > a i { transform: rotate(-90deg); }
  .prog-section .department-menu.pp-dm-ready .pp-dm-parent > ul a { min-height: 46px; padding-left: 34px !important; font-size: .9rem; color: #dfe3ec; }

  /* sections land just below the header + menu bar */
  .prog-section [id] { scroll-margin-top: calc(var(--pp-dm-top, 70px) + 74px); }
}

/* Activity cards never wider than the screen */
.event-card-grid { max-width: 100%; min-width: 0; }
.event-card-grid > * { min-width: 0; }

/* Activity cards on phones: the tablet layout gave each part a named grid area;
   with the areas removed on phones they all landed in the same cell and overlapped.
   One column, date as a strip on top. */
@media (max-width: 575.98px) {
  .event-card-grid .date-badge,
  .event-card-grid .title-column,
  .event-card-grid .desc-column,
  .event-card-grid .metrics-column { grid-area: auto; }
  .event-card-grid .date-badge { flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 6px; padding: 8px 15px; }
  .event-card-grid .date-badge .month, .event-card-grid .date-badge .year { margin-top: 0; }
  .event-card-grid .metrics-column { margin-left: 0; padding-top: 0; }
}

/* Activities table (3 categories side by side): on phones the three narrow
   columns broke words into single letters. Below 768px it becomes one column:
   heading, its list, next heading, its list ... */
@media (max-width: 767.98px) {
  .activity-card { padding: 1rem; }
  
  
  
    
    
    
  
  
}

/* Job-role tags: long titles wrap instead of running out of their box on phones */
@media (max-width: 575.98px) {
  .job-title-pill { white-space: normal; max-width: 100%; }
  .roles-table-wrapper { padding: .75rem; }
  .industry-roles-table tbody td { padding: .85rem; }
}

/* ---------- Dropdown buttons (Department Activities, Career Paths, Higher Education) ---------- */
.pp-acc { display: flex; flex-direction: column; gap: 12px; margin-top: 1rem; }
.pp-acc-item { border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 4px 14px rgba(6, 24, 64, .08); }
.pp-acc-btn {
  appearance: none; -webkit-appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin: 0; padding: 16px 20px; border: 0; background: #061840; color: #fff;
  font: inherit; font-size: 1rem; font-weight: 700; text-align: left; cursor: pointer; transition: background .25s;
}
.pp-acc-btn:hover { background: #0b2d6e; }
.pp-acc-btn:focus-visible { outline: 3px solid #f2b233; outline-offset: -3px; }
.pp-acc-btn i { flex: 0 0 auto; color: #f2b233; transition: transform .25s ease; }
.pp-acc-btn[aria-expanded="true"] { background: #0b2d6e; }
.pp-acc-btn[aria-expanded="true"] i { transform: rotate(180deg); }
.pp-acc-panel { padding: 16px; border: 1px solid #d0e2f5; border-top: 0; border-radius: 0 0 10px 10px; }
.pp-acc-panel[hidden] { display: none; }
.pp-acc-panel .activity-card { margin: 0; box-shadow: none; }

/* Testimonial / achievement posters: show the whole poster large enough to read */


/* ---------- Phones ---------- */
@media (max-width: 575.98px) {
  .pp-people { justify-content: center; }
  .pp-person { padding: 16px 14px 18px; }
  .pp-message { padding: 20px 16px 18px; }
  .pp-message::before { font-size: 3.5rem; right: 12px; }
  .pp-table tbody th { white-space: normal; }
  .sa-tab { padding: 6px 14px; font-size: 0.85rem; }
  .sa-prev { left: 6px; } .sa-next { right: 6px; }
}

@media (min-width: 992px) {
        .department-menu.sticky-menu {
            position: -webkit-sticky;
            position: sticky;
            top: var(--dm-top, 100px);
            max-height: calc(100vh - var(--dm-top, 100px) - 20px);
            overflow-y: auto;
            overscroll-behavior: contain;
            z-index: 5;
        }
        .department-menu.sticky-menu::-webkit-scrollbar { width: 6px; }
        .department-menu.sticky-menu::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 3px; }
    }
    .department-menu.sticky-menu a.active { font-weight: 700; }

    /* Floating left menu (desktop / laptop, 992px and up): stays in view while the right column scrolls.
   --pp-menu-top is set by script to the site header height + 16px. */
@media (min-width: 992px) {
  #dept_main, #dept_main > section, #dept_main .container-fluid, #dept_main .row { overflow: visible !important; }
  #dept_main .row > .col-lg-3 { align-self: stretch; }
  #dept_main .department-menu.sticky-menu {
    position: -webkit-sticky; position: sticky !important;
    top: var(--pp-menu-top, 90px) !important;
    z-index: 50;
    max-height: calc(100vh - var(--pp-menu-top, 90px) - 16px);
    overflow-y: auto; overscroll-behavior: contain;
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(6,24,64,.18);
    scrollbar-width: none;            /* no visible scrollbar (Firefox) */
    -ms-overflow-style: none;         /* old Edge */
  }
  #dept_main .department-menu.sticky-menu::-webkit-scrollbar { display: none; width: 0; height: 0; }  /* Chrome, Safari, Edge */
  #dept_main .department-menu a { padding: 13px 18px; font-size: .92rem; }
}

/* =====================================================================
   Page styles moved out of the PHP files (October 2026).
   Each block only applies to the pages named in its heading.
   ===================================================================== */
/* ---- moved from BCom_Analytics.php (pages: BCom_Analytics) ---- */
:where(html:is(.pg-BCom_Analytics)) #programmes .department-menu.sticky-menu { position: relative; top: auto; will-change: transform; }

/* ---- moved from BSC_EMDA.php (pages: BSC_EMDA) ---- */
:where(html:is(.pg-BSC_EMDA)) #eligibility p,
:where(html:is(.pg-BSC_EMDA)) #about-programme p {
    text-align: justify;
    text-justify: inter-word;
}

/* ---- moved from BSC_EMDA.php (pages: BSC_EMDA) ---- */
:where(html:is(.pg-BSC_EMDA)) .caption-box:not(.right-bottom) > h2 {
    display: inline-block;
    background: rgba(4, 18, 41, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    padding: 10px 24px;
    border-radius: 6px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* ---- moved from Department_of_BusinessAdministration.php (pages: Department_of_BusinessAdministration) ---- */
:where(html:is(.pg-Department_of_BusinessAdministration)) .custom-table {
      border: 1px solid #dee2e6;
    }
:where(html:is(.pg-Department_of_BusinessAdministration)) .custom-table th {
      background-color: #4682B4; /* Custom blue header color matching image */
      color: #ffffff;
      font-weight: bold;
      border: 1px solid #3b6e98;
    }
:where(html:is(.pg-Department_of_BusinessAdministration)) .custom-table td {
      vertical-align: middle;
      border: 1px solid #dee2e6;
    }
:where(html:is(.pg-Department_of_BusinessAdministration)) .custom-table td.col-sl,
:where(html:is(.pg-Department_of_BusinessAdministration)) .custom-table td.col-class {
      white-space: nowrap;
    }

/* ---- moved from Department_of_BusinessAdministration.php (pages: Department_of_BusinessAdministration) ---- */

:where(html:is(.pg-Department_of_BusinessAdministration)) .event-heading {
            background-color: #1f3a60;
            color: #ffffff;
            font-weight: 700;
            padding: 6px 12px;
            font-size: 0.95rem;
            margin-bottom: 0;
        }
:where(html:is(.pg-Department_of_BusinessAdministration)) .event-meta {
            background-color: #f0f0f0;
            padding: 6px 12px;
            font-style: italic;
            font-size: 0.9rem;
            color: #1b365d;
            margin-bottom: 16px;
        }
:where(html:is(.pg-Department_of_BusinessAdministration)) .event-meta a {
            color: #1b365d;
            text-decoration: underline;
        }


/* ---- moved from bba-StudentLeaders.php (pages: Department_of_BusinessAdministration) ---- */
:root:where(.pg-Department_of_BusinessAdministration) {
            --brand-blue: #4d8df7;
            --brand-dark-blue: #225cc1;
            --dark-bg: #0f172a;
            --card-bg: #1e293b;
        }
:where(html:is(.pg-Department_of_BusinessAdministration)) .poster-card {
            position: relative;
            max-width: 480px;
            width: 100%;
            margin: 0 auto;
            aspect-ratio: 4 / 5;
            border-radius: 20px;
            overflow: hidden;
            background: var(--card-bg);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
        }
:where(html:is(.pg-Department_of_BusinessAdministration)) .poster-card img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-control-prev,
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-control-next {
            position: absolute !important;
            top: 50% !important;
            bottom: auto !important;
            width: 48px !important;
            height: 48px !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            padding: 0;
            background-color: var(--brand-blue) !important;
            border: 2px solid #ffffff;
            border-radius: 50%;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
            opacity: 1 !important;
            visibility: visible !important;
            z-index: 10;
            transform: translateY(-50%);
            transition: background-color 0.3s ease, transform 0.3s ease;
            cursor: pointer;
        }
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-control-prev { left: 8px; right: auto; }
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-control-next { right: 8px; left: auto; }
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-control-prev svg,
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-control-next svg {
            display: block;
            width: 20px;
            height: 20px;
        }
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-control-prev:hover,
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-control-next:hover,
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-control-prev:focus-visible,
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-control-next:focus-visible {
            background-color: var(--brand-dark-blue) !important;
            transform: translateY(-50%) scale(1.1);
        }
@media (min-width: 768px) {
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-control-prev { left: -64px; }
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-control-next { right: -64px; }
}
:where(html:is(.pg-Department_of_BusinessAdministration)) .nav-pills { gap: 0.5rem; }
:where(html:is(.pg-Department_of_BusinessAdministration)) .nav-pills .nav-link {
            color: #334155;
            background-color: rgba(77, 141, 247, 0.08);
            border: 1px solid rgba(77, 141, 247, 0.3);
            font-family: 'Montserrat', sans-serif;
            font-weight: 600;
            border-radius: 30px;
            padding: 0.5rem 1.25rem;
            transition: all 0.3s ease;
        }
:where(html:is(.pg-Department_of_BusinessAdministration)) .nav-pills .nav-link:hover {
            color: #ffffff;
            background-color: var(--brand-dark-blue);
        }
:where(html:is(.pg-Department_of_BusinessAdministration)) .nav-pills .nav-link.active {
            background-color: var(--brand-blue);
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(77, 141, 247, 0.4);
        }
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-indicators {
            position: relative;
            margin: 1.5rem 0 0;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px;
        }
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-indicators [data-bs-target],
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-indicators button {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(77, 141, 247, 0.35);
            border: none;
            margin: 0;
            padding: 0;
            opacity: 1;
            text-indent: 0;
            transition: all 0.3s ease;
        }
:where(html:is(.pg-Department_of_BusinessAdministration)) #bbaCarousel .carousel-indicators .active {
            width: 28px;
            border-radius: 10px;
            background-color: var(--brand-blue);
        }
@media (prefers-reduced-motion: reduce) {
:where(html:is(.pg-Department_of_BusinessAdministration)) * { transition: none !important; }
}

/* ---- Department_of_pg_deptcom.php: the cells of the big table used to carry style="text-align:center;" one by one (820 times). One rule does the same; !important keeps the same strength the inline style had. ---- */
.sjcc-td-center td { text-align: center !important; }

/* =====================================================================
   HEADER MENU AND FOOTER (same as main.css)
   menu1.php and footer.php no longer carry their own <style>; these rules
   are the same ones main.css has, so department pages look like the rest
   of the site. If you change the header or footer, change it in both files.
   ===================================================================== */
/* ---- moved from menu1.php (218 page(s)) ---- */
:root:where(:not(.pg-index)):is(html) { 
    --gt-blue: #041E42; 
    --mega-bg: #0b0f1a; 
    --mega-gold: #c5a059; 
    --text-gray: #bbbbbb;
       --navy-deep: #041E42;
}
html:where(:not(.pg-index)) .main-header {
            background: #041e42;
            padding: 0px 0px;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            transition: all 0.4s ease;
}
html:where(:not(.pg-index)) .nav-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
}
html .main-logo {
            height: 80px;
            width: auto;
}
html .nav-list {
            display: flex;
            list-style: none;
            gap: 6px;
            margin: 0;
            padding: 0;
            align-items: center;
}
html .nav-list li a {
            color: var(--white);
            text-decoration: none;
            font-size:0.85rem;
            font-weight: 700;
                padding: 0px 0px;
                letter-spacing: -0.4px;
}
html .has-mega { position: static;
}
html .has-mega::after {
         content: "";
    position: absolute;
    top: 100%;                                                   
    left: 0;
    width: 100%;
    height: 30px;                                     
    display: block;                                      
    visibility: hidden;
    z-index: 999;
}
html:where(:not(.pg-index)) .mega-menu {
            display: block; 
    visibility: hidden; 
    opacity: 1;
    position: absolute; 
    width: 100%; 
    left: 0; 
  top: 100%; 
    pointer-events: auto;
     background: var(--mega-bg) !important;
    border: none; 
    border-radius: 0; 
    padding: 40px 60px;
    transition: 0.3s ease; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    z-index: 1100;
}
html .has-mega:hover .mega-menu,
html .has-mega:hover::after {
   display: block !important;
    visibility: visible;
}
html:where(:not(.pg-index)) .mega-menu:hover {
    display: block;
}
html .mega-main-title {
               
    font-size: 22px;
    color: white;
    margin-bottom: 30px;
    font-weight: 400;
}
html .mega-box {
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            padding: 20px;
            background:#061840;
            height: 100%;
            display: flex;
            flex-direction: column;
}
html .mega-box h6 {
          color: #c8a96e;
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}
html .qa-list {
            list-style: none;
            padding: 0;
            margin: 0;
}
html .qa-list li a {
            color: var(--text-gray);
    text-decoration: none;
    font-size:0.85rem;
    display: block;
    margin-bottom: 6px;
    transition: 0.2s;
    font-weight: 400;
}
html .qa-list li a::before {
            content: "»";
            color: var(--gold);
            margin-right: 10px;
            font-weight: bold;
            font-size: 14px;
}
html .qa-list li a:hover { color: white;
}
html:where(:not(.pg-index)) .full-page-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--mega-bg); z-index: 3000; overflow-y: auto;
    display: none; padding: 50px 5%;
}
html:where(:not(.pg-index)) .full-page-overlay.active { display: block;
}
html:where(:not(.pg-index)) .close-btn { position: absolute; top: 30px; right: 40px; color: white; font-size: 2.5rem; cursor: pointer;
}
html:where(:not(.pg-index)) .mega-header { font-family: "Google Sans", sans-serif; font-size: 22px; color: white; margin-bottom: 30px; font-weight: 400;
}
html:where(:not(.pg-index)) .mega-header1 { font-family: "Google Sans", sans-serif; font-size: 1.3rem; color: #e8d4a8; margin-bottom: 20px;border-bottom: 1px solid #c8a96e; padding-bottom: 5px;
}
html:where(:not(.pg-index)) .mega-cat-title1 {    color: var(--mega-gold);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    border-bottom: 0px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 5px;
}
html:where(:not(.pg-index)) .full-page-overlay ul { list-style: none; padding: 0;
}
html:where(:not(.pg-index)) .full-page-overlay ul li {
    color: #9a9590;
    font-size: 12px;
    cursor: pointer;font-family: "Google Sans", sans-serif;
}
html:where(:not(.pg-index)) .full-page-overlay ul li a {
    color: #9a9590;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;font-family: "Google Sans", sans-serif;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
html:where(:not(.pg-index)) .video-hero { position: relative; height: 100vh; overflow: hidden; background: #000;  width: 100%;
}
html:where(:not(.pg-index)) #bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
html:where(:not(.pg-index)) .hero-bg {
    position: absolute; inset: 0;
                                  

background: background:  radial-gradient(
    ellipse 150% 50% at top center,
    rgba(4, 16, 52, 0.85) 0%,
    rgba(4, 16, 52, 0.72) 30%,
    rgba(4, 16, 52, 0.45) 50%,
    transparent 100%
); z-index: 1;
}
html:where(:not(.pg-index)) .scroll-indicator {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    cursor: pointer;
    color: white;
    text-decoration: none;
    transition: 0.3s;
    opacity: 0.3;
}
html:where(:not(.pg-index)) .scroll-indicator:hover { opacity: 0.7;
}
html:where(:not(.pg-index)) .scroll-indicator span {
    display: block;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 2px;
    margin-bottom: 5px;
}
html:where(:not(.pg-index)) .scroll-indicator i { font-size: 20px; animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}
html:where(:not(.pg-index)) .nav-link1 {
    display: flex;
    align-items: center;
    gap: 5px;                                   
    color: #c8991e;
    margin-left: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c8991e;
}
html:where(:not(.pg-index)) .nav-link1::after {
    content: ;                             
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    transition: transform 0.3s ease;
}
html:where(:not(.pg-index)) .list-unstyled {  font-size: 0.9rem; color:#9a9590;
}
html:where(:not(.pg-index)) .list-unstyled li::before { content: '»';   padding-right: 10px;
}
html:where(:not(.pg-index)) .list-unstyled1 {  font-size: 12px; color:#9a9590;margin-bottom:8px; list-style-type: none;padding-left:0px
}
html:where(:not(.pg-index)) .list-unstyled1 li::before { content: '»';   padding-right: 10px;
}
html:where(:not(.pg-index)) .menu-links {  
    font-size: 11px;  
    list-style-type:none;
    margin-left: 10px;
    padding-left: 5px;
    color:#5a5650;
}
html:where(:not(.pg-index)) .menu-links li::before { content: '›';   padding: 0px 10px;border-left: 1px dashed #5a5650;
}
html:where(:not(.pg-index)) .mobile-toggle {
    display: none;
    font-size: 26px;
    color: #fff;
    cursor: pointer;
}
@media (max-width: 991px) {
html:where(:not(.pg-index)) .nav-desktop {
        display: none !important;
}
html:where(:not(.pg-index)) .main-header {
        height: 70px;
        padding: 0 0px;
        display: flex;
        align-items: center;
        background: #041E42;
}
html .main-logo {
        height: 60px;
}
html:where(:not(.pg-index)) .mobile-toggle {
        display: block;
}
}
@media (max-width: 991px) {
html:where(:not(.pg-index)) .full-page-overlay .row > div {
        margin-bottom: 25px;
}
}
html:where(:not(.pg-index)) .clickable-title {
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    -webkit-user-select:none; user-select:none;
}
html:where(:not(.pg-index)) .toggle-icon {
    font-size:20px;
    transition:0.3s ease;
    color:#c8a96e;
}
html:where(:not(.pg-index)) .submenu {
    display:none;
    margin-top:10px;
}
html:where(:not(.pg-index)) .submenu.active {
    display:block;
}
html:where(:not(.pg-index)) .clickable-title.active .toggle-icon {
    transform:rotate(45deg);
}
html .committee-section {
    max-width:1100px;
    margin:auto;
}
html .section-heading {
    text-align:center;
    margin-bottom:35px;
}
html .section-heading span {
    display:inline-block;
    color:#a67c52;
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:10px;
}
html .section-heading h2 {
    font-size:36px;
    color:#202b45;
    margin-bottom:10px;
}
html .section-heading p {
    color:#777;
    font-size:16px;
}
html .committee-table-wrap {
    background:#ffffff;
    border-radius:20px;
    padding:12px;
    box-shadow:0 15px 45px rgba(0,0,0,0.08);
    overflow:hidden;
}
html .committee-table {
    width:100%;
    border-collapse:collapse;
}
html .committee-table thead {
    background:#202b45;
}
html .committee-table th {
    color:#fff;
    padding:20px;
    text-align:left;
    font-size:16px;
    letter-spacing:.3px;
}
html .committee-table th:first-child {
    border-radius:12px 0 0 12px;
    width:100px;
}
html .committee-table th:last-child {
    border-radius:0 12px 12px 0;
}
html .committee-table tbody tr {
    border-bottom:1px solid #e8e8e8;
    transition:0.3s ease;
}
html .committee-table tbody tr:last-child {
    border-bottom:none;
}
html .committee-table tbody tr:hover {
    background:#f7f3ee;
    transform:scale(1.01);
}
html .committee-table td {
    padding:18px 20px;
    font-size:16px;
    line-height:1.6;
}
html .committee-table td:first-child {
    font-weight:bold;
    color:#f2b233;
    font-size:18px;
}
html .member-name {
    font-weight:bold;
    color:#202b45;
    font-size:17px;
}
html:where(:not(.pg-index)) .position {
    display:inline-block;
    padding:7px 14px;
    background:#eef1f7;
    color:#202b45;
    border-left:4px solid #f2b233;
    border-radius:4px;
    font-weight:bold;
}
html .sub-position {
    display:block;
    margin-top:6px;
    color: #333;
font-size: 15px;
}
@media (max-width:768px) {
html .section-heading h2 {
        font-size:28px;
}
html .committee-table-wrap {
        background:transparent;
        box-shadow:none;
        padding:0;
}
html .committee-table,
html .committee-table tbody,
html .committee-table tr,
html .committee-table td {
        display:block;
        width:100%;
}
html .committee-table thead {
        display:none;
}
html .committee-table tbody tr {
        background:#fff;
        margin-bottom:18px;
        padding:18px;
        border-radius:16px;
        box-shadow:0 8px 25px rgba(0,0,0,0.08);
        border-left:5px solid #a67c52;
}
html .committee-table tbody tr:hover {
        transform:none;
        background:#d3a63029;
}
html .committee-table td {
        padding:8px 5px;
        border:none;
}
html .committee-table td::before {
        content:attr(data-label);
        display:block;
        font-size:12px;
        text-transform:uppercase;
        letter-spacing:1px;
        color:#999;
        margin-bottom:3px;
        font-weight:bold;
}
html .committee-table td:first-child {
        font-size:20px;
}
}
html .report-section {
    max-width:100%;
    margin:auto;
    background:#ffffff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
}
html .report-title {
    margin-bottom:30px;
}
html .report-title h2 {
    font-size:30px;
    color:#252b45;
}
html .year-tabs {
    display:flex;
    gap:12px;
    margin-bottom:30px;
    overflow-x:auto;
    padding-bottom:8px;
}
html .year-tabs::-webkit-scrollbar {
    height:4px;
}
html .year-tab {
    border:none;
    background:#f1f2f5;
    color:#555;
    padding:14px 22px;
    border-radius:50px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    transition:all 0.3s ease;
}
html .year-tab:hover {
    background:#252b45;
    color:#fff;
    transform:translateY(-3px);
}
html .year-tab.active {
    background:#252b45;
    color:#fff;
    box-shadow:0 8px 20px rgba(37,43,69,0.25);
}
html .report-content {
    display:none;
    animation:fadeIn 0.4s ease;
}
html .report-content.active {
    display:block;
}
html .report-card {
    padding:28px 30px;
    border-radius:16px;
    background:linear-gradient(135deg,#f2b2336b,#d3a63026);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    box-shadow:0 10px 25px rgba(245,160,0,0.25);
}
html .report-card h3 {
    font-size:20px;
    color:#252525;
}
html .report-btn {
    background:#252b45;
    color:#fff;
    text-decoration:none;
    padding:13px 22px;
    border-radius:50px;
    font-weight:bold;
    white-space:nowrap;
    transition:0.3s;
}
html .report-btn:hover {
    background:#fff;
    color:#252b45;
    transform:scale(1.05);
}
@keyframes fadeIn {
    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}
@media (max-width:768px) {
html .report-section {
        padding:20px 15px;
}
html .report-title h2 {
        font-size:24px;
}
html .year-tab {
        padding:12px 18px;
        font-size:14px;
}
html .report-card {
        flex-direction:column;
        align-items:flex-start;
        padding:22px 18px;
}
html .report-card h3 {
        font-size:17px;
}
html .report-btn {
        width:100%;
        text-align:center;
        font-size: 12px;
}
}
@media (max-width: 991.98px) {
html:where(:not(.pg-index)) .main-header .nav-wrapper { padding: 0 8px 0 14px;
}
html:where(:not(.pg-index)) .mobile-toggle { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 24px;
}
html:where(:not(.pg-index)) .mobile-toggle:active { background: rgba(255,255,255,.1);
}
html:where(:not(.pg-index)) .full-page-overlay { padding: 0 0 48px; background: #041e42; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
html:where(:not(.pg-index)) .full-page-overlay.active { animation: mmSlideIn .25s ease;
}
@keyframes mmSlideIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
html:where(:not(.pg-index)) .full-page-overlay::before {
        content: "Menu"; position: sticky; top: 0; z-index: 2; display: flex; align-items: center;
        height: 66px; padding: 0 20px; background: #041e42; border-bottom: 1px solid rgba(200,169,110,.35);
        color: #fff; font-family: "Google Sans", sans-serif; font-size: 1.4rem;
}
html:where(:not(.pg-index)) .full-page-overlay .close-btn {
        position: fixed; top: 11px; right: 12px; z-index: 3002; width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center; border-radius: 50%;
        background: rgba(255,255,255,.1); font-size: 1.25rem; line-height: 1;
}
html:where(:not(.pg-index)) .full-page-overlay > .container-fluid { padding: 0 18px;
}
html:where(:not(.pg-index)) .full-page-overlay .row { margin: 0 !important;
}
html:where(:not(.pg-index)) .full-page-overlay .row > div { padding: 0; margin-bottom: 0;
}
html:where(:not(.pg-index)) .full-page-overlay .mega-header1 {
        margin: 26px 0 2px; padding: 0 0 6px; border-bottom: 0; color: #c8a96e;
        font-family: "Google Sans", sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
}
html:where(:not(.pg-index)) .full-page-overlay .clickable-title {
        min-height: 54px; padding: 12px 2px; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.1);
        color: #fff; font-size: 1rem; font-weight: 500; text-transform: none; letter-spacing: 0;
        -webkit-tap-highlight-color: transparent;
}
html:where(:not(.pg-index)) .full-page-overlay .clickable-title.active { color: #e8d4a8; border-bottom-color: transparent;
}
html .full-page-overlay .clickable-title.mm-has-current { color: #e8d4a8;
}
html:where(:not(.pg-index)) .full-page-overlay .toggle-icon {
        flex: 0 0 30px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
        border: 1px solid rgba(200,169,110,.55); border-radius: 50%; font-size: 18px; line-height: 1;
}
html:where(:not(.pg-index)) .full-page-overlay .clickable-title.active .toggle-icon { background: #c8a96e; color: #041e42;
}
html:where(:not(.pg-index)) .full-page-overlay .submenu {
        margin: 0 0 10px; padding: 2px 0 2px 14px; border-left: 2px solid #c8a96e;
        background: rgba(255,255,255,.04); border-radius: 0 8px 8px 0;
}
html:where(:not(.pg-index)) .full-page-overlay ul li { font-size: .95rem; line-height: 1.4; color: #8f8b85;
}
html:where(:not(.pg-index)) .full-page-overlay ul li a { font-size: .95rem; color: #ece8e1;
}
html:where(:not(.pg-index)) .full-page-overlay .submenu li { display: flex; align-items: baseline; padding: 11px 10px 11px 0;
}
html:where(:not(.pg-index)) .full-page-overlay .submenu li + li { border-top: 1px solid rgba(255,255,255,.06);
}
html:where(:not(.pg-index)) .full-page-overlay .submenu li a { flex: 1 1 auto;
}
html:where(:not(.pg-index)) .full-page-overlay .list-unstyled li::before { color: #c8a96e;
}
html .full-page-overlay ul li a.mm-current { color: #c8a96e; font-weight: 600;
}
html:where(:not(.pg-index)) .full-page-overlay .list-unstyled1 { margin: 6px 0 0;
}
html:where(:not(.pg-index)) .full-page-overlay .list-unstyled1 li,
html:where(:not(.pg-index)) .full-page-overlay .list-unstyled1 li a { font-weight: 600; color: #fff;
}
html:where(:not(.pg-index)) .full-page-overlay .menu-links { margin: 0 0 6px; padding-left: 4px;
}
html:where(:not(.pg-index)) .full-page-overlay .menu-links li,
html:where(:not(.pg-index)) .full-page-overlay .menu-links li a { font-size: .9rem; font-family: "Google Sans", sans-serif;
}
html:where(:not(.pg-index)) .full-page-overlay .menu-links li a { color: #d9d4cc;
}
html:where(:not(.pg-index)) .full-page-overlay .menu-links li::before { padding: 0 10px 0 6px;
}
}

/* ---- moved from footer.php (all pages) ---- */
html .site-footer {
    background-image: linear-gradient(rgba(6, 24, 64, 0.82), rgba(6, 24, 64, 0.82)), url('images/footer.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    overflow-x: hidden;
}
html .site-footer .footer-inner { padding: 56px 15px 20px;
}
html .site-footer .footer-brand-logo { max-width: 90px; height: auto; margin-bottom: 12px;
}
html .site-footer .footer-brand-name { font-size: 1.3rem; font-weight: 700; line-height: 1.3;
}
html .site-footer .footer-brand-sub { color: #f2b233; font-size: .85rem; margin: 4px 0 10px; letter-spacing: .3px;
}
html .site-footer .footer-brand-desc { font-size: .9rem; line-height: 1.6; opacity: .9;
}
html .site-footer .footer-contact { font-size: .9rem;
}
html .site-footer .footer-contact a { text-decoration: none;
}
html .site-footer .footer-map {
    display: block;
    border-radius: 8px;
    margin-top: 8px;
}
html .site-footer h5 {
    display: inline-block;
    color: #f2b233;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .75rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid rgba(242, 178, 51, .45);
}
html .site-footer ul { list-style: none; padding: 0; margin: 0 0 1.5rem;
}
html .site-footer ul li { margin-bottom: .45rem;
}
html .site-footer ul a {
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    font-size: .9rem;
    overflow-wrap: break-word; word-break: normal; hyphens: manual;
    transition: color .2s;
}
html .site-footer ul a:hover { color: #f2b233;
}
html .site-footer .footer-institutions { columns: 2; column-gap: 24px;
}
html .site-footer .footer-institutions li { break-inside: avoid;
}
html .site-footer .footer-bottom {
    border-color: rgba(255, 255, 255, .2) !important;
    font-size: .85rem;
    color: rgba(255, 255, 255, .8);
}
html .site-footer .footer-bottom { display: block !important; text-align: left !important;
}
html .site-footer .footer-bottom a { margin: 0 !important;
}
html .site-footer .footer-bottom-row {
    width: 100%;
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 8px 24px;
}
html .site-footer .footer-legal {
    margin-left: auto; display: flex; flex-wrap: wrap;
    justify-content: flex-end; gap: 6px 18px; text-align: right;
}
html .site-footer .footer-legal a { color: #f2b233; text-decoration: none;
}
html .site-footer .footer-legal a:hover { text-decoration: underline;
}
html .site-footer .footer-copy { white-space: nowrap;
}
html .scroll-top-btn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border: 2px solid #f2b233;
    border-radius: 50%;
    background: #0b2a6b;
    color: #f2b233;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .25s, visibility .25s, transform .25s, background .2s;
}
html .scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0);
}
html .scroll-top-btn:hover { background: #f2b233; color: #0b2a6b;
}
html .scroll-top-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px;
}
@media (max-width: 575.98px) {
html .scroll-top-btn { right: 14px; width: 40px; height: 40px;
}
}
@media (max-width: 991.98px) {
html .site-footer .footer-brand-col { text-align: center;
}
html .site-footer .footer-brand-logo { display: block; margin: 0 auto 12px;
}
html .site-footer .footer-contact { justify-content: center;
}
}
@media (max-width: 575.98px) {
html .site-footer { padding-left: 0; padding-right: 0;
}
html .site-footer .footer-inner { padding: 40px 16px 16px;
}
html .site-footer .footer-brand-name { font-size: 1.15rem;
}
html .site-footer .footer-contact { flex-direction: column; align-items: center; gap: 4px !important;
}
html .site-footer .footer-map { height: 200px !important;
}
html .site-footer .footer-links-row > .footer-quick { flex: 0 0 100%; max-width: 100%;
}
html .site-footer .footer-quick ul { columns: 2; column-gap: 24px;
}
html .site-footer .footer-quick li { break-inside: avoid;
}
html .site-footer .footer-institutions { columns: 1;
}
html .site-footer ul a { display: inline-block; padding: 3px 0;
}
html .site-footer .footer-bottom { font-size: .8rem;
}
html .site-footer .footer-copy { white-space: normal; font-size: .78rem; text-align: center; overflow-wrap: anywhere;
}
html .site-footer .footer-legal { gap: 6px 16px;
}
}
html .site-footer .footer-social { display: flex; gap: 10px; margin: 6px 0 10px;
}
html .site-footer .footer-social a {
    width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); color: #fff; text-decoration: none; transition: background .2s, color .2s;
}
html .site-footer .footer-social a:hover { background: #f2b233; color: #061840;
}
@media (max-width: 991.98px) {
html .site-footer .footer-social { justify-content: center;
}
}
@media (max-width: 991.98px) {
html .site-footer .footer-inner { padding-top: 32px !important;
}
html .site-footer .footer-brand-logo { max-width: 64px; margin-bottom: 8px;
}
html .site-footer .footer-brand-desc { font-size: .85rem; line-height: 1.5;
}
html .site-footer .footer-map { height: 170px !important;
}
html .site-footer .footer-brand-col { margin-bottom: 12px !important;
}
html .site-footer .footer-links-row { margin-top: 0 !important;
}
html .site-footer .footer-links-row > .footer-acc {
      flex: 0 0 100% !important; max-width: 100% !important; padding: 0;
      border-bottom: 1px solid rgba(255,255,255,.14);
}
html .site-footer .footer-acc h5 {
      display: flex; width: 100%; justify-content: space-between; align-items: center;
      margin: 0 !important; padding: 14px 2px; border: 0; cursor: pointer; -webkit-user-select:none; user-select:none;
}
html .site-footer .footer-acc h5::after {
      content: ""; width: 9px; height: 9px; margin-right: 4px;
      border-right: 2px solid #f2b233; border-bottom: 2px solid #f2b233;
      transform: rotate(45deg) translateY(-3px); transition: transform .25s;
}
html .site-footer .footer-acc.open h5::after { transform: rotate(-135deg) translateY(-2px);
}
html .site-footer .footer-acc h5:focus-visible { outline: 2px solid #f2b233; outline-offset: 2px;
}
html .site-footer .footer-acc ul { display: none; margin: 0 0 14px !important; columns: 2 !important; column-gap: 20px;
}
html .site-footer .footer-acc.open ul { display: block;
}
html .site-footer .footer-acc li { break-inside: avoid; margin-bottom: .35rem;
}
html .site-footer .footer-bottom { margin-top: 18px !important;
}
}
@media (max-width: 359.98px) {
html .site-footer .footer-acc ul { columns: 1 !important;
}
}

/* =====================================================================
   Inline styles moved out of the department pages (style="..." -> class="dpi-N").
   !important keeps them as strong as the inline style was. Class names were
   checked against every class and id on the site.
   ===================================================================== */
.dpi-2 { border-radius: 0px !important; }
.dpi-3 { padding-top: 13px !important; }
.dpi-4 { text-align: justify !important; }
.dpi-5 { font-size: 0.95rem !important; }
.dpi-6 { width: 100% !important; }
.dpi-7 { padding: 0.25rem !important; }
.dpi-8 { background: #f4f4f4 !important; border: solid 1px #c8c8c8 !important; }
.dpi-9 { text-align: center !important; padding: 1rem !important; }
.dpi-10 { text-align: center !important; }
.dpi-11 { padding-top: 10px !important; }
.dpi-12 { background: #061840 !important; color: #f2b233 !important; }
.dpi-13 { font-size: 1rem !important; color: #d6a726 !important; }
.dpi-14 { background: #fff !important; }
.dpi-15 { font-weight: 700 !important; }
.dpi-16 { color: #fff !important; }
.dpi-17 { width: 100px !important; }
.dpi-18 { font-size: 12px !important; }
.dpi-19 { background: #092f5e !important; color: #fff !important; font-size: 0.8rem !important; }
.dpi-20 { padding: 0.1em 1em !important; background: #d3a630 !important; }
.dpi-21 { color: #febe54 !important; }
.dpi-22 { text-shadow: 1px 1px 0px #000, 2px 2px 0px #000, 3px 3px 0px #000, 4px 4px 4px rgba(0, 0, 0, 0.7) !important; color: #c40000 !important; }
.dpi-23 { font-size: 0.95rem !important; text-align: justify !important; }
.dpi-24 { background: #1158ce !important; text-align: center !important; margin-top: 1rem !important; width: 100% !important; }
.dpi-25 { width: 80px !important; }
.dpi-26 { width: 10% !important; background-color: #0a4ba5 !important; color: #fff !important; text-align: center !important; }
.dpi-27 { width: 20% !important; background-color: #0a4ba5 !important; color: #fff !important; text-align: center !important; }
.dpi-28 { width: 70% !important; background-color: #0a4ba5 !important; color: #fff !important; text-align: center !important; }
.dpi-29 { font-size: 1.2em !important; }
.dpi-30 { color: #0000f9 !important; }
.dpi-31 { color: #fff !important; text-decoration: none !important; }
.dpi-32 { padding: 0.25em !important; }
.dpi-33 { padding-top: 15px !important; width: 100% !important; }
.dpi-34 { color: #333 !important; text-decoration: none !important; }
.dpi-36 { max-width: 100% !important; }
.dpi-37 { color: red !important; }
.dpi-38 { background: #1158ce !important; text-align: center !important; width: 100% !important; }

/* ---- Banner title: size, spacing and position follow the screen width ----
   Every value changes smoothly from small phones (320px) to laptops (1366px) -
   no jumps between devices - and from 1366px up it is the original desktop look.
   320px: 16px text, line-height 1.3, title 12px from the left / 34px from the bottom
   1366px+: 32px text, line-height 1.15, 94px from the left / 60px from the bottom
   Written as strongly as typography.css's banner-title rule so it can override it. */
:root:not(#_t) body .pp-hero .caption-box:not(.right-bottom) {
  padding: 0 !important;
  left: clamp(12px, calc(12px + (100vw - 320px) * 0.0784), 122px) !important;
  bottom: clamp(34px, calc(34px + (100vw - 320px) * 0.0249), 78px) !important;
  max-width: min(760px, calc(68% + (100vw - 320px) * 0.3)) !important;
}
:root:not(#_t) body .pp-hero .caption-box :is(h1, h2) {
  font-size: clamp(1rem, calc(0.6875rem + 1.6vw), 2rem) !important;
  line-height: calc(1.15em + clamp(0px, (1366px - 100vw) * 0.0023, 2.4px)) !important;
  letter-spacing: calc(-0.1px + clamp(0px, (1366px - 100vw) * 0.000287, 0.3px)) !important;
  padding: clamp(5px, 1vw, 16px) clamp(10px, 1.8vw, 28px) !important;
  border-radius: clamp(6px, calc(4px + 0.3vw), 8px) !important;
}

/* Footer: "Maintained by" credit link */
html .footer-copy .footer-credit { color: #f2b233; }

/* Phones: paragraphs and list items set a little tighter (letter and word
   spacing), so justified lines no longer show big gaps between words.
   Zero-weight selector: any element that sets its own letter or word
   spacing keeps it. The header, menus, ticker and footer are not changed. */
@media (max-width: 767.98px) {
  :where(p, li):where(:not(.main-header *, .full-page-overlay *, .ticker *, .site-footer *, .stats-bar *, .divider-title)) {
    letter-spacing: -0.2px;
    word-spacing: -1px;
  }
}

/* Announcement ticker: the moving strip is as wide as its text (it was only as
   wide as the screen, so it moved a short way and jumped back). ticker-loop.js
   repeats the list so it scrolls in an endless loop. */
html .ticker-inner { width: max-content; }

/* Footer photo loads only when the visitor scrolls near the footer (see main.css "lzbg"). */
html.lzbg .site-footer:not(.bg-in) { background-image: none !important; }