/* --- CSS VARIABLES & RESET --- */
:root {
    --primary-maroon: #800000;
    --accent-gold: #D4AF37;
    --background-cream: #FFF9F0;
    --text-dark: #0b2c4d;
    --white: #ffffff;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f5f5f5;
}

a {
    text-decoration: none;
    color: inherit;
}

.site-header {
    /* border: 2px solid red; */
    height: fit-content;
}


.header-container {
    /* border: 1px solid red; */
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 1. TOP BAR --- */
.top-bar {
    background-color: var(--primary-maroon);
    color: var(--white);
    font-size: 13px;
    padding: 3px 0;
    border-bottom: 2px solid var(--accent-gold);
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-info a:hover,
.top-links a:hover {
    color: var(--accent-gold);
}

.contact-info i,
.top-links i {
    margin-right: 5px;
    color: var(--accent-gold);
}

.social-links {
    margin-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 15px;
}

.social-links a {
    margin-left: 8px;
}

.top-links {
    display: flex;
    gap: 20px;
}

/* --- 2. MAIN BRANDING AREA --- */
.main-branding {
    background-color: var(--background-cream);
    padding: 1px 0;
    text-align: center;
}

.branding-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.brand-side-img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Logo Image Properties */
.college-logo-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    display: block;

}

.college-code {
    font-size: 11px;
    font-weight: bold;
    color: var(--primary-maroon);
    margin-top: 2px;
    letter-spacing: 0.5px;
}

.brand-text {
    flex-grow: 1;
}

.college-title {
    font-size: 32px;
    color: var(--primary-maroon);
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.college-address {
    font-size: 16px;
    color: var(--text-dark);
    font-weight: 600;
    margin-top: 5px;
}

.affiliation-text {
    font-size: 14px;
    color: red;
    font-weight: bold;
    line-height: 15px;
    margin: 4px 0;
    text-transform: capitalize;
}

.university-title {
    font-size: 26px;
    color: var(--accent-gold);
    font-weight: 700;
    /* line-height: 1px; */
}

/* --- 3. NAVIGATION BAR --- */
.nav-bar {
    background-color: var(--text-dark);

    position: relative;
    line-height: 15px;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid var(--accent-gold);
    border-top: 2px solid var(--accent-gold);
}

.nav-links {
    display: flex;
    list-style: none;
    justify-content: center;
}

.nav-links>li {
    position: relative;
}

.nav-links>li>a {
    display: block;
    padding: 14px 14px;
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    transition: var(--transition);
}

/* AUTOMATIC DROPDOWN ICON (CSS se) */
.nav-links>li.dropdown>a::after {
    content: "\f107";
    /* Font Awesome Chevron Down Icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 6px;
    font-size: 12px;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Hover karne par arrow rotate hoga */
.nav-links>li.dropdown:hover>a::after {
    transform: rotate(180deg);
}

.nav-links>li>a:hover {
    background-color: var(--primary-maroon);
    color: var(--accent-gold);
}

/* Dropdown Menu styling */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    list-style: none;
    display: none;
    border-top: 3px solid var(--primary-maroon);
}

.dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    color: var(--text-dark);
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
    border-bottom: 1px solid #f0f0f0;
}

.dropdown-menu li a:hover {
    background-color: var(--background-cream);
    color: var(--primary-maroon);
    padding-left: 25px;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.mobile-menu-toggle {
    display: none;
    background: var(--primary-maroon);
    color: var(--white);
    border: none;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

/* --- RESPONSIVE MEDIA QUERIES (TABLET & MOBILE) --- */

@media (max-width: 1024px) {

    /* Tablet / Small Desktop View */
    .top-links,
    .social-links {
        display: none !important;
        /* Sirf Mobile No aur Gmail bachane ke liye baaki sab band */
    }

    .top-bar-content {
        justify-content: center;
    }

    .college-title {
        font-size: 24px;
    }

    .university-title {
        font-size: 20px;
    }

    .nav-links>li>a {
        padding: 14px 10px;
        font-size: 13px;
    }

    .college-logo-img {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 768px) {

    /* Mobile Phone View */
    .contact-info {

        justify-content: space-between;
        text-align: center;
        width: 100%;
    }

    .college-address {
        font-size: 12px;
        color: var(--text-dark);
        font-weight: 600;
        /* margin-top: 5px; */
    }

    .branding-content {
        /* flex-direction: column; */
        gap: 15px;
    }

    .college-title {
        font-size: 20px;
    }

    .university-title {
        font-size: 14px;
    }

    /* Mobile Menu Toggle */
    .mobile-menu-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .right-seal {
        display: none;
    }

    .nav-container {
        padding: 0;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: var(--text-dark);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links>li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-links>li>a {
        padding: 15px 20px;
    }

    /* Mobile Dropdown Menu adjust */
    .dropdown-menu {
        position: static;
        width: 100%;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.2);
    }

    .dropdown-menu li a {
        color: rgba(255, 255, 255, 0.8);
        padding-left: 35px;
    }
}

@media (max-width: 576px) {
    .college-title {
        font-size: 15px;
        margin-top: 8px;
    }

    .college-address {
        font-size: 10px;
    }

    .university-title {
        font-size: 11px;
    }

    .mail {
        display: none;
    }

    .contact {
        gap: 40px;
    }

    .affiliation-text {
        font-size: 8px;
        color: red;
        font-weight: bold;
        /* line-height: 15px; */
        margin-top: 0;
        text-transform: capitalize;
    }

}

/* ===========hero caruosel=============== */

.slider-section {
    width: 100%;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.slider-container {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.slider-wrapper {
    display: flex;
    width: 100%;
    /* opacity: 0; */
    transition: opacity 0.4s ease;
}

.slide {
    min-width: 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

.slide img {
    width: 100%;
    height: 65vh;
    object-fit: fill;
    display: block;
    background: #000;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.dot.active,
.dot:hover {
    background-color: #D4AF37;
    /* Gold accent color for active indicator */
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}


/* --- SLIDER RESPONSIVE BREAKPOINTS --- */

@media (max-width: 768px) {
    .slide img {
        /* Mobile aur tabs par height auto-adjust hokar aspect ratio maintain karegi */
        height: 40vh;
        width: 100%;
    }

    .dot {
        width: 10px;
        height: 10px;
    }

    .slider-dots {
        bottom: 12px;
    }
}

/* ==================About section=============== */
/* --- SIMPLE & ATTRACTIVE BRAND-THEME ABOUT SECTION --- */

.simple-about-section {
    padding: 80px 0;
    /* Rich cream base background setup from your :root */
    background-color: var(--background-cream);
    width: 100%;
    position: relative;
}

.sa-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2-Column Responsive Layout Grid */
.sa-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    /* Balanced layout ratio */
    gap: 50px;
    align-items: center;
}

/* --- Left Column: Typography Layout --- */
.sa-header {
    margin-bottom: 25px;
}

.sa-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold);
    /* Premium Gold Accent Tag */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 5px;
}

.sa-main-title {
    font-size: 38px;
    color: var(--text-dark);
    /* Deep sophisticated blue-dark text color */
    font-weight: 800;
    letter-spacing: -0.5px;
}

.sa-maroon-line {
    width: 60px;
    height: 3.5px;
    background-color: var(--primary-maroon);
    /* Primary Maroon line element */
    margin-top: 12px;
    border-radius: 2px;
}

/* 🌟 Perfectly Justified Paragraph Text Blocks */
.sa-justified-text {
    font-size: 15.5px;
    color: #4A5568;
    /* Clean readable dark slate color */
    line-height: 1.85;
    margin-bottom: 17px;
    text-align: justify;
    text-justify: inter-word;
}

.sa-justified-text strong {
    color: var(--primary-maroon);
    /* Bold text highlight with Maroon Theme */
    font-weight: 700;
}

/* --- Right Column: Image Frame Card Setup --- */
.sa-graphic-block {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sa-image-card {
    background: var(--white);
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 15px 45px rgba(128, 0, 0, 0.05);
    /* Gentle maroon glow shadow */
    border: 1px solid rgba(214, 175, 55, 0.2);
    /* Soft Gold border accent outline */
    width: 100%;
    max-width: 440px;
    transition: var(--transition);
}

.sa-image-card:hover {
    transform: translateY(-5px);
    /* Interactive lift response */
    box-shadow: 0 20px 50px rgba(128, 0, 0, 0.08);
}

.sa-frame {
    width: 100%;
    height: 380px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
}

.sa-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bottom Feature Strip on Image Card Container */
.sa-info-strip {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid rgba(128, 0, 0, 0.06);
}

.sa-strip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-maroon);
    /* Maroon Theme content titles */
}

.sa-strip-item i {
    color: var(--accent-gold);
    /* Gold accents for icons */
    font-size: 14px;
}


/* --- SEAMLESS MOBILE ADAPTABILITY LAYOUT --- */

@media (max-width: 992px) {
    .sa-grid {
        grid-template-columns: 1fr;
        /* Switch to single column stack containers */
        gap: 40px;
    }

    .sa-main-title {
        font-size: 32px;
    }

    .sa-image-card {
        max-width: 100%;
    }

    .sa-frame {
        height: 320px;
    }
}

@media (max-width: 576px) {
    .simple-about-section {
        padding: 50px 0;
    }

    .sa-main-title {
        font-size: 26px;
    }

    .sa-justified-text {
        font-size: 14.5px;
        line-height: 1.75;
    }

    .sa-frame {
        height: 240px;
    }

    .sa-info-strip {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        padding-left: 10px;
    }
}


/* ================Courses=================== */

/* --- PREMIUM COURSES SECTION STYLING --- */

.courses-section {
    padding: 50px 0;
    background-color: var(--white);
    /* White background to pop out from the cream about section */
    width: 100%;
}

.courses-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Setup */
.courses-header {
    text-align: center;
    margin-bottom: 60px;
}

.courses-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold);
    /* Gold Accent */
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 6px;
}

.courses-main-title {
    font-size: 38px;
    color: var(--text-dark);
    /* Dark Text Blue */
    font-weight: 800;
    letter-spacing: -0.5px;
}

.courses-maroon-line {
    width: 60px;
    height: 3.5px;
    background-color: var(--primary-maroon);
    /* Maroon Identity Strip */
    margin: 12px auto 0;
    border-radius: 2px;
}

/* Grid Layout (3 Columns for 3 Courses) */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}

/* Course Card Structure */
.course-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(11, 44, 77, 0.05);
    /* Soft premium grey-blue shadow */
    border: 1px solid rgba(11, 44, 77, 0.06);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

/* Gentle top accent line on hover */
.course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-maroon);
    transform: scaleX(0);
    transition: var(--transition);
    transform-origin: left;
}

.course-card:hover::before {
    transform: scaleX(1);
}

.course-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(128, 0, 0, 0.08);
    /* Glow maroon shade on hover */
    border-color: rgba(128, 0, 0, 0.15);
}

/* Icon Configurations */
.course-icon-box {
    width: 60px;
    height: 60px;
    background: rgba(128, 0, 0, 0.06);
    /* Light Maroon transparent bg */
    color: var(--primary-maroon);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 25px;
    transition: var(--transition);
}

.course-card:hover .course-icon-box {
    background: var(--primary-maroon);
    color: var(--white);
}

.course-title {
    font-size: 21px;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 15px;
}

.course-desc {
    font-size: 14.5px;
    color: #556270;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
    /* Aligns meta strip perfectly at bottom if descriptions have uneven heights */
}

/* Bottom Strip (Students & Duration) */
.course-meta-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #f0f4f8;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #718096;
}

.meta-item i {
    color: var(--accent-gold);
    /* Icons are golden styled */
    font-size: 14px;
}

/* Special styling for newly added B.Ed program card to make it look attractive */
.highlighted-card {
    border-bottom: 3px solid var(--accent-gold);
}


/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 992px) {
    .courses-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Columns on Tablets */
        gap: 25px;
    }

    .courses-main-title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {
    .courses-grid {
        grid-template-columns: 1fr;
        /* 1 Column on Mobile screens */
    }

    .courses-section {
        padding: 60px 0;
    }

    .courses-main-title {
        font-size: 26px;
    }

    .course-card {
        padding: 30px 20px;
    }
}

/* --- ADMISSION BUTTON INSIDE COURSE CARD --- */

.course-btn-admission {
    margin-top: 25px;
    width: 100%;
    background-color: var(--white);
    border: 1px solid var(--primary-maroon);
    color: var(--primary-maroon);
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition);
}

.course-card:hover .course-btn-admission {
    background-color: var(--primary-maroon);
    color: var(--white);
    box-shadow: 0 8px 20px rgba(128, 0, 0, 0.15);
}

.course-btn-admission i {
    font-size: 12px;
    transition: var(--transition);
}

.course-btn-admission:hover i {
    transform: translateX(4px);
}


/* --- ULTIMATE ADMISSION MODAL OVERLAY STYLING --- */

.admission-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 44, 77, 0.6);
    /* Transparent Dark Text Blue backdrop */
    backdrop-filter: blur(5px);
    /* Premium modern blur effect */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Open state trigger class */
.admission-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Modal Core Box window */
.admission-modal-window {
    background-color: var(--white);
    width: 100%;
    max-width: 580px;
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(214, 175, 55, 0.3);
    /* Subtle gold border frame markup */
    overflow: hidden;
    transform: translateY(-30px);
    transition: transform 0.3s ease;
}

.admission-modal-overlay.active .admission-modal-window {
    transform: translateY(0);
}

/* Modal Header Content */
.am-header {
    background-color: var(--primary-maroon);
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.am-header-title h3 {
    color: var(--white);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.am-header-title p {
    color: var(--accent-gold);
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

.am-close-btn {
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    transition: var(--transition);
}

.am-close-btn:hover {
    opacity: 1;
    color: var(--accent-gold);
}

/* Modal Form Fields Context Layout */
.am-form-body {
    padding: 30px;
    background-color: var(--background-cream);
    /* Cozy smooth background theme matched */
}

.am-form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.am-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.am-form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

/* Premium Icon Embedded Inputs */
.am-input-wrapper {
    position: relative;
    width: 100%;
}

.am-input-wrapper i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0aec0;
    font-size: 14px;
}

.am-input-wrapper input,
.am-form-body textarea {
    width: 100%;
    padding: 12px 15px 12px 42px;
    border: 1px solid rgba(11, 44, 77, 0.15);
    background-color: var(--white);
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--text-dark);
    outline: none;
    transition: var(--transition);
}

.am-form-body textarea {
    padding-left: 15px;
    /* Textarea does not require absolute layout tracking icons */
}

.am-input-wrapper input:focus,
.am-form-body textarea:focus {
    border-color: var(--primary-maroon);
    box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.1);
}

/* Action Submit Trigger Styling */
.am-action-wrapper {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.am-submit-btn {
    background-color: var(--primary-maroon);
    color: var(--white);
    border: 1px solid var(--primary-maroon);
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;

    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--transition);
}

.am-submit-btn:hover {
    background-color: #600000;
    border-color: #600000;
    box-shadow: 0 8px 25px rgba(128, 0, 0, 0.2);
}


/* --- RESPONSIVE MODAL COMPONENT VIEWPORTS --- */

@media (max-width: 768px) {
    .am-form-row {
        grid-template-columns: 1fr;
        /* Stack mobile forms rows vertically straight */
        gap: 0;
    }

    .admission-modal-window {
        max-width: 90%;
    }

    .am-header {
        padding: 20px;
    }

    .am-form-body {
        padding: 20px;
    }
}


/* ================================================== */
/* --- MINIMALIST CORPORATE INFRASTRUCTURE SECTION --- */

.clean-infra-section {
    padding: 50px 0;
    background-color: var(--background-cream);
    /* Smooth elegant theme contrast backdrop */
    width: 100%;
}

.ci-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Core Split Engine */
.ci-layout-engine {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    /* Clean proportional split */
    gap: 60px;
    align-items: center;
}

/* --- Left Column: Minimal Header & Rows --- */
.ci-header {
    margin-bottom: 40px;
}

.ci-tag {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-gold);
    /* Gold Accent */
    letter-spacing: 2px;
    display: block;
    margin-bottom: 6px;
}

.ci-title {
    font-size: 38px;
    color: var(--text-dark);
    /* Deep Blue-Dark text */
    font-weight: 800;
}

.ci-line-decor {
    width: 50px;
    height: 3px;
    background-color: var(--primary-maroon);
    /* Maroon Bar */
    margin-top: 10px;
    border-radius: 2px;
}

/* Feature Rows List System */
.ci-feature-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ci-row-item {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(128, 0, 0, 0.08);
    /* Clean thin line separation */
}

.ci-row-item:last-child {
    border-bottom: none;
    /* Removes bottom border line from the last row item */
    padding-bottom: 0;
}

/* Elegant numbering instead of messy boxes/icons */
.ci-num-indicator {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-maroon);
    font-family: monospace, sans-serif;
    padding-top: 2px;
}

.ci-row-body h3 {
    font-size: 18px;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 8px;
}

/* 🌟 PERFECT JUSTIFIED PROSE */
.ci-justified-p {
    font-size: 14.5px;
    color: #4A5568;
    line-height: 1.7;
    margin-bottom: 0;
    text-align: justify;
    text-justify: inter-word;
}

/* --- Right Column: Full-View Fixed Image Canvas --- */
.ci-graphic-side {
    width: 100%;
}

.ci-image-canvas {
    width: 100%;
    height: 520px;
    background-color: var(--white);
    border-radius: 12px;
    overflow: hidden;
    padding: 10px;
    box-shadow: 0 10px 35px rgba(11, 44, 77, 0.04);
    border: 1px solid rgba(128, 0, 0, 0.05);

}



/* 🌟 Image Puri Show Hogi (Object-Fit: Contain) Without Any Cropping */
.ci-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* --- RESPONSIVE ADAPTABILITY ENGINE --- */

@media (max-width: 992px) {
    .ci-layout-engine {
        grid-template-columns: 1fr;
        /* Stacks to single column safely */
        gap: 50px;
    }

    .ci-image-canvas {
        height: 380px;
        /* Adapts height smoothly on medium views */
    }

    .ci-title {
        font-size: 32px;
    }
}

@media (max-width: 576px) {
    .clean-infra-section {
        padding: 60px 0;
    }

    .ci-title {
        font-size: 26px;
    }

    .ci-image-canvas {
        height: 260px;
        padding: 6px;
    }

    .ci-row-item {
        gap: 15px;
        padding-bottom: 20px;
    }

    .ci-num-indicator {
        font-size: 16px;
    }

    .ci-row-body h3 {
        font-size: 16px;
    }

    .ci-justified-p {
        font-size: 14px;
        line-height: 1.6;
    }
}


/* ================= testimonials============== */

.testimonials-section {
    padding: 50px 0;
    background-color: #ececea;
    width: 100%;
    overflow: hidden;
}

.tm-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

.tm-header {
    text-align: center;
    margin-bottom: 55px;
}

.tm-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 6px;
}

.tm-main-title {
    font-size: 38px;
    color: var(--text-dark);
    font-weight: 800;
    letter-spacing: -0.5px;
}

.tm-maroon-line {
    width: 60px;
    height: 3.5px;
    background-color: var(--primary-maroon);
    margin: 12px auto 0;
    border-radius: 2px;
}

.tm-slider-viewport {
    width: 100%;
    overflow: hidden;
    padding: 15px 5px;
    position: relative;
}

.tm-slider-track {
    display: flex;
    gap: 30px;
    width: max-content;
    will-change: transform;
}

/* Smooth active sliding transitions managed via JavaScript inline injections */
.tm-slider-track.smooth-transition {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.tm-card {
    background: var(--white);
    padding: 35px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(11, 44, 77, 0.04);
    border: 1px solid rgba(11, 44, 77, 0.05);
    /* Calculate precise fixed width according to screens */
    width: 360px;
    /* Desktop standard card sizing */
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tm-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(128, 0, 0, 0.08);
    border-color: rgba(214, 175, 55, 0.25);
}

.tm-quote-icon {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 32px;
    color: rgba(128, 0, 0, 0.07);
}

.tm-stars {
    color: var(--accent-gold);
    font-size: 13px;
    margin-bottom: 18px;
}

.tm-review {
    font-size: 14.5px;
    color: #556270;
    line-height: 1.7;
    margin-bottom: 25px;
    text-align: justify;
    text-justify: inter-word;
}

.tm-profile-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid #f0f4f8;
    padding-top: 18px;
}

.tm-avatar {
    width: 46px;
    height: 46px;
    background: rgba(128, 0, 0, 0.06);
    color: var(--primary-maroon);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.tm-details h4 {
    font-size: 15.5px;
    color: var(--text-dark);
    font-weight: 700;
    margin: 0 0 2px 0;
}

.tm-details p {
    font-size: 12.5px;
    color: #718096;
    margin: 0;
    font-weight: 500;
}

/* Pagination Dots */
.tm-dots-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.tm-dot {
    width: 8px;
    height: 8px;
    background-color: rgba(11, 44, 77, 0.2);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.tm-dot.active {
    background-color: var(--primary-maroon);
    width: 24px;
    border-radius: 4px;
}

/* ==========================================================================
   RESPONSIVE LAYOUT CONFIGURATIONS
   ========================================================================== */
@media (max-width: 1024px) {

    /* 🌟 TABLET VIEW: Exact 2 Cards Dynamic calculation */
    .tm-card {
        width: 320px;
    }

    .tm-slider-track {
        gap: 30px;
    }

    .tm-main-title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {

    /* 🌟 MOBILE VIEW: Exact 1 Card Full Viewport tracking width */
    .tm-card {
        width: 280px;
    }

    .tm-slider-track {
        gap: 20px;
    }

    .testimonials-section {
        padding: 60px 0;
    }

    .tm-main-title {
        font-size: 26px;
    }
}



/* =====================contact ssection============== */

/* --- PREMIUM CONTACT SECTION STYLING --- */

.contact-section {
    padding: 50px 0;
    background-color: #fff;
    /* Section is white, Testimonial was cream */
    width: 100%;
}

.contact-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.contact-header {
    text-align: center;
    margin-bottom: 60px;
}

.contact-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
}

.contact-main-title {
    font-size: 38px;
    color: var(--text-dark);
    font-weight: 800;
}

.contact-maroon-line {
    width: 60px;
    height: 3.5px;
    background-color: var(--primary-maroon);
    margin: 12px auto 0;
}

/* Layout Grid */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: flex-start;
}

/* Form Styling */
.contact-form-card {
    background: var(--background-cream);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(128, 0, 0, 0.05);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(11, 44, 77, 0.1);
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-maroon);
    box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.05);
}

.contact-submit-btn {
    background-color: var(--primary-maroon);
    color: var(--white);
    border: none;
    padding: 15px 35px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition);
}

.contact-submit-btn:hover {
    background-color: #600000;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(128, 0, 0, 0.2);
}

/* Info Panel Styling */
.info-details {
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.info-icon {
    width: 50px;
    height: 50px;
    background: var(--background-cream);
    color: var(--primary-maroon);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.info-text h4 {
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.info-text p {
    color: #556270;
    font-size: 15px;
    line-height: 1.5;
}

.map-container {
    width: 100%;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    border: 8px solid var(--background-cream);
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .contact-form-card {
        order: 2;
    }

    .contact-info-panel {
        order: 1;
    }
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


/* ======================footer================== */


.premium-footer {
    width: 100%;
    background-color: #0B2C4D;
    /* Deep Corporate Navy Base */
    color: #E2E8F0;
    font-family: system-ui, -apple-system, sans-serif;
    position: relative;
    overflow: hidden;
}

.footer-container {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 1. Top Decorative Academic Ribbon */
.footer-top-ribbon {

    border-bottom: 3px solid var(--accent-gold, #D4AF37);

}

.ribbon-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ribbon-container span {
    font-size: 13.5px;
    font-weight: 700;
    color: #FFF9F0;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ribbon-container span i {
    color: var(--accent-gold, #D4AF37);
}

/* 2. Main Footer Layout Body */
.footer-main-engine {
    padding: 32px 0 28px 0;
}

.footer-grid-layout {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.9fr 1fr;
    gap: 40px;
}

/* Column Elements Styling */
.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-logo-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.footer-logo {
    width: 65px;
    height: 65px;
    object-fit: contain;
    background: #FFF9F0;
    padding: 4px;
    border-radius: 50%;
    border: 2px solid var(--accent-gold, #D4AF37);
}

.brand-text-block h3 {
    font-size: 18px;
    color: #FFF9F0;
    font-weight: 800;
    margin: 0 0 2px 0;
}

.brand-text-block p {
    font-size: 16px;
    color: #94A3B8;
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.footer-brand-desc {
    font-size: 14px;
    line-height: 1.2;
    color: #94A3B8;
    margin-bottom: 25px;
    text-align: justify;
}

/* Premium Glassmorphic Icons Layout */
.footer-social-links {
    display: flex;
    gap: 12px;
}

.footer-social-links a {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    color: #FFF9F0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.footer-social-links a:hover {
    background-color: var(--primary-maroon, #800000);
    border-color: var(--accent-gold, #D4AF37);
    color: #FFF9F0;
    transform: translateY(-3px);
}

/* Navigation Links Engine Styling */
.footer-col-title {
    font-size: 18px;
    color: #FFF9F0;
    font-weight: 700;
    margin-bottom: 12px;
}

.footer-title-line {
    width: 35px;
    height: 3px;
    background-color: var(--accent-gold, #D4AF37);
    border-radius: 2px;
    margin-bottom: 25px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links-list li a {
    color: #94A3B8;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.footer-links-list li a i {
    font-size: 11px;
    opacity: 0.7;
    transition: transform 0.25s ease;
}

.footer-links-list li a:hover {
    color: #FFF9F0;
}

.footer-links-list li a:hover i {
    transform: translateX(4px);
    color: var(--accent-gold, #D4AF37);
}

/* Contact Grid Content Module Rows */
.footer-contact-cards {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-contact-row {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.fc-icon {
    width: 34px;
    height: 34px;
    background: rgba(214, 175, 55, 0.1);
    color: var(--accent-gold, #D4AF37);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}

.footer-contact-row p {
    font-size: 17px;
    line-height: 1.5;
    color: #94A3B8;
    margin: 0;
}

.text-lowercase {
    text-transform: lowercase;
}

/* 3. Bottom Minimal Copyright Row Layout */
.footer-copyright-bar {
    background-color: #061B30;
    /* Darker Sub-navy Layer */
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.bottom-flex-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-copyright-bar p {
    font-size: 13.5px;
    color: #64748B;
    margin: 0;
    font-weight: 500;
}

.developer-tag {
    color: #94A3B8 !important;
}

.developer-tag a {
    color: #D4AF37;
}

/* ==========================================================================
   STRICT REQUIREMENT COMPLIANCE: BULLETPROOF MOBILE RESPONSIEVNESS
   ========================================================================== */
@media (max-width: 1024px) {
    .footer-grid-layout {
        grid-template-columns: 1fr 1fr;
        /* 2 Column Configuration Grid on Tablets */
        gap: 40px;
    }

    .footer-main-engine {
        padding: 60px 0 40px 0;
    }
}

@media (max-width: 680px) {
    .footer-grid-layout {
        grid-template-columns: 1fr;
        /* 1 Column Stack Setup Configuration on Mobiles */
        gap: 35px;
    }

    .ribbon-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .bottom-flex-row {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

    .footer-main-engine {
        padding: 50px 0 30px 0;
    }
}

@media (max-width:576px) {
    .developer-tag {
        color: #94A3B8 !important;
        font-size: 12px !important;
    }

    .all-rights {
        font-size: 12px !important;
    }

}


/* ==========================================================================
   PREMIUM BREADCRUMB
   ========================================================================== */
.premium-breadcrumb-section {
    width: 100%;
    background-color: #dddcda;
    /* Premium Cream Background */
    padding: 50px 0;
    /* Balanced vertical compact hierarchy padding */
    border-bottom: 1px solid rgba(128, 0, 0, 0.06);
    /* Ultra light maroon split line */
    text-align: center;
    position: relative;
}

.pbc-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Page Main Accent Title */
.pbc-page-title {
    font-size: 34px;
    color: var(--text-dark, #0B2C4D);
    /* Corporate Blue */
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 12px 0;
    text-transform: uppercase;
}

/* Navigation Trail Container */
.pbc-navigation-trail {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pbc-list {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: 12px;
    /* Smooth linear spacing gap */
}

/* Individual Link Element */
.pbc-item {
    font-size: 14.5px;
    font-weight: 600;
    color: #64748B;
    /* Neutral gray muted look */
    display: flex;
    align-items: center;
}

.pbc-link {
    color: #556270;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.pbc-home-icon {
    font-size: 13px;
    color: var(--primary-maroon, #800000);
    /* Maroon Home Accent Indicator */
}

/* Hover State Mechanics */
.pbc-link:hover {
    color: var(--primary-maroon, #800000);
    transform: translateY(-1px);
}

/* Separator Icon Element styling */
.pbc-separator {
    font-size: 11px;
    color: var(--accent-gold, #D4AF37);
    /* Gold colored matching chevron dividers */
    display: flex;
    align-items: center;
    opacity: 0.8;
}

/* Current Active Page State styling */
.pbc-active-page {
    color: var(--primary-maroon, #800000);
    /* Highlighted Maroon color for active state */
    font-weight: 700;
}

/* ==========================================================================
   MOBILE & TABLET VIEWPORT OPTIMIZATIONS
   ========================================================================== */
@media (max-width: 768px) {
    .premium-breadcrumb-section {
        padding: 35px 0;
        /* Compact structural size tracking on mobile screens */
    }

    .pbc-page-title {
        font-size: 26px;
        /* Scaled down typography safely */
        margin-bottom: 8px;
    }

    .pbc-item {
        font-size: 13.5px;
    }
}

/* ============= vision page============ */
/* ==========================================================================
   PREMIUM VISION & MISSION LAYOUT ENGINE (ANTI-OVERLAP GRID)
   ========================================================================== */

.clean-infra-section {
    padding: 90px 0;
    width: 100%;
}

.ci-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Structural Split Master Grid */
.ci-layout-engine {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    /* Left side content heavy, right side visual balance */
    gap: 50px;
    align-items: center;
    /* Vertical centering avoids text jumping or layout breaking */
}

/* Header Content Architecture */
.ci-header {
    margin-bottom: 40px;
}

.ci-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold, #D4AF37);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
}

.ci-title {
    font-size: 36px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin-top: 5px;
}

.ci-line-decor {
    width: 60px;
    height: 3.5px;
    background-color: var(--primary-maroon, #800000);
    margin-top: 12px;
    border-radius: 2px;
}

/* Bento Stack Column Lists */
.ci-feature-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Individual Card Blocks with standalone drop shadow */
.ci-row-item {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid rgba(11, 44, 77, 0.05);
    box-shadow: 0 10px 30px rgba(11, 44, 77, 0.03);
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.ci-row-item:hover {
    transform: translateY(-3px);
    border-color: rgba(128, 0, 0, 0.1);
    box-shadow: 0 15px 35px rgba(128, 0, 0, 0.05);
}

/* Rounded Icon Frame */
.ci-num-indicator {
    width: 50px;
    height: 50px;
    background: var(--background-cream, #FFF9F0);
    color: var(--primary-maroon, #800000);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    border: 1px solid rgba(214, 175, 55, 0.15);
}

/* Text Hierarchy Inside Cards */
.ci-row-body h3 {
    font-size: 19px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 700;
    margin: 0 0 8px 0;
}

.ci-justified-p {
    color: #556270;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
    /* Text stays clean and sharp */
}

.ci-justified-p strong {
    color: var(--primary-maroon, #800000);
}

/* Right Side Graphic Canvas Panel */
.ci-graphic-side {

    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}



/* STRICT USER REQUIREMENT: Full visibility of image without cropping */
.ci-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: var(--background-cream, #FFF9F0);
}

/* ==========================================================================
   STRICT MOBILE RESPONSIVENESS HACKS
   ========================================================================== */
@media (max-width: 992px) {
    .ci-layout-engine {
        grid-template-columns: 1fr;
        /* Stack layout on tablets */
        gap: 40px;
    }

    .ci-image-canvas {
        height: 400px;
        /* Scaled down frame safely */
    }
}

@media (max-width: 640px) {
    .clean-infra-section {
        padding: 50px 0;
    }

    .ci-row-item {
        padding: 20px;
        flex-direction: column;
        /* Icon stacks on top in small devices */
        text-align: center;
    }

    .ci-num-indicator {
        margin: 0 auto;
    }

    .ci-justified-p {
        text-align: center;
        /* Center typography layout for pure mobile looks */
    }

    .ci-image-canvas {
        height: 280px;
    }
}

/* ===============chairmen section================ */
/* ==========================================================================
   PREMIUM CHAIRMAN'S MESSAGE SECTION STYLING (ANTI-OVERLAP GRID)
   ========================================================================== */

.chairman-section {
    padding: 90px 0;
    background-color: var(--white, #ffffff);
    width: 100%;
}

.chairman-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Master Layout Grid Distribution */
.chairman-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    /* Visual profile weight on left, readable content focus on right */
    gap: 60px;
    align-items: flex-start;
}

/* Left Side Visual Frame Elements */
.chairman-visual-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.chairman-image-canvas {
    width: 100%;
    height: 380px;
    /* Precise aspect frame */
    border-radius: 20px;
    overflow: hidden;
    border: 6px solid var(--background-cream, #FFF9F0);
    box-shadow: 0 15px 35px rgba(11, 44, 77, 0.05);
    background-color: var(--background-cream, #FFF9F0);
}

/* STRICT USER REQUIREMENT COMPLIANCE: Image fully visible, no cropping allowed */
.chairman-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Prevents any distorted stretching or layout clipping issues */
    display: block;
}

/* Chairperson Meta Title Identity Tag Box */
.chairman-meta-card {
    background-color: #FFF9F0;
    /* Cream Box Base */
    padding: 22px 25px;
    border-radius: 16px;
    border-left: 4px solid var(--primary-maroon, #800000);
    box-shadow: 0 10px 25px rgba(11, 44, 77, 0.03);
    text-align: center;
}

.chairman-meta-card h4 {
    font-size: 19px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0 0 4px 0;
}

.cm-designation {
    font-size: 13.5px;
    color: var(--primary-maroon, #800000);
    font-weight: 700;
    margin: 0 0 2px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cm-college {
    font-size: 13px;
    color: #64748B;
    margin: 0;
    font-weight: 500;
}

/* Right Side Core Typography Engine */
.chairman-header {
    margin-bottom: 35px;
}

.chairman-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold, #D4AF37);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
}

.chairman-title {
    font-size: 36px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin-top: 5px;
}

.chairman-maroon-line {
    width: 60px;
    height: 3.5px;
    background-color: var(--primary-maroon, #800000);
    margin-top: 12px;
    border-radius: 2px;
}

/* Speech Box Container Module with Shadow Depth */
.chairman-speech-bubble {
    background: #ffffff;
    border: 1px solid rgba(11, 44, 77, 0.04);
    padding: 10px 15px 10px 0;
    /* Anti-overlap side breathing padding space */
    position: relative;
}

.quote-icon-top {
    font-size: 38px;
    color: rgba(128, 0, 0, 0.08);
    /* Minimal soft overlay watermarked giant maroon quote icon */
    line-height: 1;
    margin-bottom: 10px;
}

.chairman-para {
    font-size: 15.5px;
    line-height: 1.7;
    color: #4A5568;
    margin-bottom: 20px;
    text-align: justify;
}

.chairman-para strong {
    color: var(--primary-maroon, #800000);
}

/* Signature Verification Design Block */
.chairman-signature-block {
    margin-top: 35px;
    display: inline-block;
}

.sig-line {
    width: 120px;
    height: 1px;
    background-color: #CBD5E1;
    margin-bottom: 10px;
}

.sig-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark, #0B2C4D);
    margin: 0;
}

.sig-title {
    font-size: 13px;
    color: #64748B;
    margin: 0;
}

/* ==========================================================================
   MOBILE & TABLET VIEWPORTS HARDWARE SCALE DOWN SAFETY RULES
   ========================================================================== */
@media (max-width: 992px) {
    .chairman-grid {
        grid-template-columns: 1fr;
        /* Single column stack grid allocation */
        gap: 40px;
    }

    .chairman-image-canvas {
        max-width: 380px;
        /* Avoid stretched massive dimension problems on layout scaling */
        margin: 0 auto;
    }

    .chairman-meta-card {
        max-width: 380px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .chairman-section {
        padding: 50px 0;
    }

    .chairman-title {
        font-size: 28px;
    }

    .chairman-speech-bubble {
        padding: 10px 0;
    }

    .chairman-para {
        font-size: 14.5px;
        text-align: center;
        /* Centered content reads beautifully on narrow layouts */
    }

    .chairman-header {
        text-align: center;
    }

    .chairman-maroon-line {
        margin: 12px auto 0;
    }

    .chairman-signature-block {
        display: block;
        text-align: center;
    }

    .sig-line {
        margin: 0 auto 10px;
    }
}


/* ==============BA page================= */


.course-detail-section {
    padding: 80px 0;
    background-color: #ffffff;
    width: 100%;
}

.cd-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Master Grid Config */
.cd-main-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    /* Left textual deep view, right floating bento sidebar */
    gap: 50px;
    align-items: flex-start;
}

/* Left Side Content Formatting */
.cd-header {
    margin-bottom: 30px;
}

.cd-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold, #D4AF37);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
}

.cd-title {
    font-size: 34px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin-top: 5px;
}

.cd-maroon-line {
    width: 60px;
    height: 3.5px;
    background-color: var(--primary-maroon, #800000);
    margin-top: 12px;
    border-radius: 2px;
}

.cd-description-p {
    font-size: 16px;
    line-height: 1.7;
    color: #4A5568;
    text-align: justify;
    margin-bottom: 35px;
}

.cd-description-p strong {
    color: var(--primary-maroon, #800000);
}

.cd-sub-heading {
    font-size: 20px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 700;
    margin: 30px 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cd-sub-heading i {
    color: var(--primary-maroon, #800000);
    font-size: 18px;
}

/* Subject Grid Badges Wrapper */
.cd-subject-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Balanced column distribution */
    gap: 15px;
    margin-bottom: 35px;
}

.subject-tag-card {
    background: var(--background-cream, #FFF9F0);
    border: 1px solid rgba(128, 0, 0, 0.05);
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14.5px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.subject-tag-card i {
    color: var(--primary-maroon, #800000);
    font-size: 13px;
}

.subject-tag-card:hover {
    transform: translateY(-2px);
    background: #ffffff;
    border-color: var(--accent-gold, #D4AF37);
    box-shadow: 0 8px 20px rgba(214, 175, 55, 0.08);
}

/* Benefits Stack Structure */
.cd-benefits-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.benefit-row {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.benefit-icon {
    font-size: 18px;
    color: var(--primary-maroon, #800000);
    margin-top: 2px;
}

.benefit-text h4 {
    font-size: 16.5px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 700;
    margin: 0 0 4px 0;
}

.benefit-text p {
    font-size: 14.5px;
    line-height: 1.5;
    color: #556270;
    margin: 0;
}

/* Right Side Bento Floating Box Styling */
.jobs-bento-box {
    background: var(--background-cream, #FFF9F0);
    border: 1px solid rgba(11, 44, 77, 0.05);
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 15px 35px rgba(11, 44, 77, 0.03);
    position: sticky;
    top: 30px;
    /* Floats smoothly as user scrolls text on left */
}

.jbb-header h3 {
    font-size: 19px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0 0 6px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.jbb-header h3 i {
    color: var(--primary-maroon, #800000);
}

.jbb-header p {
    font-size: 14px;
    color: #64748B;
    line-height: 1.4;
    margin: 0 0 25px 0;
}

.job-profiles-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 30px;
}

.job-card-item {
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(11, 44, 77, 0.04);
    box-shadow: 0 5px 15px rgba(11, 44, 77, 0.01);
}

.jci-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.jci-title-row h5 {
    font-size: 15px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 700;
    margin: 0;
}

/* Badge Systems */
.badge-gold,
.badge-maroon,
.badge-blue,
.badge-cream {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.badge-gold {
    background: #FEF3C7;
    color: #D97706;
}

.badge-maroon {
    background: #FEE2E2;
    color: #991B1B;
}

.badge-blue {
    background: #E0F2FE;
    color: #0369A1;
}

.badge-cream {
    background: #FFF9F0;
    color: #B45309;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.job-card-item p {
    font-size: 13.5px;
    line-height: 1.4;
    color: #556270;
    margin: 0;
}

/* Action Floating Trigger Button Styling */
.cd-apply-trigger-btn {
    display: flex;
    width: 100%;
    background: var(--primary-maroon, #800000);
    color: #ffffff;
    text-decoration: none;
    padding: 16px;
    border-radius: 12px;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 25px rgba(128, 0, 0, 0.15);
    transition: all 0.25s ease;
}

.cd-apply-trigger-btn:hover {
    background: #600000;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(128, 0, 0, 0.25);
}

/* ==========================================================================
   STRICT MOBILE INTERFACES DEFENSE
   ========================================================================== */
@media (max-width: 992px) {
    .cd-main-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cd-subject-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jobs-bento-box {
        position: static;
        /* Removes fixed position locking safe for long mobile views */
    }
}

@media (max-width: 640px) {
    .course-detail-section {
        padding: 50px 0;
    }

    .cd-title {
        font-size: 26px;
    }

    .cd-subject-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .jci-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ============faculty and staff page============ */

/* ==========================================================================
   PREMIUM STAFF DIRECTORY ARCHITECTURE (ANTI-OVERLAP CARD GRID)
   ========================================================================== */

.staff-directory-section {
    padding: 80px 0;
    background-color: #f1efef;
    width: 100%;
}

.sd-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Department Block Separation Container */
.sd-dept-block {
    margin-bottom: 60px;
}

.sd-dept-block:last-child {
    margin-bottom: 0;
}

/* Department Layout Title Row Headers */
.sd-dept-header {
    margin-bottom: 30px;
}

.sd-dept-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.sd-dept-icon {
    width: 44px;
    height: 44px;
    background: var(--background-cream, #FFF9F0);
    color: var(--primary-maroon, #800000);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid rgba(128, 0, 0, 0.05);
}

.sd-dept-header h3 {
    font-size: 22px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0;
}

.sd-dept-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, var(--primary-maroon, #800000) 80px, rgba(11, 44, 77, 0.06) 80px);
}

/* Three Column Row Faculty Matrix Grid */
.sd-staff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Clean desktop split matrix */
    gap: 30px;
}

/* Premium Standalone Individual Profile Card Modules */
.staff-profile-card {
    background: #ffffff;
    border: 1px solid rgba(11, 44, 77, 0.05);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(11, 44, 77, 0.09);
    display: flex;
    gap: 20px;
    align-items: center;
    /* Dynamic row element baseline balancing */
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    border-left: 4px solid var(--primary-maroon, #800000);
    /* Unique branding left indicator border line */
}

.staff-profile-card:hover {
    transform: translateY(-4px);
    border-color: rgba(214, 175, 55, 0.2);
    box-shadow: 0 15px 35px rgba(128, 0, 0, 0.05);
}

/* Strict View Protection Image Canvas Box */
.spc-avatar-frame {
    width: 90px;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--background-cream, #FFF9F0);
    border: 3px solid var(--background-cream, #FFF9F0);
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
}

.spc-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Pure view validation - keeps face dimensions original without clipping */
    display: block;
}

/* Faculty Text Hierarchy Details Styling */
.spc-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.spc-details h4 {
    font-size: 16.5px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 700;
    margin: 0 0 4px 0;
}

/* Badge Layout Systems */
.spc-badge-maroon,
.spc-badge-gold {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.spc-badge-maroon {
    background: #FEE2E2;
    color: #991B1B;
}

.spc-badge-gold {
    background: #FEF3C7;
    color: #D97706;
}

.spc-qualification,
.spc-experience {
    font-size: 13px;
    line-height: 1.4;
    color: #556270;
    margin: 0 0 3px 0;
}

.spc-qualification strong,
.spc-experience strong {
    color: var(--text-dark, #0B2C4D);
    font-weight: 600;
}

.spc-experience {
    margin-bottom: 0;
}

/* ==========================================================================
   STRICT MOBILE & TABLET PORTRAIT DEFENSE INTERFACES
   ========================================================================== */
@media (max-width: 1024px) {
    .sd-staff-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Drops safely to dual view columns on small laptops */
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .sd-staff-grid {
        grid-template-columns: 1fr;
        /* Strict single linear stack tracking down on tablet screens */
        gap: 20px;
    }

    .sd-dept-header h3 {
        font-size: 19px;
    }

    .staff-profile-card {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .staff-profile-card {
        flex-direction: column;
        /* Stacks image avatar directly above info on compact tiny mobiles */
        text-align: center;
        align-items: center;
        padding: 24px 20px;
        border-left: 1px solid rgba(11, 44, 77, 0.05);
        border-top: 4px solid var(--primary-maroon, #800000);
        /* Inverts left indicator mark line into a top crown bar look */
    }

    .spc-details {
        align-items: center;
    }
}


/*============= NON-TEACHING STAFF ==============
   */

/* ==========================================================================
   HIGH-CONTRAST NON-TEACHING STAFF STYLE SHEET
   ========================================================================== */

.simple-staff-section {
    padding: 70px 0;
    background-color: #ffffff;
    /* pure white background taaki cards saaf alag dikhein */
    width: 100%;
}

.ss-container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Department Spacing Block */
.ss-department-block {
    margin-bottom: 50px;
}

.ss-department-block:last-child {
    margin-bottom: 0;
}

/* Simple Heading Component */
.ss-dept-heading-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    border-bottom: 2px solid rgba(128, 0, 0, 0.15);
    /* Stronger Maroon baseline indicator */
    padding-bottom: 12px;
}

.ss-icon-box {
    color: var(--primary-maroon, #800000);
    font-size: 19px;
}

.ss-dept-heading-row h3 {
    font-size: 21px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0;
}

/* Vertical Stack List Layout */
.ss-list-layout {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Added more space between rows */
}

/* High-Contrast Row Card Box */
.ss-row-card {
    background: var(--background-cream, #FFF9F0);
    /* Light Cream base color for row cards */
    border: 1px solid rgba(11, 44, 77, 0.1);
    /* Visible darker outline border */
    border-radius: 12px;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: 1fr 1.4fr 0.6fr;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 12px rgba(11, 44, 77, 0.03);
    /* Soft shadow layer to pop from background */
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Clear Distinction State on Hover */
.ss-row-card:hover {
    background-color: #ffffff;
    /* Shifts to white on hover for massive contrast dynamic look */
    transform: translateY(-2px);
    border-color: var(--primary-maroon, #800000);
    /* Dark maroon focus line border */
    box-shadow: 0 10px 25px rgba(128, 0, 0, 0.08);
    /* Glow effect on hover */
}

/* Column 1: Identity & Tags */
.ss-info-col h4 {
    font-size: 17px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0 0 6px 0;
}

.ss-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ss-tag-head {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid rgba(153, 27, 27, 0.1);
}

.ss-tag-staff {
    background: #E2E8F0;
    color: #334155;
    border: 1px solid rgba(51, 65, 85, 0.1);
}

/* Column 2: Meta Details */
.ss-meta-col p {
    font-size: 14.5px;
    color: #334155;
    /* Darker tone readability text */
    margin: 0;
    line-height: 1.5;
}

.ss-meta-col p strong {
    color: var(--text-dark, #0B2C4D);
    font-weight: 700;
}

/* Column 3: Experience Record */
.ss-exp-col {
    text-align: right;
}

.ss-exp-col span {
    font-size: 14px;
    color: #475569;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    /* Enclosed experience box tag inside cards */
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.ss-row-card:hover .ss-exp-col span {
    background: var(--background-cream, #FFF9F0);
    /* Flips cleanly on hover */
}

.ss-exp-col i {
    color: var(--accent-gold, #D4AF37);
    font-size: 13px;
}

/* ==========================================================================
   STRICT RESPONSIVE LAYOUT BREAKPOINTS
   ========================================================================== */
@media (max-width: 850px) {
    .ss-row-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px;
    }

    .ss-exp-col {
        text-align: left;
        margin-top: 5px;
        border-top: 1px dashed rgba(11, 44, 77, 0.1);
        padding-top: 10px;
    }

    .ss-exp-col span {
        padding: 4px 0;
        background: transparent !important;
        border: none;
    }
}

@media (max-width: 480px) {
    .simple-staff-section {
        padding: 50px 0;
    }

    .ss-dept-heading-row h3 {
        font-size: 18px;
    }

    .ss-row-card {
        padding: 16px;
    }
}


/* ==================gallery page============== */

.premium-gallery-section {
    padding: 80px 0;
    background-color: #ffffff;
    /* Pure crisp background layout */
    width: 100%;
}

.pg-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Component Configuration */
.pg-header {
    margin-bottom: 45px;
    text-align: center;
}

.pg-tag {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent-gold, #D4AF37);
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
}

.pg-title {
    font-size: 32px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin-top: 6px;
    letter-spacing: -0.5px;
}

.pg-maroon-line {
    width: 55px;
    height: 3.5px;
    background-color: var(--primary-maroon, #800000);
    margin: 12px auto 0;
    border-radius: 2px;
}

/* 3-Column Image Separation Grid */
.gallery-grid-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* High-Contrast Individual Media Cards */
.gallery-item-card {
    background: var(--background-cream, #FFF9F0);
    /* Light soft cream background inside card */
    border: 1px solid rgba(11, 44, 77, 0.12);
    /* Sharp distinct perimeter boundary outline */
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(11, 44, 77, 0.02);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-maroon, #800000);
    /* Maroon focus boundary glow on hover */
    box-shadow: 0 15px 35px rgba(128, 0, 0, 0.08);
}

/* Protected Image Window Core Framework */
.gi-image-frame {
    width: 100%;
    height: 230px;
    position: relative;
    background-color: #111827;
    overflow: hidden;
}

.gi-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Structured canvas display boundaries lock down */
    display: block;
    transition: transform 0.5s ease;
}

.gallery-item-card:hover .gi-img {
    transform: scale(1.05);
}

/* Translucent Dark Overlay Overlay Elements */
.gi-overlay-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 0, 0, 0.45);
    /* Soft premium maroon mask shading */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gallery-item-card:hover .gi-overlay-layer {
    opacity: 1;
}

.gi-icon-circle {
    width: 48px;
    height: 48px;
    background: #ffffff;
    color: var(--primary-maroon, #800000);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transform: scale(0.8);
    transition: transform 0.25s ease;
}

.gallery-item-card:hover .gi-icon-circle {
    transform: scale(1);
}

/* Text Caption Module */
.gi-caption-panel {
    padding: 20px;
    text-align: left;
    /* Switched clean corporate left alignment */
    border-top: 1px solid rgba(11, 44, 77, 0.08);
    background: #ffffff;
}

.gi-caption-panel h5 {
    font-size: 16.5px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0 0 5px 0;
}

.gi-caption-panel p {
    font-size: 13.5px;
    color: #475569;
    margin: 0;
    font-weight: 500;
}

.gallery-lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(11, 44, 77, 0.96);
    /* High contrast dark translucent sheet backdrop layer */
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-lightbox-modal.modal-active {
    display: flex;
    opacity: 1;
}

/* Close Controller Trigger */
.lightbox-close-btn {
    position: absolute;
    top: 25px;
    right: 35px;
    color: #ffffff;
    font-size: 46px;
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease, transform 0.2s ease;
}

.lightbox-close-btn:hover {
    color: var(--accent-gold, #D4AF37);
    transform: scale(1.1);
}

/* Main Display Runway Center Block */
.lightbox-stage {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1140px;
    padding: 0 20px;
    gap: 30px;
}

/* Central Picture Shield Enclosure */
.lightbox-content-box {
    flex-grow: 1;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    max-width: 820px;
    margin: 0 auto;
    animation: lightboxZoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes lightboxZoomIn {
    from {
        transform: scale(0.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.lightbox-image-canvas {
    width: 100%;
    height: 480px;
    background: #09111e;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Anti-Cropping Structural Compliance Shield Rule */
.lightbox-image-canvas img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* Absolute 100% full preservation view tracking */
    display: block;
}

/* Lightbox Captions Sheet Box */
.lightbox-caption-bar {
    background: var(--background-cream, #FFF9F0);
    padding: 18px 25px;
    text-align: center;
    border-top: 1px solid rgba(11, 44, 77, 0.08);
}

#lightboxCaptionTitle {
    margin: 0;
    color: var(--text-dark, #0B2C4D);
    font-size: 17px;
    font-weight: 800;
}

/* Backward & Forward Control Buttons Base UI */
.lightbox-nav-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.lightbox-nav-btn:hover {
    background: var(--primary-maroon, #800000);
    border-color: var(--primary-maroon, #800000);
    box-shadow: 0 8px 22px rgba(128, 0, 0, 0.35);
}

.prev-btn:hover {
    transform: translateX(-4px);
}

.next-btn:hover {
    transform: translateX(4px);
}

@media (max-width: 992px) {
    .gallery-grid-matrix {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .lightbox-image-canvas {
        height: 380px;
    }
}

@media (max-width: 768px) {
    .lightbox-stage {
        flex-direction: column;
        gap: 15px;
    }

    .lightbox-nav-btn {
        width: 100%;
        justify-content: center;
        padding: 14px;
    }

    .prev-btn {
        order: 2;
    }

    .lightbox-content-box {
        order: 1;
        width: 100%;
    }

    .next-btn {
        order: 3;
    }

    .lightbox-close-btn {
        top: 15px;
        right: 20px;
        font-size: 38px;
    }
}

@media (max-width: 540px) {
    .premium-gallery-section {
        padding: 50px 0;
    }

    .gallery-grid-matrix {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .gi-image-frame {
        height: 210px;
    }

    .lightbox-image-canvas {
        height: 270px;
    }

    .nav-btn-text {
        display: none;
        /* Keeps simple clear icon pointers on small viewports */
    }

    .lightbox-nav-btn {
        border-radius: 50%;
        width: 44px;
        height: 44px;
        padding: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: rgba(0, 0, 0, 0.65);
    }

    .prev-btn {
        left: 15px;
        order: unset;
    }

    .next-btn {
        right: 15px;
        order: unset;
    }

    .lightbox-content-box {
        order: unset;
    }
}

/* ======================
    STUDENT CORNER
   =======================*/

.student-corner-section {
    padding: 80px 0;
    background-color: #ffffff;
    /* Crisp background view protection */
    width: 100%;
}

.sc-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Master Asymmetric Layout Split Grid */
.sc-main-grid-layout {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    /* Responsive structural scaling split */
    gap: 40px;
    align-items: flex-start;
}

/* Left Column Heading Component Layout */
.sc-block-header {
    margin-bottom: 30px;
}

.sc-header-title-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.sc-header-icon {
    width: 44px;
    height: 44px;
    background: var(--background-cream, #FFF9F0);
    color: var(--primary-maroon, #800000);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid rgba(128, 0, 0, 0.08);
}

.sc-header-title-row h3 {
    font-size: 24px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.3px;
}

.sc-header-line {
    width: 100%;
    height: 1.5px;
    background: linear-gradient(to right, var(--primary-maroon, #800000) 100px, rgba(11, 44, 77, 0.08) 100px);
}

/* Symmetric Internal Utilities Cards Layout Grid */
.sc-resources-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 40px;
}

/* High Contrast Resource Cards UI */
.sc-resource-card {
    background: var(--background-cream, #FFF9F0);
    /* Soft contrast inner tint base */
    border: 1px solid rgba(11, 44, 77, 0.12);
    /* Deep visible border profile boundary line */
    border-radius: 14px;
    padding: 24px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgba(11, 44, 77, 0.02);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.sc-resource-card:hover {
    transform: translateY(-4px);
    background: #ffffff;
    /* Content separation pop out switch */
    border-color: var(--primary-maroon, #800000);
    box-shadow: 0 15px 30px rgba(128, 0, 0, 0.06);
}

.src-icon-box {
    width: 48px;
    height: 48px;
    background: #ffffff;
    color: var(--primary-maroon, #800000);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(11, 44, 77, 0.06);
}

.sc-resource-card:hover .src-icon-box {
    background: var(--primary-maroon, #800000);
    color: #ffffff;
}

/* Internal Card Text Hierarchies */
.src-info h4 {
    font-size: 17px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0 0 6px 0;
}

.src-info p {
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
    margin: 0 0 16px 0;
}

/* Dynamic Trigger Link Button Modules */
.src-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-maroon, #800000);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: color 0.2s ease;
}

.src-download-btn:hover {
    color: var(--accent-gold, #D4AF37);
}

/* Policy Content Blocks Box styling */
.sc-policy-container {
    background: #ffffff;
    border: 1px solid rgba(11, 44, 77, 0.12);
    border-left: 4px solid #dc2626;
    /* Deep crimson secure alert boundary pill mark line */
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

.sc-policy-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #dc2626;
    margin-bottom: 15px;
}

.sc-policy-header h4 {
    font-size: 16px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sc-policy-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.policy-bullet {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bullet-alert {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-dark, #0B2C4D);
}

.policy-bullet p {
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
    margin: 0;
}


/* ==========================================================================
   SIDEBAR DIGITAL NOTICE BOARD DESIGN CARD
   ========================================================================== */

.sc-notice-board-card {
    background: #ffffff;
    border: 1px solid rgba(11, 44, 77, 0.12);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(11, 44, 77, 0.03);
    overflow: hidden;
}

.nbc-header {
    background: var(--text-dark, #0B2C4D);
    /* High contrast deep corporate dark header background */
    padding: 24px;
    border-bottom: 3px solid var(--accent-gold, #D4AF37);
}

.nbc-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Pulsing Red Indicator Circle Graphics Dot */
.nbc-pulse-dot {
    width: 10px;
    height: 10px;
    background-color: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    animation: livePulseEffect 1.6s infinite;
}

@keyframes livePulseEffect {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.nbc-title-row h3 {
    font-size: 18.5px;
    color: #ffffff;
    font-weight: 800;
    margin: 0;
}

.nbc-header p {
    font-size: 13px;
    color: #94a3b8;
    margin: 5px 0 0 0;
}

/* Notices Items Vertical Content Track Stack */
.nbc-notices-stack {
    display: flex;
    flex-direction: column;
    padding: 10px 24px;
    max-height: 520px;
    /* Locked view safety rail height controls */
    overflow-y: auto;
    /* Allows individual notice tracks scroll overrides smoothly */
}

.notice-stack-item {
    padding: 20px 0;
    border-bottom: 1px dashed rgba(11, 44, 77, 0.1);
}

.notice-stack-item:last-child {
    border-bottom: none;
}

.nsi-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 10px;
}

.nsi-date {
    font-size: 12.5px;
    color: #64748B;
    font-weight: 500;
}

.nsi-date i {
    color: var(--primary-maroon, #800000);
    margin-right: 4px;
}

/* Flexible Alert Indicator Badge Labels */
.nsi-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.nsi-badge-alert {
    background: #fee2e2;
    color: #b91c1c;
}

.nsi-badge-normal {
    background: #e0f2fe;
    color: #0369a1;
}

.notice-stack-item h5 {
    font-size: 15px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 6px 0;
}

.notice-stack-item p {
    font-size: 13.5px;
    line-height: 1.5;
    color: #475569;
    margin: 0;
}


/* ==========================================================================
   STRICT RESPONSIVE PORTRAIT SHIELD MEDIA BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
    .sc-main-grid-layout {
        grid-template-columns: 1fr;
        /* Drop asymmetric columns to stacked layers on small laptops */
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .sc-resources-grid {
        grid-template-columns: 1fr;
        /* Flips cards grid layout matrix cleanly downward to 1 column view */
        gap: 20px;
    }

    .sc-header-title-row h3 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .student-corner-section {
        padding: 50px 0;
    }

    .sc-resource-card {
        flex-direction: column;
        /* Shift micro icons elements to center crown tops on tiny smartphones */
        gap: 15px;
        padding: 20px;
    }

    .nbc-header {
        padding: 20px;
    }

    .nbc-notices-stack {
        padding: 10px 20px;
    }
}


/* ==============syllabus page================ */

/* ==========================================================================
   PREMIUM HIGH-CONTRAST ACADEMIC SYLLABUS STYLING MATRIX
   ========================================================================== */

.premium-syllabus-section {
    padding: 80px 0;
    background-color: #ffffff;
    /* Total white visual separation base layer */
    width: 100%;
}

.syl-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Typography Elements */
.syl-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.syl-meta-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold, #D4AF37);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
}

.syl-main-title {
    font-size: 32px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 6px 0 0 0;
    letter-spacing: -0.5px;
}

.syl-divider-line {
    width: 55px;
    height: 3.5px;
    background-color: var(--primary-maroon, #800000);
    margin: 14px auto 16px;
    border-radius: 2px;
}

.syl-header-desc {
    font-size: 15px;
    color: #475569;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Tab Filter Controllers Architecture Row */
.syl-tabs-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 45px;
    border-bottom: 2px solid rgba(11, 44, 77, 0.08);
    padding-bottom: 15px;
}

/* High-Contrast Dynamic Tab Buttons Component */
.syl-tab-trigger {
    background: var(--background-cream, #FFF9F0);
    border: 1px solid rgba(11, 44, 77, 0.12);
    /* Strict clear layout grid divider line boundary */
    border-radius: 12px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s ease;
}

.syl-tab-trigger i {
    font-size: 22px;
    color: var(--text-dark, #0B2C4D);
    transition: color 0.2s ease;
}

.syl-btn-lbl span {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-dark, #0B2C4D);
}

.syl-btn-lbl small {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    margin-top: 1px;
}

/* Active Highlight Tab Controls Rule state */
.syl-tab-trigger.active {
    background: var(--primary-maroon, #800000);
    border-color: var(--primary-maroon, #800000);
    box-shadow: 0 10px 25px rgba(128, 0, 0, 0.15);
}

.syl-tab-trigger.active i,
.syl-tab-trigger.active .syl-btn-lbl span {
    color: #ffffff;
}

.syl-tab-trigger.active .syl-btn-lbl small {
    color: rgba(255, 255, 255, 0.75);
}

/* Panels Hidden Layout Controls Engine rules */
.syl-stream-panel {
    display: none;
    animation: sylFadeInAnimation 0.4s ease forwards;
}

.syl-stream-panel.active {
    display: block;
}

@keyframes sylFadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Symmetric Download Grid Configuration */
.syl-grid-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* High Contrast Individual Syllabus Row Cards */
.syl-download-card {
    background: var(--background-cream, #FFF9F0);
    border: 1px solid rgba(11, 44, 77, 0.12);
    /* Solid perimeter wall protection line */
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(11, 44, 77, 0.02);
    transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.syl-download-card:hover {
    transform: translateY(-3px);
    background-color: #ffffff;
    /* High contrast pop up state color swap */
    border-color: var(--primary-maroon, #800000);
    box-shadow: 0 15px 30px rgba(128, 0, 0, 0.06);
}

/* Card Section Header Elements */
.sdc-header-col {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.sdc-icon-badge {
    width: 44px;
    height: 44px;
    background: #ffffff;
    color: var(--primary-maroon, #800000);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid rgba(11, 44, 77, 0.08);
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.syl-download-card:hover .sdc-icon-badge {
    background: var(--primary-maroon, #800000);
    color: #ffffff;
    border-color: var(--primary-maroon, #800000);
}

.sdc-header-col h4 {
    font-size: 17.5px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0;
}

.sdc-tag-meta {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent-gold, #D4AF37);
    text-transform: uppercase;
    display: inline-block;
    margin-top: 2px;
    letter-spacing: 0.3px;
}

/* Card Body Section */
.sdc-body-details p {
    font-size: 14px;
    line-height: 1.55;
    color: #475569;
    margin: 0 0 18px 0;
}

/* Actions Ribbon Bar Block */
.sdc-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px dashed rgba(11, 44, 77, 0.12);
    padding-top: 14px;
    gap: 15px;
}

.sdc-file-info {
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sdc-file-info i {
    color: #dc2626;
    /* PDF Red indicator color icon tag */
}

.sdc-btn-download {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-maroon, #800000);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: color 0.2s ease, transform 0.2s ease;
}

.sdc-btn-download i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.sdc-btn-download:hover {
    color: var(--accent-gold, #D4AF37);
}

.sdc-btn-download:hover i {
    transform: translateX(3px);
    /* Interactive anchor push push forward effect */
}


/* ==========================================================================
   STRICT PORTRAIT RESPONSIVE SAFEGUARDS DESIGN RULES
   ========================================================================== */
@media (max-width: 992px) {
    .syl-tabs-row {
        grid-template-columns: 1fr;
        /* Stack tab filters linearly on tablets */
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .syl-grid-matrix {
        grid-template-columns: 1fr;
        /* Collapses dual grid card tracks cleanly down to single linear column blocks */
        gap: 20px;
    }

    .syl-main-title {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .premium-syllabus-section {
        padding: 50px 0;
    }

    .syl-tab-trigger {
        padding: 14px 20px;
    }

    .sdc-actions-bar {
        flex-direction: column;
        /* Re-align layout stack actions sequentially on small handheld systems */
        align-items: flex-start;
        gap: 12px;
    }
}

/* ===============celender  page============ */

/* ==========================================================================
   HIGH-CONTRAST ACADEMIC CALENDAR ARCHITECTURE STYLES
   ========================================================================== */

.premium-calendar-section {
    padding: 80px 0;
    background-color: #ffffff;
    /* Crisp white base backdrop */
    width: 100%;
}

.cal-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section Header Styles */
.cal-section-header {
    text-align: center;
    margin-bottom: 55px;
}

.cal-meta-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-gold, #D4AF37);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
}

.cal-main-title {
    font-size: 32px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 6px 0 0 0;
    letter-spacing: -0.5px;
}

.cal-divider-line {
    width: 55px;
    height: 3.5px;
    background-color: var(--primary-maroon, #800000);
    margin: 14px auto 16px;
    border-radius: 2px;
}

.cal-header-desc {
    font-size: 15px;
    color: #475569;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Master Grid Structure Definition */
.cal-master-layout {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr;
    /* Responsive layout ratio scaling tracking */
    gap: 45px;
    align-items: flex-start;
}


/* ==========================================================================
   VERTICAL TIMELINE ENGINE COMPONENTS
   ========================================================================== */

.cal-timeline-track {
    position: relative;
    padding-left: 35px;
    /* Creates clearance margin for central rail row line */
}

/* Core Timeline Rail Line Drawing */
.cal-timeline-track::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 6px;
    width: 2px;
    height: 100%;
    background-color: rgba(11, 44, 77, 0.12);
    /* Crisp solid linear rail guide profile */
}

.cal-timeline-item {
    position: relative;
    margin-bottom: 30px;
}

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

/* Central Tracker Hub Nodes Circles graphics */
.cal-node-marker {
    position: absolute;
    top: 24px;
    left: -35px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 2px solid var(--primary-maroon, #800000);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.cal-inner-dot {
    width: 6px;
    height: 6px;
    background-color: var(--primary-maroon, #800000);
    border-radius: 50%;
}

/* High Contrast Timeline Row Cards UI Component Box */
.cal-timeline-card {
    background: var(--background-cream, #FFF9F0);
    border: 1px solid rgba(11, 44, 77, 0.12);
    /* Solid perimeter wall line */
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(11, 44, 77, 0.01);
    transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

.cal-timeline-item:hover .cal-timeline-card {
    transform: translateX(4px);
    /* Pushes row card forward on timeline interaction checks */
    background-color: #ffffff;
    border-color: var(--primary-maroon, #800000);
    box-shadow: 0 12px 25px rgba(128, 0, 0, 0.05);
}

/* Card Ribbon Row Metadata elements */
.ctc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
}

.ctc-duration {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--primary-maroon, #800000);
}

.ctc-duration i {
    margin-right: 5px;
}

/* Custom Status Indicator Badges Labels system */
.ctc-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-admission {
    background: #fef3c7;
    color: #d97706;
}

.badge-academic {
    background: #e0f2fe;
    color: #0369a1;
}

.badge-assessment {
    background: #f3e8ff;
    color: #6b21a8;
}

.badge-exam {
    background: #fee2e2;
    color: #b91c1c;
}

.badge-events {
    background: #dcfce7;
    color: #15803d;
}

.cal-timeline-card h4 {
    font-size: 18px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0 0 8px 0;
}

.cal-timeline-card p {
    font-size: 14px;
    line-height: 1.55;
    color: #475569;
    margin: 0;
}


/* ==========================================================================
   SIDEBAR COMPONENT WIDGET CARDS
   ========================================================================== */

/* Integrated Download Widget configuration card box */
.cal-download-widget {
    background: var(--background-cream, #FFF9F0);
    border: 1px solid rgba(11, 44, 77, 0.12);
    border-radius: 16px;
    padding: 30px 24px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

.cdw-icon {
    width: 52px;
    height: 52px;
    background: #fee2e2;
    color: #dc2626;
    /* PDF Accent Alert red indicator badge */
    font-size: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.cal-download-widget h3 {
    font-size: 19px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0 0 8px 0;
}

.cal-download-widget p {
    font-size: 13.5px;
    line-height: 1.5;
    color: #475569;
    margin: 0 0 20px 0;
}

/* Corporate Standard Download Call-to-Action button block */
.cdw-action-btn {
    background-color: var(--primary-maroon, #800000);
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(128, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.cdw-action-btn:hover {
    background-color: var(--text-dark, #0B2C4D);
    box-shadow: 0 6px 15px rgba(11, 44, 77, 0.25);
}

/* Holiday Summary list board block panel layout graphics */
.cal-highlights-card {
    background: #ffffff;
    border: 1px solid rgba(11, 44, 77, 0.12);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(11, 44, 77, 0.02);
}

.chc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dark, #0B2C4D);
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(11, 44, 77, 0.08);
    padding-bottom: 12px;
}

.chc-header i {
    color: var(--accent-gold, #D4AF37);
    font-size: 17px;
}

.chc-header h4 {
    font-size: 16.5px;
    font-weight: 800;
    margin: 0;
}

.chc-body-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chc-list-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Clean micro layout date tags pills */
.chc-date-pill {
    background: var(--background-cream, #FFF9F0);
    border: 1px solid rgba(11, 44, 77, 0.08);
    color: var(--text-dark, #0B2C4D);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.chc-list-row p {
    font-size: 13.5px;
    line-height: 1.45;
    color: #475569;
    margin: 0;
    font-weight: 500;
}


/* ==========================================================================
   STRICT PORTRAIT MOBILE DEVICE SAFETIES RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
    .cal-master-layout {
        grid-template-columns: 1fr;
        /* Collapses structural panels to inline stack sequence layers on small laptops */
        gap: 40px;
    }
}

@media (max-width: 600px) {
    .cal-timeline-track {
        padding-left: 0;
    }

    .cal-timeline-track::before,
    .cal-node-marker {
        display: none;
        /* Safely removes rail guides on miniature viewports to optimize layout boundaries padding space */
    }

    .ctc-header {
        flex-direction: column;
        /* Switches card top ribbon track parameters downward alignment safe */
        align-items: flex-start;
        gap: 6px;
    }

    .cal-timeline-item:hover .cal-timeline-track {
        transform: none;
    }
}

@media (max-width: 480px) {
    .premium-calendar-section {
        padding: 50px 0;
    }

    .cal-timeline-card,
    .cal-download-widget,
    .cal-highlights-card {
        padding: 20px;
    }

    .cal-main-title {
        font-size: 26px;
    }
}


/* =====================ncet mandate======================= */


.premium-ncte-bento-section {
    padding: 60px 0 90px;
    background-color: #ffffff;
    /* Clean white layer isolation sheet */
    width: 100%;
}

.ncte-bento-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Regulatory Top Info Header Control bar */
.ncte-bento-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--background-cream, #FFF9F0);
    border: 1px solid rgba(11, 44, 77, 0.12);
    /* Solid grid border outline */
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 35px;
    gap: 15px;
}

.ntb-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pulse-indicator {
    width: 8px;
    height: 8px;
    background-color: var(--primary-maroon, #800000);
    border-radius: 50%;
}

.ntb-title span {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark, #0B2C4D);
}

.ntb-legal-code {
    font-size: 13px;
    font-weight: 700;
    color: #64748B;
    background: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(11, 44, 77, 0.08);
}

/* Master Core Layout Split Engine */
.ncte-bento-grid-wrapper {
    display: grid;
    grid-template-columns: 1.45fr 0.75fr;
    gap: 40px;
    align-items: flex-start;
}

.ncte-accordion-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Individual Data Blocks Canvas Layout */
.ncte-profile-card-block {
    background: #ffffff;
    border: 1px solid rgba(11, 44, 77, 0.12);
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(11, 44, 77, 0.01);
}

.ncb-header-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(11, 44, 77, 0.08);
    padding-bottom: 12px;
}

.ncb-index-pill {
    background: var(--text-dark, #0B2C4D);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
}

.ncb-header-row h3 {
    font-size: 19px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0;
}

.section-context-text {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 20px 0;
}


/* ==========================================================================
   CERTIFICATE VISUAL DISPLAY ENGINE FRAMES
   ========================================================================== */

.certificate-visual-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Two columns layout grid track line */
    gap: 20px;
}

.certificate-image-card {
    background: var(--background-cream, #FFF9F0);
    border: 1px solid rgba(11, 44, 77, 0.12);
    /* Hard boundary lock frame line */
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.25s ease;
}

.certificate-image-card:hover {
    border-color: var(--primary-maroon, #800000);
}

.cic-image-frame {
    position: relative;
    width: 100%;
    height: 220px;
    /* Locked bounding height tracking image scale specs */
    background: #ebeef2;
    overflow: hidden;
}

.img-responsive-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Centers original asset view securely inside frame boundaries */
    object-position: top;
    transition: transform 0.35s ease;
}

.certificate-image-card:hover .img-responsive-fluid {
    transform: scale(1.04);
}

/* Interactive Hover Link Zoom over document framework */
.cic-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 44, 77, 0.85);
    /* Solid high contrast dark overlay base */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.cic-image-frame:hover .cic-hover-overlay {
    opacity: 1;
}

.cic-zoom-btn {
    background-color: var(--primary-maroon, #800000);
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.cic-details-bar {
    padding: 14px;
    background: #ffffff;
    border-top: 1px solid rgba(11, 44, 77, 0.08);
}

.cic-details-bar h5 {
    font-size: 14px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0 0 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-size-tag {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent-gold, #D4AF37);
    text-transform: uppercase;
}


/* ==========================================================================
   COMPREHENSIVE SOLID DATA ROWS SYSTEM
   ========================================================================== */

.ncb-table-canvas {
    width: 100%;
    overflow-x: auto;
}

.ncte-clean-table {
    width: 100%;
    border-collapse: collapse;
}

.ncte-clean-table tr {
    border-bottom: 1px solid rgba(11, 44, 77, 0.06);
    transition: background-color 0.15s ease;
}

.ncte-clean-table tr:last-child {
    border-bottom: none;
}

.ncte-clean-table tr:hover {
    background-color: var(--background-cream, #FFF9F0);
}

.ncte-clean-table td {
    padding: 14px 12px;
    font-size: 14px;
    vertical-align: top;
}

.tbl-lbl-col {
    font-weight: 700;
    color: var(--text-dark, #0B2C4D);
    width: 32%;
    border-right: 1px dashed rgba(11, 44, 77, 0.08);
}

.tbl-val-col {
    font-weight: 500;
    color: #334155;
    line-height: 1.5;
    padding-left: 20px !important;
}

.font-bold {
    font-weight: 700;
    color: var(--text-dark, #0B2C4D);
}


/* ==========================================================================
   SIDEBAR DOWNLOAD & LINKS INTERFACE CARDS
   ========================================================================== */

.ncte-bento-sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px;
    position: sticky;
    top: 30px;
}

.sticky-audit-box-card {
    background: var(--background-cream, #FFF9F0);
    border: 1px solid rgba(11, 44, 77, 0.12);
    border-radius: 16px;
    padding: 24px;
}

.sabc-top {
    margin-bottom: 20px;
}

.sabc-icon {
    width: 44px;
    height: 44px;
    background: #fee2e2;
    color: #b91c1c;
    font-size: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.sticky-audit-box-card h4 {
    font-size: 16.5px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0 0 6px 0;
}

.sticky-audit-box-card p {
    font-size: 13px;
    line-height: 1.45;
    color: #475569;
    margin: 0;
}

.sabc-action-download-btn {
    background-color: var(--primary-maroon, #800000);
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px rgba(128, 0, 0, 0.15);
    transition: background-color 0.2s ease;
}

.sabc-action-download-btn:hover {
    background-color: var(--text-dark, #0B2C4D);
}

.sticky-links-box-card {
    background: #ffffff;
    border: 1px solid rgba(11, 44, 77, 0.12);
    border-radius: 16px;
    padding: 20px 24px;
}

.sticky-links-box-card h5 {
    font-size: 15px;
    color: var(--text-dark, #0B2C4D);
    font-weight: 800;
    margin: 0 0 16px 0;
    border-bottom: 1px solid rgba(11, 44, 77, 0.08);
    padding-bottom: 10px;
}

.slbc-links-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.slbc-item-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(11, 44, 77, 0.06);
    transition: transform 0.15s ease;
}

.slbc-item-link:last-child {
    border-bottom: none;
}

.slbc-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slbc-left i {
    font-size: 14px;
    color: var(--primary-maroon, #800000);
}

.slbc-left span {
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
    transition: color 0.15s ease;
}

.micro-arrow {
    font-size: 11px;
    color: #94a3b8;
}

.slbc-item-link:hover {
    transform: translateX(3px);
}

.slbc-item-link:hover .slbc-left span {
    color: var(--primary-maroon, #800000);
}


/* ==========================================================================
   RESPONSIVE DESIGN ADAPTATIONS
   ========================================================================== */
@media (max-width: 1024px) {
    .ncte-bento-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .ncte-bento-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .certificate-visual-grid {
        grid-template-columns: 1fr;
        /* Image grids collapse down linearly on viewports */
    }

    .ncte-bento-top-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .tbl-lbl-col {
        width: 100%;
        display: block;
        border-right: none;
        padding-bottom: 4px;
    }

    .tbl-val-col {
        display: block;
        padding-left: 0 !important;
    }

    .ncte-clean-table tr {
        padding: 12px 0;
        display: block;
    }

    .ncte-clean-table td {
        padding: 4px 0;
    }
}




/* ========================= LIBRARY page================== */


.library-page {
    padding: 60px 20px;
    background-color: #f8f9fa;
}

/* Header */
.lib-header {
    text-align: center;
    margin-bottom: 40px;
}

.lib-header h2 {
    color: #800000;
    font-size: 30px;
}

.lib-line {
    width: 70px;
    height: 4px;
    background: #800000;
    margin: 10px auto;
}

/* Container Grid */
.lib-container-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 cards per row */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Cards */
.lib-box {

    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    height: 400px;
    border: 1px solid #e1e1e1;
}

/* Image & Caption */
.hero-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-position: center;
    /* image center me rahe */
    background: #f8f9fa;
    /* empty space visible ho to bg */
}

.img-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 10px;
    font-size: 14px;
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .lib-container-box {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cards per row on tablets */
    }
}

@media (max-width: 768px) {
    .lib-container-box {
        grid-template-columns: 1fr;
        /* 1 card per row on mobile */
    }
}

/* ===============lab page===================== */

/* Labs Grid Logic */
.labs-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.labs-heading h2 {
    color: #800000;
    margin-bottom: 30px;
    text-align: center;
}

.labs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.lab-item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
}

.lab-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.lab-content {
    padding: 15px;
}

.lab-content h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
}

.lab-content p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}


/* ==========bsc======================== */

/* ==========================================================================
   BSC-TECH STRUCTURAL MATRIX CONFIGURATION (ZERO REPETITION ASSURANCES)
   ========================================================================== */
:root {
    --bsc-t-maroon: #800000;
    --bsc-t-gold: #D4AF37;
    --bsc-t-dark: #0B2C4D;
    --bsc-t-cream: #FFF9F0;
    --bsc-t-white: #ffffff;
    --bsc-t-slate: #4A5568;
    --bsc-t-fx: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ==========================================================================
   ANGLED HERO BLOCK
   ========================================================================== */
.bsc-tech-hero-section {
    position: relative;
    padding: 110px 0;
    background: linear-gradient(145deg, #051627 0%, var(--bsc-t-dark) 100%);
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

.bsc-tech-glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 90% 10%, rgba(212, 175, 55, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 10% 80%, rgba(128, 0, 0, 0.25) 0%, transparent 50%);
    z-index: 1;
}

.bsc-tech-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

.bsc-tech-badge-row {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.bsc-tech-pill-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bsc-t-white);
    background: rgba(128, 0, 0, 0.4);
    padding: 5px 12px;
    border-radius: 30px;
    border: 1px solid rgba(128, 0, 0, 0.3);
}

.bsc-tech-pill-tag.tag-gold {
    color: var(--bsc-t-gold);
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.25);
}

.bsc-tech-main-title {
    font-size: 42px;
    font-weight: 900;
    color: var(--bsc-t-white);
    letter-spacing: -0.5px;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.bsc-tech-gold-span {
    color: var(--bsc-t-gold);
}

.bsc-tech-hero-p {
    font-size: 15.5px;
    color: rgba(255, 255, 255, 0.75);
    max-width: 700px;
    line-height: 1.6;
    margin: 0 0 30px 0;
}

/* Breadcrumb Positioning overrides */
.bsc-tech-breadcrumb-nav {
    display: inline-block;
}

.bsc-tech-b-list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
}

.bsc-tech-b-link {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: var(--bsc-t-fx);
}

.bsc-tech-b-link:hover {
    color: var(--bsc-t-gold);
}

.bsc-tech-b-sep {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.2);
}

.bsc-tech-b-item.bsc-tech-b-active {
    font-size: 13px;
    font-weight: 700;
    color: var(--bsc-t-white);
}

/* ==========================================================================
   CORE INFO PANEL & ISOMETRIC CARDS
   ========================================================================== */
.bsc-tech-layout-panel {
    padding: 70px 0 85px 0;
    background: #FAFAFA;
}

.bsc-tech-panel-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Floating Metrics Bar */
.bsc-tech-stats-banner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--bsc-t-white);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(11, 44, 77, 0.03);
    margin-bottom: 65px;
    gap: 20px;
}

.bsc-tech-stat-block {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bsc-tech-stat-block:first-child {
    border-right: 1px solid #E2E8F0;
    padding-right: 20px;
}

.bsc-tech-stat-icon {
    width: 46px;
    height: 46px;
    background: var(--bsc-t-cream);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bsc-t-maroon);
    font-size: 18px;
    border: 1px solid rgba(128, 0, 0, 0.06);
}

.bsc-tech-stat-txt h6 {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--bsc-t-dark);
    margin: 0 0 2px 0;
}

.bsc-tech-stat-txt p {
    font-size: 13.5px;
    color: var(--bsc-t-slate);
    margin: 0;
}

/* Left Hex Header Components */
.bsc-tech-section-title-left {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 40px;
}

.bsc-tech-title-hex {
    width: 48px;
    height: 48px;
    background: var(--bsc-t-dark);
    color: var(--bsc-t-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.bsc-tech-meta-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--bsc-t-maroon);
    letter-spacing: 1.5px;
    display: block;
}

.bsc-tech-title-text h3 {
    font-size: 24px;
    font-weight: 850;
    color: var(--bsc-t-dark);
    margin: 2px 0 0 0;
}

/* Isometric Subject Matrix Grids */
.bsc-tech-subjects-iso-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bsc-tech-subject-iso-card {
    background: var(--bsc-t-white);
    border-radius: 12px;
    padding: 30px 25px;
    border: 1px solid #EEF2F6;
    box-shadow: 0 5px 20px rgba(11, 44, 77, 0.01);
    position: relative;
    transition: var(--bsc-tech-fx);
    overflow: hidden;
}

.bsc-tech-iso-icon-box {
    width: 40px;
    height: 40px;
    background: #F8FAFC;
    color: var(--bsc-t-dark);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 20px;
    border: 1px solid #E2E8F0;
    transition: var(--bsc-t-fx);
}

.bsc-tech-subject-iso-card h5 {
    font-size: 17px;
    font-weight: 800;
    color: var(--bsc-t-dark);
    margin: 0 0 10px 0;
}

.bsc-tech-subject-iso-card p {
    font-size: 13.5px;
    color: var(--bsc-t-slate);
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.bsc-tech-iso-group-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 30px;
}

.bsc-tech-iso-group-badge.group-maths {
    background: #E0F2FE;
    color: #0369A1;
}

.bsc-tech-iso-group-badge.group-bio {
    background: #FEE2E2;
    color: #991B1B;
}

.bsc-tech-iso-group-badge.group-both {
    background: #FEF3C7;
    color: #D97706;
}

.bsc-tech-iso-group-badge.group-comp {
    background: #F1F5F9;
    color: #475569;
}

.bsc-tech-subject-iso-card:hover {
    transform: translateY(-6px);
    border-color: var(--bsc-t-gold);
    box-shadow: 0 15px 35px rgba(212, 175, 55, 0.1);
}

.bsc-tech-subject-iso-card:hover .bsc-tech-iso-icon-box {
    background: var(--bsc-t-maroon);
    color: var(--bsc-t-white);
    border-color: var(--bsc-t-maroon);
}

/* ==========================================================================
   ASYMMETRIC ALTERNATING FEATURES PLOTS
   ========================================================================== */
.bsc-tech-features-asymmetric-block {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bsc-tech-feature-asym-row {
    display: flex;
    gap: 25px;
    align-items: stretch;
}

.bsc-tech-feature-asym-row.row-reverse {
    flex-direction: row-reverse;
}

.bsc-tech-asym-visual-counter {
    background: var(--bsc-t-dark);
    color: var(--bsc-t-white);
    font-weight: 900;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    border-radius: 12px;
}

.bsc-tech-asym-visual-counter.counter-gold {
    background: var(--bsc-t-gold);
    color: var(--bsc-t-dark);
}

.bsc-tech-asym-visual-counter.counter-maroon {
    background: var(--bsc-t-maroon);
}

.bsc-tech-asym-text-card {
    background: var(--bsc-t-white);
    border: 1px solid #EEF2F6;
    border-radius: 12px;
    padding: 28px 35px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
}

.bsc-tech-asym-text-card h4 {
    font-size: 17px;
    font-weight: 800;
    color: var(--bsc-t-dark);
    margin: 0 0 6px 0;
}

.bsc-tech-asym-text-card p {
    font-size: 14px;
    color: var(--bsc-t-slate);
    line-height: 1.65;
    margin: 0;
}

/* ==========================================================================
   BENTO CAREERS PLACEMENT FRAMEWORK
   ========================================================================== */
.bsc-tech-career-universe {
    background: #061524;
    padding: 85px 0;
    color: var(--bsc-t-white);
}

.bsc-tech-career-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.bsc-tech-career-intro-row {
    margin-bottom: 50px;
}

.bsc-tech-universe-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--bsc-t-gold);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
}

.bsc-tech-career-intro-row h2 {
    font-size: 28px;
    font-weight: 850;
    color: var(--bsc-t-white);
    margin: 4px 0 8px 0;
}

.bsc-tech-career-intro-row p {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 15px 0;
}

.bsc-tech-maroon-bar-left {
    width: 50px;
    height: 3.5px;
    background: var(--bsc-t-maroon);
    border-radius: 2px;
}

/* Bento Adaptive Layout Mesh */
.bsc-tech-bento-placement-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.bsc-tech-bento-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 35px;
    display: flex;
    gap: 25px;
    align-items: flex-start;
    transition: var(--bsc-tech-fx);
}

.bsc-tech-bento-icon-badge {
    background: rgba(255, 255, 255, 0.04);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--bsc-tech-gold);
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.bsc-tech-sector-pill {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.bsc-tech-sector-pill.color-blue {
    background: rgba(3, 105, 161, 0.2);
    color: #38bdf8;
}

.bsc-tech-sector-pill.color-gold {
    background: rgba(217, 119, 6, 0.2);
    color: #fbbf24;
}

.bsc-tech-sector-pill.color-maroon {
    background: rgba(128, 0, 0, 0.3);
    color: #fca5a5;
}

.bsc-tech-sector-pill.color-dark {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

.bsc-tech-bento-main h5 {
    font-size: 17px;
    font-weight: 800;
    color: var(--bsc-t-white);
    margin: 0 0 8px 0;
}

.bsc-tech-bento-main p {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

/* Bento Hover Interactivity */
.bsc-tech-bento-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
    border-color: rgba(212, 175, 55, 0.3);
}

.bsc-tech-cta-flex-panel {
    text-align: center;
    margin-top: 45px;
}

.bsc-tech-action-pulse-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bsc-t-maroon);
    color: var(--bsc-t-white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 15px 35px;
    border-radius: 30px;
    box-shadow: 0 8px 25px rgba(128, 0, 0, 0.3);
    transition: var(--bsc-t-fx);
}

.bsc-tech-action-pulse-btn:hover {
    background: var(--bsc-t-white);
    color: var(--bsc-t-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   REGISTRATION SYMMETRIC GRID CONTROL
   ========================================================================== */
.bsc-tech-enrollment-panel {
    padding: 90px 0;
    background: var(--bsc-t-white);
}

.bsc-tech-enroll-container {
    max-width: 950px;
    margin: 0 auto;
    padding: 0 24px;
}

.bsc-tech-form-matrix-box {
    background: var(--bsc-t-white);
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 15px 40px rgba(11, 44, 77, 0.04);
}

.bsc-tech-form-header-zone {
    text-align: center;
    margin-bottom: 40px;
}

.bsc-tech-open-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--bsc-t-maroon);
    text-transform: uppercase;
    background: var(--bsc-t-cream);
    padding: 4px 12px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
}

.bsc-tech-form-header-zone h3 {
    font-size: 24px;
    font-weight: 850;
    color: var(--bsc-t-dark);
    margin: 0 0 10px 0;
}

.bsc-tech-form-header-zone p {
    font-size: 14px;
    color: var(--bsc-t-slate);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.5;
}

.bsc-tech-actual-form-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bsc-tech-form-row-fluid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.bsc-tech-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bsc-tech-label-node {
    font-size: 13px;
    font-weight: 700;
    color: var(--bsc-t-dark);
}

.bsc-tech-field-icon-wrapper {
    position: relative;
}

.bsc-tech-field-icon-wrapper .field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13.5px;
    color: #94A3B8;
}

.bsc-tech-native-input {
    padding-left: 38px !important;
}

.bsc-tech-native-input,
.bsc-tech-native-select,
.bsc-tech-native-textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 14px;
    background: #F8FAFC;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    color: var(--bsc-t-dark);
    transition: var(--bsc-t-fx);
}

.bsc-tech-native-input:focus,
.bsc-tech-native-select:focus,
.bsc-tech-native-textarea:focus {
    outline: none;
    background: var(--bsc-t-white);
    border-color: var(--bsc-t-maroon);
    box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.05);
}

.bsc-tech-native-select-wrapper {
    position: relative;
}

.bsc-tech-native-select {
    appearance: none;
    cursor: pointer;
    padding-right: 35px;
}

.bsc-tech-native-select-wrapper::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #64748B;
    pointer-events: none;
}

.bsc-tech-native-textarea {
    resize: vertical;
}

.bsc-tech-form-btn-alignment {
    text-align: right;
    margin-top: 10px;
}

.bsc-tech-submit-action-btn {
    background: var(--bsc-t-dark);
    color: var(--bsc-t-white);
    border: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: var(--bsc-t-fx);
}

.bsc-tech-submit-action-btn:hover {
    background: var(--bsc-t-maroon);
    box-shadow: 0 8px 20px rgba(128, 0, 0, 0.15);
}

/* ==========================================================================
   STRICT MOBILE INTERFACES DEFENSE
   ========================================================================== */
@media (max-width: 992px) {
    .bsc-tech-subjects-iso-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bsc-tech-bento-placement-grid {
        grid-template-columns: 1fr;
    }

    .bsc-tech-form-matrix-box {
        padding: 35px 25px;
    }
}

@media (max-width: 768px) {
    .bsc-tech-hero-section {
        padding: 80px 0;
        clip-path: none;
    }

    .bsc-tech-main-title {
        font-size: 32px;
    }

    .bsc-tech-stats-banner {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .bsc-tech-stat-block:first-child {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid #E2E8F0;
        padding-bottom: 15px;
    }

    .bsc-tech-form-row-fluid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bsc-tech-bento-card {
        padding: 25px;
        flex-direction: column;
        gap: 15px;
    }

    .bsc-tech-form-btn-alignment {
        text-align: left;
    }

    .bsc-tech-submit-action-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .bsc-tech-subjects-iso-grid {
        grid-template-columns: 1fr;
    }

    .bsc-tech-feature-asym-row,
    .bsc-tech-feature-asym-row.row-reverse {
        flex-direction: column;
    }

    .bsc-tech-asym-visual-counter {
        padding: 12px 0;
        min-width: 100%;
    }

    .bsc-tech-asym-text-card {
        padding: 20px;
    }
}


/* ===================b Ed  page================ */




.bed-premium-hero {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, var(--text-dark) 0%, #051424 100%);
    overflow: hidden;
    border-bottom: 4px solid var(--accent-gold);
}

.bed-hero-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 10% 20%, rgba(128, 0, 0, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(212, 175, 55, 0.15) 0%, transparent 40%);
    z-index: 1;
}

.bed-hero-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

.bed-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
}

.bh-badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent-gold);
    background: rgba(212, 175, 55, 0.1);
    padding: 6px 16px;
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    margin-bottom: 16px;
}

.bh-main-title {
    font-size: 40px;
    font-weight: 900;
    color: var(--white);
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 16px;
}

.gold-gradient-text {
    color: var(--accent-gold);
    position: relative;
}

.bh-subtitle-p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
}

.bh-nav-right {
    display: flex;
    justify-content: flex-end;
}

.bh-crumbs {
    display: flex;
    align-items: center;
    list-style: none;
    background: rgba(255, 255, 255, 0.04);
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    gap: 12px;
}

.bh-link {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: var(--transition);
}

.bh-link:hover {
    color: var(--accent-gold);
}

.bh-slash {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.2);
}

.bh-item.bh-active {
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
}

/* ==========================================================================
   MAIN CORE LAYOUT MODULE
   ========================================================================== */
.bed-layout-wrapper {
    padding: 80px 0;
    background-color: #fafbfc;
}

.bed-custom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Premium Floating Overview Block */
.bed-intro-card {
    display: flex;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(11, 44, 77, 0.05);
    border: 1px solid #eef2f6;
    margin-bottom: 60px;
}

.bic-accent-bar {
    width: 6px;
    background: var(--primary-maroon);
}

.bic-body {
    padding: 30px 35px;
}

.bic-body h5 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--primary-maroon);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.bic-body p {
    font-size: 15px;
    color: var(--text-dark);
    line-height: 1.7;
}

.bed-block-heading {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 45px 0 25px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bed-block-heading i {
    color: var(--primary-maroon);
}

/* Floating Grid System Architecture */
.bed-hex-subject-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.hex-subject-card {
    background: var(--white);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    transition: var(--transition);
    position: relative;
}

.hsc-icon-wrap {
    width: 45px;
    height: 45px;
    background: var(--background-cream);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.hsc-icon-wrap i {
    font-size: 18px;
    color: var(--primary-maroon);
}

.hex-subject-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.hex-subject-card p {
    font-size: 13px;
    color: #556980;
    line-height: 1.6;
}

.hex-subject-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(11, 44, 77, 0.06);
}

/* Alternate Linear Row Stack Architecture */
.bed-alternating-benefits {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.benefit-geo-box {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: 14px;
    border: 1px solid #eef2f6;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(11, 44, 77, 0.02);
    transition: var(--transition);
}

.bgb-number {
    font-size: 24px;
    font-weight: 900;
    color: var(--primary-maroon);
    background: var(--background-cream);
    padding: 30px 40px;
    border-right: 1px solid #eef2f6;
    min-width: 100px;
    text-align: center;
}

.bgb-content {
    padding: 24px 35px;
}

.bgb-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 6px;
}

.bgb-content p {
    font-size: 13px;
    color: #556980;
    line-height: 1.6;
}

.benefit-geo-box:hover {
    border-color: var(--accent-gold);
    box-shadow: 0 10px 25px rgba(11, 44, 77, 0.05);
}

/* ==========================================================================
   4-COLUMN CAREER GRID
   ========================================================================== */
.bed-career-matrix-section {
    background: var(--background-cream);
    padding: 80px 0;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.matrix-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.matrix-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.msh-mini {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--primary-maroon);
    letter-spacing: 1.5px;
}

.msh-main {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-dark);
    margin-top: 6px;
}

.msh-gold-line {
    width: 50px;
    height: 3px;
    background: var(--accent-gold);
    margin: 14px auto 0 auto;
}

.matrix-four-column-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.matrix-node-card {
    background: var(--white);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 12px;
    padding: 24px;
    transition: var(--transition);
}

.mnc-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(11, 44, 77, 0.06);
    color: var(--text-dark);
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.matrix-node-card h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.4;
}

.matrix-node-card p {
    font-size: 12px;
    color: #556980;
    line-height: 1.6;
}

.matrix-node-card:hover {
    box-shadow: 0 15px 30px rgba(128, 0, 0, 0.08);
    border-color: var(--primary-maroon);
    transform: translateY(-4px);
}

.matrix-action-wrapper {
    text-align: center;
    margin-top: 40px;
}

.matrix-cta-trigger {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--primary-maroon);
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    padding: 15px 35px;
    border-radius: 8px;
    transition: var(--transition);
    border: 1px solid transparent;
}

.matrix-cta-trigger:hover {
    background: var(--text-dark);
    border-color: var(--accent-gold);
    transform: translateY(-2px);
}

/* ==========================================================================
   REGISTRATION MODULE LAYOUT
   ========================================================================== */
.bed-registration-section {
    padding: 90px 0;
    background: var(--white);
}

.br-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.br-split-card {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(11, 44, 77, 0.08);
    border: 1px solid #eaeef2;
}

.br-info-side {
    background: linear-gradient(135deg, var(--primary-maroon) 0%, #4a000d 100%);
    padding: 50px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bris-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent-gold);
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.br-info-side h3 {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 16px;
}

.br-info-side p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin-bottom: 30px;
}

.bris-features {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bf-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
}

.bf-item i {
    color: var(--accent-gold);
}

.br-form-side {
    padding: 50px;
    background: var(--white);
}

.br-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.br-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.br-form-row .br-input-group {
    margin-bottom: 0;
}

.br-input-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

.br-form-side input,
.br-form-side select,
.br-form-side textarea {
    font-family: inherit;
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: var(--text-dark);
    transition: var(--transition);
}

.br-form-side input:focus,
.br-form-side select:focus,
.br-form-side textarea:focus {
    outline: none;
    background: var(--white);
    border-color: var(--primary-maroon);
    box-shadow: 0 0 0 3px rgba(128, 0, 0, 0.08);
}

.br-select-box {
    position: relative;
}

.br-select-box select {
    appearance: none;
    cursor: pointer;
    padding-right: 40px;
}

.br-select-box::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #64748b;
    pointer-events: none;
}

.br-form-side textarea {
    resize: vertical;
}

.br-submit-trigger-btn {
    width: 100%;
    background: var(--text-dark);
    color: var(--white);
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: var(--transition);
    margin-top: 10px;
}

.br-submit-trigger-btn:hover {
    background: var(--primary-maroon);
    box-shadow: 0 10px 20px rgba(128, 0, 0, 0.15);
}

/* ==========================================================================
   RESPONSIVE DESIGN GRID ADAPTATIONS
   ========================================================================== */
@media (max-width: 1024px) {
    .bed-hero-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .bh-nav-right {
        justify-content: flex-start;
    }

    .bed-hex-subject-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .matrix-four-column-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .br-split-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .bh-main-title {
        font-size: 32px;
    }

    .hex-subject-card {
        padding: 20px;
    }

    .bgb-number {
        padding: 20px;
        min-width: 70px;
        font-size: 20px;
    }

    .bgb-content {
        padding: 20px;
    }

    .br-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .br-form-row .br-input-group {
        margin-bottom: 20px;
    }

    .br-info-side,
    .br-form-side {
        padding: 30px 20px;
    }
}

@media (max-width: 540px) {
    .bed-hex-subject-grid {
        grid-template-columns: 1fr;
    }

    .matrix-four-column-grid {
        grid-template-columns: 1fr;
    }
}