* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    html {
        scroll-padding-top: 100px;
    }
    
    #school-preloader {
        position: fixed;
        inset: 0;
        background: linear-gradient(135deg, #eef3f9, #dde7f5);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 99999;
        text-align: center;
        padding: 20px;
        animation: preloaderFadeIn 1s ease forwards;
    }
    /* ENTRY */
    
    @keyframes preloaderFadeIn {
        from {
            opacity: 0;
            transform: scale(1.05);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
    /* EXIT */
    
    #school-preloader.hide {
        animation: preloaderExit 1s ease forwards;
    }
    
    @keyframes preloaderExit {
        0% {
            opacity: 1;
            transform: translateY(0);
        }
        60% {
            opacity: 1;
            transform: translateY(-40px);
        }
        100% {
            opacity: 0;
            transform: translateY(-100%);
            visibility: hidden;
        }
    }
    /* Book */
    
    .book {
        position: relative;
        width: 150px;
        height: 100px;
        perspective: 700px;
        margin-bottom: 35px;
    }
    /* Pages */
    
    .page {
        position: absolute;
        width: 75px;
        height: 100px;
        background: #fff;
        border: 2px solid #1e4fa3;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        top: 0;
        transition: transform 0.8s ease;
    }
    /* Opening animation */
    
    .page.left {
        left: 0;
        transform-origin: right;
        animation: openLeft 1.8s infinite ease-in-out;
    }
    
    .page.right {
        right: 0;
        transform-origin: left;
        animation: openRight 1.8s infinite ease-in-out;
    }
    
    #school-preloader.hide .page.left {
        transform: rotateY(0deg) !important;
    }
    
    #school-preloader.hide .page.right {
        transform: rotateY(0deg) !important;
    }
    
    @keyframes openLeft {
        0% {
            transform: rotateY(0deg);
        }
        50% {
            transform: rotateY(-50deg);
        }
        100% {
            transform: rotateY(0deg);
        }
    }
    
    @keyframes openRight {
        0% {
            transform: rotateY(0deg);
        }
        50% {
            transform: rotateY(50deg);
        }
        100% {
            transform: rotateY(0deg);
        }
    }
    /* Logo */
    
    .logo-wrap {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8);
    }
    
    .logo-wrap img {
        width: 300px;
    }
    
    @keyframes logoPop {
        0%,
        100% {
            transform: translate(-50%, -50%) scale(0.8);
            opacity: 0.8;
        }
        50% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
    }
    /* Text */
    
    .school-title {
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 26px;
        color: #1e4fa3;
        margin-bottom: 8px;
        animation: textFade 1.5s ease;
        margin-top: 30px;
    }
    
    .school-motto {
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        color: #444;
    }
    
    @keyframes textFade {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* Back to top  */
    
    .footer-back-to-top {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        /* background: #0d6efd; */
        color: #fff;
        border-radius: 30px;
        text-decoration: none;
        font-size: 14px;
        transition: 0.3s ease;
        right: 50px;
        position: absolute;
        /* top: 12px; */
        bottom: 10px;
    }
    
    .footer-back-to-top .arrow {
        font-size: 16px;
    }
    /* Hide only on mobile initially */
    /* ===============================*/
    
    .header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 15px 0px;
        background: transparent;
        transition: all 0.4s ease;
        z-index: 999;
    }
    
    .header .navbar-brand {
        display: flex;
        align-items: end;
        gap: 10px;
        position: relative;
        left: -45px;
        bottom: -12px;
    }
    
    .header.sticky .navbar-brand {
        display: flex;
        align-items: end;
        gap: 10px;
        position: relative;
        left: -45px;
        bottom: -5px;
    }
    
    .header .navbar-brand h5 {
        color: #fff;
        font-size: 19px;
        font-weight: 800;
        padding-bottom: 8px;
    }
    
    .header .navbar-brand h5 span {
        letter-spacing: 1px;
    }
    
    .header .navbar-brand img {
        width: 116px;
        transition: width 0.4s ease, transform 0.4s ease;
    }
    
    .header.sticky {
        background: #dea12b;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        padding: 5px 0 10px;
        animation: slideDown 0.45s ease forwards;
    }
    
    .header.sticky .navbar-brand h5 {
        color: #000000;
    }
    /* Offcanvas always full screen */
    
    .offcanvas {
        height: 100vh !important;
        top: 0 !important;
        transition: transform 0.3s ease;
    }
    /* When header is NOT sticky → push offcanvas down */
    
    body:not(.header-sticky) .offcanvas.show {
        transform: translateY(0px);
    }
    /* When header is sticky → no shift */
    
    body.header-sticky .offcanvas.show {
        transform: translateY(0);
    }
    
    .header.sticky .nav-link {
        color: #000000 !important;
    }
    /* Active color */
    
    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link.show {
        color: #dea12b!important;
    }
    
    .header.sticky .navbar-nav .nav-link.active,
    .header.sticky .navbar-nav .nav-link.show {
        color: #ffffff !important;
    }
    /* Icon BEFORE text when active */
    
    .navbar-nav .nav-link.active::before,
    .navbar-nav .nav-link.show::before {
        content: "\f5da";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 14px;
        margin-right: 6px;
        color: #dea12b;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        top: 30px;
    }
    
    .header.sticky .navbar-nav .nav-link.active::before,
    .header.sticky .navbar-nav .nav-link.show::before {
        color: #ffffff;
    }
    /* Hover underline animation */
    
    .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0;
        height: 2px;
        background: var(--bs-navbar-active-color);
        transition: 0.3s ease;
        transform: translateX(-50%);
    }
    
    .navbar-nav .nav-link:hover::after {
        width: 70%;
    }
    
    .header.sticky .navbar-brand img {
        width: 110px;
        /* adjust as needed */
        transform: scale(0.95) translateY(-2px);
    }
    
    @keyframes slideDown {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    .nav-top {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 15px;
        margin-bottom: 10px;
    }
    
    .header.sticky .helpdesk-link {
        color: #000000;
    }
    /* Helpdesk anchor style */
    /* Admission Button Style */
    
    .header .helpdesk-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 28px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        color: #000000;
        background: linear-gradient(135deg, #e2a42c, #f4c24d);
        border-radius: 50px;
        position: relative;
        overflow: hidden;
        transition: all 0.4s ease;
        box-shadow: 0 8px 20px rgba(226, 164, 44, 0.35);
    }
    /* Icon animation */
    
    .header .helpdesk-link i {
        font-size: 18px;
        transition: transform 0.4s ease;
    }
    /* Shine effect */
    
    .header .helpdesk-link::before {
        content: "";
        position: absolute;
        top: 0;
        left: -75%;
        width: 50%;
        height: 100%;
        background: rgba(255, 255, 255, 0.45);
        transform: skewX(-25deg);
        transition: left 0.6s ease;
    }
    /* Hover effects */
    
    .header .helpdesk-link:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(226, 164, 44, 0.55);
        color: #fff;
    }
    
    .header .helpdesk-link:hover::before {
        left: 130%;
    }
    
    .header .helpdesk-link:hover i {
        transform: rotate(-15deg) scale(1.2);
    }
    /* Active click effect */
    
    .header .helpdesk-link:active {
        transform: scale(0.97);
    }
    /* Responsive tweak */
    /* Facebook icon anchor style */
    
    .social-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: #1877F2;
        color: #fff;
        text-decoration: none;
        font-size: 14px;
        transition: 0.3s ease;
    }
    
    .social-icon:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }
    /* ========== DESKTOP ========== */
    /* Reset Bootstrap default triangle */
    
    .bsb-navbar .dropdown-toggle::after {
        content: "";
        border: none;
        width: 7px;
        height: 7px;
        margin-left: 8px;
        vertical-align: middle;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
        position: relative;
        top: -3px;
    }
    /* Rotate when open */
    
    .bsb-navbar .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(-135deg);
    }
    /* Submenu positioning */
    
    .dropdown-submenu>.dropdown-item.dropdown-toggle::after {
        transition: transform 0.3s ease;
    }
    /* Rotate arrow when hovering the dropdown-item */
    
    @media (hover: hover) {
        .dropdown-submenu>.dropdown-item.dropdown-toggle:hover::after {
            transform: rotate(-45deg);
        }
    }
    
    .dropdown-submenu {
        position: relative;
    }
    
    .dropdown-submenu>.dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: 0.1rem;
    }
    
    .dropdown-item {
        padding-right: 10px !important;
    }
    /* Desktop only */
    /* Parent banner section */
    
    .ssc-banner {
        position: relative;
        background: url("Assets/Images/Banner/SSCS.webp") center center / cover no-repeat;
        min-height: 85vh;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    /* Dark gradient overlay */
    
    .ssc-banner .ssc-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.35));
        z-index: 1;
    }
    /* Content container */
    
    .ssc-banner .ssc-container {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 0 5%;
    }
    /* Text content */
    
    .ssc-banner .ssc-content {
        max-width: 620px;
        color: #ffffff;
        animation: fadeUp 1s ease forwards;
    }
    /* Heading */
    
    .ssc-banner .ssc-content h1 {
        font-size: 3rem;
        font-weight: 800;
        letter-spacing: 1px;
        line-height: 1.2;
        margin-bottom: 20px;
        text-transform: uppercase;
    }
    /* Paragraph */
    
    .ssc-banner .ssc-content p {
        font-size: 1.1rem;
        line-height: 1.7;
        margin-bottom: 30px;
        color: #f1f1f1;
    }
    /* Read More button */
    
    .ssc-banner .ssc-content .ssc-btn {
        display: inline-block;
        padding: 12px 32px;
        background: #ffc107;
        color: #000;
        font-weight: 600;
        border-radius: 30px;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    
    .ssc-banner .ssc-content .ssc-btn:hover {
        background: #ffb300;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    }
    /* Animation */
    
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* Responsive styles */
    /* ===============================
   HERO SECTION
================================ */
    
    .ssc-hero {
        position: relative;
        min-height: 100vh;
        background: url(../Images/Banner/SSCS-school-side-view.webp) center / cover no-repeat;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        /* margin-top: -180px; */
    }
    /* Bottom gradient overlay */
    
    .ssc-hero .ssc-hero__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.15) 100%, rgba(0, 0, 0, 0) 98%);
        z-index: 1;
    }
    /* Container */
    
    .ssc-hero .ssc-hero__container {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 0 9% 60px;
    }
    /* Content */
    
    .ssc-hero .ssc-hero__content {
        color: #fff;
        animation: heroReveal 1.2s ease forwards;
    }
    /* Tag */
    
    .ssc-hero .ssc-hero__tag {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 12px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #fff;
    }
    
    .ssc-hero .ssc-hero__title {
        font-size: 3rem;
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 20px;
        text-transform: uppercase;
    }
    
    #ssc-hero-rotating-text {
        display: inline-block;
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    #ssc-hero-rotating-text.fade-out {
        opacity: 0;
        transform: translateY(10px);
    }
    
    #ssc-hero-rotating-text.fade-in {
        opacity: 1;
        transform: translateY(0);
    }
    
    .ssc-hero .ssc-hero__title span {
        color: #e2a42c;
    }
    /* Text */
    
    .ssc-hero .ssc-hero__text {
        font-size: 1.5rem;
        line-height: 1.8;
        margin-bottom: 20px;
        color: #eaeaea;
    }
    /* Button */
    
    .ssc-hero__btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 14px;
        padding: 10px 30px;
        border-radius: 10px;
        background: #025b2f;
        color: #fff;
        font-weight: 600;
        text-decoration: none;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        width: fit-content;
    }
    
    .ssc-hero__btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #000;
        transform: translateX(-100%);
        transition: transform 0.4s ease;
        z-index: 0;
    }
    
    .ssc-hero__btn span,
    .ssc-hero__btn .arrow {
        position: relative;
        z-index: 1;
        font-size: 16px;
    }
    
    .ssc-hero__btn:hover::before {
        transform: translateX(0);
    }
    
    .ssc-hero__btn:hover {
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    }
    /* Arrow */
    
    .ssc-hero__btn .arrow {
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        transition: transform 0.3s ease;
    }
    
    .ssc-hero__btn:hover .arrow {
        transform: rotate(-45deg) translateX(4px);
    }
    /* Entrance animation */
    
    @keyframes heroReveal {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* ===============================
   RESPONSIVE
================================ */
    
    .school-about-section {
        padding: 50px 0px;
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .school-about-section .about-wrapper {
        background: white;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
        position: relative;
    }
    
    .school-about-section .about-wrapper .content-container {
        display: flex;
        gap: 0;
    }
    
    .school-about-section .about-wrapper .content-container .image-block {
        flex: 0 0 570px;
        position: relative;
        background: #f5f5f5;
    }
    
    .school-about-section .about-wrapper .content-container .image-block .main-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-height: 480px;
    }
    
    .school-about-section .about-wrapper .content-container .image-block .year-stamp {
        position: absolute;
        top: 24px;
        left: 24px;
        background: #025b2f;
        color: white;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.5px;
        box-shadow: 0 8px 16px rgba(26, 115, 232, 0.3);
    }
    
    .school-about-section .about-wrapper .content-container .text-block {
        flex: 1;
        padding: 48px 52px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .school-about-section .about-wrapper .content-container .text-block h2 {
        font-size: 30px;
    }
    
    .school-about-section .about-wrapper .content-container .text-block h2 span {
        color: #025b2f;
        font-weight: bold;
    }
    
    .school-about-section .about-wrapper .content-container .text-block .label-tag {
        display: inline-block;
        background: #e3f2fd;
        color: #025b2f;
        padding: 6px 14px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        width: fit-content;
        margin-bottom: 10px;
    }
    
    .school-about-section .about-wrapper .content-container .text-block .heading-primary {
        font-size: 36px;
        font-weight: 800;
        color: #1a1a1a;
        line-height: 1.2;
        margin-bottom: 16px;
    }
    
    .school-about-section .about-wrapper .content-container .text-block .heading-primary .school-brand {
        color: #025b2f;
    }
    
    .school-about-section .about-wrapper .content-container .text-block .description-content {
        color: #5f6368;
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 12px;
    }
    
    .school-about-section .about-wrapper .content-container .text-block .action-button {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #025b2f;
        color: white;
        padding: 14px 28px;
        border-radius: 10px;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        width: fit-content;
        margin-top: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(26, 115, 232, 0.2);
    }
    
    .school-about-section .about-wrapper .content-container .text-block .action-button:hover {
        background: #1557b0;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(26, 115, 232, 0.3);
    }
    
    .school-about-section .about-wrapper .content-container .text-block .action-button .arrow-icon {
        font-size: 16px;
        transition: transform 0.3s ease;
    }
    
    .school-about-section .about-wrapper .content-container .text-block .action-button:hover .arrow-icon {
        transform: translateX(4px);
    }
    
    .academics-container {
        max-width: 1400px;
        margin: 0 auto;
        /* padding: 0 70px 0px; */
    }
    
    .main-header {
        margin-bottom: 50px;
        animation: fadeIn 1s ease;
    }
    
    .main-header h1 {
        font-size: 3.5rem;
        font-weight: 800;
        color: #000000;
        margin-bottom: 12px;
    }
    
    .main-header .tagline {
        color: #000000;
        font-size: 16px;
    }
    
    .academics-container .programs-layout {
        display: grid;
        gap: 20px;
    }
    
    .academics-container .programs-layout .row-one {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .academics-container .programs-layout .row-two {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .academics-container .program-card {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        height: 420px;
    }
    
    .academics-container .program-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    }
    
    .academics-container .program-card .card-image-box {
        position: relative;
        height: 100%;
        overflow: hidden;
    }
    
    .academics-container .program-card .card-image-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }
    
    .academics-container .program-card:hover .card-image-box img {
        transform: scale(1.15);
    }
    
    .academics-container .program-card .card-image-box .badge-overlay {
        position: absolute;
        top: 20px;
        left: 20px;
        background: rgba(0, 0, 0, 0.75);
        backdrop-filter: blur(10px);
        color: #fff;
        padding: 8px 18px;
        border-radius: 25px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }
    
    .academics-container .program-card .card-image-box .number-badge {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
        background: #fff;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 800;
        color: #1e293b;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        border: none;
        transform: rotate(-5deg);
        transition: all 0.3s ease;
        display: none;
    }
    
    .academics-container .program-card:hover .card-image-box .number-badge {
        transform: rotate(0deg) scale(1.1);
    }
    
    .academics-container .program-card .card-image-box .content-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 60%, transparent 100%);
        padding: 120px 25px 25px;
        transform: translateY(0);
        transition: all 0.4s ease;
    }
    
    .academics-container .program-card:hover .card-image-box .content-overlay {
        padding: 140px 25px 25px;
    }
    
    .academics-container .program-card .card-image-box .content-overlay h3 {
        font-size: 2rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 12px;
        line-height: 1.3;
    }
    
    .academics-container .program-card .card-image-box .content-overlay .description-text {
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 20px;
    }
    
    .academics-container .program-card:nth-child(1) .badge-overlay {
        background: #ec4899;
        border-color: rgba(255, 255, 255, 0.5);
    }
    
    .academics-container .program-card:nth-child(2) .badge-overlay {
        background: #06b6d4;
        border-color: rgba(255, 255, 255, 0.5);
    }
    
    .academics-container .row-two .program-card:nth-child(1) .badge-overlay {
        background: #10b981;
        border-color: rgba(255, 255, 255, 0.5);
    }
    
    .academics-container .row-two .program-card:nth-child(2) .badge-overlay {
        background: #f59e0b;
        border-color: rgba(255, 255, 255, 0.5);
    }
    
    .academics-container .row-two .program-card:nth-child(3) .badge-overlay {
        background: #8b5cf6;
        border-color: rgba(255, 255, 255, 0.5);
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    /* Responsive Design */
    /* Latest News */
    
    .latest-news-wrapper {
        background: #e9fbf7;
        padding: 22px 0;
    }
    
    .latest-news-wrapper .latest-news-bar {
        position: relative;
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }
    /* Label */
    
    .latest-news-wrapper .news-label {
        background: #e2a42c;
        color: #fff;
        font-weight: 700;
        padding: 8px 30px;
        font-size: 18px;
        /* border-radius: 6px; */
        margin-right: 20px;
        white-space: nowrap;
    }
    /* Ticker Area */
    
    .latest-news-wrapper .news-ticker-area {
        flex: 1;
        overflow: hidden;
    }
    /* Track */
    
    .latest-news-wrapper .news-track {
        display: flex;
        gap: 60px;
        white-space: nowrap;
    }
    /* Items */
    
    .latest-news-wrapper .news-item {
        display: flex;
        align-items: center;
        font-size: 16px;
        gap: 12px;
    }
    
    .latest-news-wrapper .news-date {
        font-weight: 700;
        color: #0a6d63;
        border-right: 2px solid #000;
        padding-right: 15px;
    }
    /* Controls hidden */
    
    .latest-news-wrapper .news-controls {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        gap: 10px;
        opacity: 0;
        transition: 0.3s;
    }
    
    .latest-news-wrapper .latest-news-bar:hover .news-controls {
        opacity: 1;
    }
    
    .latest-news-wrapper .control-btn {
        border: none;
        background: #f1f1f1;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        cursor: pointer;
    }
    
    .latest-news-wrapper .control-btn:hover {
        background: #0d6efd;
        color: #fff;
    }
    
    .news-list .news-row {
        font-size: 14px;
        display: flex;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    
    .news-list .date {
        width: 130px;
        font-weight: 700;
        color: #0a6d63;
    }
    
    .news-list .text {
        flex: 1;
    }
    /* Admission */
    /* Outer section */
    
    .admission-strip {
        margin-top: 50px;
        padding: 60px 0;
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    /* Polygon Background */
    
    .admission-strip::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #000816, #0050ff);
        clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
        z-index: -1;
    }
    
    .admission-strip .admission-box {
        background: #5992ef;
        border-radius: 16px;
        padding: 20px;
        position: relative;
        overflow: hidden;
    }
    /* Image */
    
    .admission-strip .admission-image img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        border-radius: 12px;
    }
    /* Content */
    
    .admission-strip .admission-content {
        padding: 10px 25px;
        color: #fff;
    }
    
    .admission-strip .admission-content h2 {
        font-size: 32px;
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 12px;
    }
    
    .admission-strip .admission-content p {
        font-size: 16px;
        line-height: 1.6;
        margin: 0;
    }
    /* Button reserved space */
    
    .admission-strip .admission-btn-space {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Responsive */
    /* Activities */
    /* ===== SECTION ===== */
    
    .sscs-activities {
        padding: 80px 0;
        background: #e5e6e7;
        clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%);
        margin-top: -30px;
    }
    /* ===== CARD ===== */
    
    .sscs-activities-card {
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
        transition: all 0.4s ease;
        height: 100%;
        position: relative;
    }
    /* Slight highlight for first card */
    
    .blue-bg {
        background: #1d3557;
        color: #fff;
        position: relative;
        z-index: 1;
        overflow: visible;
    }
    /* Extend blue color to the left edge of screen */
    
    .blue-bg::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100vw;
        /* go fully to left edge */
        width: 100vw;
        /* cover till card start */
        height: 100%;
        background: #1d3557;
        z-index: -1;
    }
    /* Make text white inside blue card */
    
    .blue-bg h3,
    .blue-bg p {
        color: #fff !important;
    }
    /* Optional: make image blend nicely */
    
    .blue-bg img {
        opacity: 0.95;
    }
    /* ===== HOVER EFFECT ===== */
    
    .sscs-activities-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 30px 65px rgba(0, 0, 0, 0.15);
    }
    /* ===== IMAGE ===== */
    
    .sscs-activities-card img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        transition: transform 0.6s ease;
    }
    
    .sscs-activities-card:hover img {
        transform: scale(1.08);
    }
    
    .blue-bg.sscs-activities-card {
        border-radius: 0;
    }
    /* ===== CONTENT ===== */
    
    .blue-bg .sscs-activities-card-body {
        padding: 60px 24px 15px 0px;
    }
    
    .sscs-activities-card-body {
        padding: 26px 24px 30px;
    }
    /* ===== TITLE ===== */
    
    .sscs-activities-card-body h3 {
        font-size: 22px;
        font-weight: 700;
        color: #1d3557;
        margin-bottom: 12px;
    }
    /* ===== PARAGRAPH ===== */
    
    .sscs-activities-card-body p {
        font-size: 15px;
        color: #555;
        line-height: 1.8;
        margin: 0;
    }
    /* ===== RESPONSIVE ===== */
    /* Gallery */
    
    .Main-gallery {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    .main-gallery-buttons {
        display: flex;
        gap: 20px;
        justify-content: end;
        margin-bottom: 50px;
    }
    
    .main-gallery-buttons button {
        text-decoration: none;
        font-weight: 500;
        font-size: 16px;
        padding: 8px 16px;
        border-radius: 4px;
        transition: all 0.3s ease;
        position: relative;
        display: inline-flex;
        align-items: center;
    }
    /* Portfolio - Active state with star */
    
    .main-gallery-buttons button:first-child {
        background-color: var(--primary-color);
        color: white;
        border: none;
    }
    /* Star indicator before the active text */
    
    .main-gallery-buttons button:first-child::before {
        content: '★';
        display: inline-block;
        margin-right: 8px;
        font-size: 14px;
    }
    /* Prints - Inactive state */
    
    .main-gallery-buttons button:last-child {
        background-color: #f8f9fa;
        color: #6c757d;
        border: 1px solid #dee2e6;
    }
    /* Hover effects */
    
    .main-gallery-buttons button:first-child:hover {
        background-color: var(--accent-color);
        color: var(--primary-color);
    }
    
    .main-gallery-buttons button:last-child:hover {
        background-color: #e9ecef;
        color: #495057;
    }
    
    .main-gallery-buttons button.active::after {
        content: "";
        position: absolute;
        background-color: var(--primary-color);
        border-radius: 0;
        width: 16px;
        height: 16px;
        top: 32px;
        left: calc(50% - 10px);
        z-index: -1;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    .main-gallery-buttons button.active:hover::after {
        background-color: var(--accent-color);
    }
    
    .spl-footer {
        text-align: center;
    }
    
    .spotlight-group .badge-title {
        position: absolute;
        left: 16px;
        bottom: 16px;
        background: rgba(0, 0, 0, 0.75);
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 13px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #fff;
        backdrop-filter: blur(4px);
    }
    /* custom classes are always prefixed by "spl-" automatically */
    
    .spotlight img {
        border-radius: 16px;
        margin-bottom: 15px;
    }
    
    .spl-like {
        background-image: url(demo/gallery/heart-outline.svg);
        background-size: 23px;
    }
    /* optionally, additional state to toggle the button: */
    
    .spl-like.on {
        background-image: url(demo/gallery/heart.svg);
    }
    /*
         * Custom Animation:
         * -----------------
         */
    /* custom scene transition (slide effect) */
    
    .only-this-gallery.show .spl-scene {
        transition: transform 0.2s ease;
    }
    /* custom animation "visible state" (css context by custom classname "only-this-gallery" to apply these animation just on a specific gallery) */
    
    .only-this-gallery.show .spl-pane>* {
        clip-path: circle(100% at center);
        transition: transform 0.35s ease, opacity 0.65s ease, clip-path 0.8s ease;
    }
    /* custom animation "hidden state" ("custom" is the name of the animation you pass as gallery option) */
    
    .only-this-gallery .spl-pane .custom {
        clip-path: circle(0px at center);
        transition: transform 0.65s ease, opacity 0.65s ease;
    }
    /* animation state when gallery is hidden */
    
    #spotlight.only-this-gallery {
        clip-path: circle(0px at center);
    }
    /* animation state when gallery will open */
    
    #spotlight.only-this-gallery.show {
        clip-path: circle(100% at center);
        transition: clip-path 0.65s ease 0.15s;
    }
    /* footer */
    
    .school-footer {
        background: #0f2545;
        color: #fff;
        padding: 60px 20px 20px;
        font-family: 'Segoe UI', sans-serif;
        position: relative;
    }
    
    .footer-container {
        max-width: 1140px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /* 3 columns */
        gap: 20px;
    }
    
    .footer-col h3,
    .footer-col h4 {
        margin-bottom: 20px;
        position: relative;
        color: #dea12b;
    }
    
    .footer-col h4::after {
        content: "";
        width: 40px;
        height: 3px;
        background: #2c05fb;
        display: block;
        margin-top: 8px;
    }
    
    .footer-col p {
        font-size: 14px;
        line-height: 1.8;
        color: #ddd;
    }
    
    .footer-col ul {
        list-style: none;
        padding: 0;
    }
    
    .footer-col ul li {
        margin-bottom: 10px;
    }
    
    .footer-col ul li a {
        text-decoration: none;
        color: #ddd;
        font-size: 14px;
        transition: 0.3s;
    }
    
    .footer-col ul li a:hover {
        color: #fff;
        padding-left: 6px;
    }
    
    .social-icons {
        margin-top: 26px;
        display: flex;
    }
    
    .social-icons a {
        display: flex;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: #fff;
        color: #0f2545;
        /* text-align: center; */
        border-radius: 50%;
        margin-right: 8px;
        transition: 0.3s;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
    
    .social-icons a:hover {
        transform: translateY(-5px);
    }
    
    .contact-col p {
        font-size: 14px;
        margin-bottom: 12px;
        display: flex;
        gap: 10px;
        line-height: 20px;
    }
    
    .contact-col i {
        color: #000000;
        font-size: 16px;
    }
    
    .contact-col p i {
        color: #ffffff;
        font-size: 14px;
        display: flex;
        border: 1px solid #ffffff;
        border-radius: 50%;
        height: 30px;
        padding: 10px;
        width: 30px;
        align-items: center;
        justify-content: center;
    }
    
    .admission-btn {
        display: inline-block;
        margin-top: 15px;
        padding: 10px 18px;
        background: #fff;
        color: #0f2545;
        font-weight: bold;
        text-decoration: none;
        border-radius: 4px;
        transition: 0.3s;
    }
    
    .admission-btn:hover {
        background: #fff;
    }
    
    .footer-bottom {
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin-top: 40px;
        padding-top: 15px;
        font-size: 13px;
        color: #ccc;
    }
    /* Responsive */
    /* Admission form */
    
    .admission-open-btn {
        background: #020617;
        color: #fff;
        padding: 12px 28px;
        border-radius: 8px;
        font-weight: 600;
        border: none;
    }
    /* Modal */
    
    .modal.fade .modal-dialog {
        transform: perspective(1000px) rotateX(-90deg);
        transition: all 0.5s ease-in-out;
        transform-origin: top center;
        opacity: 0;
    }
    
    .modal.fade.show .modal-dialog {
        transform: perspective(1000px) rotateX(0);
        opacity: 1;
    }
    
    .modal-content {
        border: none;
        border-radius: 14px;
        box-shadow: 0 30px 60px rgba(0, 0, 0, .15);
    }
    /* Header */
    
    .admission-header {
        padding: 26px 30px;
        border-bottom: 1px solid #e5e7eb;
        position: relative;
    }
    
    .admission-header h4 {
        margin: 0;
        font-weight: 700;
        font-size: 24px;
    }
    
    .admission-header p {
        margin: 6px 0 0;
        font-size: 16px;
        color: #64748b;
    }
    /* Close */
    
    .modal-close {
        position: absolute;
        right: 20px;
        top: 18px;
        font-size: 22px;
        background: none;
        border: none;
        color: #64748b;
    }
    
    .modal-close:hover {
        color: #020617
    }
    /* Body */
    /* QR Card */
    
    .admissionModal-wrapper .qr-card {
        background: #ffffff;
        border-radius: 16px;
        padding: 28px 22px;
        text-align: center;
        height: 100%;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }
    
    .admissionModal-wrapper .qr-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14);
    }
    
    .admissionModal-wrapper .qr-card h5 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 18px;
        color: #1e293b;
    }
    /* QR Image */
    
    .admissionModal-wrapper .qr-card .qr-image {
        max-width: 220px;
        border-radius: 12px;
        margin: 18px auto 0;
    }
    /* 🔥 Smart Button */
    
    .admissionModal-wrapper .qr-card .qr-mobile-btn {
        display: none;
        width: 100%;
        padding: 15px 20px;
        border-radius: 12px;
        background: linear-gradient(135deg, #2563eb, #1e40af);
        color: #ffffff;
        text-decoration: none;
        font-size: 15px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
        transition: all 0.35s ease;
    }
    
    .admissionModal-wrapper .qr-card .qr-mobile-btn i {
        font-size: 14px;
        transition: transform 0.3s ease;
    }
    /* Hover / Focus */
    
    .admissionModal-wrapper .qr-card .qr-mobile-btn:hover {
        background: linear-gradient(135deg, #1e40af, #1e3a8a);
        box-shadow: 0 16px 36px rgba(30, 64, 175, 0.45);
    }
    
    .admissionModal-wrapper .qr-card .qr-mobile-btn:hover i {
        transform: translateX(6px);
    }
    /* ✅ Responsive Switch */
    
    @media (max-width: 576px) {
        /* Hide QR */
        .admissionModal-wrapper .qr-card .qr-image {
            display: none;
        }
        /* Show Button */
        .admissionModal-wrapper .qr-card .qr-mobile-btn {
            display: flex;
        }
        .admissionModal-wrapper .admission-body {
            padding: 24px 18px;
        }
    }
    /* ===== Default (Desktop & Tablet) ===== */
    /* Show QR + hint */
    
    .admissionModal-wrapper .qr-card .qr-image {
        display: block;
    }
    
    .admissionModal-wrapper .qr-card .qr-hint {
        display: block;
        font-size: 14px;
        color: #64748b;
        margin-top: 6px;
    }
    /* Hide button on desktop */
    /* .admissionModal-wrapper .qr-card .qr-mobile-btn {
        display: none;
    } */
    /* ===== Mobile Only ===== */
    
    @media (max-width: 576px) {
        /* Hide QR image */
        .admissionModal-wrapper .qr-card .qr-image {
            display: none;
        }
        /* Hide hint */
        .admissionModal-wrapper .qr-card .qr-hint {
            display: none;
        }
        /* Show smart button */
        .admissionModal-wrapper .qr-card .qr-mobile-btn {
            display: flex;
            width: 100%;
            padding: 15px 20px;
            border-radius: 12px;
            background: linear-gradient(135deg, #2563eb, #1e40af);
            color: #ffffff;
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
            transition: all 0.3s ease;
        }
        .admissionModal-wrapper .qr-card .qr-mobile-btn i {
            transition: transform 0.3s ease;
        }
        .admissionModal-wrapper .qr-card .qr-mobile-btn:hover i {
            transform: translateX(6px);
        }
    }
    
    .admission-body {
        padding: 30px
    }
    /* Floating Fields */
    
    .form-field {
        position: relative
    }
    
    .form-field input,
    .form-field select {
        width: 100%;
        padding: 14px 42px 14px 14px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        font-size: 14px;
        background: #fff;
        appearance: none;
        color: #020617!important;
    }
    /* Placeholder color */
    
    .form-field input::placeholder {
        color: transparent
    }
    /* Select placeholder color */
    
    .form-field select {
        color: #94a3b8;
    }
    
    .form-field select[data-selected]:not([data-selected=""]) {
        color: #020617;
    }
    /* Label */
    
    .form-field label {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: #fff;
        padding: 0 6px;
        font-size: 14px;
        color: #000000;
        pointer-events: none;
        transition: .2s ease;
    }
    /* Float */
    
    .form-field input:focus+label,
    .form-field input:not(:placeholder-shown)+label,
    .form-field select:focus+label,
    .form-field select[data-selected]:not([data-selected=""])+label {
        top: -8px;
        font-size: 12px;
        color: #020617;
    }
    /* Focus */
    
    .form-field input:focus,
    .form-field select:focus {
        border-color: #020617;
        outline: none;
    }
    /* Dropdown Arrow */
    
    .form-field.select::after {
        content: "▼";
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        color: #64748b;
        pointer-events: none;
    }
    /* Footer */
    
    .admission-footer {
        padding: 25px 0px 0;
        border-top: 1px solid #e5e7eb;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    
    .admission-submit-btn {
        background: #020617;
        color: #fff;
        padding: 12px 36px;
        border-radius: 8px;
        font-weight: 600;
        border: none;
        font-size: 16px;
    }
    /* INSIDE PAGE */
    /* ===== Inside Banner Section ===== */
    
    .inside-banner {
        position: relative;
        width: 100%;
        height: 420px;
        overflow: hidden;
    }
    
    .inside-banner img.img-fluid {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    /* Overlay */
    
    .inside-banner::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.35));
        z-index: 1;
    }
    /* Content wrapper */
    
    .inside-banner .inside-banner-content {
        position: absolute;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        text-align: center;
        color: #fff;
        width: 100%;
    }
    /* Heading */
    
    .inside-banner .inside-banner-content h2 {
        font-size: 42px;
        font-weight: 700;
        letter-spacing: 1px;
        margin-bottom: 12px;
        text-transform: uppercase;
    }
    /* Breadcrumb */
    
    .inside-banner .breadcrumb {
        justify-content: center;
        background: transparent;
        margin: 0;
        padding: 0;
    }
    
    .inside-banner .breadcrumb-item {
        font-size: 15px;
        font-weight: 500;
        color: #f1f1f1;
    }
    /* Breadcrumb links */
    
    .inside-banner .breadcrumb-item a {
        color: #ffffff;
        text-decoration: none;
        transition: 0.3s ease;
    }
    
    .inside-banner .breadcrumb-item a:hover {
        color: #e2a42c;
    }
    /* Separator */
    
    .inside-banner .breadcrumb-item+.breadcrumb-item::before {
        content: ">";
        color: #e2a42c;
        padding: 0 8px;
    }
    /* ===== Responsive ===== */
    /* ===== About Section ===== */
    
    .about-section {
        padding: 50px 0 60px;
        background: #f9f9f9;
    }
    
    .about-section .about-image {
        overflow: hidden;
        border-radius: 12px;
    }
    
    .about-section .about-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    
    .about-section .about-image:hover img {
        transform: scale(1.05);
    }
    /* Content */
    
    .about-section .about-content {
        padding: 20px 10px 20px 40px;
    }
    
    .about-section .about-content h2 {
        font-size: 34px;
        font-weight: 700;
        margin-bottom: 20px;
        color: #222;
    }
    
    .about-section .about-content p {
        font-size: 16px;
        line-height: 1.8;
        color: #555;
        margin-bottom: 16px;
    }
    /* Highlight line */
    
    .about-section .about-content .highlight-text {
        background: #e2a42c15;
        border-left: 4px solid #e2a42c;
        padding: 12px 15px;
        font-weight: 600;
        color: #333;
    }
    /* ===== Responsive ===== */
    /* ===== Vision Mission Section ===== */
    
    .vision-mission-section {
        padding: 60px 0;
        background: #ffffff;
    }
    
    .vision-mission-section .vm-heading {
        text-align: center;
        margin-bottom: 60px;
    }
    
    .vision-mission-section .vm-heading h2 {
        font-size: 36px;
        font-weight: 700;
        color: #222;
    }
    
    .vision-mission-section .vm-line {
        width: 70px;
        height: 4px;
        background: #e2a42c;
        margin: 12px auto 0;
        border-radius: 10px;
    }
    /* Wrapper */
    
    .vision-mission-section .vm-wrapper {
        display: flex;
        gap: 40px;
        justify-content: center;
    }
    /* Cards */
    
    .vision-mission-section .vm-card {
        flex: 1;
        background: #f7f8fa;
        padding: 45px 35px;
        border-radius: 12px;
        text-align: center;
        transition: 0.3s ease;
        border-top: 5px solid #e2a42c;
    }
    
    .vision-mission-section .vm-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    }
    /* Icon */
    
    .vision-mission-section .vm-icon {
        font-size: 40px;
        color: #e2a42c;
        margin-bottom: 20px;
    }
    /* Title */
    
    .vision-mission-section .vm-card h3 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #222;
    }
    /* Text */
    
    .vision-mission-section .vm-card p {
        font-size: 16px;
        line-height: 1.9;
        color: #555;
        margin: 0;
    }
    
    .school-about {
        background: linear-gradient(180deg, #eff2f5 0%, #ffffff 100%);
        padding: 80px 0;
    }
    
    .school-about .about-wrapper {
        max-width: 1200px;
        margin: auto;
    }
    /* Header */
    
    .school-about .about-header {
        text-align: center;
        margin-bottom: 60px;
    }
    
    .school-about .about-header h2 {
        font-size: 38px;
        font-weight: 700;
        color: #1c2b4a;
    }
    
    .school-about .about-header p {
        max-width: 780px;
        margin: 15px auto 0;
        font-size: 16px;
        color: #555;
        line-height: 1.8;
    }
    /* Intro Section */
    
    .school-about .about-intro {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
        margin-bottom: 60px;
    }
    
    .school-about .intro-text p {
        font-size: 16px;
        line-height: 1.9;
        color: #444;
        margin-bottom: 18px;
    }
    
    .school-about .intro-highlight {
        background: #1c2b4a;
        color: #fff;
        padding: 35px;
        border-radius: 16px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }
    
    .school-about .intro-highlight h4 {
        font-size: 22px;
        margin-bottom: 15px;
    }
    
    .school-about .intro-highlight ul {
        padding-left: 18px;
        margin: 0;
    }
    
    .school-about .intro-highlight ul li {
        margin-bottom: 10px;
        font-size: 15px;
    }
    /* Info Cards */
    
    .school-about .info-cards {
        margin-bottom: 60px;
    }
    
    .school-about .info-card {
        background: #ffffff;
        border-radius: 18px;
        padding: 35px;
        height: 100%;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
        transition: transform 0.3s ease;
    }
    
    .school-about .info-card:hover {
        transform: translateY(-6px);
    }
    
    .school-about .info-card h5 {
        font-size: 20px;
        font-weight: 600;
        color: #1c2b4a;
        margin-bottom: 12px;
    }
    
    .school-about .info-card p {
        font-size: 15px;
        line-height: 1.8;
        color: #555;
        margin: 0;
    }
    /* Governance Section */
    
    .school-about .governance {
        background: #f4f7fb;
        border-radius: 22px;
        padding: 50px;
        text-align: center;
    }
    
    .school-about .governance h3 {
        font-size: 28px;
        color: #1c2b4a;
        margin-bottom: 18px;
    }
    
    .school-about .governance p {
        max-width: 900px;
        margin: auto;
        font-size: 16px;
        line-height: 1.9;
        color: #555;
    }
    
    .affiliation_recognition {
        padding: 0px 0px 80px 0px;
    }
    
    .affiliation_recognition h2 {
        font-size: 38px;
        font-weight: 700;
        color: #1c2b4a;
    }
    
    .affiliation_recognition .section-title::after {
        content: "";
        width: 60px;
        height: 3px;
        background-color: var(--orange);
        position: absolute;
        left: 50%;
        bottom: -8px;
    }
    
    .affiliation_recognition_awards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* grid-template-rows: repeat(2, 1fr); */
        gap: 20px;
    }
    
    .affiliation_recognition_award {
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        background-color: #e5e5e5;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
    }
    
    .affiliation_recognition_award img {
        width: 30%;
    }
    
    .affiliation_recognition_award h4 {
        font-size: 20px;
        color: var(--blue-color);
    }
    
    .affiliation_recognition_award p {
        font-size: 16px;
        color: var(--blue-color);
    }
    /* =========================
           LEADERSHIP – SPLIT UI
        ========================== */
    
    .leadership-section {
        background: linear-gradient(180deg, #f5f8fc 0%, #ffffff 100%);
        padding: 80px 0 0 0;
    }
    
    .leadership-section .section-title {
        text-align: center;
        margin-bottom: 70px;
    }
    
    .leadership-section .section-title h2 {
        font-size: 38px;
        font-weight: 700;
        color: #1c2b4a;
    }
    
    .leadership-section .section-title p {
        max-width: 760px;
        margin: 14px auto 0;
        font-size: 16px;
        color: #555;
        line-height: 1.8;
    }
    /* Leader Block */
    
    .leadership-section .leader-block {
        display: flex;
        align-items: center;
        gap: 50px;
        margin-bottom: 80px;
    }
    
    .leadership-section .leader-block.reverse {
        flex-direction: row-reverse;
    }
    /* Image */
    
    .leadership-section .leader-photo {
        flex: 0 0 360px;
        height: 420px;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    }
    
    .leadership-section .leader-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    /* Content */
    
    .leadership-section .leader-info {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(6px);
        border-radius: 26px;
        padding: 45px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
    }
    
    .leadership-section .leader-role {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #3b6edc;
        margin-bottom: 8px;
    }
    
    .leadership-section .leader-name {
        font-size: 26px;
        font-weight: 700;
        color: #1c2b4a;
        margin-bottom: 18px;
    }
    
    .leadership-section .leader-info p {
        font-size: 15.5px;
        line-height: 1.9;
        color: #555;
        margin-bottom: 0;
    }
    /* Divider */
    
    .leadership-section .leader-divider {
        width: 70px;
        height: 3px;
        background: #3b6edc;
        margin-bottom: 20px;
        border-radius: 50px;
    }
    
    .team-management {
        padding: 60px 0px;
        background-color: #f0f0f0;
    }
    
    .team-management .section-title::after {
        content: "";
        width: 60px;
        height: 3px;
        background-color: var(--orange);
        position: absolute;
        left: 50%;
        bottom: -8px;
    }
    
    .team-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
    }
    
    .team-member {
        background: #ffffff;
        border-radius: 16px;
        padding: 18px;
        text-align: center;
        border: 1px solid #eee;
        transition: .3s;
    }
    
    .team-member:hover {
        box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
    }
    
    .team-member img {
        border-radius: 14px;
        width: 100%;
        height: 190px;
        object-fit: cover;
    }
    
    .team-management .section-title {
        font-size: 38px;
        font-weight: 700;
        color: #1c2b4a;
    }
    
    .team-member h6 {
        margin-top: 10px;
        font-weight: 700;
        color: #1d2b5b;
        font-size: 20px;
    }
    
    .team-member small {
        font-size: 16px;
    }
    
    @media(max-width:992px) {
        .team-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media(max-width:576px) {
        .team-grid {
            grid-template-columns: 1fr;
        }
    }
    
    .all-facilities-section {
        padding: 80px 0px;
    }
    
    .all-facilities-section p {
        font-size: 16px;
    }
    
    .all-facilities-section .fst-italic {
        color: #dea12b;
        font-size: 20px;
    }
    
    .all-facilities {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
    }
    
    .all-facilities .all-facilities-facility {
        font-size: 12px;
    }
    
    .all-facilities .all-facilities-facility i {
        color: #dea12b;
    }
    
    .facilities-details {
        background-color: #fff;
        margin-bottom: 30px;
        padding: 25px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .facilities-details-content h3 {
        font-size: 28px;
    }
    
    .facilities-details-content p,
    .facilities-details-content ul li {
        font-size: 16px;
    }
    
    .facilities-details-content-right-col,
    .facilities-details-content-left-col {
        background-color: #dea12b;
    }
    
    .facilities-details-content-right {
        background-color: #dea12b;
        color: #000000;
        padding: 60px 35px 60px 100px;
        position: relative;
        right: 10%;
    }
    
    .facilities-details .facilities-details-content-left {
        background-color: #dea12b;
        color: #000000;
        padding: 60px 120px 60px 35px;
        position: relative;
        left: 10%;
    }
    
    .facilities-details img {
        width: 100%;
        position: relative;
        z-index: 1;
    }
    
    .facilities-details ul {
        list-style: none;
    }
    
    .facilities-details ul li {
        position: relative;
    }
    
    .facilities-details ul li::before {
        content: "\f058";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left: -22px;
        color: #020101;
    }
    /* =======================
   Admissions Typography
======================= */
    
    .admission-process-sscs {
        padding: 60px 0px;
    }
    
    .ms-admission-title {
        font-size: 38px;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: .6px;
    }
    
    .ms-admission-brief {
        font-size: 17px;
        color: #475569;
        line-height: 1.8;
        margin-top: 10px;
    }
    /* =======================
   Tabs Navigation UI
======================= */
    
    .ms-admission-nav {
        border: none;
        justify-content: center;
        gap: 18px;
        margin-bottom: 0;
    }
    
    .ms-admission-nav .nav-link {
        border: none;
        background: #eef2f7;
        color: #334155;
        padding: 16px 30px;
        border-radius: 50px;
        font-weight: 700;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        transition: all .35s ease;
    }
    /* Hover */
    
    .ms-admission-nav .nav-link:hover {
        background: #dbeafe;
        transform: translateY(-3px);
    }
    /* ACTIVE TAB STYLE */
    
    .ms-admission-nav .nav-link.active {
        background: linear-gradient(135deg, #0d6efd, #2563eb);
        color: #fff;
        box-shadow: 0 10px 25px rgba(37, 99, 235, .35);
    }
    /* icon inside active */
    
    .ms-admission-nav .nav-link.active i {
        color: #fff;
    }
    /* =======================
   Tab Content Card
======================= */
    
    .ms-admission-content {
        background: #ffffff;
        margin-top: 25px;
        padding: 45px;
        border-radius: 18px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
    }
    /* =======================
   Section Header
======================= */
    
    .ms-section-header {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 18px;
    }
    
    .ms-section-header i {
        font-size: 26px;
        color: #2563eb;
    }
    
    .ms-section-header h4 {
        margin: 0;
        font-size: 24px;
        font-weight: 800;
        color: #0f172a;
    }
    /* =======================
   Description
======================= */
    
    .ms-tab-desc {
        font-size: 16.5px;
        color: #475569;
        line-height: 1.8;
        margin-bottom: 22px;
    }
    /* =======================
   List Styling
======================= */
    
    .ms-tab-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .ms-tab-list li {
        font-size: 16px;
        margin-bottom: 14px;
        display: flex;
        gap: 12px;
        align-items: flex-start;
        color: #334155;
        line-height: 1.7;
    }
    
    .ms-tab-list li i {
        color: #2563eb;
        margin-top: 4px;
        font-size: 15px;
    }
    
    .ms-admission-content .btn {
        font-size: 15px;
        border-radius: 40px;
        font-weight: 700;
        padding: 12px 32px;
        letter-spacing: .4px;
        transition: .3s ease;
    }
    
    .ms-admission-content .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(37, 99, 235, .35);
    }
    /* ===== Section spacing ===== */
    
    .activities-section {
        padding: 80px 0 0;
        background: #f8fafc;
    }
    /* Each row spacing */
    
    .activities-section .activity-row {
        margin-bottom: 80px;
    }
    /* Image styling */
    
    .activities-section .activity-image {
        border-radius: 18px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
        transition: .4s ease;
    }
    
    .activities-section .activity-image:hover {
        transform: scale(1.03);
    }
    /* Text content */
    
    .activities-section .activity-text {
        padding: 20px 40px;
    }
    
    .activities-section .activity-text h3 {
        font-size: 32px;
        font-weight: 800;
        color: #0f172a;
        margin-bottom: 15px;
        position: relative;
    }
    /* underline style */
    
    .activities-section .activity-text h3::after {
        content: '';
        width: 60px;
        height: 4px;
        background: #dea12b;
        display: block;
        margin-top: 8px;
        border-radius: 4px;
    }
    
    .activities-section .activity-text p {
        font-size: 17px;
        color: #475569;
        line-height: 1.9;
        margin-top: 15px;
    }
    
    .contact-modern {
        position: relative;
        padding: 90px 0;
        background: #f9fbff;
        overflow: hidden;
    }
    /* Header */
    
    .contact-modern .contact-header h2 {
        font-size: 36px;
        font-weight: 700;
        color: #0f172a;
        margin-bottom: 8px;
    }
    
    .contact-modern .contact-header p {
        font-size: 15px;
        color: #64748b;
        margin-bottom: 50px;
    }
    /* Cards */
    
    .contact-modern .contact-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 40px 30px;
        text-align: center;
        height: 100%;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
        transition: transform 0.35s ease, box-shadow 0.35s ease;
    }
    
    .contact-modern .contact-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 30px 60px rgba(15, 23, 42, 0.15);
    }
    /* Icon */
    
    .contact-modern .contact-card .icon-box {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #2563eb, #1e40af);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        color: #ffffff;
        font-size: 26px;
    }
    /* Text */
    
    .contact-modern .contact-card h5 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #0f172a;
    }
    
    .contact-modern .contact-card p {
        font-size: 14px;
        color: #475569;
        margin: 0;
        line-height: 1.6;
    }
    
    .contact-modern .contact-card a {
        color: #2563eb;
        text-decoration: none;
        font-weight: 500;
    }
    
    .contact-modern .contact-card a:hover {
        text-decoration: underline;
    }
    /* Decorative shapes */
    
    .contact-modern .contact-shape {
        position: absolute;
        border-radius: 50%;
        z-index: 0;
    }
    
    .contact-modern .shape-1 {
        width: 280px;
        height: 280px;
        background: rgba(37, 99, 235, 0.08);
        top: -100px;
        left: -120px;
    }
    
    .contact-modern .shape-2 {
        width: 220px;
        height: 220px;
        background: rgba(30, 64, 175, 0.08);
        bottom: -100px;
        right: -80px;
    }
    /* Responsive */
    
    .alumni-section {
        padding: 80px 0;
        background: #ffffff;
    }
    
    .alumni-section .alumni-title {
        font-size: 26px;
        font-weight: 700;
        color: #1a237e;
        text-transform: uppercase;
    }
    
    .alumni-section .alumni-subtitle {
        font-size: 18px;
        color: #555;
    }
    
    .alumni-section .alumni-content-box {
        background: #ffffff;
        /* padding: 40px; */
        border-radius: 15px;
        /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); */
    }
    
    .alumni-section .alumni-content-box p {
        color: #444;
        line-height: 1.8;
        font-size: 16px;
    }
    
    .alumni-section .alumni-highlight {
        font-weight: 600;
        color: #0d6efd;
    }
    
    .alumni-form-section {
        padding: 80px 0;
        background: #f4f6fb;
    }
    
    .alumni-form-section .form-title {
        font-size: 32px;
        font-weight: 700;
        color: #1a237e;
        margin-bottom: 40px;
        text-align: center;
    }
    
    .alumni-form-section .alumni-form-wrapper {
        background: #ffffff;
        padding: 40px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }
    
    .alumni-form-section .alumni-form-wrapper .form-label {
        font-weight: 600;
        color: #333;
    }
    
    .alumni-form-section .alumni-form-wrapper .form-control,
    .alumni-form-section .alumni-form-wrapper .form-select {
        border-radius: 8px;
        padding: 10px 15px;
        border: 1px solid #ddd;
        transition: 0.3s ease;
    }
    
    .alumni-form-section .alumni-form-wrapper .form-control:focus,
    .alumni-form-section .alumni-form-wrapper .form-select:focus {
        border-color: #1a237e;
        box-shadow: 0 0 0 0.2rem rgba(26, 35, 126, 0.15);
    }
    
    .alumni-form-section .alumni-submit-btn {
        background: #1a237e;
        color: #fff;
        padding: 12px 40px;
        border-radius: 50px;
        font-weight: 600;
        border: none;
        transition: 0.3s ease;
    }
    
    .alumni-form-section .alumni-submit-btn:hover {
        background: #0d6efd;
    }
    /* =============================
   Alumni Form Typography
============================= */
    /* Section Title */
    
    .alumni-form-section .form-title {
        font-size: 34px;
        /* Desktop */
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    /* Form Labels */
    
    .alumni-form-section .alumni-form-wrapper .form-label {
        font-size: 15px;
        font-weight: 600;
    }
    /* Input Text */
    
    .alumni-form-section .alumni-form-wrapper .form-control,
    .alumni-form-section .alumni-form-wrapper .form-select,
    .alumni-form-section .alumni-form-wrapper textarea {
        font-size: 15px;
    }
    /* Placeholder Text */
    
    .alumni-form-section .alumni-form-wrapper .form-control::placeholder,
    .alumni-form-section .alumni-form-wrapper textarea::placeholder {
        font-size: 14px;
    }
    /* Submit Button Text */
    
    .alumni-form-section .alumni-submit-btn {
        font-size: 16px;
        letter-spacing: 0.5px;
    }
    /* Responsive Adjustments */
    
    .educhamps-section .image-large img {
        height: 260px;
        margin-bottom: 15px;
    }
    
    .educhamps-section .educhamps-images img {
        width: 100%;
        border-radius: 20px;
        object-fit: cover;
    }
    
    .educhamps-section .image-row {
        display: flex;
        justify-content: space-between;
    }
    
    .educhamps-section .image-row img {
        height: 180px;
        width: 48%;
    }
    
    .educhamps-section {
        background: #f9fbff;
        position: relative;
        padding: 60px 0px;
    }
    
    .educhamps-section .row {
        padding-bottom: 60px;
    }
    
    .educhamps-section .educhamps-badge {
        background: linear-gradient(90deg, #d69b29, #dea12b);
        color: #fff;
        padding: 6px 18px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 500;
    }
    
    .educhamps-section .educhamps-title {
        font-size: 32px;
        font-weight: 700;
        color: #222;
    }
    
    .educhamps-section .educhamps-subtitle {
        color: #d69b29;
        font-weight: 600;
        margin-bottom: 15px;
    }
    
    .educhamps-section .educhamps-text {
        color: #555;
        line-height: 1.7;
        font-size: 16px;
    }
    
    .educhamps-section .educhamps-main-img {
        width: 100%;
        object-fit: cover;
    }
    
    .educhamps-section .educhamps-floating-img {
        position: absolute;
        bottom: -30px;
        right: 20px;
        width: 200px;
    }
    
    .educhamps-section .section-heading {
        font-weight: 700;
        margin-bottom: 10px;
        font-size: 30px;
        color: #dea12b;
    }
    
    .educhamps-section .section-description {
        color: #ffffff;
        max-width: 700px;
        margin: 0 auto;
        font-size: 16px;
    }
    
    .educhamps-section .focus-card {
        background: #fff;
        padding: 30px;
        border-radius: 20px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        transition: 0.3s;
        height: 100%;
    }
    
    .educhamps-section .focus-card h5 {
        font-size: 20px;
    }
    
    .educhamps-section .focus-card p {
        font-size: 16px;
    }
    
    .educhamps-section .focus-card:hover {
        transform: translateY(-8px);
    }
    
    .educhamps-section .focus-card i {
        font-size: 28px;
        color: #d69b29;
        margin-bottom: 15px;
    }
    
    .educhamps-section .why-section {
        background: #ffffff;
        padding: 40px 0px 40px 0px;
        border-radius: 25px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
        margin-top: 50px;
    }
    
    .why-section-content-img {
        position: absolute;
        width: 47%;
        top: -135px;
        left: 20px;
        z-index: 5;
    }
    
    s po .why-section-content {
        padding-left: 20px;
    }
    
    .educhamps-section .why-section p {
        font-size: 16px;
    }
    
    .educhamps-section .why-list {
        list-style: none;
        padding: 0;
        font-size: 16px;
    }
    
    .educhamps-section .why-list li {
        margin-bottom: 10px;
        font-weight: 500;
    }
    
    .educhamps-section .why-list i {
        color: #28a745;
        margin-right: 8px;
    }
    
    .edu-creative-section {
        position: relative;
        padding-top: 60px;
        z-index: 5;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 100px;
        background-attachment: fixed;
    }
    
    .educhamps-edu-creative-section {
        background-image: url(../Images/Educhamps/kids-sitting-in-classroom.webp);
    }
    
    .nursery-edu-creative-section {
        background-image: url(../Images/Nursery/classes-with-kids.webp);
    }
    
    .english-edu-creative-section {
        background-image: url(../Images/English/Kids-in-prayer-classs.webp);
    }
    
    .kannada-edu-creative-section {
        background-image: url(../Images/Kannada/Kannda-medium-students.webp);
    }
    
    .high-school-edu-creative-section {
        background-image: url(../Images/HighSchool/Explanation-in-the-class.webp);
    }
    
    .edu-creative-section .edu-bg-shape {
        position: absolute;
        top: 0;
        right: 0;
        width: 60%;
        height: 100%;
        background: linear-gradient(135deg, #d69b29, #2575fc);
        clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
        z-index: -1;
    }
    /* Image hover effect */
    
    .zoom-img {
        cursor: pointer;
        transition: 0.3s ease;
    }
    
    .zoom-img:hover {
        transform: scale(1.05);
    }
    /* Lightbox background */
    
    .lightbox {
        display: none;
        position: fixed;
        z-index: 9999;
        padding-top: 60px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(8px);
    }
    /* Image inside lightbox */
    
    .lightbox-content {
        display: block;
        margin: auto;
        max-width: 85%;
        max-height: 80%;
        border-radius: 12px;
        animation: zoomIn 0.4s ease;
    }
    /* Close button */
    
    .close-btn {
        position: absolute;
        top: 20px;
        right: 40px;
        color: #fff;
        font-size: 35px;
        cursor: pointer;
    }
    /* Animation */
    
    @keyframes zoomIn {
        from {
            transform: scale(0.6);
            opacity: 0;
        }
        to {
            transform: scale(1);
            opacity: 1;
        }
    }
    
    .lightbox {
        display: none;
        position: fixed;
        z-index: 9999;
        inset: 0;
        background: rgba(0, 0, 0, 0.9);
        backdrop-filter: blur(8px);
    }
    
    .lightbox-wrapper {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: grab;
    }
    
    .lightbox-content {
        max-width: 90%;
        max-height: 85%;
        transition: transform 0.2s ease;
        transform-origin: center center;
    }
    
    .close-btn {
        position: absolute;
        top: 20px;
        right: 40px;
        color: #fff;
        font-size: 35px;
        cursor: pointer;
        z-index: 10000;
    }