/* ==========================================================================
   Champs Learning — Modern Design System & Component Stylesheet
   File: css/champs-modern.css
   ========================================================================== */

/* ─── 1. Hero Slider Container & Layout ─────────────────────────────── */
#slider-part.slider-active {
    position: relative;
    background-color: #07294d;
    overflow: hidden;
    z-index: 1;
}

#slider-part.slider-active .single-slider {
    position: relative;
    min-height: 680px;
    padding-top: 110px;
    padding-bottom: 240px; /* Ample buffer for -150px negative margin from #category-part */
    display: flex !important;
    align-items: center;
    overflow: hidden;
}

/* Dedicated photo layer for smooth hardware-accelerated zoom on hover */
.slider-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../images/slider/s-2.jpg");
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    transform: scale(1);
    filter: brightness(1) contrast(1);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
    z-index: 1;
    will-change: transform;
}

/* Smooth interactive zoom and brightness shift on slider hover */
#slider-part:hover .slider-bg-layer {
    transform: scale(1.04);
    filter: brightness(1.05) contrast(1.02);
}

/* Directional gradient overlay: Deep navy on left, translucent over student photo on right */
.slider-overlay-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        rgba(7, 41, 77, 0.98) 0%,
        rgba(7, 41, 77, 0.90) 38%,
        rgba(7, 41, 77, 0.40) 75%,
        rgba(7, 41, 77, 0.15) 100%
    );
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.8s ease;
}

#slider-part:hover .slider-overlay-layer {
    opacity: 0.92;
}

/* Warm ambient gold glow bloom that breathes on section hover */
.slider-glow-layer {
    position: absolute;
    top: -20%;
    left: -10%;
    width: 55%;
    height: 85%;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.13) 0%, transparent 70%);
    z-index: 2;
    pointer-events: none;
    transform: scale(1);
    opacity: 0.8;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
    will-change: transform, opacity;
}

#slider-part:hover .slider-glow-layer {
    transform: scale(1.2) translate(15px, 15px);
    opacity: 1;
}

#slider-part .slider-cont {
    position: relative;
    z-index: 3;
    max-width: 660px;
    padding-bottom: 0;
}

/* ─── 2. Entrance Animations ────────────────────────────────────────── */
@keyframes heroFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── 3. Hero Status Pill Badge ─────────────────────────────────────── */
.champs-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 198, 0, 0.35);
    padding: 6px 16px;
    border-radius: 50px;
    color: #ffc600;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.4px;
    margin-bottom: 18px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: heroFadeInDown 0.7s ease-out 0.15s both;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.champs-hero-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 198, 0, 0.65);
    box-shadow: 0 6px 20px rgba(255, 198, 0, 0.25);
}

.champs-hero-badge i {
    color: #ffc600;
    font-size: 14px;
}

.champs-hero-badge .badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
    display: inline-block;
}

/* ─── 4. Heading & Typography ───────────────────────────────────────── */
#slider-part .slider-cont h1 {
    font-size: 46px;
    line-height: 1.22;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #ffffff;
    padding-bottom: 14px;
    letter-spacing: -0.5px;
    animation: heroFadeInUp 0.7s ease-out 0.3s both;
}

#slider-part .slider-cont h1 .gold-text {
    color: #ffc600;
    background: linear-gradient(135deg, #ffc600 20%, #ffe082 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
}

#slider-part .slider-cont p.hero-lead {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    padding-bottom: 14px;
    margin: 0;
    animation: heroFadeInUp 0.7s ease-out 0.45s both;
}

#slider-part .slider-cont p.hero-lead strong {
    color: #ffffff;
    font-weight: 600;
}

/* ─── 5. Quote Box Card ─────────────────────────────────────────────── */
.hero-quote-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid #ffc600;
    border-radius: 0 8px 8px 0;
    padding: 9px 15px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: heroFadeInUp 0.7s ease-out 0.6s both;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, border-left-color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.hero-quote-card:hover {
    transform: translateX(6px);
    background: rgba(255, 255, 255, 0.08);
    border-left-color: #ffe082;
    box-shadow: 0 6px 20px rgba(255, 198, 0, 0.18);
}

.hero-quote-card i {
    color: #ffc600;
    font-size: 15px;
    opacity: 0.85;
    flex-shrink: 0;
}

.hero-quote-card span {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13.5px;
    font-style: italic;
    line-height: 1.45;
}

.hero-quote-card span em {
    color: #ffc600;
    font-style: normal;
    font-weight: 600;
}

/* ─── 6. Action Button Group ────────────────────────────────────────── */
.hero-action-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    animation: heroFadeInUp 0.7s ease-out 0.75s both;
}

.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ffc600 0%, #f6ad13 100%);
    color: #07294d !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
    padding: 15px 30px;
    border-radius: 8px;
    border: 2px solid #ffc600;
    box-shadow: 0 6px 20px rgba(246, 173, 19, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    cursor: pointer;
}

.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(246, 173, 19, 0.5);
    background: #ffffff;
    border-color: #ffffff;
    color: #07294d !important;
}

.hero-btn-primary i {
    transition: transform 0.25s ease;
}

.hero-btn-primary:hover i {
    transform: translateX(4px);
}

.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 15px 26px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: #ffc600;
    color: #ffc600 !important;
    transform: translateY(-2px);
}

/* ─── 7. Trust Chips / Feature Badges ───────────────────────────────── */
.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    animation: heroFadeInUp 0.7s ease-out 0.9s both;
}

.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(7, 41, 77, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 7px 14px;
    border-radius: 30px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 13px;
    font-weight: 500;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.hero-trust-item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 198, 0, 0.45);
    background: rgba(7, 41, 77, 0.9);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    color: #ffffff;
}

.hero-trust-item i {
    color: #ffc600;
    font-size: 13px;
    transition: transform 0.25s ease;
}

.hero-trust-item:hover i {
    transform: scale(1.2);
}

/* ─── 8. Category Cards & Hover Animations ──────────────────────────── */
.champs-category-card {
    position: relative;
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, filter 0.3s ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    will-change: transform, box-shadow;
}

.champs-category-card a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
}

.champs-category-card .single-category {
    padding: 24px 12px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.35s ease;
    background: transparent;
}

/* Diagonal subtle light sheen sweep on hover */
.champs-category-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 20%,
        rgba(255, 255, 255, 0.32) 50%,
        transparent 80%
    );
    transform: skewX(-20deg);
    transition: left 0.75s ease;
    pointer-events: none;
    z-index: 2;
}

.champs-category-card:hover::before {
    left: 150%;
}

/* Hover Lift & Scale */
.champs-category-card:hover {
    transform: translateY(-8px) scale(1.025);
}

/* Icon Animation on Card Hover */
.champs-category-card .icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.champs-category-card:hover .icon img {
    transform: scale(1.15) translateY(-3px);
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
}

/* Category Label */
.champs-category-card .cont span {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    margin-top: 10px;
    display: block;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

.champs-category-card:hover .cont span {
    transform: translateY(-1px);
}

/* Card Color Themes & Custom Glow Blobs */
.cat-card-11plus {
    background: linear-gradient(145deg, #4784fc 0%, #356ce0 100%);
}
.cat-card-11plus:hover {
    box-shadow: 0 14px 28px rgba(71, 132, 252, 0.45), 0 0 18px rgba(71, 132, 252, 0.3);
}

.cat-card-keystages {
    background: linear-gradient(145deg, #b3d369 0%, #9cb852 100%);
}
.cat-card-keystages:hover {
    box-shadow: 0 14px 28px rgba(179, 211, 105, 0.45), 0 0 18px rgba(179, 211, 105, 0.3);
}

.cat-card-gcse {
    background: linear-gradient(145deg, #fc6e6e 0%, #e65555 100%);
}
.cat-card-gcse:hover {
    box-shadow: 0 14px 28px rgba(252, 110, 110, 0.45), 0 0 18px rgba(252, 110, 110, 0.3);
}

.cat-card-admission {
    background: linear-gradient(145deg, #fbc40d 0%, #e5b004 100%);
}
.cat-card-admission:hover {
    box-shadow: 0 14px 28px rgba(251, 196, 13, 0.45), 0 0 18px rgba(251, 196, 13, 0.3);
}

.cat-card-summer {
    background: linear-gradient(145deg, #a8e052 0%, #8ec43e 100%);
}
.cat-card-summer:hover {
    box-shadow: 0 14px 28px rgba(168, 224, 82, 0.45), 0 0 18px rgba(168, 224, 82, 0.3);
}

.cat-card-creative {
    background: linear-gradient(145deg, #eb7645 0%, #d45e2c 100%);
}
.cat-card-creative:hover {
    box-shadow: 0 14px 28px rgba(235, 118, 69, 0.45), 0 0 18px rgba(235, 118, 69, 0.3);
}

/* ─── 9. Responsive Breakpoints ─────────────────────────────────────── */
@media (max-width: 991.98px) {
    #slider-part.slider-active .single-slider {
        min-height: 600px;
        padding-top: 80px;
        padding-bottom: 170px; /* Offset for -100px margin of .category */
    }
    .slider-bg-layer {
        background-position: center right 25%;
    }
    #slider-part .slider-cont h1 {
        font-size: 36px;
    }
    .slider-overlay-layer {
        background: linear-gradient(
            90deg,
            rgba(7, 41, 77, 0.98) 0%,
            rgba(7, 41, 77, 0.92) 55%,
            rgba(7, 41, 77, 0.65) 100%
        );
    }
}

@media (max-width: 575.98px) {
    #slider-part.slider-active .single-slider {
        min-height: auto;
        padding-top: 45px;
        padding-bottom: 150px; /* Offset for -100px margin of .category */
    }
    #slider-part .slider-cont h1 {
        font-size: 27px;
        line-height: 1.25;
    }
    #slider-part .slider-cont p.hero-lead {
        font-size: 15px;
    }
    .hero-action-btns {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .hero-btn-primary,
    .hero-btn-secondary {
        justify-content: center;
        text-align: center;
    }
    .hero-trust-row {
        gap: 8px;
    }
    .hero-trust-item {
        font-size: 12px;
        padding: 6px 11px;
    }
}

/* ─── 10. App Download Section (Clean Externalized) ─────────────────── */
.app-download-section {
    background-color: #162a4a;
    padding: 40px 15px;
}

.country-list {
    color: #ffffff;
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px 5px;
    transition: all 0.3s ease;
}

.country-item {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    color: #f0f4f9;
    cursor: pointer;
    position: relative;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.country-item:hover {
    color: #ffc600;
    background: rgba(255, 198, 0, 0.15);
    transform: translateY(-2px) scale(1.05);
    text-shadow: 0 0 12px rgba(255, 198, 0, 0.55);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.country-sep {
    display: inline-block;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 300;
    user-select: none;
    transition: color 0.3s ease;
}

.country-list:hover .country-sep {
    color: rgba(255, 198, 0, 0.35);
}

.country-list:hover .country-item:not(:hover) {
    opacity: 0.72;
}

.country-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    width: 57%;
    margin: 15px auto 25px;
}

.store-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.store-buttons img {
    height: 45px;
    max-width: 160px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 16px rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.store-buttons img:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 24px rgba(255, 255, 255, 0.6);
}

/* ─── 11. Redesigned "Enrol and Succeed!" Founder Philosophy Card ────── */
.champs-enroll-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid #ffc600;
    border-radius: 16px;
    padding: 34px 30px;
    margin-left: 40px; /* Offset from section left edge so it doesn't touch */
    margin-right: 15px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}

.champs-enroll-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.38), 0 0 28px rgba(255, 198, 0, 0.15);
    border-color: rgba(255, 198, 0, 0.35);
    border-left-color: #ffc600;
}

.champs-enroll-card::after {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.enroll-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 198, 0, 0.14);
    border: 1px solid rgba(255, 198, 0, 0.32);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 16px;
    color: #ffc600;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Montserrat', sans-serif;
}

.enroll-badge i {
    font-size: 12px;
    color: #ffc600;
}

.enroll-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 18px;
    letter-spacing: -0.3px;
}

.gold-gradient {
    background: linear-gradient(135deg, #ffc600 0%, #ffe07a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.enroll-quote-box {
    position: relative;
    padding: 18px 20px;
    background: rgba(7, 41, 77, 0.45);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 24px;
}

.enroll-quote-text {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: #e2eaf4;
    font-style: italic;
    margin: 0;
}

.founder-profile-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.founder-avatar-wrap {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #ffc600;
    box-shadow: 0 4px 12px rgba(255, 198, 0, 0.25);
    overflow: hidden;
    background-color: #07294d;
}

.founder-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.champs-enroll-card:hover .founder-avatar {
    transform: scale(1.08);
}

.founder-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.founder-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
}

.founder-role {
    font-size: 13px;
    color: #9ab4d0;
    line-height: 1.3;
    margin-bottom: 4px;
}

.founder-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #ffc600;
    text-decoration: none;
    transition: all 0.25s ease;
    width: fit-content;
}

.founder-link:hover {
    color: #ffffff;
    transform: translateX(4px);
}

.founder-link i {
    font-size: 11px;
    transition: transform 0.25s ease;
}

.founder-link:hover i {
    transform: translateX(2px);
}

/* ─── 12. Media Queries for Enroll Section ──────────────────────────── */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .champs-enroll-card {
        margin-left: 20px;
        margin-right: 10px;
        padding: 28px 22px;
    }
}

@media (max-width: 991.98px) {
    .champs-enroll-card {
        margin-left: 15px;
        margin-right: 15px;
        margin-bottom: 30px;
        padding: 28px 22px;
    }
    .enroll-title {
        font-size: 28px;
    }
    .enroll-quote-text {
        font-size: 15px;
    }
}

@media (max-width: 575.98px) {
    .country-list {
        font-size: 14px;
        line-height: 1.8;
        gap: 2px 3px;
    }
    .country-item {
        padding: 2px 5px;
    }
    .country-divider {
        width: 90%;
    }
    .store-buttons img {
        height: 40px;
        max-width: 140px;
    }
    .champs-enroll-card {
        margin-left: 8px;
        margin-right: 8px;
        padding: 22px 18px;
    }
    .enroll-title {
        font-size: 24px;
    }
    .founder-profile-bar {
        gap: 12px;
    }
    .founder-avatar-wrap {
        width: 50px;
        height: 50px;
    }
    .founder-name {
        font-size: 16px;
    }
    .founder-role {
        font-size: 12px;
    }
}

/* ─── 13. Redesigned About Section (#about-part) ─────────────────────── */
#about-part {
    position: relative;
    background: linear-gradient(180deg, #f8fafd 0%, #f0f4fa 50%, #f8fafd 100%);
    padding-top: 90px;
    padding-bottom: 210px; /* Ample buffer for -100px negative margin of .apply below */
    overflow: hidden;
}

/* Ambient glow orbs */
#about-part::before {
    content: "";
    position: absolute;
    top: -100px;
    left: -100px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(71, 132, 252, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

#about-part::after {
    content: "";
    position: absolute;
    bottom: 50px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.09) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

#about-part .container {
    position: relative;
    z-index: 2;
}

/* Left Narrative Column */
.about-narrative-card {
    padding-right: 25px;
}

.about-eyebrow-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(7, 41, 77, 0.06);
    border: 1px solid rgba(7, 41, 77, 0.12);
    border-radius: 30px;
    padding: 6px 16px;
    margin-bottom: 20px;
}

.about-eyebrow-wrap i {
    color: #ffc600;
    font-size: 14px;
}

.about-eyebrow-wrap h5 {
    color: #07294d;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

.about-narrative-card h1.about_us_title {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #07294d;
    line-height: 1.25;
    margin-bottom: 22px;
    letter-spacing: -0.5px;
}

.about-text-content {
    margin-bottom: 28px;
}

.about-text-content p.about_us_desc {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #4b5563;
    margin: 0;
}

/* Value Highlights Grid */
.about-highlights-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 35px;
    padding-top: 14px;
    border-top: 1px solid rgba(7, 41, 77, 0.08);
}

.about-highlight-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    font-family: 'Montserrat', sans-serif;
}

.about-highlight-pill i {
    color: #22c55e;
    font-size: 15px;
}

/* CTA Button */
.about-btn-wrap {
    margin-top: 10px;
}

.about-main-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%);
    color: #07294d;
    border: none;
    border-radius: 8px;
    padding: 0 32px;
    height: 52px;
    line-height: 52px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 24px rgba(255, 198, 0, 0.35);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    cursor: pointer;
}

.about-main-btn:hover {
    background: linear-gradient(135deg, #07294d 0%, #0d3866 100%);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(7, 41, 77, 0.35);
    transform: translateY(-3px);
}

.about-main-btn i {
    font-size: 13px;
    transition: transform 0.3s ease;
}

.about-main-btn:hover i {
    transform: translateX(4px);
    color: #ffc600;
}

/* Right Visual Column */
.about-visual-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.about-media-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(7, 41, 77, 0.15), 0 4px 12px rgba(7, 41, 77, 0.06);
    border: 4px solid #ffffff;
    background: #ffffff;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.about-media-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(7, 41, 77, 0.22);
}

.about-media-thumb {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    background: #07294d;
}

.about-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

.about-media-card:hover .about-media-img {
    transform: scale(1.05);
}

.about-media-sheen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(7, 41, 77, 0) 55%,
        rgba(7, 41, 77, 0.65) 100%
    );
    pointer-events: none;
}

/* Floating Pill on Image */
.about-floating-pill {
    position: absolute;
    bottom: 22px;
    left: 22px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    transition: transform 0.3s ease;
}

.about-media-card:hover .about-floating-pill {
    transform: translateY(-2px);
}

.about-pill-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffc600;
    color: #07294d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.about-pill-text {
    display: flex;
    flex-direction: column;
}

.about-pill-text strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #07294d;
    font-weight: 700;
    line-height: 1.2;
}

.about-pill-text span {
    font-size: 12px;
    color: #64748b;
    font-family: 'Roboto', sans-serif;
    line-height: 1.2;
}

/* Modern Upcoming Workshops Card */
#upcoming_workshop_id .about-event {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 16px 36px rgba(7, 41, 77, 0.08);
    padding: 28px 24px;
    margin-top: 0;
    transition: all 0.3s ease;
}

#upcoming_workshop_id .about-event:hover {
    box-shadow: 0 22px 45px rgba(7, 41, 77, 0.14);
}

#upcoming_workshop_id .about-event .event-title h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #07294d;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ffc600;
    display: inline-block;
}

#upcoming_workshop_id .about-event ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#upcoming_workshop_id .about-event ul li .single-event {
    padding: 14px 0;
    border-bottom: 1px solid #eef2f6;
    transition: padding-left 0.25s ease;
}

#upcoming_workshop_id .about-event ul li:last-child .single-event {
    border-bottom: none;
}

#upcoming_workshop_id .about-event ul li .single-event:hover {
    padding-left: 6px;
}

#upcoming_workshop_id .about-event ul li .single-event span {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

#upcoming_workshop_id .about-event ul li .single-event span i {
    color: #ffc600;
    margin-right: 6px;
}

#upcoming_workshop_id .about-event ul li .single-event h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #07294d;
    margin-top: 4px;
    transition: color 0.25s ease;
}

#upcoming_workshop_id .about-event ul li .single-event:hover h4 {
    color: #e5b004;
}

#upcoming_workshop_id .about-event .main-btn {
    border-radius: 8px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    height: 44px;
    line-height: 44px;
    padding: 0 28px;
    margin-top: 15px;
    display: inline-block;
}

/* Responsive Rules for About Section */
@media (max-width: 991.98px) {
    #about-part {
        padding-top: 70px;
        padding-bottom: 170px;
    }
    .about-narrative-card {
        padding-right: 0;
        margin-bottom: 40px;
    }
    .about-narrative-card h1.about_us_title {
        font-size: 30px;
    }
    .about-media-thumb {
        height: 320px;
    }
}

@media (max-width: 575.98px) {
    #about-part {
        padding-top: 50px;
        padding-bottom: 150px;
    }
    .about-narrative-card h1.about_us_title {
        font-size: 24px;
    }
    .about-text-content p.about_us_desc {
        font-size: 15px;
    }
    .about-highlights-grid {
        gap: 8px 14px;
    }
    .about-highlight-pill {
        font-size: 13px;
    }
    .about-media-thumb {
        height: 250px;
    }
    .about-floating-pill {
        bottom: 14px;
        left: 14px;
        padding: 8px 12px;
    }
    .about-pill-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .about-pill-text strong {
        font-size: 12px;
    }
    .about-pill-text span {
        font-size: 11px;
    }
}

/* ─── 14. Spacing Fix & Redesigned Apply Section (#apply-aprt) ───────── */
#category-part {
    margin-bottom: 50px; /* Clean spacing between category box and about section */
}

#apply-aprt {
    position: relative;
    z-index: 5;
    margin-top: -120px; /* Smooth negative overlap pulling into #about-part */
    padding-bottom: 90px;
}

.champs-apply-wrapper {
    background: transparent;
    border-radius: 0;
    margin-top: 0;
}

.champs-apply-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border-radius: 20px;
    padding: 44px 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Card 1: Diagnostic Test (Navy Glass with Sapphire Glow) */
.apply-diagnostic-card {
    background: linear-gradient(145deg, #07294d 0%, #0d3866 100%);
    box-shadow: 0 20px 45px rgba(7, 41, 77, 0.28);
}

.apply-diagnostic-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 55px rgba(7, 41, 77, 0.4), 0 0 30px rgba(71, 132, 252, 0.22);
    border-color: rgba(71, 132, 252, 0.4);
}

/* Card 2: Mock Test (Deep Midnight with Gold Glow) */
.apply-mock-card {
    background: linear-gradient(145deg, #092e56 0%, #103c6e 100%);
    box-shadow: 0 20px 45px rgba(7, 41, 77, 0.28);
}

.apply-mock-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 55px rgba(7, 41, 77, 0.4), 0 0 30px rgba(255, 198, 0, 0.2);
    border-color: rgba(255, 198, 0, 0.4);
}

/* Diagonal Sheen Sweep on Hover */
.champs-apply-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        115deg,
        transparent 20%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 80%
    );
    transform: skewX(-20deg);
    transition: left 0.75s ease;
    pointer-events: none;
    z-index: 2;
}

.champs-apply-card:hover::before {
    left: 150%;
}

/* Header Row & Badges */
.apply-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.apply-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(71, 132, 252, 0.18);
    border: 1px solid rgba(71, 132, 252, 0.35);
    color: #8bb3ff;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Montserrat', sans-serif;
}

.apply-badge.badge-gold {
    background: rgba(255, 198, 0, 0.15);
    border-color: rgba(255, 198, 0, 0.35);
    color: #ffc600;
}

.apply-icon-circle {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8bb3ff;
    font-size: 18px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.apply-icon-circle.icon-gold {
    color: #ffc600;
}

.champs-apply-card:hover .apply-icon-circle {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.14);
}

.apply-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

.apply-card-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #cbd5e1;
    margin-bottom: 24px;
}

/* Feature Chips */
.apply-feature-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 30px;
}

.apply-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
    font-family: 'Montserrat', sans-serif;
}

.apply-chip i {
    color: #38bdf8;
    font-size: 11px;
}

.apply-chip.chip-gold i {
    color: #ffc600;
}

/* Buttons with sticky baseline alignment */
.apply-card-action {
    margin-top: auto;
    padding-top: 10px;
}

.apply-btn-diagnostic,
.apply-btn-mock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    line-height: 52px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.apply-btn-diagnostic {
    background: #ffffff;
    color: #07294d;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.apply-btn-diagnostic:hover {
    background: #ffc600;
    color: #07294d;
    box-shadow: 0 14px 28px rgba(255, 198, 0, 0.35);
    transform: translateY(-2px);
}

.apply-btn-mock {
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%);
    color: #07294d;
    box-shadow: 0 10px 24px rgba(255, 198, 0, 0.35);
}

.apply-btn-mock:hover {
    background: #ffffff;
    color: #07294d;
    box-shadow: 0 14px 28px rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

.apply-btn-diagnostic i,
.apply-btn-mock i {
    font-size: 13px;
    transition: transform 0.25s ease;
}

.apply-btn-diagnostic:hover i,
.apply-btn-mock:hover i {
    transform: translateX(4px);
}

/* Responsive Rules for Apply Section */
@media (max-width: 991.98px) {
    #apply-aprt {
        margin-top: -80px;
        padding-bottom: 70px;
    }
    .champs-apply-card {
        padding: 34px 28px;
    }
    .apply-card-title {
        font-size: 23px;
    }
}

@media (max-width: 575.98px) {
    #category-part {
        margin-bottom: 35px;
    }
    #apply-aprt {
        margin-top: -60px;
        padding-bottom: 50px;
    }
    .champs-apply-card {
        padding: 26px 20px;
        border-radius: 16px;
    }
    .apply-card-title {
        font-size: 20px;
    }
    .apply-card-desc {
        font-size: 14px;
    }
}

/* ─── Elegant Section Divider (Separator above Open Day) ─────────────── */
.champs-divider-wrapper {
    position: relative;
    padding: 35px 0;
    margin: 0;
    background: #ffffff;
    clear: both;
    z-index: 5;
}

.champs-gradient-divider {
    height: 2px;
    width: 100%;
    background: linear-gradient(
        90deg,
        rgba(7, 41, 77, 0) 0%,
        rgba(7, 41, 77, 0.12) 15%,
        rgba(255, 198, 0, 0.6) 50%,
        rgba(7, 41, 77, 0.12) 85%,
        rgba(7, 41, 77, 0) 100%
    );
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.champs-divider-gem {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #ffc600;
    box-shadow: 0 4px 14px rgba(255, 198, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffc600;
    font-size: 13px;
    z-index: 2;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.champs-divider-wrapper:hover .champs-divider-gem {
    transform: scale(1.15) rotate(72deg);
    box-shadow: 0 6px 18px rgba(255, 198, 0, 0.5);
}

/* ─── 15. Redesigned Open Day Section ────────────────────────────────── */
.champs-openday-section {
    position: relative;
    background: #ffffff;
    padding: 60px 0 90px;
    overflow: hidden;
}

/* Subtle ambient backdrop lights */
.champs-openday-section::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.champs-openday-section::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -80px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(7, 41, 77, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.champs-openday-section .container {
    position: relative;
    z-index: 2;
}

.openday-content-wrap {
    padding-right: 25px;
}

.openday-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(7, 41, 77, 0.06);
    border: 1px solid rgba(7, 41, 77, 0.12);
    border-radius: 30px;
    padding: 6px 16px;
    margin-bottom: 20px;
    color: #07294d;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Montserrat', sans-serif;
}

.openday-badge i {
    color: #ffc600;
    font-size: 14px;
}

.openday-content-wrap .section-title h1.open_day_title {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #07294d;
    line-height: 1.25;
    margin-bottom: 22px;
    letter-spacing: -0.5px;
}

.openday-desc-wrap {
    margin-bottom: 28px;
}

.openday-desc-wrap p.open_day_desc,
.openday-desc-wrap p.open_day_desc p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 14px;
}

.openday-desc-wrap p.open_day_desc p:last-child {
    margin-bottom: 0;
}

/* Feature Highlights */
.openday-highlights-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    margin-bottom: 35px;
    padding-top: 14px;
    border-top: 1px solid rgba(7, 41, 77, 0.08);
}

.openday-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    font-family: 'Montserrat', sans-serif;
}

.openday-pill i {
    color: #2563eb;
    font-size: 14px;
}

/* Button */
.openday-btn-wrap {
    margin-top: 5px;
}

.openday-main-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #07294d 0%, #0d3866 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 0 32px;
    height: 52px;
    line-height: 52px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 24px rgba(7, 41, 77, 0.25);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    cursor: pointer;
}

.openday-main-btn:hover {
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%);
    color: #07294d;
    box-shadow: 0 14px 30px rgba(255, 198, 0, 0.38);
    transform: translateY(-3px);
}

.openday-main-btn i {
    font-size: 13px;
    transition: transform 0.3s ease;
}

.openday-main-btn:hover i {
    transform: translateX(4px);
}

/* Right Media Card */
.openday-media-wrap {
    position: relative;
}

.openday-img-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgba(7, 41, 77, 0.15), 0 4px 12px rgba(7, 41, 77, 0.06);
    border: 4px solid #ffffff;
    background: #07294d;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.openday-img-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px rgba(7, 41, 77, 0.22);
}

.openday-img-frame {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
}

.openday-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

.openday-img-card:hover .openday-img {
    transform: scale(1.05);
}

.openday-img-sheen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(7, 41, 77, 0) 55%,
        rgba(7, 41, 77, 0.65) 100%
    );
    pointer-events: none;
}

/* Floating Status Chip on Image */
.openday-floating-chip {
    position: absolute;
    bottom: 22px;
    left: 22px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    transition: transform 0.3s ease;
}

.openday-img-card:hover .openday-floating-chip {
    transform: translateY(-2px);
}

.openday-chip-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffc600;
    color: #07294d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.openday-chip-info {
    display: flex;
    flex-direction: column;
}

.openday-chip-info strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    color: #07294d;
    font-weight: 700;
    line-height: 1.2;
}

.openday-chip-info span {
    font-size: 12px;
    color: #64748b;
    font-family: 'Roboto', sans-serif;
    line-height: 1.2;
}

/* Responsive Rules for Open Day Section */
@media (max-width: 991.98px) {
    .champs-openday-section {
        padding: 70px 0 65px;
    }
    .openday-content-wrap {
        padding-right: 0;
        margin-bottom: 40px;
    }
    .openday-content-wrap .section-title h1.open_day_title {
        font-size: 30px;
    }
    .openday-img-frame {
        height: 320px;
    }
}

@media (max-width: 575.98px) {
    .champs-openday-section {
        padding: 50px 0 45px;
    }
    .openday-content-wrap .section-title h1.open_day_title {
        font-size: 24px;
    }
    .openday-desc-wrap p.open_day_desc,
    .openday-desc-wrap p.open_day_desc p {
        font-size: 15px;
    }
    .openday-img-frame {
        height: 250px;
    }
    .openday-floating-chip {
        bottom: 14px;
        left: 14px;
        padding: 8px 12px;
    }
    .openday-chip-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .openday-chip-info strong {
        font-size: 12px;
    }
    .openday-chip-info span {
        font-size: 11px;
    }
}

/* ─── 16. Redesigned Featured Courses Section (#course-part) ────────── */
#course-part {
    position: relative;
    /* gray-bg background strictly preserved */
}

.course-header-wrap {
    margin-bottom: 10px;
}

.course-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(7, 41, 77, 0.06);
    border: 1px solid rgba(7, 41, 77, 0.12);
    border-radius: 30px;
    padding: 6px 16px;
    margin-bottom: 16px;
    color: #07294d;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Montserrat', sans-serif;
}

.course-badge i {
    color: #ffc600;
    font-size: 14px;
}

.course-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #07294d;
    line-height: 1.25;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.course-section-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
}

/* Course Slide Carousel Spacing (Allowing native Slick 3-column display) */
#course-part .course-slide {
    margin-left: -15px;
    margin-right: -15px;
}

/* Modern Course Card with Strict Equal Height */
.champs-course-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 12px 30px rgba(7, 41, 77, 0.07);
    overflow: hidden;
    margin-bottom: 25px;
    margin-top: 10px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.champs-course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 50px rgba(7, 41, 77, 0.15), 0 0 20px rgba(255, 198, 0, 0.12);
    border-color: rgba(255, 198, 0, 0.35);
}

/* Thumbnail Area */
.champs-course-card .thum {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #07294d;
    flex-shrink: 0;
}

.champs-course-card .thum .image {
    width: 100%;
    height: 100%;
}

.champs-course-card .thum .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

.champs-course-card:hover .thum .image img {
    transform: scale(1.08);
}

/* Floating Category Tag */
.course-cat-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(7, 41, 77, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffc600;
    border: 1px solid rgba(255, 198, 0, 0.35);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Montserrat', sans-serif;
    z-index: 2;
}

/* Content Area */
.champs-course-card .cont {
    padding: 24px 24px 22px;
    display: flex;
    flex-direction: column;
    min-height: 154px;
}

.champs-course-card .cont a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-grow: 1;
}

.champs-course-card .cont h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #07294d;
    line-height: 1.35;
    margin-bottom: 22px;
    min-height: 52px;
    display: flex;
    align-items: center;
    transition: color 0.3s ease;
}

.champs-course-card:hover .cont h4 {
    color: #e5b004;
}

/* Hide Subject List */
.course-subjects-box {
    display: none !important;
}

/* Card Footer with Link */
.course-card-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.course-view-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #07294d;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease;
}

.course-view-link i {
    color: #ffc600;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.champs-course-card:hover .course-view-link {
    color: #e5b004;
}

.champs-course-card:hover .course-view-link i {
    transform: translateX(4px);
}

/* Modern Slick Arrows for Course Carousel */
#course-part .course-slide .slick-arrow {
    top: -90px;
    width: 46px;
    height: 46px;
    background: #ffffff;
    border-radius: 50%;
    border: 1px solid rgba(7, 41, 77, 0.12);
    box-shadow: 0 4px 14px rgba(7, 41, 77, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
}

#course-part .course-slide .slick-arrow i {
    width: 46px;
    height: 46px;
    line-height: 44px;
    text-align: center;
    border: none;
    font-size: 20px;
    color: #07294d;
    background: transparent;
    transition: all 0.3s ease;
}

#course-part .course-slide .prev.slick-arrow {
    right: 60px;
    left: auto;
}

#course-part .course-slide .next.slick-arrow {
    right: 5px;
}

#course-part .course-slide .slick-arrow:hover {
    background: #ffc600;
    border-color: #ffc600;
    box-shadow: 0 8px 20px rgba(255, 198, 0, 0.4);
    transform: translateY(-2px);
}

#course-part .course-slide .slick-arrow:hover i {
    color: #07294d;
}

/* Responsive Rules for Course Section */
@media (max-width: 991.98px) {
    #course-part .course-slide .slick-arrow {
        top: -75px;
    }
    .course-section-title {
        font-size: 32px;
    }
    .champs-course-card .thum {
        height: 200px;
    }
}

@media (max-width: 767.98px) {
    #course-part .course-slide .slick-arrow {
        display: none !important;
    }
}

@media (max-width: 575.98px) {
    .course-section-title {
        font-size: 26px;
    }
    .course-section-desc {
        font-size: 14px;
    }
    .champs-course-card .thum {
        height: 190px;
    }
}

/* ─── 17. Redesigned Video & Facilities Section (#video-feature) ─────── */
#video-feature.champs-facilities-section {
    position: relative;
    background-image: url(../images/ourfacilities.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding-top: 105px;
    padding-bottom: 105px;
}

/* Dual-layer rich navy glass overlay */
.facilities-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(7, 41, 77, 0.94) 0%,
        rgba(10, 48, 88, 0.88) 50%,
        rgba(7, 41, 77, 0.95) 100%
    );
    z-index: 1;
}

/* Ambient warm radial accent */
#video-feature.champs-facilities-section::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.facilities-container {
    position: relative;
    z-index: 2;
}

/* Left Video Card */
.facilities-video-wrap {
    padding-right: 25px;
}

.facilities-video-card {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 24px;
    padding: 60px 40px 45px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.facilities-video-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 198, 0, 0.4);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.45), 0 0 35px rgba(255, 198, 0, 0.15);
}

.video-play-box {
    position: relative;
    margin-bottom: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Pulsating Play Button */
.facilities-play-btn {
    position: relative;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%);
    color: #07294d !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(255, 198, 0, 0.45);
    cursor: pointer;
    text-decoration: none;
    z-index: 3;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.facilities-play-btn i {
    font-size: 26px;
    margin-left: 5px; /* optical alignment */
    color: #07294d;
    transition: transform 0.3s ease;
}

.facilities-play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 16px 40px rgba(255, 198, 0, 0.6);
}

.facilities-play-btn:hover i {
    transform: scale(1.12);
}

/* Glowing Ripple Animation */
.play-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 86px;
    height: 86px;
    margin-top: -43px;
    margin-left: -43px;
    border-radius: 50%;
    border: 2px solid rgba(255, 198, 0, 0.7);
    animation: facilityRipple 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
    pointer-events: none;
    z-index: 1;
}

.play-ripple.ripple-2 {
    animation-delay: 1.1s;
}

@keyframes facilityRipple {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.85);
        opacity: 0;
    }
}

/* Video Caption */
.facilities-video-caption {
    position: relative;
    z-index: 2;
}

.video-caption-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 198, 0, 0.16);
    border: 1px solid rgba(255, 198, 0, 0.35);
    color: #ffc600;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-radius: 20px;
    padding: 4px 12px;
    margin-bottom: 14px;
    font-family: 'Montserrat', sans-serif;
}

.facilities-video-caption h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.35;
    margin-bottom: 8px;
}

.facilities-video-caption p {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
    max-width: 380px;
}

/* Right Facilities Wrap */
.facilities-content-wrap {
    padding-left: 20px;
}

.facilities-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;
    padding: 6px 16px;
    margin-bottom: 16px;
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Montserrat', sans-serif;
}

.facilities-badge i {
    color: #ffc600;
    font-size: 14px;
}

.facilities-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.facilities-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 28px;
}

/* Facilities List Items */
.facilities-list-grid {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.facility-item-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    padding: 13px 20px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.facility-item-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #ffc600;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.facility-item-card:hover {
    transform: translateX(8px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 198, 0, 0.35);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

.facility-item-card:hover::before {
    opacity: 1;
}

.facility-icon-wrap {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.facility-icon-wrap img {
    max-width: 26px;
    max-height: 26px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.facility-item-card:hover .facility-icon-wrap {
    transform: scale(1.08);
    background: rgba(255, 198, 0, 0.16);
    border-color: rgba(255, 198, 0, 0.4);
}

.facility-text-wrap {
    flex-grow: 1;
}

.facility-text-wrap h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #f8fafc;
    line-height: 1.45;
    margin: 0;
    transition: color 0.3s ease;
}

.facility-item-card:hover .facility-text-wrap h4 {
    color: #ffc600;
}

/* Responsive Rules for Facilities Section */
@media (max-width: 991.98px) {
    #video-feature.champs-facilities-section {
        padding-top: 75px;
        padding-bottom: 75px;
    }
    .facilities-video-wrap {
        padding-right: 0;
        margin-top: 45px;
    }
    .facilities-content-wrap {
        padding-left: 0;
    }
    .facilities-title {
        font-size: 30px;
    }
}

@media (max-width: 575.98px) {
    #video-feature.champs-facilities-section {
        padding-top: 55px;
        padding-bottom: 55px;
    }
    .facilities-video-card {
        padding: 40px 20px 30px;
    }
    .facilities-play-btn {
        width: 70px;
        height: 70px;
    }
    .play-ripple {
        width: 70px;
        height: 70px;
        margin-top: -35px;
        margin-left: -35px;
    }
    .facilities-play-btn i {
        font-size: 20px;
    }
    .facilities-title {
        font-size: 24px;
    }
    .facilities-subtitle {
        font-size: 14px;
        margin-bottom: 22px;
    }
    .facility-item-card {
        padding: 12px 16px;
        gap: 14px;
    }
    .facility-icon-wrap {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }
    .facility-icon-wrap img {
        max-width: 24px;
        max-height: 24px;
    }
    .facility-text-wrap h4 {
        font-size: 14px;
    }
}

/* ─── 18. Redesigned Teachers Section (#teachers-part) ───────────────── */
#teachers-part.champs-teachers-section {
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

#teachers-part.champs-teachers-section::before {
    content: "";
    position: absolute;
    top: -80px;
    left: -80px;
    width: 440px;
    height: 440px;
    background: radial-gradient(circle, rgba(7, 41, 77, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

#teachers-part .container {
    position: relative;
    z-index: 2;
}

.teachers-editorial-wrap {
    padding-right: 25px;
}

.teachers-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(7, 41, 77, 0.06);
    border: 1px solid rgba(7, 41, 77, 0.12);
    border-radius: 30px;
    padding: 6px 16px;
    margin-bottom: 20px;
    color: #07294d;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Montserrat', sans-serif;
}

.teachers-badge i {
    color: #ffc600;
    font-size: 14px;
}

.teachers-editorial-wrap h1.meet_our_teachers_title,
.teachers-main-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #07294d;
    line-height: 1.25;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.teachers-narrative p.meet_our_teachers_desc,
.teachers-narrative p.meet_our_teachers_desc p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #4b5563;
    margin-bottom: 25px;
}

.teachers-highlights-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 35px;
    padding-top: 15px;
    border-top: 1px solid rgba(7, 41, 77, 0.08);
}

.teacher-highlight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.teacher-highlight-item i {
    color: #2563eb;
    font-size: 15px;
    flex-shrink: 0;
}

.teachers-cta-box {
    margin-top: 5px;
}

.teacher-career-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #07294d 0%, #0d3866 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 8px;
    padding: 0 30px;
    height: 50px;
    line-height: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 24px rgba(7, 41, 77, 0.22);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    cursor: pointer;
}

.teacher-career-btn:hover {
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%);
    color: #07294d !important;
    box-shadow: 0 14px 28px rgba(255, 198, 0, 0.38);
    transform: translateY(-2px);
}

.teacher-career-btn i.fa-arrow-right {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.teacher-career-btn:hover i.fa-arrow-right {
    transform: translateX(4px);
}

/* Right Teachers Grid */
.teachers-grid-wrap {
    padding-left: 10px;
}

.champs-teacher-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.08);
    border: 1px solid rgba(7, 41, 77, 0.1);
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}

.champs-teacher-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(7, 41, 77, 0.15), 0 0 20px rgba(255, 198, 0, 0.12);
    border-color: rgba(255, 198, 0, 0.4);
}

.teacher-img-box {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    background: #f8fafc;
}

.teacher-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

.champs-teacher-card:hover .teacher-img-box img {
    transform: scale(1.05);
}

/* Teacher Info Section below the photo (Zero face obstruction) */
.champs-teacher-card .teacher-info-card {
    position: relative;
    background: #ffffff;
    padding: 14px 14px 16px;
    border-top: 1px solid rgba(7, 41, 77, 0.06);
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    z-index: 2;
    transition: background 0.3s ease;
}

.champs-teacher-card .teacher-info-card a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 100%;
}

.teacher-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #07294d;
    line-height: 1.3;
    margin-bottom: 5px;
    transition: color 0.25s ease;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
}

.champs-teacher-card:hover .teacher-name {
    color: #e5b004;
}

.teacher-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    transition: color 0.25s ease;
}

.teacher-link-arrow i {
    font-size: 10px;
    color: #ffc600;
    transition: transform 0.25s ease;
}

.champs-teacher-card:hover .teacher-link-arrow {
    color: #07294d;
}

.champs-teacher-card:hover .teacher-link-arrow i {
    transform: translateX(3px);
}

/* Meet All Faculty Button */
.teacher-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #07294d !important;
    border: 2px solid #07294d;
    border-radius: 8px;
    padding: 0 34px;
    height: 48px;
    line-height: 44px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 18px rgba(7, 41, 77, 0.08);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    cursor: pointer;
}

.teacher-more-btn:hover {
    background: #ffc600;
    border-color: #ffc600;
    color: #07294d !important;
    box-shadow: 0 10px 25px rgba(255, 198, 0, 0.35);
    transform: translateY(-2px);
}

.teacher-more-btn i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.teacher-more-btn:hover i {
    transform: translateX(4px);
}

/* Responsive Rules for Teachers Section */
@media (max-width: 991.98px) {
    #teachers-part.champs-teachers-section {
        padding-top: 70px;
        padding-bottom: 75px;
    }
    .teachers-editorial-wrap {
        padding-right: 0;
        margin-bottom: 45px;
    }
    .teachers-editorial-wrap h1.meet_our_teachers_title,
    .teachers-main-title {
        font-size: 30px;
    }
    .teachers-grid-wrap {
        padding-left: 0;
    }
    .teacher-img-box {
        height: 280px;
    }
}

@media (max-width: 575.98px) {
    #teachers-part.champs-teachers-section {
        padding-top: 50px;
        padding-bottom: 55px;
    }
    .teachers-editorial-wrap h1.meet_our_teachers_title,
    .teachers-main-title {
        font-size: 24px;
    }
    .teachers-narrative p.meet_our_teachers_desc,
    .teachers-narrative p.meet_our_teachers_desc p {
        font-size: 15px;
    }
    .teachers-grid-wrap .row {
        margin-left: -8px;
        margin-right: -8px;
    }
    .teachers-grid-wrap .row > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
    .champs-teacher-card {
        margin-bottom: 16px;
    }
    .teacher-img-box {
        height: 210px;
    }
    .champs-teacher-card .teacher-info-card {
        padding: 10px 6px 12px;
        min-height: 64px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .teacher-name {
        font-size: 13px;
        line-height: 1.25;
        white-space: normal;
        margin-bottom: 3px;
        word-break: normal;
    }
    .teacher-link-arrow {
        font-size: 10px;
        letter-spacing: 0.3px;
    }
}

@media (max-width: 400px) {
    .teacher-img-box {
        height: 180px;
    }
    .teacher-name {
        font-size: 12px;
    }
    .champs-teacher-card .teacher-info-card {
        padding: 8px 4px 10px;
        min-height: 58px;
    }
    .teacher-link-arrow {
        font-size: 9.5px;
    }
}

/* ─── 19. Redesigned Testimonials Section (#testimonial) ─────────────── */
#testimonial.champs-testimonial-section {
    position: relative;
    background-image: url(../images/testimonial.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding-top: 105px;
    padding-bottom: 105px;
}

#testimonial.champs-about-testimonial {
    background-image: url(../images/AboutusTestimonial.jpg);
}

.testimonial-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(7, 41, 77, 0.96) 0%,
        rgba(4, 25, 49, 0.94) 50%,
        rgba(7, 41, 77, 0.97) 100%
    );
    z-index: 1;
}

#testimonial.champs-testimonial-section::before {
    content: "";
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.testimonial-container {
    position: relative;
    z-index: 2;
}

.testimonial-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 198, 0, 0.14);
    border: 1px solid rgba(255, 198, 0, 0.35);
    border-radius: 30px;
    padding: 6px 16px;
    margin-bottom: 16px;
    color: #ffc600;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Montserrat', sans-serif;
}

.testimonial-badge i {
    font-size: 12px;
}

.testimonial-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.testimonial-section-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #cbd5e1;
    margin: 0;
}

/* Trust Score Pill */
.testimonial-score-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 12px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.score-stars {
    display: flex;
    gap: 4px;
    color: #ffc600;
    font-size: 14px;
    margin-bottom: 4px;
}

.score-text {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: #cbd5e1;
}

.score-text strong {
    color: #ffffff;
    font-weight: 700;
}

/* Testimonial Track Spacing */
#testimonial .testimonial-slide {
    margin-left: -15px;
    margin-right: -15px;
}

#testimonial .testimonial-slide .col-lg-6 {
    padding-left: 15px;
    padding-right: 15px;
}

/* Testimonial Cards (Strict Equal Height) */
.champs-testimonial-card {
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(7, 41, 77, 0.55) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 20px;
    padding: 32px 30px 28px;
    margin: 12px 0 25px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 360px;
    box-sizing: border-box;
}

.champs-testimonial-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 198, 0, 0.4);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.35), 0 0 25px rgba(255, 198, 0, 0.15);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(7, 41, 77, 0.65) 100%);
}

/* Header Row: Avatar + Info */
.testimonial-header-row {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.testimonial-avatar-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    min-width: 68px;
}

.testimonial-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 3px solid #ffc600;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    display: block;
}

.testimonial-quote-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #07294d;
    border: 2px solid #ffc600;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffc600;
    font-size: 11px;
}

.testimonial-author-meta {
    display: flex;
    flex-direction: column;
}

.testimonial-author-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.25;
    margin-bottom: 5px;
}

.testimonial-rating-stars {
    display: flex;
    gap: 3px;
    color: #ffc600;
    font-size: 12px;
    margin-bottom: 6px;
}

.testimonial-badge-pill {
    display: inline-block;
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #93c5fd;
    font-family: 'Montserrat', sans-serif;
}

/* Quote Body */
.testimonial-body {
    position: relative;
    flex-grow: 1;
}

.testimonial-body p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #e2e8f0;
    font-style: normal;
    margin: 0;
}

/* Modern Slick Dots */
#testimonial .testimonial-slide .slick-dots {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
    margin-bottom: 0;
}

#testimonial .testimonial-slide .slick-dots li {
    margin: 0;
    display: inline-block;
}

#testimonial .testimonial-slide .slick-dots li button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    font-size: 0;
    padding: 0;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

#testimonial .testimonial-slide .slick-dots li.slick-active button {
    width: 28px;
    border-radius: 12px;
    background: #ffc600;
    box-shadow: 0 0 12px rgba(255, 198, 0, 0.5);
}

/* CTA Button */
.testimonial-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%);
    color: #07294d !important;
    border: none;
    border-radius: 8px;
    padding: 0 34px;
    height: 52px;
    line-height: 52px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 25px rgba(255, 198, 0, 0.35);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    cursor: pointer;
}

.testimonial-cta-btn:hover {
    background: #ffffff;
    color: #07294d !important;
    box-shadow: 0 14px 30px rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

.testimonial-cta-btn i {
    font-size: 13px;
    transition: transform 0.25s ease;
}

.testimonial-cta-btn:hover i {
    transform: translateX(4px);
}

/* Responsive Rules for Testimonials */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .champs-testimonial-card {
        height: 380px;
        padding: 28px 24px 24px;
    }
}

@media (max-width: 991.98px) {
    #testimonial.champs-testimonial-section {
        padding-top: 75px;
        padding-bottom: 75px;
    }
    .testimonial-section-title {
        font-size: 30px;
    }
    .champs-testimonial-card {
        height: auto;
        min-height: 320px;
        padding: 28px 24px 24px;
    }
}

@media (max-width: 575.98px) {
    #testimonial.champs-testimonial-section {
        padding-top: 55px;
        padding-bottom: 55px;
    }
    .testimonial-section-title {
        font-size: 24px;
    }
    .testimonial-section-desc {
        font-size: 14px;
    }
    .testimonial-score-pill {
        margin-top: 15px;
        padding: 10px 14px;
    }
    .champs-testimonial-card {
        padding: 22px 18px 20px;
        border-radius: 16px;
    }
    .testimonial-avatar-wrap {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }
    .testimonial-author-name {
        font-size: 16px;
    }
    .testimonial-body p {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* ─── 20. Redesigned Blog & News Section (#news-part) ─────────────────── */
#news-part,
#news-part.champs-news-section {
    position: relative;
    background-color: #ffffff;
    padding-top: 90px;
    padding-bottom: 95px;
    overflow: hidden;
}

/* Subtle background ambient dot / grid decoration */
#news-part::before,
#news-part.champs-news-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(7, 41, 77, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    opacity: 0.8;
}

.news-header-wrap {
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.news-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(7, 41, 77, 0.05);
    border: 1px solid rgba(7, 41, 77, 0.12);
    border-radius: 30px;
    padding: 6px 16px;
    margin-bottom: 16px;
    color: #07294d;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Montserrat', sans-serif;
}

.news-badge i {
    color: #ffc600;
    font-size: 14px;
}

.news-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: #07294d;
    line-height: 1.25;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.news-section-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
    max-width: 620px;
}

/* Header Action Button */
.news-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #07294d;
    color: #ffffff !important;
    border: 1px solid #07294d;
    border-radius: 8px;
    padding: 0 26px;
    height: 48px;
    line-height: 46px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 18px rgba(7, 41, 77, 0.15);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    cursor: pointer;
}

.news-header-btn:hover {
    background: #ffc600;
    border-color: #ffc600;
    color: #07294d !important;
    box-shadow: 0 10px 25px rgba(255, 198, 0, 0.35);
    transform: translateY(-2px);
}

.news-header-btn i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.news-header-btn:hover i {
    transform: translateX(4px);
}

/* Modern Blog Cards with Strict Equal Height */
.champs-news-card {
    position: relative;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 12px 30px rgba(7, 41, 77, 0.06);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 2;
}

.champs-news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 48px rgba(7, 41, 77, 0.12), 0 0 20px rgba(255, 198, 0, 0.12);
    border-color: rgba(255, 198, 0, 0.38);
}

/* Thumbnail Area */
.champs-news-card .news-thum {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    background: #07294d;
    flex-shrink: 0;
}

.champs-news-card .news-thum a {
    display: block;
    width: 100%;
    height: 100%;
}

.champs-news-card .champs-news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}

.champs-news-card:hover .champs-news-img {
    transform: scale(1.08);
}

/* Floating Category Pill */
.news-cat-pill {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(7, 41, 77, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #ffc600;
    border: 1px solid rgba(255, 198, 0, 0.35);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Montserrat', sans-serif;
    z-index: 2;
    pointer-events: none;
}

/* Floating Date Badge on Image */
.news-date-pill {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(7, 41, 77, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #ffffff;
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.15);
    pointer-events: none;
}

.news-date-pill i {
    color: #ffc600;
    margin-right: 4px;
    font-size: 11px;
}

/* Content Area */
.champs-news-card .news-cont {
    padding: 24px 24px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Meta Information */
.news-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: #64748b;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.news-meta-author i,
.news-meta-read i {
    color: #ffc600;
    margin-right: 5px;
}

/* Title */
.news-title-link {
    text-decoration: none !important;
    display: block;
    margin-bottom: 12px;
}

.champs-news-card .news-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #07294d;
    line-height: 1.4;
    margin: 0;
    min-height: 54px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.champs-news-card:hover .news-title {
    color: #e5b004;
}

/* Excerpt */
.champs-news-card .news-excerpt {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.65;
    color: #64748b;
    margin-bottom: 20px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer Read More Link */
.news-card-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.news-read-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #07294d;
    font-size: 13.5px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.news-read-link i {
    color: #ffc600;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.champs-news-card:hover .news-read-link {
    color: #e5b004;
}

.champs-news-card:hover .news-read-link i {
    transform: translateX(5px);
}

/* Responsive Rules for News Section */
@media (max-width: 991.98px) {
    #news-part.champs-news-section {
        padding-top: 70px;
        padding-bottom: 75px;
    }
    .news-section-title {
        font-size: 30px;
    }
    .champs-news-card .news-title {
        min-height: auto;
    }
}

@media (max-width: 575.98px) {
    #news-part.champs-news-section {
        padding-top: 55px;
        padding-bottom: 60px;
    }
    .news-section-title {
        font-size: 24px;
    }
    .news-section-desc {
        font-size: 14px;
    }
    .champs-news-card .news-cont {
        padding: 20px 18px 18px;
    }
    .champs-news-card .news-title {
        font-size: 17px;
    }
}

/* ─── 21. Partner Schools Showcase Section (#patnar-logo) ─────────────── */
#patnar-logo,
#patnar-logo.champs-partner-section {
    position: relative;
    /* gray-bg background strictly preserved */
    padding-top: 75px;
    padding-bottom: 85px;
    overflow: hidden;
}

.partner-header-wrap {
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.partner-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(7, 41, 77, 0.06);
    border: 1px solid rgba(7, 41, 77, 0.14);
    border-radius: 30px;
    padding: 6px 18px;
    margin-bottom: 14px;
    color: #07294d;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-family: 'Montserrat', sans-serif;
}

.partner-badge i {
    color: #ffc600;
    font-size: 14px;
}

.partner-section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: #07294d;
    line-height: 1.28;
    margin-bottom: 12px;
    letter-spacing: -0.4px;
}

.partner-section-title .navy-highlight {
    color: #b45309;
    background: linear-gradient(135deg, #07294d 0%, #1e40af 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline;
}

.partner-section-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 15.5px;
    line-height: 1.7;
    color: #64748b;
    margin: 0 auto;
    max-width: 680px;
}

/* Slick Carousel Spacing (Allowing native Slick float mechanics) */
#patnar-logo .patnar-slide {
    margin-left: -10px;
    margin-right: -10px;
}

#patnar-logo .patnar-slide .col-lg-12 {
    padding-left: 10px;
    padding-right: 10px;
}

/* Modern School Emblem Card */
.champs-school-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 8px 24px rgba(7, 41, 77, 0.05);
    padding: 24px 18px 20px;
    margin: 12px 0 22px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 195px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.champs-school-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(7, 41, 77, 0.12), 0 0 18px rgba(255, 198, 0, 0.15);
    border-color: rgba(255, 198, 0, 0.45);
}

/* School Logo Container */
.school-logo-wrap {
    height: 75px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.school-logo-img {
    max-height: 68px;
    max-width: 150px;
    width: auto !important;
    height: auto;
    object-fit: contain;
    margin: 0 auto !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
    display: block;
}

.champs-school-card:hover .school-logo-img {
    transform: scale(1.08);
}

/* School Caption */
.champs-school-card .school-caption {
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #07294d;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    transition: color 0.3s ease;
}

.champs-school-card:hover .school-caption {
    color: #d97706;
}

/* School Type Badge */
.school-type-pill {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #b45309;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 20px;
    padding: 2px 10px;
    line-height: 1.4;
}

/* Trust Ribbon Strip */
.partner-trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 28px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(7, 41, 77, 0.08);
    border-radius: 50px;
    padding: 14px 30px;
    box-shadow: 0 6px 20px rgba(7, 41, 77, 0.04);
}

.partner-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #475569;
    font-family: 'Roboto', sans-serif;
}

.partner-trust-item i {
    color: #e5b004;
    font-size: 16px;
}

.partner-trust-item strong {
    color: #07294d;
    font-weight: 700;
}

.partner-trust-sep {
    width: 1px;
    height: 18px;
    background: rgba(7, 41, 77, 0.15);
}

/* Responsive Rules for Partner Section */
@media (max-width: 991.98px) {
    #patnar-logo,
    #patnar-logo.champs-partner-section {
        padding-top: 60px;
        padding-bottom: 65px;
    }
    .partner-section-title {
        font-size: 28px;
    }
    .champs-school-card {
        height: 185px;
        padding: 20px 14px 18px;
    }
}

@media (max-width: 575.98px) {
    #patnar-logo,
    #patnar-logo.champs-partner-section {
        padding-top: 45px;
        padding-bottom: 50px;
    }
    .partner-section-title {
        font-size: 22px;
    }
    .partner-section-desc {
        font-size: 13.5px;
    }
    .champs-school-card {
        height: 175px;
        padding: 18px 12px 16px;
        border-radius: 14px;
    }
    .school-logo-wrap {
        height: 60px;
        margin-bottom: 8px;
    }
    .school-logo-img {
        max-height: 55px;
        max-width: 120px;
    }
    .champs-school-card .school-caption {
        font-size: 13px;
    }
    .partner-trust-strip {
        border-radius: 16px;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        padding: 14px 18px;
    }
    .partner-trust-sep {
        display: none;
    }
}

/* ==========================================================================
   22. REDESIGNED ABOUT US PAGE (#about-page)
   ========================================================================== */

#about-page,
#about-page.champs-about-page-section {
    position: relative;
    background: linear-gradient(180deg, #f8faff 0%, #ffffff 40%, #f4f7fb 100%);
    padding-top: 80px;
    padding-bottom: 90px;
    overflow: hidden;
}

/* Ambient glow backgrounds */
#about-page::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -100px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

#about-page::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(7, 41, 77, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

#about-page .container {
    position: relative;
    z-index: 1;
}

/* Section Header Badge */
.about-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(7, 41, 77, 0.06);
    border: 1px solid rgba(7, 41, 77, 0.12);
    color: #07294d;
    border-radius: 30px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(7, 41, 77, 0.04);
}

.about-page-badge i {
    color: #e5b004;
    font-size: 14px;
}

/* Title */
.about-page-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #07294d;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 14px;
}

.about-page-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 4px;
    background: linear-gradient(90deg, #ffc600, #e5b004);
    border-radius: 2px;
}

/* Welcome Lead Paragraphs */
.about-lead-desc {
    margin-bottom: 0;
}

.about-lead-desc p {
    font-family: 'Roboto', sans-serif;
    font-size: 15.5px;
    line-height: 1.8;
    color: #4b5868;
    margin-bottom: 18px;
}

.about-lead-desc p:last-child {
    margin-bottom: 0;
}

/* Hero Image Column & Frame */
.about-hero-image-wrapper {
    position: relative;
    padding: 10px;
}

.about-hero-image-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
    border: 4px solid #ffffff;
    box-shadow: 0 20px 45px rgba(7, 41, 77, 0.12);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.about-hero-image-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 55px rgba(7, 41, 77, 0.16);
}

.about-hero-image-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    transition: transform 0.6s ease;
}

.about-hero-image-card:hover img {
    transform: scale(1.025);
}

/* Overview / About Curriculum Row (Unified Single Block) */
.champs-about-overview-row {
    margin-top: 50px;
}

.champs-about-overview-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 38px 36px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.05);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.champs-about-overview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #07294d 0%, #ffc600 100%);
    opacity: 0.9;
}

.champs-about-overview-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(7, 41, 77, 0.09);
    border-color: rgba(255, 198, 0, 0.35);
}

.about-overview-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #07294d;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 12px;
}

.about-overview-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 44px;
    height: 3px;
    background: #ffc600;
    border-radius: 2px;
}

.about-overview-content p {
    font-family: 'Roboto', sans-serif;
    font-size: 15.5px;
    line-height: 1.8;
    color: #4b5868;
    margin-bottom: 18px;
}

.about-overview-content p:last-child {
    margin-bottom: 0;
}

/* Methodology / Curriculum Row (Two Cards) */
.champs-about-features-row {
    margin-top: 55px;
}

.champs-about-feature-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 34px 30px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.05);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    display: flex;
    flex-direction: column;
}

.champs-about-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #07294d 0%, #ffc600 100%);
    opacity: 0.9;
    transition: height 0.3s ease;
}

.champs-about-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(7, 41, 77, 0.1);
    border-color: rgba(255, 198, 0, 0.4);
}

.champs-about-feature-card:hover::before {
    height: 5px;
}

.feature-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(7, 41, 77, 0.06);
    color: #07294d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.champs-about-feature-card:hover .feature-card-icon {
    background: #ffc600;
    color: #07294d;
    transform: scale(1.08) rotate(3deg);
}

.champs-about-feature-card p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #4b5868;
    margin-bottom: 0;
}

/* 3 Pillars Section (Why Choose us, Mission, Visions) */
.about-items.champs-about-pillars {
    padding-top: 55px;
}

.about-single-items.champs-pillar-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 36px 30px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.05);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    display: flex;
    flex-direction: column;
}

.about-single-items.champs-pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.about-single-items.champs-pillar-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 42px rgba(7, 41, 77, 0.12);
    border-color: rgba(255, 198, 0, 0.4);
}

.about-single-items.champs-pillar-card:hover::before {
    opacity: 1;
}

.about-single-items.champs-pillar-card > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 198, 0, 0.22), rgba(255, 198, 0, 0.08));
    color: #07294d;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 800;
    border: 1px solid rgba(255, 198, 0, 0.45);
    margin-bottom: 20px;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.about-single-items.champs-pillar-card:hover > span {
    background: #ffc600;
    color: #07294d;
    transform: scale(1.08);
}

.about-single-items.champs-pillar-card h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #07294d;
    margin-bottom: 16px;
    position: relative;
    padding-bottom: 12px;
}

.about-single-items.champs-pillar-card h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 3px;
    background: #ffc600;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.about-single-items.champs-pillar-card:hover h4::after {
    width: 55px;
}

.about-single-items.champs-pillar-card p {
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
    color: #556270;
    margin-bottom: 0;
}

/* Responsive Rules for About Page */
@media (max-width: 991.98px) {
    #about-page,
    #about-page.champs-about-page-section {
        padding-top: 60px;
        padding-bottom: 70px;
    }
    .about-page-title {
        font-size: 28px;
    }
    .about-hero-image-wrapper {
        margin-top: 35px;
    }
    .champs-about-overview-row,
    .champs-about-features-row {
        margin-top: 38px;
    }
    .champs-about-overview-card {
        padding: 30px 24px;
    }
    .about-overview-title {
        font-size: 22px;
    }
    .champs-about-feature-card {
        margin-bottom: 24px;
        padding: 28px 24px;
    }
    .about-items.champs-about-pillars {
        padding-top: 30px;
    }
    .about-single-items.champs-pillar-card {
        margin-bottom: 24px;
        padding: 30px 24px;
    }
}

@media (max-width: 575.98px) {
    #about-page,
    #about-page.champs-about-page-section {
        padding-top: 45px;
        padding-bottom: 50px;
    }
    .about-page-title {
        font-size: 24px;
    }
    .about-lead-desc p {
        font-size: 14.5px;
        line-height: 1.7;
    }
    .champs-about-overview-card {
        padding: 24px 18px;
        border-radius: 16px;
    }
    .about-overview-title {
        font-size: 20px;
    }
    .about-overview-content p {
        font-size: 14.5px;
        line-height: 1.7;
    }
    .champs-about-feature-card {
        padding: 24px 20px;
    }
    .about-single-items.champs-pillar-card {
        padding: 26px 20px;
    }
    .about-single-items.champs-pillar-card h4 {
        font-size: 19px;
    }
}

/* ==========================================================================
   23. REDESIGNED COUNTER / STATS SECTION (#counter-part)
   ========================================================================== */

#counter-part,
#counter-part.champs-counter-section {
    position: relative;
    background-image: url('../images/about/About_us_counter.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding-top: 85px;
    padding-bottom: 95px;
    overflow: hidden;
}

/* Deep navy gradient overlay with glass tint */
#counter-part::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(7, 41, 77, 0.94) 0%, rgba(5, 29, 56, 0.92) 50%, rgba(13, 110, 253, 0.86) 100%);
    z-index: 1;
}

/* Ambient glow accents */
#counter-part::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 18% 45%, rgba(255, 198, 0, 0.12) 0%, transparent 55%),
                radial-gradient(circle at 82% 55%, rgba(71, 132, 252, 0.18) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

#counter-part .container {
    position: relative;
    z-index: 2;
}

/* Glassmorphism Counter Cards */
.single-counter.champs-counter-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 36px 20px 32px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Top Subtle Gold Ambient Glow */
.single-counter.champs-counter-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, rgba(255, 255, 255, 0.6), #ffc600);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.single-counter.champs-counter-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 198, 0, 0.5);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32), 0 0 25px rgba(255, 198, 0, 0.2);
}

.single-counter.champs-counter-card:hover::before {
    opacity: 1;
}

/* Icon Container */
.counter-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: rgba(255, 198, 0, 0.16);
    border: 1px solid rgba(255, 198, 0, 0.4);
    color: #ffc600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 18px;
    transition: transform 0.35s ease, background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.single-counter.champs-counter-card:hover .counter-icon-wrap {
    transform: scale(1.1) rotate(5deg);
    background: #ffc600;
    color: #07294d;
    box-shadow: 0 8px 22px rgba(255, 198, 0, 0.4);
}

/* Number Value */
.counter-number-wrap {
    font-family: 'Montserrat', sans-serif;
    font-size: 44px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 10px;
    display: block;
    letter-spacing: -0.5px;
}

.counter-number-wrap .counter {
    color: #ffffff;
}

.counter-number-wrap .counter-plus {
    color: #ffc600;
    margin-left: 2px;
    font-weight: 700;
}

/* Description Label */
.single-counter.champs-counter-card p,
.single-counter.champs-counter-card .counter-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0;
}

/* Responsive Rules for Counter Section */
@media (max-width: 991.98px) {
    #counter-part,
    #counter-part.champs-counter-section {
        padding-top: 65px;
        padding-bottom: 70px;
    }
    .single-counter.champs-counter-card {
        padding: 30px 16px 26px;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .counter-number-wrap {
        font-size: 38px;
    }
    .counter-icon-wrap {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-bottom: 14px;
    }
}

@media (max-width: 575.98px) {
    #counter-part,
    #counter-part.champs-counter-section {
        padding-top: 50px;
        padding-bottom: 55px;
    }
    .single-counter.champs-counter-card {
        padding: 24px 14px 22px;
        border-radius: 16px;
    }
    .counter-number-wrap {
        font-size: 32px;
    }
    .single-counter.champs-counter-card p,
    .single-counter.champs-counter-card .counter-label {
        font-size: 13px;
    }
}

/* ==========================================================================
   24. REDESIGNED ADVISORS / TEACHERS SECTION (#teachers-part)
   ========================================================================== */

#teachers-part,
#teachers-part.champs-advisors-section {
    position: relative;
    background: #edf0f2;
    padding-top: 60px;
    padding-bottom: 95px;
}

#teachers-part .section-title h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #b45309;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

#teachers-part .section-title h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: #07294d;
    letter-spacing: -0.5px;
    margin-bottom: 0;
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

#teachers-part .section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45px;
    height: 3px;
    background: #ffc600;
    border-radius: 2px;
}

/* Advisor Card Container */
.single-teachers.champs-advisor-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 8px 24px rgba(7, 41, 77, 0.05);
    padding: 18px 16px 20px;
    margin-top: 30px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: calc(100% - 30px);
}

.single-teachers.champs-advisor-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.single-teachers.champs-advisor-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 38px rgba(7, 41, 77, 0.12), 0 0 18px rgba(255, 198, 0, 0.12);
    border-color: rgba(255, 198, 0, 0.45);
}

.single-teachers.champs-advisor-card:hover::before {
    opacity: 1;
}

/* Natural 7:8 Portrait Photo Frame (Zero Cropping of Faces) */
.advisor-image-wrap {
    width: 100%;
    max-width: 175px;
    aspect-ratio: 7 / 8;
    height: auto;
    border-radius: 14px;
    overflow: hidden;
    margin: 0 auto 14px;
    border: 1px solid rgba(7, 41, 77, 0.1);
    box-shadow: 0 4px 14px rgba(7, 41, 77, 0.06);
    background: #f8fafc;
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
    flex-shrink: 0;
}

.advisor-image-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}

.advisor-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.45s ease;
}

.single-teachers.champs-advisor-card:hover .advisor-image-wrap {
    border-color: #ffc600;
    box-shadow: 0 8px 20px rgba(7, 41, 77, 0.14);
}

.single-teachers.champs-advisor-card:hover .advisor-image-wrap img {
    transform: scale(1.04);
}

/* Name Container & Link (Override legacy yellow text) */
#teachers-part .name-bg,
#teachers-part .name-bg.advisor-name-wrap,
.single-teachers.champs-advisor-card .advisor-name-wrap {
    background-color: transparent !important;
    opacity: 1 !important;
    width: 100%;
    padding: 6px 4px 2px !important;
    margin: 0 !important;
    position: static !important;
}

#teachers-part .name-bg h6,
#teachers-part .name-bg a h6,
#teachers-part .name-bg a,
#teachers-part .advisor-name-wrap h6,
#teachers-part .advisor-name-wrap h6 a,
.single-teachers.champs-advisor-card .advisor-name-wrap h6,
.single-teachers.champs-advisor-card .advisor-name-wrap h6 a {
    color: #07294d !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: color 0.3s ease !important;
    opacity: 1 !important;
}

#teachers-part .single-teachers.champs-advisor-card:hover .advisor-name-wrap h6,
#teachers-part .single-teachers.champs-advisor-card:hover .advisor-name-wrap h6 a,
#teachers-part .name-bg a:hover h6 {
    color: #0d6efd !important;
}

.advisor-name-wrap::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: #ffc600;
    margin: 10px auto 0;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.single-teachers.champs-advisor-card:hover .advisor-name-wrap::after {
    width: 44px;
}

/* Responsive Rules for Advisors Section */
@media (max-width: 991.98px) {
    #teachers-part,
    #teachers-part.champs-advisors-section {
        padding-top: 45px;
        padding-bottom: 65px;
    }
    #teachers-part .section-title h2 {
        font-size: 28px;
    }
    .single-teachers.champs-advisor-card {
        padding: 16px 12px;
        margin-top: 20px;
    }
    .advisor-image-wrap {
        max-width: 155px;
    }
}

@media (max-width: 575.98px) {
    #teachers-part,
    #teachers-part.champs-advisors-section {
        padding-top: 35px;
        padding-bottom: 50px;
    }
    #teachers-part .section-title h2 {
        font-size: 24px;
    }
    .single-teachers.champs-advisor-card {
        padding: 14px 10px;
        border-radius: 14px;
    }
    .advisor-image-wrap {
        max-width: 140px;
    }
    .advisor-name-wrap h6 {
        font-size: 15px;
    }
}

/* ==========================================================================
   26. REDESIGNED TEACHERS PAGE (teacher.html)
   ========================================================================== */

/* Call to Action Bar */
.champs-teacher-apply-bar {
    background: #edf0f2;
    padding: 30px 0;
    border-bottom: 1px solid rgba(7, 41, 77, 0.08);
}

.champs-teacher-apply-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid rgba(7, 41, 77, 0.09);
    border-radius: 18px;
    padding: 24px 36px;
    box-shadow: 0 8px 24px rgba(7, 41, 77, 0.05);
}

.teacher-apply-title-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.teacher-apply-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 198, 0, 0.18);
    border: 1px solid rgba(255, 198, 0, 0.45);
    color: #07294d;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 12px;
    border-radius: 20px;
}

.teacher-apply-title-wrap h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #07294d;
    margin-bottom: 0;
    letter-spacing: -0.4px;
}

.teacher-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%);
    color: #07294d !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 13px 32px;
    border-radius: 30px;
    border: none;
    box-shadow: 0 6px 20px rgba(255, 198, 0, 0.35);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    cursor: pointer;
}

.teacher-apply-btn:hover {
    background: #07294d;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(7, 41, 77, 0.25);
}

.teacher-apply-btn i {
    font-size: 13px;
    transition: transform 0.25s ease;
}

.teacher-apply-btn:hover i {
    transform: translateX(4px);
}

/* Teachers Page Container */
#teachers-page {
    position: relative;
    padding-top: 80px;
    padding-bottom: 110px;
    background: linear-gradient(180deg, #f8faff 0%, #ffffff 40%, #f4f7fb 100%);
    overflow: hidden;
}

#teachers-page::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

#teachers-page::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(7, 41, 77, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

#teachers-page .container {
    position: relative;
    z-index: 1;
}

/* Overview Card */
.champs-teacher-overview-card {
    background: #ffffff;
    border: 1px solid rgba(7, 41, 77, 0.08);
    border-radius: 24px;
    padding: 42px 38px 36px;
    box-shadow: 0 16px 40px rgba(7, 41, 77, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.champs-teacher-overview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffc600 0%, #07294d 100%);
}

.teacher-overview-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(7, 41, 77, 0.06);
    border: 1px solid rgba(7, 41, 77, 0.12);
    color: #07294d;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 16px;
    align-self: flex-start;
}

.teacher-overview-badge i {
    color: #e5b004;
    font-size: 14px;
}

.teacher-overview-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 800;
    color: #07294d;
    letter-spacing: -0.5px;
    line-height: 1.25;
    margin-bottom: 18px;
    position: relative;
    padding-bottom: 14px;
}

.teacher-overview-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #e5b004);
    border-radius: 2px;
}

.teacher-lead-highlight {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255, 198, 0, 0.12) 0%, rgba(7, 41, 77, 0.04) 100%);
    border-left: 4px solid #ffc600;
    border-radius: 0 12px 12px 0;
    padding: 14px 18px;
    margin-bottom: 22px;
}

.teacher-lead-highlight i {
    color: #d97706;
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.teacher-lead-highlight p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #07294d;
    line-height: 1.6;
    margin: 0;
}

.teacher-overview-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.85;
    color: #475569;
    margin-bottom: 24px;
}

.teacher-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(7, 41, 77, 0.08);
}

.teacher-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid rgba(7, 41, 77, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
    transition: all 0.3s ease;
}

.teacher-trust-item:hover {
    background: #ffffff;
    border-color: rgba(255, 198, 0, 0.5);
    box-shadow: 0 4px 14px rgba(7, 41, 77, 0.06);
    transform: translateY(-2px);
}

.teacher-trust-item .trust-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(7, 41, 77, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #07294d;
    font-size: 15px;
    flex-shrink: 0;
    transition: background 0.3s ease, color 0.3s ease;
}

.teacher-trust-item:hover .trust-icon {
    background: #ffc600;
    color: #07294d;
}

.teacher-trust-item .trust-text {
    display: flex;
    flex-direction: column;
}

.teacher-trust-item .trust-text strong {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #07294d;
    line-height: 1.3;
}

.teacher-trust-item .trust-text span {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #64748b;
}

/* Lead Teachers Wrap */
.champs-lead-teachers-wrap {
    background: linear-gradient(145deg, #07294d 0%, #051d38 100%);
    border-radius: 24px;
    padding: 30px 22px 28px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 16px 40px rgba(7, 41, 77, 0.18);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.champs-lead-teachers-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.lead-teachers-header {
    margin-bottom: 8px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.lead-teachers-header .lead-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 198, 0, 0.18);
    color: #ffc600;
    border: 1px solid rgba(255, 198, 0, 0.35);
    border-radius: 20px;
    padding: 4px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.lead-teachers-header .lead-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}

.lead-teachers-header .lead-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

/* Individual Teacher Cards */
.single-teachers.champs-teacher-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 6px 20px rgba(7, 41, 77, 0.05);
    padding: 18px 14px 18px;
    margin-top: 25px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: calc(100% - 25px);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.single-teachers.champs-teacher-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.single-teachers.champs-teacher-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(7, 41, 77, 0.12), 0 0 18px rgba(255, 198, 0, 0.15);
    border-color: rgba(255, 198, 0, 0.45);
}

.single-teachers.champs-teacher-card:hover::before {
    opacity: 1;
}

.teacher-image-wrap {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 7 / 8;
    border-radius: 14px;
    overflow: hidden;
    background: #e2e8f0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    margin-bottom: 14px;
    position: relative;
}

.teacher-image-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}

.teacher-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
}

.single-teachers.champs-teacher-card:hover .teacher-image-wrap img {
    transform: scale(1.06);
}

.teacher-name-wrap {
    width: 100%;
    margin-top: auto;
    background: transparent !important;
    opacity: 1 !important;
    padding: 0 !important;
}

.teacher-name-wrap a {
    text-decoration: none;
    display: block;
}

.teacher-name-wrap h6 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #07294d !important;
    opacity: 1 !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
    transition: color 0.3s ease;
}

.single-teachers.champs-teacher-card:hover .teacher-name-wrap h6 {
    color: #d97706 !important;
}

.teacher-role-badge {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
    background: rgba(7, 41, 77, 0.05);
    border: 1px solid rgba(7, 41, 77, 0.08);
    padding: 3px 12px;
    border-radius: 12px;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

/* Full Teachers Showcase Grid */
.champs-teachers-full-grid {
    background: #edf0f2;
    padding: 50px 30px 65px;
    border-radius: 24px;
    margin-top: 55px;
    border: 1px solid rgba(7, 41, 77, 0.06);
}

.champs-teachers-full-grid .partner-badge {
    margin-bottom: 12px;
}

.champs-teachers-full-grid .partner-section-title {
    margin-bottom: 10px;
}

/* Responsive Rules for Teachers Page */
@media (max-width: 991.98px) {
    .champs-teacher-apply-inner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
        padding: 20px 24px;
    }
    .teacher-apply-title-wrap {
        flex-direction: column;
        gap: 8px;
    }
    .teacher-apply-title-wrap h2 {
        font-size: 22px;
    }
    .champs-teacher-overview-card {
        padding: 30px 24px;
        margin-bottom: 30px;
    }
    .teacher-overview-title {
        font-size: 26px;
    }
    .champs-teachers-full-grid {
        padding: 40px 18px 50px;
        border-radius: 18px;
        margin-top: 40px;
    }
}

@media (max-width: 575.98px) {
    .champs-teacher-overview-card {
        padding: 24px 18px;
        border-radius: 16px;
    }
    .teacher-overview-title {
        font-size: 22px;
    }
    .teacher-overview-desc {
        font-size: 14px;
        line-height: 1.65;
    }
    .teacher-trust-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .teacher-lead-highlight {
        padding: 12px 14px;
    }
    .lead-teachers-header .lead-title {
        font-size: 19px;
    }
    .single-teachers.champs-teacher-card {
        padding: 14px 10px;
        border-radius: 14px;
    }
    .teacher-image-wrap {
        max-width: 135px;
        border-radius: 12px;
    }
    .teacher-name-wrap h6 {
        font-size: 14.5px !important;
    }
    .teacher-role-badge {
        font-size: 10.5px;
        padding: 2px 8px;
    }
    .champs-teachers-full-grid {
        padding: 30px 12px 40px;
        border-radius: 14px;
    }
}

/* ==========================================================================
   27. REDESIGNED COURSES PAGE (course.html)
   ========================================================================== */

/* Quick Navigation Bar */
.champs-course-quicknav-bar {
    background: #ffffff;
    border-bottom: 1px solid rgba(7, 41, 77, 0.08);
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 18px rgba(7, 41, 77, 0.04);
}

.course-quicknav-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

.course-quicknav-inner::-webkit-scrollbar {
    display: none;
}

.quicknav-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #07294d;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quicknav-label i {
    color: #e5b004;
}

.quicknav-pills {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.quicknav-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #07294d;
    border: 1px solid #07294d;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.quicknav-pill i {
    font-size: 12px;
    color: #ffc600;
    transition: color 0.3s ease;
}

.quicknav-pill:hover,
.quicknav-pill.active {
    background: #ffc600;
    color: #07294d;
    border-color: #ffc600;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 198, 0, 0.3);
}

.quicknav-pill:hover i,
.quicknav-pill.active i {
    color: #07294d;
}

/* Courses Part Section */
#courses-part.champs-courses-section {
    background: linear-gradient(180deg, #f8fafc 0%, #edf0f2 50%, #f8fafc 100%);
    padding-top: 70px;
    padding-bottom: 110px;
    position: relative;
}

/* Category Section Header */
.champs-course-section-header {
    margin-top: 55px;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 16px;
}

.champs-course-section-header:first-of-type {
    margin-top: 0;
}

.course-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(7, 41, 77, 0.06);
    border: 1px solid rgba(7, 41, 77, 0.12);
    color: #07294d;
    border-radius: 20px;
    padding: 4px 14px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
}

.course-cat-badge i {
    color: #e5b004;
}

.category-title-wrap {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.category-title-wrap h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #07294d;
    letter-spacing: -0.5px;
    margin: 0;
}

.category-count {
    display: inline-block;
    background: rgba(255, 198, 0, 0.2);
    color: #07294d;
    border: 1px solid rgba(255, 198, 0, 0.5);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
}

.category-accent-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    border-radius: 2px;
    margin-top: 12px;
}

/* Single Course Card */
.single-course.champs-course-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 8px 24px rgba(7, 41, 77, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 30px);
    margin-top: 30px;
    overflow: hidden;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}

.single-course.champs-course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 42px rgba(7, 41, 77, 0.12), 0 0 20px rgba(255, 198, 0, 0.15);
    border-color: rgba(255, 198, 0, 0.5);
}

/* Card Thumbnail */
.single-course.champs-course-card .thum {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e2e8f0;
}

.single-course.champs-course-card .thum .image {
    width: 100%;
    height: 100%;
}

.single-course.champs-course-card .thum .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.single-course.champs-course-card:hover .thum .image img {
    transform: scale(1.07);
}

.course-thumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(7, 41, 77, 0.05) 50%, rgba(7, 41, 77, 0.55) 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.course-floating-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(7, 41, 77, 0.9);
    color: #ffc600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

/* Card Content */
.single-course.champs-course-card .cont {
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
    background: #ffffff;
}

.single-course.champs-course-card .cont a {
    text-decoration: none;
    display: block;
}

.single-course.champs-course-card .course-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    color: #07294d;
    line-height: 1.45;
    display: block;
    margin-bottom: 14px;
    transition: color 0.3s ease;
    padding: 0 !important;
}

.single-course.champs-course-card:hover .course-name {
    color: #d97706;
}

.course-meta-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding-top: 4px;
}

.course-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f8fafc;
    border: 1px solid rgba(7, 41, 77, 0.08);
    color: #64748b;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 12px;
}

.course-meta-tag i {
    color: #07294d;
    font-size: 11px;
}

/* Card Action Footer */
.course-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid rgba(7, 41, 77, 0.06);
    margin-top: auto;
}

.course-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: #07294d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.course-explore-btn i {
    font-size: 11px;
    color: #ffc600;
    background: #07294d;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.single-course.champs-course-card:hover .course-explore-btn {
    color: #07294d;
}

.single-course.champs-course-card:hover .course-explore-btn i {
    transform: translateX(4px);
    background: #ffc600;
    color: #07294d;
}

/* Responsive Rules for Courses Page */
@media (max-width: 991.98px) {
    #courses-part.champs-courses-section {
        padding-top: 50px;
        padding-bottom: 80px;
    }
    .category-title-wrap h2 {
        font-size: 26px;
    }
    .single-course.champs-course-card .cont {
        padding: 18px 18px 16px;
    }
    .single-course.champs-course-card .course-name {
        font-size: 15.5px;
    }
}

@media (max-width: 575.98px) {
    .champs-course-quicknav-bar {
        padding: 12px 0;
    }
    .quicknav-label {
        font-size: 12px;
    }
    .quicknav-pill {
        font-size: 12px;
        padding: 6px 12px;
    }
    .category-title-wrap h2 {
        font-size: 22px;
    }
    .single-course.champs-course-card {
        border-radius: 16px;
        margin-top: 20px;
    }
    .single-course.champs-course-card .cont {
        padding: 16px 14px 14px;
    }
    .single-course.champs-course-card .course-name {
        font-size: 14.5px;
    }
}

/* ==========================================================================
   28. REDESIGNED BLOG DETAILS PAGE (blog-details.php)
   ========================================================================== */

/* Blog Page Container */
#blog-page.champs-blog-page-section {
    background: linear-gradient(180deg, #f8faff 0%, #edf0f2 50%, #f8faff 100%);
    padding-top: 60px;
    padding-bottom: 110px;
    position: relative;
    overflow: hidden;
}

#blog-page.champs-blog-page-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.07) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

#blog-page.champs-blog-page-section .container {
    position: relative;
    z-index: 1;
}

/* Back Link */
.blog-top-actions {
    margin-bottom: 22px;
}

.champs-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid rgba(7, 41, 77, 0.1);
    color: #07294d;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(7, 41, 77, 0.04);
}

.champs-back-link i {
    color: #e5b004;
    transition: transform 0.3s ease;
}

.champs-back-link:hover {
    background: #07294d;
    color: #ffffff;
    border-color: #07294d;
    transform: translateX(-4px);
    box-shadow: 0 6px 18px rgba(7, 41, 77, 0.15);
}

.champs-back-link:hover i {
    transform: translateX(-3px);
    color: #ffc600;
}

/* Article Card */
.champs-blog-article-card {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 16px 45px rgba(7, 41, 77, 0.06);
    overflow: hidden;
    margin-bottom: 30px;
}

/* Featured Media */
.blog-featured-media {
    position: relative;
    width: 100%;
    max-height: 480px;
    overflow: hidden;
    background: #e2e8f0;
}

.blog-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.champs-blog-article-card:hover .blog-featured-media img {
    transform: scale(1.02);
}

/* Article Main Content */
.blog-article-content-inner {
    padding: 40px 42px 35px;
}

/* Meta Pill Bar */
.blog-article-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.blog-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(7, 41, 77, 0.06);
    border: 1px solid rgba(7, 41, 77, 0.1);
    color: #07294d;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-meta-pill i {
    color: #e5b004;
    font-size: 12px;
}

a.blog-meta-pill:hover {
    background: #07294d;
    color: #ffffff;
    border-color: #07294d;
    transform: translateY(-2px);
}

a.blog-meta-pill:hover i {
    color: #ffc600;
}

.blog-meta-pill.tag-pill {
    background: rgba(255, 198, 0, 0.15);
    border-color: rgba(255, 198, 0, 0.4);
    color: #07294d;
}

/* Article Title */
.blog-article-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #07294d;
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 26px;
    padding-bottom: 16px;
    position: relative;
}

.blog-article-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    border-radius: 2px;
}

/* Article Content Typography */
.blog-article-body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.85;
    color: #334155;
    margin-bottom: 30px;
}

.blog-article-body p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.85;
    color: #334155;
    margin-bottom: 20px;
}

.blog-article-body h2,
.blog-article-body h3,
.blog-article-body h4,
.blog-article-body h5,
.blog-article-body h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #07294d;
    margin-top: 32px;
    margin-bottom: 14px;
    line-height: 1.35;
}

.blog-article-body h2 {
    font-size: 26px;
}

.blog-article-body h3 {
    font-size: 22px;
}

.blog-article-body h4 {
    font-size: 19px;
}

.blog-article-body ul,
.blog-article-body ol,
.blog-ul {
    margin-left: 22px;
    margin-bottom: 22px;
}

.blog-article-body li,
.blog-ul li {
    font-family: 'Roboto', sans-serif;
    font-size: 15.5px;
    line-height: 1.8;
    color: #334155;
    margin-bottom: 12px;
}

.blog-article-body blockquote {
    background: rgba(255, 198, 0, 0.08);
    border-left: 4px solid #ffc600;
    border-radius: 0 14px 14px 0;
    padding: 18px 24px;
    margin: 28px 0;
    font-style: italic;
    color: #07294d;
}

.blog-article-body a {
    color: #07294d;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #ffc600;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.blog-article-body a:hover {
    color: #d97706;
}

/* Share Card */
.blog-share-card {
    background: #f8fafc;
    border: 1px solid rgba(7, 41, 77, 0.08);
    border-radius: 16px;
    padding: 20px 24px;
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-share-card .share-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #07294d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-share-card .share-header i {
    color: #e5b004;
    font-size: 15px;
}

/* Sidebar Styling */
.champs-blog-sidebar {
    position: sticky;
    top: 30px;
}

.champs-sidebar-card {
    background: #ffffff;
    border: 1px solid rgba(7, 41, 77, 0.08);
    border-radius: 20px;
    padding: 28px 24px 24px;
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.05);
    margin-bottom: 30px;
}

.sidebar-card-header {
    margin-bottom: 22px;
}

.sidebar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 198, 0, 0.18);
    border: 1px solid rgba(255, 198, 0, 0.4);
    color: #07294d;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 10px;
    border-radius: 14px;
    margin-bottom: 8px;
}

.sidebar-badge i {
    color: #d97706;
}

.sidebar-card-header h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #07294d;
    letter-spacing: -0.3px;
    margin: 0;
}

.sidebar-accent-line {
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    border-radius: 2px;
    margin-top: 10px;
}

/* Popular Posts List */
.sidebar .sidebar-post ul,
.popular-posts-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.sidebar .sidebar-post ul li,
.popular-post-item {
    list-style: none !important;
    border-bottom: 1px solid rgba(7, 41, 77, 0.06) !important;
    padding: 13px 0 !important;
    margin: 0 !important;
    transition: background 0.25s ease;
}

.sidebar .sidebar-post ul li:first-child,
.popular-post-item:first-child {
    padding-top: 4px !important;
}

.sidebar .sidebar-post ul li:last-child,
.popular-post-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Override style.css .sidebar .sidebar-post ul li a { display: block; margin-top: 30px } */
.sidebar .sidebar-post ul li a,
.popular-post-link {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar .sidebar-post ul li a:hover,
.popular-post-link:hover {
    background: rgba(7, 41, 77, 0.03) !important;
    transform: translateX(4px) !important;
}

/* Post Thumb: Clean 80x60px, 8px radius, no box shadow or grey background */
.sidebar .sidebar-post ul li a .post-thumb,
.popular-thumb-wrap,
.post-thumb {
    width: 80px !important;
    height: 60px !important;
    max-width: 80px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative !important;
}

.sidebar .sidebar-post ul li a .post-thumb img,
.popular-thumb-wrap img,
.post-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 8px !important;
    transition: transform 0.45s ease !important;
}

.sidebar .sidebar-post ul li a:hover .post-thumb img,
.popular-post-link:hover .post-thumb img,
.popular-post-link:hover .popular-thumb-wrap img {
    transform: scale(1.08) !important;
}

.popular-content-wrap,
.sidebar .sidebar-post ul li a .post-info,
.post-info {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.popular-content-wrap h6,
.sidebar .sidebar-post ul li a .post-info h6,
.post-info h6 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #07294d !important;
    line-height: 1.4 !important;
    margin: 0 0 5px 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.25s ease !important;
}

.popular-post-link:hover .popular-content-wrap h6,
.sidebar .sidebar-post ul li a:hover .post-info h6,
.popular-post-link:hover .post-info h6 {
    color: #d97706 !important;
}

.read-more-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: color 0.25s ease !important;
}

.popular-post-link:hover .read-more-text,
.sidebar .sidebar-post ul li a:hover .read-more-text {
    color: #07294d !important;
}

.read-more-text i {
    transition: transform 0.25s ease !important;
}

.popular-post-link:hover .read-more-text i,
.sidebar .sidebar-post ul li a:hover .read-more-text i {
    transform: translateX(3px) !important;
}

/* Sidebar Assessment CTA Card */
.champs-sidebar-cta-card {
    background: linear-gradient(145deg, #07294d 0%, #051d38 100%);
    border-radius: 20px;
    padding: 30px 24px;
    color: #ffffff;
    box-shadow: 0 16px 40px rgba(7, 41, 77, 0.18);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.champs-sidebar-cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.14) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.champs-sidebar-cta-card .cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 198, 0, 0.18);
    color: #ffc600;
    border: 1px solid rgba(255, 198, 0, 0.35);
    border-radius: 20px;
    padding: 3px 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
}

.champs-sidebar-cta-card h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.35;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.champs-sidebar-cta-card p {
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 18px;
}

.sidebar-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffc600;
    color: #07294d !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 16px rgba(255, 198, 0, 0.3);
}

.sidebar-cta-btn:hover {
    background: #ffffff;
    color: #07294d !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

/* Responsive Rules for Blog Details */
@media (max-width: 991.98px) {
    #blog-page.champs-blog-page-section {
        padding-top: 40px;
        padding-bottom: 70px;
    }
    .blog-article-content-inner {
        padding: 30px 24px 28px;
    }
    .blog-article-title {
        font-size: 26px;
    }
    .champs-blog-sidebar {
        margin-top: 40px;
    }
}

@media (max-width: 575.98px) {
    .blog-article-content-inner {
        padding: 24px 18px 20px;
    }
    .blog-article-title {
        font-size: 22px;
    }
    .blog-article-body {
        font-size: 15px;
        line-height: 1.75;
    }
    .blog-article-body p {
        font-size: 15px;
    }
    .champs-sidebar-card {
        padding: 22px 18px 18px;
    }
}

/* ==========================================================================
   29. REDESIGNED COURSE SINGLE & MOCK TEST PAGE (#courses-single)
   ========================================================================== */

/* Main Section Wrapper */
#courses-single.champs-course-single-section {
    background: linear-gradient(180deg, #f8faff 0%, #edf0f2 50%, #f8faff 100%);
    padding-top: 55px;
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
}

#courses-single.champs-course-single-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

#courses-single.champs-course-single-section .container {
    position: relative;
    z-index: 1;
}

/* Course Hero Main Card */
.champs-course-hero-card {
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 16px 45px rgba(7, 41, 77, 0.06);
    padding: 38px 38px 34px;
    margin-bottom: 35px;
}

/* Course Header Top Area */
.course-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(7, 41, 77, 0.06);
}

.course-header-info {
    flex: 1;
    min-width: 250px;
}

.course-cat-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(7, 41, 77, 0.06);
    border: 1px solid rgba(7, 41, 77, 0.12);
    color: #07294d;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.course-cat-badge i {
    color: #e5b004;
}

.course-title-main {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #07294d;
    letter-spacing: -0.5px;
    margin: 0;
    line-height: 1.25;
}

.champs-hero-book-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%);
    color: #07294d !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 26px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(255, 198, 0, 0.35);
    transition: all 0.3s ease;
}

.champs-hero-book-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255, 198, 0, 0.45);
    background: linear-gradient(135deg, #ffd433 0%, #ffc600 100%);
}

.champs-hero-book-btn i {
    transition: transform 0.3s ease;
}

.champs-hero-book-btn:hover i {
    transform: translateX(3px);
}

/* Course Featured Media */
.course-hero-media {
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 32px;
    background: #e2e8f0;
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.08);
}

.course-hero-media img {
    width: 100%;
    max-height: 440px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.champs-course-hero-card:hover .course-hero-media img {
    transform: scale(1.02);
}

/* Modern Course Segmented Tabs */
.champs-tabs-wrapper {
    margin-bottom: 28px;
}

.champs-course-tabs {
    background: #f1f5f9;
    padding: 6px;
    border-radius: 16px;
    border: 1px solid rgba(7, 41, 77, 0.06);
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
}

.champs-course-tabs .nav-item {
    flex: 1;
    margin: 0;
}

.champs-course-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #475569;
    padding: 12px 20px;
    border-radius: 12px;
    border: none;
    background: transparent;
    transition: all 0.3s ease;
    text-decoration: none;
    width: 100%;
}

.champs-course-tabs .nav-link i {
    font-size: 15px;
    color: #64748b;
    transition: color 0.3s ease;
}

.champs-course-tabs .nav-link.active {
    background: #07294d;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(7, 41, 77, 0.18);
}

.champs-course-tabs .nav-link.active i {
    color: #ffc600;
}

.champs-course-tabs .nav-link:hover:not(.active) {
    color: #07294d;
    background: rgba(255, 255, 255, 0.7);
}

/* Tab 1: Overview Typography & Highlight Elements */
.course-overview-content {
    font-family: 'Roboto', sans-serif;
    font-size: 15.5px;
    line-height: 1.85;
    color: #334155;
}

.course-overview-content p {
    font-family: 'Roboto', sans-serif;
    font-size: 15.5px;
    line-height: 1.85;
    color: #334155;
    margin-bottom: 16px;
}

.course-overview-content h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    font-weight: 800;
    color: #07294d;
    margin-top: 28px;
    margin-bottom: 14px;
    letter-spacing: -0.3px;
    position: relative;
    padding-left: 14px;
}

.course-overview-content h4::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    background: linear-gradient(180deg, #ffc600 0%, #07294d 100%);
    border-radius: 2px;
}

.course-overview-content h6 {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #07294d;
    margin-top: 20px;
    margin-bottom: 10px;
}

.course-overview-content .font-weight-bold {
    font-weight: 700;
    color: #07294d;
}

.course-info-notice {
    background: rgba(255, 198, 0, 0.1);
    border-left: 4px solid #ffc600;
    border-radius: 0 14px 14px 0;
    padding: 16px 22px;
    margin: 20px 0;
    font-size: 14.5px;
    color: #07294d;
}

.course-specs-card {
    background: #f8fafc;
    border: 1px solid rgba(7, 41, 77, 0.08);
    border-radius: 16px;
    padding: 22px 26px;
    margin: 22px 0;
}

.course-specs-card p {
    margin-bottom: 10px;
}

.course-specs-card p:last-child {
    margin-bottom: 0;
}

/* Tab 2: Curriculum Accordion */
.champs-course-accordion {
    margin-top: 10px;
}

.champs-course-accordion .card {
    border: 1px solid rgba(7, 41, 77, 0.09) !important;
    border-radius: 16px !important;
    margin-bottom: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(7, 41, 77, 0.03);
    transition: all 0.3s ease;
}

.champs-course-accordion .card:hover {
    box-shadow: 0 8px 24px rgba(7, 41, 77, 0.08);
    border-color: rgba(7, 41, 77, 0.18) !important;
}

.champs-course-accordion .card-header {
    background: #ffffff;
    padding: 0;
    border-bottom: none;
}

.champs-course-accordion .card-header a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    text-decoration: none;
    color: #07294d;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 15.5px;
    transition: all 0.3s ease;
}

.champs-course-accordion .card-header a .accordion-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.champs-course-accordion .card-header a .accordion-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 198, 0, 0.16);
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.champs-course-accordion .card-header a:not(.collapsed) .accordion-icon-circle {
    background: #07294d;
    color: #ffc600;
}

.champs-course-accordion .card-header a .accordion-title-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    color: #07294d;
    line-height: 1.4;
}

.champs-course-accordion .card-header a .accordion-chevron {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #64748b;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.champs-course-accordion .card-header a:not(.collapsed) .accordion-chevron {
    transform: rotate(180deg);
    background: #07294d;
    color: #ffffff;
}

.champs-course-accordion .card-body {
    padding: 12px 26px 26px 78px;
    background: #ffffff;
    border-top: 1px solid rgba(7, 41, 77, 0.05);
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #334155;
}

.champs-course-accordion .card-body p {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: #334155;
    margin-bottom: 12px;
}

/* Course Share Widget Card */
.course-share-card {
    background: #f8fafc;
    border: 1px solid rgba(7, 41, 77, 0.08);
    border-radius: 16px;
    padding: 20px 24px;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.course-share-card .share-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #07294d;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.course-share-card .share-header i {
    color: #e5b004;
}

/* Sidebar: Course Features & Pricing Packages */
.champs-course-features-sidebar {
    position: sticky;
    top: 30px;
}

.sidebar-features-header {
    margin-bottom: 24px;
}

.sidebar-features-header .sidebar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 198, 0, 0.18);
    border: 1px solid rgba(255, 198, 0, 0.4);
    color: #07294d;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 12px;
    border-radius: 14px;
    margin-bottom: 8px;
}

.sidebar-features-header .sidebar-badge i {
    color: #d97706;
}

.sidebar-features-header h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #07294d;
    letter-spacing: -0.3px;
    margin: 0;
}

.sidebar-features-header .sidebar-accent-line {
    width: 44px;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    border-radius: 2px;
    margin-top: 10px;
}

/* Feature Package Cards */
.champs-feature-package-card {
    background: #ffffff;
    border: 1px solid rgba(7, 41, 77, 0.09);
    border-radius: 20px;
    padding: 24px 22px 22px;
    margin-bottom: 22px;
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.05);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.champs-feature-package-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(7, 41, 77, 0.1);
    border-color: rgba(255, 198, 0, 0.5);
}

.champs-feature-package-card.free-package {
    background: linear-gradient(180deg, #fffef5 0%, #ffffff 100%);
    border-color: rgba(255, 198, 0, 0.45);
}

.package-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(7, 41, 77, 0.06);
}

.package-card-header h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: 16.5px;
    font-weight: 800;
    color: #07294d;
    margin: 0;
    line-height: 1.35;
}

.package-pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(7, 41, 77, 0.06);
    color: #07294d;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 3px 10px;
    border-radius: 12px;
    flex-shrink: 0;
}

.package-pill-tag.free-tag {
    background: #ffc600;
    color: #07294d;
}

.package-card-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 14px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.package-card-specs li {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    line-height: 1.5;
}

.package-card-specs li .spec-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
}

.package-card-specs li .spec-label i {
    color: #e5b004;
    font-size: 13px;
    width: 14px;
    text-align: center;
}

.package-card-specs li .spec-val {
    font-weight: 700;
    color: #07294d;
    text-align: right;
}

.package-venue-info {
    background: #f8fafc;
    border: 1px solid rgba(7, 41, 77, 0.06);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    margin: 12px 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.package-venue-info i {
    color: #e5b004;
    margin-top: 3px;
    flex-shrink: 0;
}

.package-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(7, 41, 77, 0.06);
}

.package-price-wrap {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #64748b;
    line-height: 1.2;
}

.package-price-wrap b {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: #07294d;
    margin-top: 2px;
}

.package-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #07294d;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 9px 20px;
    border-radius: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(7, 41, 77, 0.15);
}

.package-action-btn:hover {
    background: #ffc600;
    color: #07294d !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 198, 0, 0.35);
}

.champs-feature-package-card.free-package .package-action-btn {
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%);
    color: #07294d !important;
    box-shadow: 0 4px 14px rgba(255, 198, 0, 0.35);
}

.champs-feature-package-card.free-package .package-action-btn:hover {
    background: #07294d;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(7, 41, 77, 0.25);
}

/* Related Courses Section */
.champs-related-courses-section {
    padding-top: 60px;
    margin-top: 40px;
    border-top: 1px solid rgba(7, 41, 77, 0.08);
}

.related-section-header {
    margin-bottom: 30px;
}

.related-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(7, 41, 77, 0.06);
    border: 1px solid rgba(7, 41, 77, 0.12);
    color: #07294d;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 3px 12px;
    border-radius: 14px;
    margin-bottom: 8px;
}

.related-badge i {
    color: #e5b004;
}

.related-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #07294d;
    margin: 0;
    letter-spacing: -0.4px;
}

.related-accent-line {
    width: 44px;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    border-radius: 2px;
    margin-top: 10px;
}

.champs-related-course-card {
    background: #ffffff;
    border: 1px solid rgba(7, 41, 77, 0.08);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.05);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.champs-related-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(7, 41, 77, 0.12);
    border-color: rgba(255, 198, 0, 0.45);
}

.related-course-thumb {
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #e2e8f0;
    position: relative;
}

.related-course-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.champs-related-course-card:hover .related-course-thumb img {
    transform: scale(1.06);
}

.related-course-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.related-course-body a {
    text-decoration: none;
}

.related-course-body h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #07294d;
    line-height: 1.45;
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.champs-related-course-card:hover .related-course-body h4 {
    color: #d97706;
}

.related-course-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #07294d;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.champs-related-course-card:hover .related-course-link-btn {
    color: #d97706;
    transform: translateX(4px);
}

/* Responsive Rules for Course Single & Mock Test */
@media (max-width: 991.98px) {
    #courses-single.champs-course-single-section {
        padding-top: 40px;
        padding-bottom: 70px;
    }
    .champs-course-hero-card {
        padding: 26px 22px 22px;
    }
    .course-title-main {
        font-size: 26px;
    }
    .champs-course-features-sidebar {
        margin-top: 45px;
    }
    .champs-course-accordion .card-body {
        padding-left: 24px;
    }
}

@media (max-width: 575.98px) {
    .champs-course-hero-card {
        padding: 20px 16px 18px;
    }
    .course-title-main {
        font-size: 22px;
    }
    .course-header-top {
        flex-direction: column;
        align-items: flex-start;
    }
    .champs-course-tabs {
        flex-direction: column;
        gap: 6px;
    }
    .champs-course-accordion .card-header a {
        padding: 16px 18px;
    }
    .champs-course-accordion .card-header a .accordion-title-wrap {
        gap: 10px;
    }
    .champs-course-accordion .card-header a .accordion-title-text {
        font-size: 14px;
    }
    .package-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .package-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   30. REDESIGNED WORKSHOP DIRECTORY PAGE (#event-page)
   ========================================================================== */

/* Main Workshop Section Wrapper */
#event-page.champs-workshop-page-section {
    background: linear-gradient(180deg, #f8faff 0%, #edf0f2 50%, #f8faff 100%);
    padding-top: 65px;
    padding-bottom: 110px;
    position: relative;
    overflow: hidden;
}

#event-page.champs-workshop-page-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

#event-page.champs-workshop-page-section .container {
    position: relative;
    z-index: 1;
}

/* Workshop Grid Showcase Card */
.workshop-showcase-card,
#event-page .single-event-list,
#workshopList .single-event-list {
    background: #ffffff !important;
    border: 1px solid rgba(7, 41, 77, 0.08) !important;
    border-radius: 22px !important;
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.05) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    width: 100%;
}

.workshop-showcase-card::after,
#event-page .single-event-list::after,
#workshopList .single-event-list::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease;
}

.workshop-showcase-card:hover,
#event-page .single-event-list:hover,
#workshopList .single-event-list:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(7, 41, 77, 0.12), 0 0 25px rgba(255, 198, 0, 0.16) !important;
    border-color: rgba(255, 198, 0, 0.5) !important;
}

.workshop-showcase-card:hover::after,
#event-page .single-event-list:hover::after,
#workshopList .single-event-list:hover::after {
    transform: scaleX(1);
}

/* Card Media Header - Overrides legacy .single-event-list .event-thum { width: 38% } */
.workshop-card-media,
#event-page .single-event-list .event-thum,
#workshopList .single-event-list .event-thum,
#event-page .event-thum {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    height: 220px !important;
    overflow: hidden !important;
    background: #e2e8f0;
}

.workshop-card-media img,
#event-page .single-event-list .event-thum img,
#workshopList .single-event-list .event-thum img,
#event-page .event-thum img {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.workshop-showcase-card:hover .workshop-card-media img,
#event-page .single-event-list:hover .event-thum img,
#workshopList .single-event-list:hover .event-thum img {
    transform: scale(1.08);
}

.workshop-media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(7, 41, 77, 0.05) 0%, rgba(7, 41, 77, 0.35) 100%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.workshop-floating-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(7, 41, 77, 0.88);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 5px 12px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.workshop-floating-badge i {
    color: #ffc600;
}

.workshop-floating-badge.free-badge {
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%);
    color: #07294d;
    border-color: rgba(255, 255, 255, 0.6);
    font-weight: 800;
}

.workshop-floating-badge.free-badge i {
    color: #07294d;
}

/* Card Body */
.workshop-card-body {
    padding: 24px 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.workshop-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #07294d;
    line-height: 1.38;
    margin: 0 0 10px 0;
    min-height: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.workshop-card-title a {
    color: #07294d;
    text-decoration: none;
    transition: color 0.3s ease;
}

.workshop-showcase-card:hover .workshop-card-title a {
    color: #d97706;
}

.workshop-title-accent {
    width: 36px;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    border-radius: 2px;
    margin-bottom: 14px;
    transition: width 0.3s ease;
}

.workshop-showcase-card:hover .workshop-title-accent {
    width: 55px;
}

.workshop-card-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 1.68;
    color: #475569;
    margin-bottom: 20px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Footer & Action Button */
.workshop-card-footer {
    padding-top: 16px;
    border-top: 1px solid rgba(7, 41, 77, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.workshop-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #07294d;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(7, 41, 77, 0.15);
}

.workshop-card-btn i {
    transition: transform 0.3s ease;
}

.workshop-showcase-card:hover .workshop-card-btn {
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%);
    color: #07294d !important;
    box-shadow: 0 6px 18px rgba(255, 198, 0, 0.35);
}

.workshop-showcase-card:hover .workshop-card-btn i {
    transform: translateX(4px);
}

/* Responsive Rules for Workshop Directory */
@media (max-width: 991.98px) {
    #event-page.champs-workshop-page-section {
        padding-top: 45px;
        padding-bottom: 75px;
    }
    .workshop-card-media {
        height: 200px;
    }
    .workshop-card-title {
        min-height: auto;
        font-size: 17px;
    }
}

@media (max-width: 575.98px) {
    .workshop-card-media {
        height: 180px;
    }
    .workshop-card-body {
        padding: 20px 18px 16px;
    }
    .workshop-card-title {
        font-size: 16px;
    }
}

/* ==========================================================================
   31. REDESIGNED BLOG DIRECTORY PAGE (#blog-page)
   ========================================================================== */

#blog-page.champs-blog-page-section {
    background: #edf0f2;
    padding-top: 60px;
    padding-bottom: 95px;
    position: relative;
}

#blog-page.champs-blog-page-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 280px;
    background: linear-gradient(180deg, rgba(7, 41, 77, 0.04) 0%, rgba(7, 41, 77, 0) 100%);
    pointer-events: none;
}

#blog-page.champs-blog-page-section .container {
    position: relative;
    z-index: 1;
}

/* Articles Section Heading */
.blog-articles-heading {
    margin-bottom: 28px;
}

.blog-articles-heading h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #07294d;
    letter-spacing: -0.4px;
    margin: 0 0 10px 0;
}

.blog-heading-accent {
    width: 45px;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    border-radius: 2px;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

/* Blog Card */
.champs-blog-card {
    background: #ffffff !important;
    border: 1px solid rgba(7, 41, 77, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.05) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
}

.champs-blog-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s ease;
}

.champs-blog-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 48px rgba(7, 41, 77, 0.12), 0 0 24px rgba(255, 198, 0, 0.16) !important;
    border-color: rgba(255, 198, 0, 0.5) !important;
}

.champs-blog-card:hover::after {
    transform: scaleX(1);
}

/* Blog Media Header */
.blog-card-media {
    position: relative !important;
    width: 100% !important;
    height: 220px !important;
    overflow: hidden !important;
    background: #e2e8f0;
}

.blog-card-media a {
    display: block;
    width: 100%;
    height: 100%;
}

.blog-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.champs-blog-card:hover .blog-card-media img {
    transform: scale(1.08) !important;
}

.blog-media-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(7, 41, 77, 0.04) 0%, rgba(7, 41, 77, 0.45) 100%);
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.blog-floating-date {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(7, 41, 77, 0.88);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 5px 12px;
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.blog-floating-date i {
    color: #ffc600;
}

/* Blog Card Body */
.blog-card-body {
    padding: 22px 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
    flex-grow: 1;
}

/* Card Meta Row */
.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(7, 41, 77, 0.06);
}

.blog-meta-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 12.5px;
    color: #64748b;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.blog-meta-link i {
    color: #d97706;
    font-size: 12px;
}

.blog-meta-link:hover {
    color: #07294d;
}

.blog-meta-link.tag-link {
    background: rgba(7, 41, 77, 0.05);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11.5px;
}

/* Title & Accent */
.blog-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #07294d;
    line-height: 1.42;
    margin: 0 0 10px 0;
    min-height: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.blog-card-title a {
    color: #07294d;
    text-decoration: none;
    transition: color 0.3s ease;
}

.champs-blog-card:hover .blog-card-title a,
.champs-blog-card:hover .blog-card-title {
    color: #d97706;
}

.blog-card-accent {
    width: 32px;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    border-radius: 2px;
    margin-bottom: 12px;
    transition: width 0.3s ease;
}

.champs-blog-card:hover .blog-card-accent {
    width: 50px;
}

.blog-card-desc {
    font-family: 'Roboto', sans-serif;
    font-size: 13.5px;
    line-height: 1.68;
    color: #475569;
    margin-bottom: 18px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Footer & CTA Button */
.blog-card-footer {
    padding-top: 14px;
    border-top: 1px solid rgba(7, 41, 77, 0.06);
}

.blog-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    background: #07294d !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(7, 41, 77, 0.15) !important;
}

.blog-cta-btn i {
    transition: transform 0.3s ease;
}

.champs-blog-card:hover .blog-cta-btn {
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%) !important;
    color: #07294d !important;
    box-shadow: 0 6px 18px rgba(255, 198, 0, 0.35) !important;
}

.champs-blog-card:hover .blog-cta-btn i {
    transform: translateX(4px);
}

/* Search Form in Sidebar */
.champs-search-form .search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.champs-search-form input {
    width: 100%;
    height: 48px;
    padding: 0 52px 0 18px;
    background-color: #f8fafc;
    color: #07294d;
    border-radius: 25px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    border: 1.5px solid rgba(7, 41, 77, 0.12);
    transition: all 0.3s ease;
}

.champs-search-form input:focus {
    outline: none;
    border-color: #ffc600;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 198, 0, 0.2);
}

.champs-search-form input::placeholder {
    color: #94a3b8;
}

.search-submit-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #07294d;
    color: #ffffff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-submit-btn:hover {
    background: #ffc600;
    color: #07294d;
    transform: scale(1.05);
}

/* Modern Blog Pagination */
.blog-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 45px 0 10px !important;
    flex-wrap: wrap !important;
}

.blog-pagination a,
.blog-pagination span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 3px 10px rgba(7, 41, 77, 0.04) !important;
}

.blog-pagination a {
    background: #ffffff !important;
    color: #07294d !important;
    border: 1px solid rgba(7, 41, 77, 0.12) !important;
}

.blog-pagination a:hover {
    background: #07294d !important;
    color: #ffffff !important;
    border-color: #07294d !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(7, 41, 77, 0.2) !important;
}

.blog-pagination .active,
.blog-pagination span.current {
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%) !important;
    color: #07294d !important;
    border: 1px solid rgba(255, 198, 0, 0.5) !important;
    box-shadow: 0 6px 18px rgba(255, 198, 0, 0.35) !important;
}

.blog-pagination .disabled {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    pointer-events: none !important;
}

/* Responsive Rules for Blog Directory */
@media (max-width: 991.98px) {
    #blog-page.champs-blog-page-section {
        padding-top: 45px;
        padding-bottom: 75px;
    }
    .bloglist {
        padding-right: 0 !important;
        margin-bottom: 40px;
    }
    .blog-card-media {
        height: 200px !important;
    }
    .blog-card-title {
        min-height: auto;
        font-size: 16px;
    }
}

@media (max-width: 767.98px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-card-media {
        height: 220px !important;
    }
}

@media (max-width: 575.98px) {
    .blog-card-media {
        height: 190px !important;
    }
    .blog-card-body {
        padding: 18px 18px 16px !important;
    }
    .blog-card-title {
        font-size: 15.5px;
    }
}

/* ==========================================================================
   32. GLOBAL COURSE DETAIL TEMPLATE (courses/*.html)
   ========================================================================== */

#courses-single {
    background: #edf0f2;
    padding-top: 50px;
    padding-bottom: 90px;
    position: relative;
}

#courses-single::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 260px;
    background: linear-gradient(180deg, rgba(7, 41, 77, 0.04) 0%, rgba(7, 41, 77, 0) 100%);
    pointer-events: none;
}

#courses-single .container {
    position: relative;
    z-index: 1;
}

/* Left Hero & Main Content Card */
#courses-single .courses-single-left {
    background: #ffffff !important;
    border: 1px solid rgba(7, 41, 77, 0.08) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.05) !important;
    padding: 34px 34px 38px !important;
    margin-top: 30px !important;
    position: relative;
    transition: box-shadow 0.3s ease;
}

/* Title & Header Bar inside Hero Card */
#courses-single .courses-single-left > .title {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(7, 41, 77, 0.08);
}

#courses-single .courses-single-left > .title h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #07294d !important;
    line-height: 1.35 !important;
    letter-spacing: -0.3px;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Book Now CTA Button inside Title */
#courses-single .courses-single-left .booknow_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: linear-gradient(135deg, #ffc600 0%, #e5b004 100%) !important;
    color: #07294d !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 10px 22px !important;
    border-radius: 25px !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(255, 198, 0, 0.35) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    float: none !important;
    text-decoration: none !important;
    cursor: pointer;
}

#courses-single .courses-single-left .booknow_btn:hover {
    background: #07294d !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(7, 41, 77, 0.25) !important;
}

#courses-single .courses-single-left .booknow_btn i {
    font-size: 13px;
    transition: transform 0.3s ease;
}

#courses-single .courses-single-left .booknow_btn:hover i {
    transform: translateX(3px);
}

/* Featured Media Container */
#courses-single .courses-single-image {
    padding-top: 0 !important;
    margin-bottom: 28px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #e2e8f0;
    box-shadow: 0 8px 24px rgba(7, 41, 77, 0.08);
    position: relative;
}

#courses-single .courses-single-image img {
    width: 100% !important;
    height: auto !important;
    max-height: 440px;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

#courses-single .courses-single-image:hover img {
    transform: scale(1.025);
}

/* Modern Pill Tabs Navigation (#myTab) */
#courses-single .courses-tab #myTab {
    display: flex !important;
    gap: 10px !important;
    border-bottom: 2px solid rgba(7, 41, 77, 0.08) !important;
    padding-bottom: 12px !important;
    margin-top: 10px !important;
    margin-bottom: 26px !important;
    background: transparent !important;
}

#courses-single .courses-tab #myTab .nav-item {
    flex: 1;
}

#courses-single .courses-tab #myTab .nav-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    background: #f8fafc !important;
    border: 1px solid rgba(7, 41, 77, 0.08) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

#courses-single .courses-tab #myTab .nav-item a:hover {
    background: rgba(7, 41, 77, 0.06) !important;
    color: #07294d !important;
}

#courses-single .courses-tab #myTab .nav-item a.active {
    background: #07294d !important;
    color: #ffffff !important;
    border-color: #07294d !important;
    box-shadow: 0 6px 18px rgba(7, 41, 77, 0.18) !important;
}

/* Tab Content Typography */
#courses-single .tab-content,
#courses-single .overview-description,
#courses-single .events-left {
    font-family: 'Roboto', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #475569 !important;
}

#courses-single .tab-content h4,
#courses-single .overview-description h4,
#courses-single .events-left h4 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #07294d !important;
    margin: 24px 0 14px !important;
    letter-spacing: -0.2px;
}

#courses-single .tab-content p,
#courses-single .overview-description p,
#courses-single .events-left p {
    margin-bottom: 16px;
}

/* Modern Course Tables (Overview, Feature & Syllabus Tables) */
#courses-single table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(7, 41, 77, 0.1) !important;
    margin: 22px 0 26px !important;
    box-shadow: 0 4px 16px rgba(7, 41, 77, 0.04) !important;
    background: #ffffff !important;
}

#courses-single table th {
    background: #07294d !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 13px 18px !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

#courses-single table tr.bg-warning th,
#courses-single table th.bg-warning {
    background: linear-gradient(135deg, #07294d 0%, #051d38 100%) !important;
    color: #ffc600 !important;
    border-bottom: 2px solid #ffc600 !important;
    font-size: 15px !important;
    padding: 15px 20px !important;
}

#courses-single table td {
    padding: 12px 18px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #334155 !important;
    border: none !important;
    border-bottom: 1px solid rgba(7, 41, 77, 0.06) !important;
    line-height: 1.55 !important;
}

#courses-single table tr:last-child td {
    border-bottom: none !important;
}

#courses-single table tr:nth-child(even) td {
    background: #f8fafc !important;
}

#courses-single table tr:hover td {
    background: rgba(255, 198, 0, 0.06) !important;
}

/* Callout Notice & Instruction Box */
#courses-single .instruction-box {
    background: rgba(255, 198, 0, 0.12) !important;
    border: 1px solid rgba(255, 198, 0, 0.45) !important;
    border-left: 5px solid #d97706 !important;
    border-radius: 12px !important;
    padding: 16px 20px !important;
    color: #07294d !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin: 20px 0 !important;
}

#courses-single .instruction-box strong {
    color: #07294d !important;
}

/* Curriculum Accordion (#accordionExample - Modernized) */
#courses-single #accordionExample .card {
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 14px !important;
    box-shadow: 0 3px 10px rgba(7, 41, 77, 0.03) !important;
    background: #ffffff !important;
    transition: all 0.25s ease !important;
}

#courses-single #accordionExample .card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 18px rgba(7, 41, 77, 0.07) !important;
}

#courses-single #accordionExample .card-header,
.curriculum-cont .accordion .card .card-header {
    background: #ffffff !important;
    padding: 0 !important;
    border-bottom: none !important;
}

/* Accordion Trigger Link */
#courses-single #accordionExample .card-header a,
.curriculum-cont .accordion .card .card-header a {
    text-decoration: none !important;
    color: #07294d !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    position: relative !important;
    transition: background 0.25s ease !important;
    border: none !important;
}

#courses-single #accordionExample .card-header a.collapsed,
.curriculum-cont .accordion .card .card-header a.collapsed {
    background: #f8fafc !important;
}

#courses-single #accordionExample .card-header a:hover {
    background: #f1f5f9 !important;
}

/* Topic Details Flex Container */
#courses-single #accordionExample .card-header a ul {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
    flex: 1 !important;
}

#courses-single #accordionExample .card-header a ul li:first-child i {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
    background: rgba(255, 198, 0, 0.16) !important;
    color: #07294d !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14.5px !important;
    transition: all 0.2s ease !important;
}

#courses-single #accordionExample .card-header a:hover ul li:first-child i {
    background: #ffc600 !important;
    color: #07294d !important;
}

#courses-single #accordionExample .card-header a .head {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #07294d !important;
    letter-spacing: -0.2px !important;
    transition: color 0.2s ease !important;
}

#courses-single #accordionExample .card-header a:hover .head,
#courses-single #accordionExample .card-header a:not(.collapsed) .head {
    color: #07294d !important;
}

/* Disable legacy left-side ::before indicator */
#courses-single #accordionExample .card-header a::before,
.curriculum-cont .accordion .card .card-header a::before {
    content: none !important;
    display: none !important;
}

/* Premium Circular Arrow Indicator on the RIGHT Side (::after) */
#courses-single #accordionExample .card-header a::after,
.curriculum-cont .accordion .card .card-header a::after {
    content: '\f107' !important;
    font-family: 'FontAwesome' !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #07294d !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    top: auto !important;
    right: auto !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform: rotate(180deg) !important;
    box-shadow: 0 2px 6px rgba(7, 41, 77, 0.06) !important;
    flex-shrink: 0 !important;
}

#courses-single #accordionExample .card-header a.collapsed::after,
.curriculum-cont .accordion .card .card-header a.collapsed::after {
    transform: rotate(0deg) !important;
    color: #64748b !important;
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}

#courses-single #accordionExample .card-header a:hover::after,
.curriculum-cont .accordion .card .card-header a:hover::after {
    background: #07294d !important;
    color: #ffffff !important;
    border-color: #07294d !important;
    box-shadow: 0 4px 10px rgba(7, 41, 77, 0.2) !important;
}

/* Accordion Content Body */
#courses-single #accordionExample .card-body {
    padding: 20px 22px !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
}

/* Table inside Accordion (Curriculum Topic Table) */
#courses-single #accordionExample .card-body table,
.curriculum-cont .accordion .card .card-body table {
    display: table !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(7, 41, 77, 0.04) !important;
}

#courses-single #accordionExample .card-body table thead,
.curriculum-cont .accordion .card .card-body table thead {
    display: table-header-group !important;
    width: 100% !important;
}

#courses-single #accordionExample .card-body table tbody,
.curriculum-cont .accordion .card .card-body table tbody {
    display: table-row-group !important;
    width: 100% !important;
}

#courses-single #accordionExample .card-body table tr,
.curriculum-cont .accordion .card .card-body table tr {
    display: table-row !important;
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    transition: background 0.15s ease !important;
}

#courses-single #accordionExample .card-body table thead th,
#courses-single #accordionExample .card-body table th,
.curriculum-cont .accordion .card .card-body table thead th,
.curriculum-cont .accordion .card .card-body table th {
    display: table-cell !important;
    vertical-align: middle !important;
    background: linear-gradient(135deg, #07294d 0%, #0d3b6c 100%) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 13px 18px !important;
    border: none !important;
    line-height: 1.4 !important;
}

/* Header Column 1: Topic No. (Cleanly Centered) */
#courses-single #accordionExample .card-body table th:first-child,
.curriculum-cont .accordion .card .card-body table th:first-child {
    width: 110px !important;
    text-align: center !important;
    border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Header Column 2: Topic Title (Left Aligned) */
#courses-single #accordionExample .card-body table th:last-child,
.curriculum-cont .accordion .card .card-body table th:last-child {
    text-align: left !important;
    padding-left: 20px !important;
}

/* Data Cells */
#courses-single #accordionExample .card-body table tbody td,
.curriculum-cont .accordion .card .card-body table tbody td {
    display: table-cell !important;
    vertical-align: middle !important;
    padding: 11px 18px !important;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    line-height: 1.5 !important;
    background: transparent !important;
}

/* Alternating Row Stripes & Hover */
#courses-single #accordionExample .card-body table tbody tr:nth-child(even),
.curriculum-cont .accordion .card .card-body table tbody tr:nth-child(even) {
    background: #f8fafc !important;
}

#courses-single #accordionExample .card-body table tbody tr:nth-child(odd),
.curriculum-cont .accordion .card .card-body table tbody tr:nth-child(odd) {
    background: #ffffff !important;
}

#courses-single #accordionExample .card-body table tbody tr:hover,
.curriculum-cont .accordion .card .card-body table tbody tr:hover {
    background: rgba(255, 198, 0, 0.08) !important;
}

#courses-single #accordionExample .card-body table tbody tr:last-child td,
.curriculum-cont .accordion .card .card-body table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Data Column 1: Topic No. (Centered Bold Navy Badge) */
#courses-single #accordionExample .card-body table tbody td:first-child,
.curriculum-cont .accordion .card .card-body table tbody td:first-child {
    width: 110px !important;
    text-align: center !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #07294d !important;
    border-right: 1px solid #f1f5f9 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Data Column 2: Topic Title (Left Aligned, Clean Modern Typography) */
#courses-single #accordionExample .card-body table tbody td:last-child,
.curriculum-cont .accordion .card .card-body table tbody td:last-child {
    text-align: left !important;
    justify-content: flex-start !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    padding-left: 20px !important;
    white-space: normal !important;
}

/* ==========================================================================
   RIGHT SIDEBAR: BOOKING & BATCHES CARD (.col-lg-4)
   ========================================================================== */

/* ==========================================================================
   SIDEBAR & BATCH SELECTION (Modernized)
   ========================================================================== */

#courses-single .col-lg-4 .courses-tab.bg-white,
#courses-single .col-lg-4 .courses-tab {
    background: #ffffff !important;
    border: 1px solid rgba(7, 41, 77, 0.08) !important;
    border-radius: 20px !important;
    padding: 28px 24px 26px !important;
    box-shadow: 0 12px 35px rgba(7, 41, 77, 0.07) !important;
    margin-top: 30px !important;
    position: sticky !important;
    top: 30px !important;
    z-index: 10;
}

/* Sidebar Tab Header (#myTab2) */
#courses-single #myTab2 {
    display: flex !important;
    gap: 8px !important;
    background: #f1f5f9 !important;
    padding: 6px !important;
    border-radius: 14px !important;
    border-bottom: none !important;
    margin-bottom: 24px !important;
}

#courses-single #myTab2 .nav-item {
    flex: 1 !important;
    margin: 0 !important;
}

#courses-single #myTab2 .nav-item[style*="display: none"],
#courses-single #myTab2 .nav-item[style*="display:none"] {
    display: none !important;
}

#courses-single #myTab2 .nav-item a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    border: none !important;
    background: transparent !important;
    padding: 10px 16px !important;
    border-radius: 10px !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
}

#courses-single #myTab2 .nav-item a.active {
    background: #07294d !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(7, 41, 77, 0.18) !important;
}

#courses-single #myTab2 .nav-item a:hover:not(.active) {
    color: #07294d !important;
    background: rgba(7, 41, 77, 0.04) !important;
}

#courses-single .course-features {
    padding: 0 !important;
    margin-top: 0 !important;
}

#courses-single .course-features > h4 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #07294d !important;
    margin-bottom: 18px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #ffc600 !important;
    letter-spacing: -0.2px;
}

/* Branch Radio Cards in #availableSessionList (Block Container with Inline Side-by-Side Radios) */
#courses-single #availableSessionList {
    display: block !important;
    width: 100% !important;
    margin-bottom: 18px !important;
    position: relative !important;
    clear: both !important;
}

#courses-single #availableSessionList .form-check.form-check-inline {
    position: relative !important;
    display: inline-flex !important;
    width: calc(50% - 5px) !important;
    align-items: center !important;
    margin: 0 6px 12px 0 !important;
    padding: 0 !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
}

#courses-single #availableSessionList .form-check.form-check-inline:nth-of-type(2n) {
    margin-right: 0 !important;
}

#courses-single #availableSessionList .form-check-input.bradio,
#courses-single #availableSessionList input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
}

#courses-single #availableSessionList .form-check-label,
#courses-single #availableSessionList .radio-inline {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

#courses-single #availableSessionList .form-check-label::before,
#courses-single #availableSessionList .radio-inline::before {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    border: 2px solid #94a3b8 !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

#courses-single #availableSessionList .form-check-input:checked + .form-check-label,
#courses-single #availableSessionList .form-check-input:checked + .radio-inline {
    background: #07294d !important;
    color: #ffffff !important;
    border-color: #07294d !important;
    box-shadow: 0 4px 14px rgba(7, 41, 77, 0.2) !important;
    transform: translateY(-1px);
}

#courses-single #availableSessionList .form-check-input:checked + .form-check-label::before,
#courses-single #availableSessionList .form-check-input:checked + .radio-inline::before {
    border-color: #ffc600 !important;
    background: #ffc600 !important;
    box-shadow: inset 0 0 0 3px #07294d !important;
}

#courses-single #availableSessionList .form-check-label:hover,
#courses-single #availableSessionList .radio-inline:hover {
    border-color: #cbd5e1 !important;
    background: #f1f5f9 !important;
}

#courses-single #availableSessionList .form-check-input:checked + .form-check-label:hover {
    background: #07294d !important;
    border-color: #07294d !important;
    color: #ffffff !important;
}

#courses-single #availableSessionList > br {
    display: none !important;
}

#courses-single #availableSessionList hr,
#courses-single #displayBranchWiseBatchData hr {
    border: none !important;
    height: 1px !important;
    background: #e2e8f0 !important;
    margin: 16px 0 !important;
    clear: both !important;
    display: block !important;
    width: 100% !important;
}

/* Ensure Batch Content Row & Container Never Shift or Float */
#courses-single #availableSessionList .row,
#courses-single #availableSessionList .col-md-12,
#courses-single #displayBranchWiseBatchData {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
}

/* Academic Session Tabs inside #displayBranchWiseBatchData */
#courses-single #displayBranchWiseBatchData #myTab {
    border: none !important;
    background: #f1f5f9 !important;
    padding: 5px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    gap: 6px !important;
}

#courses-single #displayBranchWiseBatchData #myTab .nav-item {
    flex: 1 !important;
    margin: 0 !important;
}

#courses-single #displayBranchWiseBatchData #myTab .nav-item a {
    display: block !important;
    text-align: center !important;
    padding: 9px 14px !important;
    border-radius: 9px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: transparent !important;
    border: none !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

#courses-single #displayBranchWiseBatchData #myTab .nav-item a.active,
#courses-single #displayBranchWiseBatchData #myTab .nav-item a:hover {
    background: #07294d !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(7, 41, 77, 0.18) !important;
}

/* Dashboard Container & Session Details */
#courses-single #displayBranchWiseBatchData .single-dashboard {
    padding-top: 6px !important;
}

#courses-single #displayBranchWiseBatchData .single-dashboard h5.text-danger {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #07294d !important;
    background: rgba(7, 41, 77, 0.06) !important;
    border: 1px solid rgba(7, 41, 77, 0.1) !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    margin: 0 auto 10px auto !important;
}

#courses-single #displayBranchWiseBatchData .single-dashboard h5:not(.text-danger):not(.text-indigo) {
    background: linear-gradient(135deg, rgba(255, 198, 0, 0.18) 0%, rgba(255, 198, 0, 0.05) 100%) !important;
    border: 1.5px solid rgba(255, 198, 0, 0.5) !important;
    border-radius: 14px !important;
    padding: 13px 18px !important;
    margin: 12px 0 !important;
    text-align: center !important;
    box-shadow: 0 4px 14px rgba(255, 198, 0, 0.12) !important;
}

#courses-single #displayBranchWiseBatchData .single-dashboard h5:not(.text-danger):not(.text-indigo) span b,
#courses-single #displayBranchWiseBatchData .single-dashboard h5:not(.text-danger):not(.text-indigo) .price {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #07294d !important;
    letter-spacing: -0.2px !important;
}

#courses-single #displayBranchWiseBatchData .single-dashboard h5.text-indigo {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    margin: 10px 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* Batch Cards in Sidebar */
#courses-single #displayBranchWiseBatchData .card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(7, 41, 77, 0.05) !important;
    margin-bottom: 22px !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#courses-single #displayBranchWiseBatchData .card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 10px 28px rgba(7, 41, 77, 0.1) !important;
    transform: translateY(-2px);
}

#courses-single #displayBranchWiseBatchData .card-header {
    background: linear-gradient(135deg, #07294d 0%, #0e3d6e 100%) !important;
    border-bottom: 2px solid #ffc600 !important;
    padding: 12px 18px !important;
}

#courses-single #displayBranchWiseBatchData .card-header h4 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.3px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#courses-single #displayBranchWiseBatchData .card-header h4::before {
    content: '' !important;
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #ffc600 !important;
    box-shadow: 0 0 6px rgba(255, 198, 0, 0.8) !important;
}

#courses-single #displayBranchWiseBatchData .card-body {
    padding: 18px !important;
}

#courses-single #displayBranchWiseBatchData .card-body p:empty,
#courses-single #displayBranchWiseBatchData .card-body br {
    display: none !important;
}

/* Schedule Timetable Table inside Batch Card (Only when timetable grid has td[rowspan], e.g. 11plus-year-4.html) */
#courses-single #displayBranchWiseBatchData .card-body table:has(td[rowspan]) {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    background: #ffffff !important;
    display: table !important;
}

#courses-single #displayBranchWiseBatchData .card-body table:has(td[rowspan]) tbody {
    display: table-row-group !important;
}

#courses-single #displayBranchWiseBatchData .card-body table:has(td[rowspan]) tr {
    display: table-row !important;
    border-bottom: none !important;
}

#courses-single #displayBranchWiseBatchData .card-body table:has(td[rowspan]) td {
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 8px 12px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 13px !important;
    color: #334155 !important;
    vertical-align: middle !important;
    height: auto !important;
    line-height: 1.4 !important;
}

#courses-single #displayBranchWiseBatchData .card-body table:has(td[rowspan]) tr:last-child td {
    border-bottom: none !important;
}

#courses-single #displayBranchWiseBatchData .card-body table:has(td[rowspan]) td[rowspan] {
    background: #f8fafc !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #07294d !important;
    border-right: 1px solid #e2e8f0 !important;
    text-align: center !important;
    width: 32% !important;
}

#courses-single #displayBranchWiseBatchData .card-body table:has(td[rowspan]) td p {
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   BATCH METADATA & BOOKING CARDS (Universal & Identical across EVERY table)
   ========================================================================== */

/* Subject Heading for Multi-Subject Cards (e.g. Maths, English Language in year-2.html) */
#courses-single .card-body div[style*="color:#2107de"],
#courses-single .card-body div[style*="color: #2107de"] {
    color: #07294d !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    margin: 20px 0 10px 0 !important;
    padding: 8px 14px !important;
    background: #f1f5f9 !important;
    border-left: 3.5px solid #ffc600 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
}

#courses-single .card-body div[style*="color:#2107de"]:first-child,
#courses-single .card-body div[style*="color: #2107de"]:first-child {
    margin-top: 6px !important;
}

/* Every Batch Info Table (Consistent across Table 1, Table 2, Table 3...) */
#courses-single .col-lg-4 .card-body table,
#courses-single #availableSessionList .card-body table,
#courses-single #displayBranchWiseBatchData .card-body table {
    width: 100% !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    display: block !important;
    white-space: normal !important;
    margin-top: 10px !important;
    margin-bottom: 18px !important;
    box-sizing: border-box !important;
}

#courses-single .col-lg-4 .card-body table tbody,
#courses-single #availableSessionList .card-body table tbody,
#courses-single #displayBranchWiseBatchData .card-body table tbody {
    display: block !important;
    width: 100% !important;
}

#courses-single .col-lg-4 .card-body table tr,
#courses-single #availableSessionList .card-body table tr,
#courses-single #displayBranchWiseBatchData .card-body table tr {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    white-space: normal !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Last Row in Batch Info Table has no dashed separator */
#courses-single .col-lg-4 .card-body table tr:last-child,
#courses-single #availableSessionList .card-body table tr:last-child,
#courses-single #displayBranchWiseBatchData .card-body table tr:last-child {
    border-bottom: none !important;
}

/* Reset td and tr in batch card tables to prevent inheritance conflicts */
#courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) td,
#courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) td,
#courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.4 !important;
}

#courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) tr:nth-child(even) td,
#courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) tr:nth-child(odd) td,
#courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) tr:hover td,
#courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) tr:nth-child(even) td,
#courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) tr:nth-child(odd) td,
#courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) tr:hover td,
#courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) tr:nth-child(even) td,
#courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) tr:nth-child(odd) td,
#courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) tr:hover td {
    background: transparent !important;
}

/* Date Rows: Clean Labels (Batch Start Date, Batch End Date - 100% Identical) */
#courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) td:first-child:not([colspan="2"]):not(:has(h6.bg-dark)),
#courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) th:first-child,
#courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) td:first-child:not([colspan="2"]):not(:has(h6.bg-dark)),
#courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) th:first-child,
#courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) td:first-child:not([colspan="2"]):not(:has(h6.bg-dark)),
#courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) th:first-child {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

#courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) td:first-child:not([colspan="2"]) h6:not(.bg-dark),
#courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) th:first-child,
#courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) td:first-child:not([colspan="2"]) h6:not(.bg-dark),
#courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) th:first-child,
#courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) td:first-child:not([colspan="2"]) h6:not(.bg-dark),
#courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) th:first-child {
    font-family: 'Roboto', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
}

/* Date Rows: Bold Navy Values (06-09-2026, 18-07-2027 - 100% Identical) */
#courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) td:last-child:not([colspan="2"]):not(:has(h6.bg-dark)),
#courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) th:last-child,
#courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) td:last-child:not([colspan="2"]):not(:has(h6.bg-dark)),
#courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) th:last-child,
#courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) td:last-child:not([colspan="2"]):not(:has(h6.bg-dark)),
#courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) th:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    text-align: right !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}

#courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) td:last-child:not([colspan="2"]) h6:not(.bg-dark),
#courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) th:last-child,
#courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) td:last-child:not([colspan="2"]) h6:not(.bg-dark),
#courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) th:last-child,
#courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) td:last-child:not([colspan="2"]) h6:not(.bg-dark),
#courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) th:last-child {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #07294d !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: none !important;
    text-align: right !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    background: transparent !important;
}

/* Row with Seat Remaining & Book Now Button (Positioned Below) */
#courses-single .card-body table tr:has(.book-now),
#courses-single .card-body table tr:has(.seat-full) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    margin-top: 4px !important;
    width: 100% !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* Remaining Seats Container (Centered) */
#courses-single .card-body table tr:has(.book-now) td:first-child,
#courses-single .card-body table tr:has(.seat-full) td:first-child {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
    border: none !important;
}

/* Book Now CTA Button Container (Full Width Below) */
#courses-single .card-body table tr:has(.book-now) td:last-child,
#courses-single .card-body table tr:has(.seat-full) td:last-child {
    display: flex !important;
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
    border: none !important;
}

#courses-single .card-body table tr:has(.book-now) td:last-child span,
#courses-single .card-body table tr:has(.seat-full) td:last-child span {
    display: block !important;
    width: 100% !important;
}

/* Remaining Seats Urgency Pill (Centered above Button) */
#courses-single .card-body strong.text-danger,
#courses-single .card-body .text-danger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #dc2626 !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    margin: 0 auto !important;
    float: none !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.08) !important;
}

#courses-single .card-body strong.text-danger::before,
#courses-single .card-body .text-danger::before {
    content: '●' !important;
    font-size: 10px !important;
    animation: pulseDot 2s infinite ease-in-out;
}

/* Book Now CTA Button (Prominently Placed Below Seat Remaining) */
#courses-single .book-now,
#courses-single .col-lg-4 .book-now,
#courses-single #availableSessionList .book-now,
#courses-single #displayBranchWiseBatchData .book-now,
#courses-single .main-btn.booknow {
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #ffc600 0%, #e5b200 100%) !important;
    color: #07294d !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    padding: 12px 20px !important;
    border-radius: 25px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    box-shadow: 0 4px 14px rgba(255, 198, 0, 0.35) !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin: 0 !important;
    border: none !important;
    cursor: pointer !important;
    float: none !important;
    box-sizing: border-box !important;
}

#courses-single .book-now:hover,
#courses-single .col-lg-4 .book-now:hover,
#courses-single #availableSessionList .book-now:hover,
#courses-single #displayBranchWiseBatchData .book-now:hover,
#courses-single .main-btn.booknow:hover {
    background: #07294d !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(7, 41, 77, 0.25) !important;
    transform: translateY(-2px) !important;
}

#courses-single .book-now:active,
#courses-single #displayBranchWiseBatchData .book-now:active {
    transform: translateY(0) !important;
}

/* Seat Full Pill (Full Width Below) */
#courses-single .seat-full,
#courses-single .col-lg-4 .seat-full,
#courses-single #availableSessionList .seat-full,
#courses-single #displayBranchWiseBatchData .seat-full {
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 25px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    cursor: not-allowed !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Time Slot Row in Multi-Subject Courses (e.g. Sun: 09:30 AM - 10:30 AM) */
#courses-single .card-body table tr td[colspan="2"] {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 0 !important;
}

#courses-single .card-body table tr td[colspan="2"] h6:not(.bg-dark) {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #07294d !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 6px 14px !important;
    background: rgba(7, 41, 77, 0.05) !important;
    border-radius: 20px !important;
}

#courses-single .card-body table tr td[colspan="2"] h6:not(.bg-dark)::before {
    content: '🕒' !important;
    font-size: 12px !important;
}

/* One-to-One Class Callout Banner (Premium Branded Card with Micro CTA) */
#courses-single .card-body table tr:has(h6.bg-dark),
#courses-single #displayBranchWiseBatchData .card-body table tr:has(h6.bg-dark),
#courses-single #availableSessionList .card-body table tr:has(h6.bg-dark) {
    display: flex !important;
    width: 100% !important;
    padding: 12px 0 4px 0 !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

#courses-single .card-body table tr td:has(h6.bg-dark),
#courses-single .card-body table tr td[colspan="2"]:has(h6.bg-dark),
#courses-single #displayBranchWiseBatchData .card-body table tr td[colspan="2"]:has(h6.bg-dark),
#courses-single #availableSessionList .card-body table tr td[colspan="2"]:has(h6.bg-dark) {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    float: none !important;
    border: none !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

#courses-single .card-body table h6.bg-dark,
#courses-single .card-body table tr td h6.bg-dark,
#courses-single .card-body table tr td[colspan="2"] h6.bg-dark,
#courses-single #displayBranchWiseBatchData .card-body table h6.bg-dark,
#courses-single #displayBranchWiseBatchData .card-body table tr td h6.bg-dark,
#courses-single #availableSessionList .card-body table h6.bg-dark {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 2px 4px !important;
    padding: 7px 10px !important;
    margin: 6px 0 0 0 !important;
    background: linear-gradient(135deg, #07294d 0%, #0c3664 60%, #07294d 100%) !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 198, 0, 0.4) !important;
    border-left: 3.5px solid #ffc600 !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 16px rgba(7, 41, 77, 0.16), 0 0 10px rgba(255, 198, 0, 0.1) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    overflow: visible !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease !important;
}

#courses-single .card-body table h6.bg-dark:hover,
#courses-single #displayBranchWiseBatchData .card-body table h6.bg-dark:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(7, 41, 77, 0.25), 0 0 14px rgba(255, 198, 0, 0.2) !important;
    border-color: rgba(255, 198, 0, 0.65) !important;
}

#courses-single .card-body table h6.bg-dark span.text-warning,
#courses-single #displayBranchWiseBatchData .card-body table h6.bg-dark span.text-warning {
    color: #ffc600 !important;
    font-weight: 700 !important;
    background: rgba(255, 198, 0, 0.16) !important;
    padding: 1.5px 5px !important;
    margin: 0 1px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(255, 198, 0, 0.32) !important;
    display: inline-block !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap !important;
    font-size: 10.5px !important;
    flex-shrink: 0 !important;
}

#courses-single .card-body table h6.bg-dark a,
#courses-single #displayBranchWiseBatchData .card-body table h6.bg-dark a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    background: linear-gradient(135deg, #ffc600 0%, #f6ad13 100%) !important;
    color: #07294d !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 3px 8px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(246, 173, 19, 0.4) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin-left: 3px !important;
    border: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

#courses-single .card-body table h6.bg-dark a:hover,
#courses-single #displayBranchWiseBatchData .card-body table h6.bg-dark a:hover {
    background: #ffffff !important;
    color: #07294d !important;
    box-shadow: 0 3px 12px rgba(255, 255, 255, 0.45), 0 2px 8px rgba(246, 173, 19, 0.5) !important;
    transform: translateY(-1px) scale(1.02) !important;
    text-decoration: none !important;
}

#courses-single .card-body table h6.bg-dark a::after,
#courses-single #displayBranchWiseBatchData .card-body table h6.bg-dark a::after {
    content: '→' !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    transition: transform 0.2s ease !important;
}

#courses-single .card-body table h6.bg-dark a:hover::after,
#courses-single #displayBranchWiseBatchData .card-body table h6.bg-dark a:hover::after {
    transform: translateX(2px) !important;
}

@media (max-width: 480px) {
    #courses-single .card-body table h6.bg-dark,
    #courses-single #displayBranchWiseBatchData .card-body table h6.bg-dark {
        font-size: 10px !important;
        padding: 6px 8px !important;
        gap: 2px 3px !important;
    }
    #courses-single .card-body table h6.bg-dark span.text-warning,
    #courses-single #displayBranchWiseBatchData .card-body table h6.bg-dark span.text-warning {
        font-size: 9.5px !important;
        padding: 1px 4px !important;
        margin: 0 1px !important;
    }
    #courses-single .card-body table h6.bg-dark a,
    #courses-single #displayBranchWiseBatchData .card-body table h6.bg-dark a {
        font-size: 9px !important;
        padding: 2.5px 6px !important;
        margin-left: 2px !important;
    }
}

/* Branch & Session Select Dropdowns */
#courses-single #availableSessionList select,
#courses-single .course-features select,
#courses-single .course-features .nice-select,
#courses-single .course-features .form-control {
    width: 100% !important;
    height: 48px !important;
    line-height: 46px !important;
    border: 1.5px solid rgba(7, 41, 77, 0.14) !important;
    border-radius: 12px !important;
    padding: 0 16px !important;
    background-color: #f8fafc !important;
    color: #07294d !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

#courses-single #availableSessionList select:focus,
#courses-single .course-features select:focus {
    border-color: #ffc600 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 198, 0, 0.2) !important;
    outline: none !important;
}

/* Course Features Tab (tab2) */
#courses-single .course-features h5 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #07294d !important;
    margin: 18px 0 12px 0 !important;
    padding-left: 10px !important;
    border-left: 3px solid #ffc600 !important;
}

#courses-single .course-features ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 18px 0 !important;
}

#courses-single .course-features ul li {
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(7, 41, 77, 0.06) !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    color: #475569 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#courses-single .course-features ul li i {
    color: #d97706 !important;
    margin-right: 8px !important;
}

#courses-single .course-features ul li span {
    font-weight: 700 !important;
    color: #07294d !important;
}

/* Price Box */
#courses-single .price-button {
    background: linear-gradient(135deg, rgba(255, 198, 0, 0.15) 0%, rgba(255, 198, 0, 0.05) 100%) !important;
    border: 1.5px solid rgba(255, 198, 0, 0.45) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    margin: 18px 0 !important;
    text-align: center !important;
}

#courses-single .price-button span {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #07294d !important;
}

#courses-single .price-button .price,
#courses-single .price {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #07294d !important;
}


/* ==========================================================================
   RELATED COURSES SECTION
   ========================================================================== */

#courses-single .related-courses {
    padding-top: 55px !important;
    margin-top: 40px !important;
    border-top: 1px solid rgba(7, 41, 77, 0.08) !important;
}

#courses-single .related-courses .title h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #07294d !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.3px;
    position: relative;
    padding-bottom: 12px;
}

#courses-single .related-courses .title h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 45px;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    border-radius: 2px;
}

#courses-single .related-courses .single-course {
    background: #ffffff !important;
    border: 1px solid rgba(7, 41, 77, 0.08) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(7, 41, 77, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#courses-single .related-courses .single-course:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 18px 40px rgba(7, 41, 77, 0.12), 0 0 20px rgba(255, 198, 0, 0.15) !important;
    border-color: rgba(255, 198, 0, 0.45) !important;
}

#courses-single .related-courses .single-course .thum {
    overflow: hidden !important;
    height: 180px !important;
    background: #e2e8f0 !important;
}

#courses-single .related-courses .single-course .thum .image img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.5s ease !important;
}

#courses-single .related-courses .single-course:hover .thum .image img {
    transform: scale(1.08) !important;
}

#courses-single .related-courses .single-course .cont {
    padding: 20px 22px !important;
    flex-grow: 1 !important;
}

#courses-single .related-courses .single-course .cont h4 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #07294d !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    transition: color 0.3s ease !important;
}

#courses-single .related-courses .single-course:hover .cont h4 {
    color: #d97706 !important;
}

/* Responsive Rules for Global Course Template */
@media (max-width: 991.98px) {
    #courses-single {
        padding-top: 36px;
        padding-bottom: 60px;
    }
    #courses-single .courses-single-left {
        padding: 26px 20px !important;
        border-radius: 18px !important;
    }
    #courses-single .col-lg-4 .courses-tab.bg-white,
    #courses-single .col-lg-4 .courses-tab {
        position: static !important;
        margin-top: 36px !important;
        padding: 24px 20px !important;
        border-radius: 18px !important;
    }
    #courses-single .title h3 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    #courses-single .title h3 .booknow_btn {
        align-self: flex-start !important;
    }
}

@media (max-width: 767.98px) {
    #courses-single #availableSessionList {
        display: block !important;
        width: 100% !important;
    }
    #courses-single #availableSessionList .form-check.form-check-inline {
        display: inline-flex !important;
        width: calc(50% - 4px) !important;
        margin: 0 4px 10px 0 !important;
    }
    #courses-single #availableSessionList .form-check.form-check-inline:nth-of-type(2n) {
        margin-right: 0 !important;
    }
    #courses-single #availableSessionList .form-check-label,
    #courses-single #availableSessionList .radio-inline {
        width: 100% !important;
        padding: 9px 6px !important;
        font-size: 12px !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
    #courses-single #displayBranchWiseBatchData .card {
        border-radius: 14px !important;
        margin-bottom: 18px !important;
    }
    #courses-single #displayBranchWiseBatchData .card-header {
        padding: 10px 14px !important;
    }
    #courses-single #displayBranchWiseBatchData .card-body {
        padding: 14px 12px !important;
    }
    #courses-single #displayBranchWiseBatchData .card-body table:has(td[rowspan]) td {
        padding: 7px 8px !important;
        font-size: 12px !important;
    }
    #courses-single #displayBranchWiseBatchData .card-body table:has(td[rowspan]) td[rowspan] {
        font-size: 12px !important;
        width: 30% !important;
    }
    #courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])),
    #courses-single #availableSessionList .card-body table:not(:has(td[rowspan])),
    #courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) {
        padding: 12px 12px !important;
    }
    #courses-single .col-lg-4 .card-body table tr:has(.book-now),
    #courses-single .col-lg-4 .card-body table tr:has(.seat-full),
    #courses-single #availableSessionList .card-body table tr:has(.book-now),
    #courses-single #availableSessionList .card-body table tr:has(.seat-full),
    #courses-single #displayBranchWiseBatchData .card-body table tr:has(.book-now),
    #courses-single #displayBranchWiseBatchData .card-body table tr:has(.seat-full) {
        gap: 10px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    #courses-single .book-now,
    #courses-single #displayBranchWiseBatchData .book-now,
    #courses-single .seat-full,
    #courses-single #displayBranchWiseBatchData .seat-full {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 575.98px) {
    #courses-single .courses-single-left {
        padding: 18px 14px !important;
        border-radius: 14px !important;
    }
    #courses-single .courses-single-left > .title h3 {
        font-size: 19px !important;
        line-height: 1.3 !important;
    }
    #courses-single .courses-single-image {
        padding-top: 15px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    #courses-single .courses-single-image img {
        border-radius: 12px !important;
        width: 100% !important;
        height: auto !important;
    }
    #courses-single .courses-tab {
        margin-top: 20px !important;
        border: none !important;
    }
    /* Modern Side-by-Side Pill Segmented Control for Tabs */
    #courses-single .courses-tab #myTab {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        border-bottom: 2px solid rgba(7, 41, 77, 0.08) !important;
        padding-bottom: 10px !important;
        margin-top: 5px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }
    #courses-single .courses-tab #myTab .nav-item {
        flex: 1 1 50% !important;
    }
    #courses-single .courses-tab #myTab .nav-item a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 10px 8px !important;
        font-size: 13.5px !important;
        border-radius: 10px !important;
    }
    /* Overview Tab on Mobile */
    #courses-single .overview-description .single-description {
        padding-top: 15px !important;
    }
    #courses-single .courses-single-left .overview-description table {
        display: table !important;
        width: 100% !important;
        white-space: normal !important;
        border-radius: 10px !important;
        margin: 14px 0 18px !important;
    }
    #courses-single .courses-single-left .overview-description table th {
        padding: 9px 12px !important;
        font-size: 12.5px !important;
    }
    #courses-single .courses-single-left .overview-description table td {
        padding: 8px 12px !important;
        font-size: 12.5px !important;
    }
    #courses-single .overview-description p {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }
    /* Curriculum Tab & Accordion on Mobile */
    #courses-single .curriculum-cont {
        padding: 10px 0 0 0 !important;
    }
    #courses-single #accordionExample .card {
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }
    #courses-single #accordionExample .card-header a,
    .curriculum-cont .accordion .card .card-header a {
        padding: 12px 14px !important;
    }
    #courses-single #accordionExample .card-header a ul {
        gap: 10px !important;
    }
    #courses-single #accordionExample .card-header a ul li:first-child i {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
    #courses-single #accordionExample .card-header a .head {
        font-size: 14.5px !important;
    }
    #courses-single #accordionExample .card-header a::after,
    .curriculum-cont .accordion .card .card-header a::after {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    #courses-single #accordionExample .card-body {
        padding: 14px 12px !important;
    }
    #courses-single #accordionExample .card-body .ul-list {
        margin-left: 18px !important;
        padding-left: 0 !important;
    }
    #courses-single #accordionExample .card-body .ul-list li {
        margin-bottom: 6px !important;
    }
    #courses-single #accordionExample .card-body .ul-list li p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }
    #courses-single .col-lg-4 .courses-tab.bg-white,
    #courses-single .col-lg-4 .courses-tab {
        padding: 18px 14px !important;
        border-radius: 14px !important;
    }
    /* Multi-column syllabus tables scroll horizontally on small screens */
    #courses-single .courses-single-left table:not(.overview-description table):not(#accordionExample table) {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        width: 100% !important;
    }
    /* Curriculum Table on Mobile */
    #courses-single #accordionExample .card-body table {
        display: table !important;
        width: 100% !important;
    }
    #courses-single #accordionExample .card-body table thead th,
    #courses-single #accordionExample .card-body table th {
        font-size: 11.5px !important;
        padding: 9px 10px !important;
    }
    #courses-single #accordionExample .card-body table th:first-child,
    #courses-single #accordionExample .card-body table tbody td:first-child {
        width: 75px !important;
        padding: 9px 8px !important;
        font-size: 12.5px !important;
    }
    #courses-single #accordionExample .card-body table th:last-child,
    #courses-single #accordionExample .card-body table tbody td:last-child {
        padding-left: 14px !important;
        padding-right: 10px !important;
        font-size: 13px !important;
    }
    /* Sidebar tables fit viewport completely without overflow */
    #courses-single .col-lg-4 table {
        display: table !important;
        width: 100% !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    #courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])),
    #courses-single #availableSessionList .card-body table:not(:has(td[rowspan])),
    #courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) {
        display: block !important;
        width: 100% !important;
    }
    #courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) tbody,
    #courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) tbody,
    #courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) tbody {
        display: block !important;
        width: 100% !important;
    }
    #courses-single .col-lg-4 .card-body table:not(:has(td[rowspan])) tr,
    #courses-single #availableSessionList .card-body table:not(:has(td[rowspan])) tr,
    #courses-single #displayBranchWiseBatchData .card-body table:not(:has(td[rowspan])) tr {
        display: flex !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   33. ABOUT, HISTORY, FOUNDER, SUCCESS STORY & REVIEWS PAGES
   ========================================================================== */

/* Shared Hero Image Card */
.about-hero-image-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-hero-image-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 16px 36px rgba(7, 41, 77, 0.1);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    width: 100%;
}

.about-hero-image-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(7, 41, 77, 0.15);
}

.about-hero-image-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.about-hero-image-card:hover img {
    transform: scale(1.02);
}

.journey-full-image-card {
    padding: 10px;
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 16px 36px rgba(7, 41, 77, 0.08);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.journey-full-image-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 48px rgba(7, 41, 77, 0.14);
}

.journey-full-image-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
}

/* Story Narrative Cards (History Page) */
.champs-story-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.06);
    padding: 36px 32px;
    margin-bottom: 24px;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.champs-story-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px rgba(7, 41, 77, 0.1);
    border-color: rgba(255, 198, 0, 0.4);
}

.champs-story-card p {
    font-family: 'Roboto', sans-serif;
    font-size: 15.5px;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 18px;
}

.champs-story-card p:last-child {
    margin-bottom: 0;
}

.champs-story-highlight {
    background: linear-gradient(135deg, rgba(7, 41, 77, 0.04) 0%, rgba(255, 198, 0, 0.06) 100%);
    border-left: 4px solid #ffc600;
    padding: 16px 20px;
    border-radius: 0 12px 12px 0;
    margin: 20px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #07294d;
}

/* History Milestones Grid */
.history-milestone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 25px;
}

.history-milestone-item {
    background: #f8fafc;
    border: 1px solid rgba(7, 41, 77, 0.08);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.history-milestone-item:hover {
    transform: translateY(-3px);
    border-color: #ffc600;
    background: #ffffff;
}

.history-milestone-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #07294d;
    color: #ffc600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.history-milestone-text strong {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #07294d;
}

.history-milestone-text span {
    font-size: 13px;
    color: #64748b;
}

/* Founder Profile & Letter Cards */
.founder-profile-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 14px 34px rgba(7, 41, 77, 0.08);
    padding: 24px;
    text-align: center;
    position: sticky;
    top: 90px;
}

.founder-profile-img-wrap {
    width: 100%;
    max-width: 280px;
    margin: 0 auto 20px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(7, 41, 77, 0.12);
    border: 3px solid #ffffff;
}

.founder-profile-img-wrap img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4/5;
    object-fit: cover;
    object-position: top center;
}

.founder-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #07294d;
    margin-bottom: 4px;
}

.founder-role {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #d97706;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
}

.founder-badges-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
}

.founder-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border: 1px solid rgba(7, 41, 77, 0.08);
    color: #07294d;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
}

.founder-pill-badge i {
    color: #d97706;
}

.founder-letter-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 14px 34px rgba(7, 41, 77, 0.08);
    padding: 42px 38px;
    position: relative;
    overflow: hidden;
}

.founder-letter-quote-mark {
    position: absolute;
    top: 20px;
    right: 28px;
    font-size: 90px;
    color: rgba(7, 41, 77, 0.04);
    line-height: 1;
    pointer-events: none;
    font-family: Georgia, serif;
}

.founder-letter-card p {
    font-family: 'Roboto', sans-serif;
    font-size: 15.5px;
    line-height: 1.85;
    color: #475569;
    margin-bottom: 18px;
}

.founder-closing-quote {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #07294d;
    font-style: italic;
    background: rgba(7, 41, 77, 0.04);
    border-left: 4px solid #ffc600;
    padding: 16px 20px;
    border-radius: 0 12px 12px 0;
    margin: 24px 0 20px;
}

.founder-signature-wrap {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.founder-sign-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 800;
    color: #07294d;
}

.founder-sign-title {
    font-size: 13px;
    color: #64748b;
}

/* Success Story Full Highlights Box */
.success-highlight-box {
    background: linear-gradient(135deg, #07294d 0%, #0d3b6c 100%);
    border-radius: 18px;
    padding: 28px 32px;
    color: #ffffff;
    box-shadow: 0 12px 32px rgba(7, 41, 77, 0.2);
    margin-top: 30px;
    position: relative;
    overflow: hidden;
}

.success-highlight-box::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.2) 0%, transparent 70%);
}

.success-highlight-box p {
    font-size: 16px;
    line-height: 1.8;
    color: #f1f5f9;
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Reviews Cards */
.champs-review-card {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 8px 24px rgba(7, 41, 77, 0.06);
    padding: 28px 24px 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.champs-review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(7, 41, 77, 0.12), 0 0 16px rgba(255, 198, 0, 0.12);
    border-color: rgba(255, 198, 0, 0.5);
}

.review-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.review-avatar-wrap {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #ffc600;
    box-shadow: 0 4px 12px rgba(7, 41, 77, 0.12);
}

.review-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-meta-wrap {
    flex-grow: 1;
}

.review-author-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #07294d;
    margin: 0 0 4px 0;
}

.review-stars {
    display: flex;
    gap: 3px;
    color: #ffc600;
    font-size: 13px;
}

.review-quote-text {
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    line-height: 1.75;
    color: #475569;
    flex-grow: 1;
    margin: 0;
    position: relative;
}

.review-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
    font-size: 12px;
    color: #94a3b8;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.review-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #059669;
}

/* Responsive adjustments for Module 33 */
@media (max-width: 991.98px) {
    .founder-profile-card {
        position: static;
        margin-bottom: 30px;
    }
    .founder-letter-card {
        padding: 30px 24px;
    }
    .champs-story-card {
        padding: 26px 20px;
    }
}

@media (max-width: 575.98px) {
    .champs-story-card {
        padding: 20px 16px;
    }
    .founder-letter-card {
        padding: 24px 18px;
    }
    .success-highlight-box {
        padding: 20px 18px;
    }
    .champs-review-card {
        padding: 20px 16px;
    }
}

/* ==========================================================================
   34. PAST PAPERS PAGE (past-papers.php)
   ========================================================================== */

/* How to use & Disclaimer Callout Card */
.past-papers-guide-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 10px 30px rgba(7, 41, 77, 0.06);
    padding: 32px 34px;
    margin-bottom: 35px;
    position: relative;
    overflow: hidden;
}

.past-papers-guide-card h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 800;
    color: #07294d;
    margin-bottom: 12px;
}

.past-papers-guide-card p {
    font-family: 'Roboto', sans-serif;
    font-size: 15.5px;
    line-height: 1.75;
    color: #475569;
    margin-bottom: 18px;
}

.past-papers-disclaimer {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(7, 41, 77, 0.04);
    border-left: 4px solid #ffc600;
    padding: 14px 18px;
    border-radius: 0 12px 12px 0;
    font-size: 13.5px;
    color: #07294d;
    font-weight: 600;
}

.past-papers-disclaimer i {
    color: #d97706;
    font-size: 18px;
    flex-shrink: 0;
}

/* Category Block Section & Badge */
.past-paper-block-wrap {
    margin-bottom: 45px;
}

.past-paper-block-header {
    text-align: center;
    margin-bottom: 25px;
}

.past-paper-block-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #07294d;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 30px;
    box-shadow: 0 6px 18px rgba(7, 41, 77, 0.18);
    letter-spacing: 0.5px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.past-paper-block-badge i {
    color: #ffc600;
}

.past-paper-block-badge:hover {
    transform: translateY(-2px);
    background: #0a3563;
    color: #ffffff;
}

.past-paper-block-notice {
    font-size: 13px;
    color: #64748b;
    margin-top: 10px;
    line-height: 1.5;
}

/* Subject Grid & Modern Subject Card */
.past-papers-grid {
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 8px 24px rgba(7, 41, 77, 0.04);
    padding: 24px 20px;
}

.champs-subject-card {
    background: #f8fafc;
    border: 1px solid rgba(7, 41, 77, 0.08);
    border-radius: 14px;
    padding: 20px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    height: 100%;
}

.champs-subject-card:hover {
    background: #ffffff;
    border-color: #ffc600;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(7, 41, 77, 0.1), 0 0 16px rgba(255, 198, 0, 0.12);
}

.champs-subject-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(7, 41, 77, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease, background 0.3s ease;
}

.champs-subject-card:hover .champs-subject-icon {
    background: #07294d;
    transform: scale(1.08);
}

.champs-subject-icon img {
    max-width: 26px;
    max-height: 26px;
}

.champs-subject-info {
    flex-grow: 1;
}

.champs-subject-info h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 15.5px;
    font-weight: 700;
    color: #07294d;
    margin: 0 0 3px 0;
    transition: color 0.3s ease;
}

.champs-subject-hint {
    font-size: 12.5px;
    color: #64748b;
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

.champs-subject-card:hover .champs-subject-info h4 {
    color: #d97706;
}

.champs-subject-arrow {
    color: #94a3b8;
    font-size: 14px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.champs-subject-card:hover .champs-subject-arrow {
    transform: translateX(4px);
    color: #ffc600;
}

/* Exam Board Tab Navigation */
.past-paper-subject-header {
    text-align: center;
    margin-bottom: 30px;
}

.past-paper-subject-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
    font-weight: 800;
    color: #07294d;
}

.past-paper-tabs-wrap {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 12px 32px rgba(7, 41, 77, 0.06);
    padding: 30px 24px;
}

.past-paper-tabs-wrap .nav-tabs {
    border-bottom: 2px solid #e2e8f0;
    gap: 8px;
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.past-paper-tabs-wrap .nav-tabs .nav-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: #07294d;
    padding: 11px 24px;
    border-radius: 12px 12px 0 0;
    border: 1px solid transparent;
    transition: all 0.28s ease;
    background: #f1f5f9;
}

.past-paper-tabs-wrap .nav-tabs .nav-link:hover {
    background: rgba(7, 41, 77, 0.08);
    border-color: transparent;
}

.past-paper-tabs-wrap .nav-tabs .nav-link.active,
.past-paper-tabs-wrap .nav-tabs .nav-item.show .nav-link {
    background: #07294d !important;
    color: #ffffff !important;
    border-color: #07294d !important;
    border-bottom-color: #07294d !important;
    box-shadow: 0 4px 14px rgba(7, 41, 77, 0.2);
}

/* Modern Past Papers Table */
.past-paper-table-wrap {
    overflow-x: auto;
}

.past-paper-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.past-paper-table thead th {
    background: #07294d;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 14px 18px;
    border: none;
    vertical-align: middle;
}

.past-paper-table tbody td {
    padding: 13px 18px;
    vertical-align: middle;
    font-family: 'Roboto', sans-serif;
    font-size: 14.5px;
    color: #334155;
    border-top: 1px solid #f1f5f9;
}

.past-paper-table tbody tr:hover td {
    background-color: #f8fafc;
}

.past-paper-tier-header {
    background: #f1f5f9 !important;
}

.past-paper-tier-header td {
    background: #f1f5f9 !important;
    padding: 12px 18px !important;
    border-top: 2px solid #e2e8f0 !important;
}

.past-paper-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #07294d;
}

.past-paper-tier-badge i {
    color: #d97706;
}

.past-paper-tier-badge.higher i {
    color: #b45309;
}

/* Download Buttons */
.btn-paper-download {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #07294d;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 15px;
    border-radius: 20px;
    text-decoration: none !important;
    border: 1px solid #07294d;
    box-shadow: 0 3px 8px rgba(7, 41, 77, 0.15);
    transition: all 0.25s ease;
}

.btn-paper-download i {
    color: #ffc600;
    transition: transform 0.25s ease;
}

.btn-paper-download:hover {
    background: #ffc600;
    border-color: #ffc600;
    color: #07294d !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 198, 0, 0.35);
}

.btn-paper-download:hover i {
    color: #07294d;
    transform: translateY(2px);
}

@media (max-width: 767.98px) {
    .past-papers-guide-card {
        padding: 22px 18px;
    }
    .past-paper-tabs-wrap {
        padding: 20px 14px;
    }
    .past-paper-tabs-wrap .nav-tabs {
        flex-direction: column;
    }
    .past-paper-tabs-wrap .nav-tabs .nav-link {
        border-radius: 10px;
        text-align: center;
    }
}

/* ==========================================================================
   Module 35: Individual Teacher Profile Pages (#teachers-single)
   Global modern styles for all teachers/*.html profile pages
   Applies directly to existing markup without requiring individual HTML edits
   ========================================================================== */

#teachers-single {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    padding-top: 60px !important;
    padding-bottom: 100px !important;
    position: relative;
    overflow: hidden;
}

#teachers-single::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(180deg, rgba(7, 41, 77, 0.04) 0%, transparent 100%);
    pointer-events: none;
}

#teachers-single .row {
    display: flex !important;
    align-items: flex-start !important;
}

#teachers-single .col-lg-4,
#teachers-single .col-lg-8 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-self: flex-start !important;
}

/* Left Sidebar: Profile Card */
#teachers-single .teachers-left {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 36px 24px 30px !important;
    box-shadow: 0 12px 35px rgba(7, 41, 77, 0.08), 0 2px 8px rgba(7, 41, 77, 0.04) !important;
    border: 1px solid rgba(7, 41, 77, 0.08) !important;
    text-align: center;
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: flex-start !important;
    box-sizing: border-box !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#teachers-single .teachers-left:hover {
    box-shadow: 0 18px 45px rgba(7, 41, 77, 0.12), 0 0 20px rgba(255, 198, 0, 0.12) !important;
}

/* Accent header bar */
#teachers-single .teachers-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #ffc600, #07294d);
    border-radius: 20px 20px 0 0;
}

/* Teacher Portrait Frame (Modern Rounded Card Frame instead of Circle) */
#teachers-single .teachers-left .hero {
    position: relative;
    width: 100%;
    max-width: 210px;
    aspect-ratio: 4 / 5;
    margin: 0 auto 22px !important;
    border-radius: 18px;
    padding: 5px;
    background: linear-gradient(135deg, rgba(255, 198, 0, 0.35) 0%, rgba(7, 41, 77, 0.12) 100%);
    box-shadow: 0 10px 26px rgba(7, 41, 77, 0.1), 0 2px 8px rgba(7, 41, 77, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#teachers-single .teachers-left .hero img,
#teachers-single .teachers-left .hero #staffImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 14px;
    background-color: #f1f5f9;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#teachers-single .teachers-left:hover .hero img,
#teachers-single .teachers-left:hover .hero #staffImage {
    transform: scale(1.05);
}

/* Teacher Name & Title */
#teachers-single .teachers-left .name {
    margin-top: 12px;
}

#teachers-single .teachers-left .name h6 {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #07294d !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.2px;
}

#teachers-single .teachers-left .name span {
    display: inline-block;
    background: rgba(7, 41, 77, 0.07);
    color: #07294d;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    margin-top: 6px;
}

/* Right Content Area: Profile Tabs & Bio */
#teachers-single .teachers-right {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 36px 40px 44px !important;
    box-shadow: 0 12px 35px rgba(7, 41, 77, 0.08), 0 2px 8px rgba(7, 41, 77, 0.04) !important;
    border: 1px solid rgba(7, 41, 77, 0.08) !important;
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: flex-start !important;
    box-sizing: border-box !important;
}

/* Accent gradient bar on bio card */
#teachers-single .teachers-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #07294d, #ffc600);
    border-radius: 20px 20px 0 0;
}

/* Modern Tab Header */
#teachers-single .teachers-right .nav.nav-justified {
    border-bottom: 2px solid #edf2f7 !important;
    padding-bottom: 0 !important;
    margin-bottom: 24px !important;
    display: flex;
    justify-content: flex-start !important;
    gap: 12px;
}

#teachers-single .teachers-right .nav-item {
    flex: 0 0 auto !important;
    width: auto !important;
}

#teachers-single .teachers-right .nav-item a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading, 'Montserrat', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #4a5568 !important;
    padding: 12px 24px !important;
    border-radius: 10px 10px 0 0 !important;
    position: relative;
    background: transparent !important;
    border: none !important;
    transition: all 0.25s ease !important;
    text-transform: none;
}

#teachers-single .teachers-right .nav-item a.active {
    color: #07294d !important;
    background: rgba(7, 41, 77, 0.04) !important;
}

#teachers-single .teachers-right .nav-item a.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffc600, #ffb300);
    border-radius: 3px 3px 0 0;
}

/* Tab Content & Bio Typography */
#teachers-single .teachers-right .tab-content {
    padding: 0 !important;
}

#teachers-single .teachers-right .single-dashboard {
    padding-top: 10px !important;
}

#teachers-single .teachers-right .single-dashboard p {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: #334155 !important;
    margin-bottom: 22px !important;
}

#teachers-single .teachers-right .single-dashboard p:first-of-type::first-letter {
    font-size: 34px;
    font-weight: 700;
    color: #07294d;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    float: left;
    line-height: 1;
    padding-right: 10px;
    padding-top: 4px;
}

#teachers-single .teachers-right .single-dashboard span#teacher_description {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 16px !important;
    line-height: 1.85 !important;
    color: #334155 !important;
    display: block;
}

/* Video Embeds in Teacher Profile (e.g. Manish Salian) */
#teachers-single .teachers-right video {
    width: 100% !important;
    height: auto !important;
    max-height: 280px;
    border-radius: 14px;
    border: 1px solid rgba(7, 41, 77, 0.1);
    box-shadow: 0 8px 22px rgba(7, 41, 77, 0.08);
    background: #000;
    margin-top: 16px;
    margin-bottom: 16px;
}

/* Responsive adjustments for Teacher Profile */
@media (max-width: 991.98px) {
    #teachers-single .teachers-left {
        position: static !important;
        margin-bottom: 35px;
    }
    #teachers-single .teachers-right {
        padding: 24px 20px 30px !important;
    }
}

/* ==========================================================================
   36. REDESIGNED CONTACT PAGE (#contact-page & #google-map)
   ========================================================================== */

#contact-page {
    background-color: #edf0f2;
    position: relative;
}

/* Honeypot anti-spam field */
.contact-honeypot {
    display: none !important;
}

/* Required Asterisk */
.required {
    color: #dc2626 !important;
    font-weight: 700;
}

/* Left Column: Form Card */
#contact-page .contact-from {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(7, 41, 77, 0.08);
    box-shadow: 0 12px 36px rgba(7, 41, 77, 0.06);
    padding: 44px 44px 40px;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#contact-page .contact-from:hover {
    box-shadow: 0 16px 44px rgba(7, 41, 77, 0.09);
}

/* Section Header in Form */
#contact-page .partner-header-wrap {
    margin-bottom: 28px;
}

#contact-page .partner-section-title {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 32px;
    font-weight: 700;
    color: #07294d;
    line-height: 1.25;
    margin-top: 10px;
    margin-bottom: 0;
}

/* Form Groups & Labels */
#contact-page .single-form {
    position: relative;
    margin-top: 4px;
}

#contact-page .single-form label:not(.form-check-label) {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 13.5px;
    font-weight: 700;
    color: #07294d;
    margin-bottom: 7px;
    display: inline-block;
    letter-spacing: 0.2px;
}

/* Input Fields, Selects & Textareas */
#contact-page .form-control {
    height: 48px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 14.5px;
    color: #1e293b;
    transition: all 0.25s ease;
}

#contact-page select.form-control {
    cursor: pointer;
    background-color: #f8fafc;
    color: #1e293b;
}

#contact-page select.form-control option {
    background: #ffffff;
    color: #1e293b;
    padding: 8px;
}

#contact-page textarea.form-control {
    height: 130px;
    resize: vertical;
    border-radius: 10px;
    padding: 12px 16px;
}

#contact-page .form-control:focus {
    background: #ffffff;
    border-color: #07294d;
    box-shadow: 0 0 0 4px rgba(7, 41, 77, 0.08);
    color: #0f172a;
    outline: none;
}

#contact-page .form-control::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* Help Block & Validation Errors */
#contact-page .help-block.with-errors {
    font-size: 12.5px;
    margin-top: 5px;
    color: #dc2626;
    font-weight: 500;
}

#contact-page .phone-error {
    font-size: 12.5px;
    margin-top: 5px;
    font-weight: 500;
}

/* Branch Address Box */
#contact-page #branch_address:not(:empty) {
    background: #f8fafc;
    border: 1px solid rgba(7, 41, 77, 0.1);
    border-left: 4px solid #ffc600;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #07294d !important;
    font-style: normal;
    margin-top: 28px;
    box-shadow: 0 4px 12px rgba(7, 41, 77, 0.04);
}

/* Subject Checkboxes (Dynamically Injected via AJAX) */
#contact-page #subjectDiv {
    margin-top: 10px;
    margin-bottom: 6px;
}

#contact-page #subjectDiv .single-form {
    display: block !important;
}

#contact-page #subjectDiv .single-form > label:first-of-type,
#contact-page #subjectDiv label[for="subject"] {
    display: block !important;
    font-family: var(--font-heading, 'Montserrat', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #07294d !important;
    margin-bottom: 12px !important;
    letter-spacing: 0.2px !important;
}

/* Override .d-inline and .ml-2 on each subject checkbox card */
#contact-page #subjectDiv .form-check,
#contact-page #subjectDiv .form-check.d-inline,
#contact-page #subjectDiv .form-group.form-check {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    background: #f8fafc !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 8px 16px 8px 12px !important;
    margin: 4px 10px 10px 0 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    vertical-align: middle !important;
    min-height: 42px !important;
    box-sizing: border-box !important;
}

#contact-page #subjectDiv .form-check:hover {
    background: #ffffff !important;
    border-color: #07294d !important;
    box-shadow: 0 4px 12px rgba(7, 41, 77, 0.08) !important;
    transform: translateY(-1px);
}

/* The actual checkbox input */
#contact-page #subjectDiv .form-check-input,
#contact-page #subjectDiv input[type="checkbox"].form-check-input,
#contact-page #subjectDiv input[type="checkbox"].checkbox {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 10px 0 0 !important;
    cursor: pointer !important;
    accent-color: #07294d !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* The label next to checkbox */
#contact-page #subjectDiv label.form-check-label {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-heading, 'Montserrat', sans-serif) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    user-select: none !important;
    vertical-align: middle !important;
}

/* Checked state highlight for modern browsers */
#contact-page #subjectDiv .form-check:has(input[type="checkbox"]:checked) {
    background: #eef5fc !important;
    border-color: #07294d !important;
    box-shadow: 0 2px 8px rgba(7, 41, 77, 0.1) !important;
}

#contact-page #subjectDiv .form-check:has(input[type="checkbox"]:checked) label.form-check-label {
    color: #07294d !important;
    font-weight: 700 !important;
}

/* Captcha Block (Inline Row) */
#contact-page .captcha-inline-wrap {
    margin-top: 4px;
}

#contact-page .captcha-inline-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

#contact-page #captchaQuestion {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: #07294d;
    background: #f1f5f9;
    border-left: 3px solid #ffc600;
    padding: 0 18px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin-bottom: 0 !important;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

#contact-page #captcha_answer {
    width: 150px;
    max-width: 150px;
    height: 48px;
    font-size: 15.5px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0 !important;
}

#contact-page #refreshCaptcha {
    height: 48px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    color: #07294d;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 600;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    cursor: pointer;
    margin-bottom: 0 !important;
}

#contact-page #refreshCaptcha:hover {
    background: #07294d;
    border-color: #07294d;
    color: #ffc600;
}

/* Submit Button */
#contact-page #contact_submit {
    background: linear-gradient(135deg, #ffc600 0%, #f59e0b 100%);
    color: #07294d;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
    border: none;
    border-radius: 10px;
    padding: 13px 38px;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.25);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-transform: uppercase;
}

#contact-page #contact_submit:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(245, 158, 11, 0.35);
}

/* AJAX Response Message */
#contact-page .form-message {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 10px;
    margin-bottom: 0;
    transition: all 0.3s ease;
}

#contact-page .form-message.success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    padding: 14px 18px;
}

#contact-page .form-message.error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
    padding: 14px 18px;
}

/* Right Column: Contact Address Sidebar */
#contact-page .contact-address {
    background: linear-gradient(165deg, #07294d 0%, #0a3560 50%, #051d38 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 198, 0, 0.25);
    box-shadow: 0 20px 48px rgba(7, 41, 77, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: 40px 22px 36px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#contact-page .contact-address::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffc600 0%, #f59e0b 50%, #ffe07a 100%);
}

#contact-page .contact-address::after {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 198, 0, 0.16) 0%, rgba(255, 198, 0, 0) 70%);
    pointer-events: none;
    border-radius: 50%;
}

#contact-page .contact-address:hover {
    box-shadow: 0 24px 54px rgba(7, 41, 77, 0.28);
    transform: translateY(-2px);
}

/* Sub-badge pill */
#contact-page .contact-sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 198, 0, 0.15);
    border: 1px solid rgba(255, 198, 0, 0.35);
    color: #ffc600;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
}

#contact-page .contact-heading h5 {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: -0.4px;
    line-height: 1.2;
}

#contact-page .contact-heading p {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 26px;
}

#contact-page .contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#contact-page .contact-info-list li {
    margin: 0;
    padding: 0;
}

/* Individual Interactive Glassmorphic Contact Tiles */
#contact-page .single-address {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 14px 16px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    box-sizing: border-box;
}

#contact-page .single-address:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 198, 0, 0.5);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    transform: translateY(-3px);
}

/* Tile Icon Badges */
#contact-page .contact-address .single-address .icon,
#contact-page .single-address .icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #ffc600 0%, #f59e0b 100%) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Explicitly reset the inner <i> tag to completely neutralize style.css legacy 50px border circle */
#contact-page .contact-address .single-address .icon i,
#contact-page .contact-address ul li .single-address .icon i,
#contact-page .single-address .icon i {
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #07294d !important;
    font-size: 18px !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    box-shadow: none !important;
}

#contact-page .single-address:hover .icon {
    transform: scale(1.08) rotate(4deg) !important;
    box-shadow: 0 8px 22px rgba(255, 198, 0, 0.5) !important;
}

/* Content wrapper reset to eliminate style.css 20px padding collision */
#contact-page .contact-address .single-address .cont,
#contact-page .contact-address ul li .single-address .cont,
#contact-page .single-address .cont {
    flex: 1 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    overflow: hidden;
}

#contact-page .single-address .info-label {
    display: block;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #ffc600;
    margin-bottom: 3px;
}

#contact-page .single-address .cont p {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 13.5px;
    line-height: 1.5;
    color: #ffffff;
    margin: 0;
    font-weight: 400;
}

#contact-page .single-address .cont a {
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
    white-space: nowrap;
    letter-spacing: -0.15px;
}

#contact-page .single-address.address-phone .cont a {
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

#contact-page .single-address .cont a:hover {
    color: #ffc600;
    text-decoration: underline;
}

/* Map Quick Link */
#contact-page .single-address .map-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading, 'Montserrat', sans-serif);
    font-size: 11.5px;
    font-weight: 700;
    color: #ffe07a;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

#contact-page .single-address .map-quick-link:hover {
    color: #ffffff;
    transform: translateX(3px);
    text-decoration: none;
}

/* Google Map Embed Section */
#google-map {
    background: #edf0f2;
}

#google-map .map.map-responsive {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(7, 41, 77, 0.08);
    border: 1px solid rgba(7, 41, 77, 0.08);
    background: #e2e8f0;
    position: relative;
    padding-bottom: 45%;
    height: 0;
}

#google-map .map.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive Rules for Contact Page */
@media (max-width: 991.98px) {
    #contact-page .contact-from {
        padding: 32px 24px;
        margin-bottom: 30px;
    }
    #contact-page .contact-address {
        padding: 32px 24px;
    }
    #google-map .map.map-responsive {
        padding-bottom: 55%;
    }
}

@media (max-width: 767.98px) {
    #contact-page .partner-section-title {
        font-size: 26px;
    }
    #contact-page #branch_address:not(:empty) {
        margin-top: 10px;
    }
    #google-map .map.map-responsive {
        padding-bottom: 68%;
    }
}

@media (max-width: 575.98px) {
    #contact-page .contact-from {
        padding: 24px 16px;
    }
    #contact-page .contact-address {
        padding: 24px 18px;
    }
    #contact-page .single-address {
        padding: 14px 14px;
        gap: 12px;
    }
    #contact-page .single-address .icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 16px;
    }
    #contact-page .single-address .cont p,
    #contact-page .single-address .cont a {
        font-size: 13.5px;
    }
    #contact-page .captcha-inline-row {
        gap: 10px;
    }
    #contact-page #captchaQuestion {
        width: 100%;
    }
    #contact-page #captcha_answer {
        flex: 1;
        max-width: none;
        width: auto;
    }
}