/* ==========================================================
   KUNWAR KHUSHWAQT RAI BALIKA INTER COLLEGE
   HOMEPAGE CSS
========================================================== */

:root {

    --primary: #123f8c;
    --primary-dark: #082d6b;
    --primary-light: #eaf2ff;

    --yellow: #f5b400;
    --yellow-dark: #d99d00;
    --yellow-light: #fff5d6;

    --dark: #172033;
    --text: #5f6b7b;

    --white: #ffffff;
    --light: #f7f9fc;
    --border: #e6eaf0;

    --shadow-sm:
        0 8px 25px rgba(17, 40, 76, 0.08);

    --shadow-md:
        0 20px 50px rgba(17, 40, 76, 0.12);

    --shadow-lg:
        0 30px 70px rgba(17, 40, 76, 0.16);

}


/* ==========================================================
   GENERAL
========================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family: "DM Sans", sans-serif;

    color: var(--text);

    font-size: 16px;

    line-height: 1.7;

    background: var(--white);

    overflow-x: hidden;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1240px;
}


/* ==========================================================
   TOP BAR
========================================================== */

.top-bar {

    background: var(--primary-dark);

    color: var(--white);

    font-size: 13px;
}

.top-bar-content {

    min-height: 42px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.top-left,
.top-right {

    display: flex;

    align-items: center;

    gap: 20px;
}

.top-left span,
.top-right a {

    color: rgba(255,255,255,0.9);

    transition: 0.3s;
}

.top-left i {

    color: var(--yellow);

    margin-right: 5px;
}

.top-right a:hover {

    color: var(--yellow);
}

.top-right i {

    font-size: 14px;
}

.top-divider {

    width: 1px;

    height: 15px;

    background: rgba(255,255,255,0.2);
}


/* ==========================================================
   HEADER
========================================================== */

.main-header {

    background: var(--white);

    position: relative;

    z-index: 1000;

    box-shadow:
        0 4px 25px rgba(0,0,0,0.06);
}

.header-content {

    min-height: 94px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* ==========================================================
   SCHOOL BRAND
========================================================== */

.school-brand {

    display: flex;

    align-items: center;

    gap: 13px;

    color: var(--dark);
}

.school-logo {

    width: 68px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: center;
}

.school-logo img {

    max-width: 100%;

    max-height: 68px;

    object-fit: contain;
}

.school-name {

    line-height: 1.1;
}

.school-name h1 {

    font-family: "Playfair Display", serif;

    font-size: 19px;

    color: var(--primary-dark);

    font-weight: 800;

    margin: 0;
}

.school-name span {

    display: block;

    color: var(--yellow-dark);

    font-size: 14px;

    font-weight: 800;

    margin-top: 5px;

    letter-spacing: .3px;
}


/* ==========================================================
   DESKTOP NAV
========================================================== */

.desktop-nav {

    display: flex;

    align-items: center;

    gap: 3px;
}

.desktop-nav > a {

    color: var(--dark);

    font-size: 14px;

    font-weight: 600;

    padding: 10px 11px;

    position: relative;

    transition: 0.3s;
}

.desktop-nav > a:hover,
.desktop-nav > a.active {

    color: var(--primary);
}

.desktop-nav > a:not(.apply-button)::after {

    content: "";

    position: absolute;

    left: 11px;

    right: 11px;

    bottom: 3px;

    height: 2px;

    background: var(--yellow);

    transform: scaleX(0);

    transition: .3s;
}

.desktop-nav > a:hover::after,
.desktop-nav > a.active::after {

    transform: scaleX(1);
}


/* ==========================================================
   APPLY BUTTON
========================================================== */

.apply-button {

    background: var(--yellow);

    color: var(--dark) !important;

    padding: 13px 19px !important;

    border-radius: 8px;

    margin-left: 8px;

    font-weight: 800 !important;

    box-shadow:
        0 8px 20px rgba(245,180,0,0.2);
}

.apply-button:hover {

    background: var(--primary);

    color: var(--white) !important;

    transform: translateY(-2px);
}

.apply-button i {

    margin-left: 5px;
}


/* ==========================================================
   MOBILE MENU BUTTON
========================================================== */

.mobile-menu-button {

    display: none;

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 8px;

    background: var(--primary);

    color: var(--white);

    font-size: 25px;
}


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

.mobile-brand {

    display: flex;

    align-items: center;

    gap: 10px;
}

.mobile-brand img {

    width: 48px;

    height: 48px;

    object-fit: contain;
}

.mobile-brand strong {

    display: block;

    color: var(--primary-dark);

    font-size: 14px;
}

.mobile-brand span {

    display: block;

    color: var(--yellow-dark);

    font-size: 12px;

    font-weight: 700;
}


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

.mobile-nav {

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.mobile-nav a {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 13px 14px;

    border-radius: 8px;

    color: var(--dark);

    font-weight: 600;
}

.mobile-nav a:hover {

    background: var(--primary-light);

    color: var(--primary);
}

.mobile-nav i {

    color: var(--primary);

    font-size: 18px;
}

.mobile-nav .mobile-apply {

    justify-content: center;

    background: var(--yellow);

    color: var(--dark);

    margin-top: 15px;
}


/* ==========================================================
   HERO
========================================================== */

.hero-section {

    position: relative;

    background:
        linear-gradient(
            120deg,
            #eef5ff 0%,
            #ffffff 55%,
            #fff8df 100%
        );

    padding: 80px 0 115px;

    overflow: hidden;
}

.hero-content {

    position: relative;

    z-index: 5;
}

.hero-small-title {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.3px;

    margin-bottom: 18px;
}

.hero-small-title span {

    width: 30px;

    height: 3px;

    background: var(--yellow);

    border-radius: 5px;
}

.hero-content h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(44px, 5.3vw, 72px);

    line-height: 1.05;

    color: var(--dark);

    font-weight: 800;

    margin-bottom: 25px;
}

.hero-content h2 span {

    color: var(--primary);
}

.hero-content > p {

    max-width: 620px;

    font-size: 18px;

    line-height: 1.8;

    color: var(--text);

    margin-bottom: 30px;
}


/* ==========================================================
   HERO BUTTONS
========================================================== */

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}

.btn-main {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 14px 24px;

    background: var(--primary);

    color: var(--white);

    border-radius: 8px;

    font-size: 15px;

    font-weight: 800;

    transition: .3s;

    border: 2px solid var(--primary);
}

.btn-main:hover {

    background: var(--primary-dark);

    color: var(--white);

    transform: translateY(-3px);

    box-shadow: var(--shadow-sm);
}

.btn-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 14px 24px;

    background: var(--white);

    color: var(--primary);

    border: 2px solid var(--primary);

    border-radius: 8px;

    font-size: 15px;

    font-weight: 800;

    transition: .3s;
}

.btn-outline:hover {

    background: var(--yellow);

    border-color: var(--yellow);

    color: var(--dark);

    transform: translateY(-3px);
}


/* ==========================================================
   HERO TRUST
========================================================== */

.hero-trust {

    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 30px;
}

.trust-item {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px;

    font-weight: 600;

    color: var(--dark);
}

.trust-item i {

    color: var(--yellow-dark);

    font-size: 19px;
}


/* ==========================================================
   HERO IMAGE
========================================================== */

.hero-image-wrapper {

    position: relative;

    padding: 15px 15px 30px 30px;
}

.hero-image {

    position: relative;

    z-index: 3;

    height: 520px;

    overflow: hidden;

    border-radius: 18px;

    box-shadow: var(--shadow-lg);
}

.hero-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(8,45,107,.25)
        );
}

.hero-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* ==========================================================
   HERO FLOATING CARD
========================================================== */

.hero-floating-card {

    position: absolute;

    z-index: 10;

    left: 0;

    bottom: 0;

    background: var(--white);

    padding: 16px 20px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    gap: 12px;

    box-shadow: var(--shadow-md);

    max-width: 300px;
}

.floating-icon {

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    border-radius: 10px;

    background: var(--yellow);

    color: var(--dark);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;
}

.hero-floating-card strong {

    display: block;

    color: var(--dark);

    font-size: 14px;
}

.hero-floating-card span {

    display: block;

    color: var(--text);

    font-size: 12px;

    margin-top: 2px;
}


/* ==========================================================
   HERO DECORATIONS
========================================================== */

.hero-yellow-circle {

    position: absolute;

    z-index: 1;

    width: 170px;

    height: 170px;

    right: -40px;

    top: -35px;

    border-radius: 50%;

    background: var(--yellow);
}

.hero-shape {

    position: absolute;

    border-radius: 50%;
}

.hero-shape-one {

    width: 300px;

    height: 300px;

    background: rgba(18,63,140,.05);

    left: -150px;

    top: 100px;
}

.hero-shape-two {

    width: 200px;

    height: 200px;

    background: rgba(245,180,0,.08);

    right: -100px;

    bottom: 30px;
}

.hero-bottom {

    position: absolute;

    left: -5%;

    right: -5%;

    bottom: -70px;

    height: 130px;

    background: var(--white);

    border-radius: 50% 50% 0 0;
}


/* ==========================================================
   FEATURE SECTION
========================================================== */

.feature-section {

    position: relative;

    margin-top: -5px;

    z-index: 20;
}

.feature-wrapper {

    background: var(--white);

    box-shadow: var(--shadow-md);

    border-radius: 15px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    overflow: hidden;
}

.feature-card {

    padding: 30px;

    display: flex;

    gap: 18px;

    align-items: flex-start;

    border-right: 1px solid var(--border);

    transition: .3s;
}

.feature-card:last-child {

    border-right: none;
}

.feature-card:hover {

    background: var(--primary-light);

    transform: translateY(-4px);
}

.feature-icon {

    width: 55px;

    height: 55px;

    flex-shrink: 0;

    border-radius: 12px;

    background: var(--primary);

    color: var(--white);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 23px;
}

.feature-icon.yellow-icon {

    background: var(--yellow);

    color: var(--dark);
}

.feature-card h3 {

    color: var(--dark);

    font-size: 18px;

    font-weight: 800;

    margin-bottom: 5px;
}

.feature-card p {

    color: var(--text);

    font-size: 13px;

    line-height: 1.6;

    margin: 0;
}


/* ==========================================================
   ABOUT
========================================================== */

.about-section {

    padding: 110px 0;
}

.about-image-area {

    position: relative;

    padding: 0 30px 30px 0;
}

.about-main-image {

    height: 520px;

    overflow: hidden;

    border-radius: 18px;

    position: relative;

    z-index: 2;

    box-shadow: var(--shadow-md);
}

.about-main-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.about-experience {

    position: absolute;

    z-index: 5;

    right: 0;

    bottom: 0;

    width: 190px;

    padding: 20px;

    background: var(--yellow);

    border-radius: 12px;

    color: var(--dark);

    box-shadow: var(--shadow-md);
}

.about-experience strong {

    display: block;

    font-size: 42px;

    line-height: 1;

    font-weight: 800;
}

.about-experience span {

    display: block;

    margin-top: 7px;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.4;
}

.about-pattern {

    position: absolute;

    left: -20px;

    bottom: 10px;

    width: 150px;

    height: 150px;

    background-image:
        radial-gradient(
            var(--yellow) 2px,
            transparent 2px
        );

    background-size: 15px 15px;

    opacity: .4;
}


/* ==========================================================
   SECTION HEADINGS
========================================================== */

.section-heading {

    max-width: 650px;
}

.section-heading.center {

    max-width: 720px;

    margin-left: auto;

    margin-right: auto;

    text-align: center;
}

.section-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--primary);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    margin-bottom: 14px;
}

.section-label::before {

    content: "";

    width: 30px;

    height: 3px;

    background: var(--yellow);

    border-radius: 5px;
}

.section-heading h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(36px, 4vw, 52px);

    line-height: 1.15;

    color: var(--dark);

    font-weight: 800;

    margin-bottom: 20px;
}

.section-heading h2 span {

    color: var(--primary);
}

.section-heading p {

    font-size: 16px;

    line-height: 1.85;

    margin-bottom: 15px;
}


/* ==========================================================
   ABOUT POINTS
========================================================== */

.about-points {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 12px;

    margin: 25px 0 30px;
}

.about-points > div {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--dark);

    font-size: 14px;

    font-weight: 600;
}

.about-points i {

    color: var(--yellow-dark);

    font-size: 17px;
}

.about-button {

    margin-top: 5px;
}


/* ==========================================================
   STATISTICS
========================================================== */

.stats-section {

    padding: 75px 0;

    background: var(--primary-dark);

    position: relative;

    overflow: hidden;
}

.stats-section::before {

    content: "";

    position: absolute;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    background: rgba(255,255,255,.03);

    left: -200px;

    top: -200px;
}

.stat-box {

    text-align: center;

    color: var(--white);

    padding: 15px;
}

.stat-icon {

    width: 52px;

    height: 52px;

    margin: 0 auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.08);

    color: var(--yellow);

    font-size: 21px;
}

.stat-box strong {

    display: block;

    font-size: 42px;

    line-height: 1;

    font-weight: 800;
}

.stat-box span {

    display: block;

    margin-top: 8px;

    color: rgba(255,255,255,.7);

    font-size: 14px;
}


/* ==========================================================
   WHY CHOOSE US
========================================================== */

.why-section {

    padding: 105px 0;

    background: var(--light);
}

.why-section .section-heading {

    margin-bottom: 50px;
}

.why-card {

    position: relative;

    background: var(--white);

    padding: 38px;

    border-radius: 15px;

    border: 1px solid var(--border);

    min-height: 290px;

    overflow: hidden;

    transition: .3s;
}

.why-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow-md);
}

.why-card.active-card {

    background: var(--primary);

    border-color: var(--primary);

    color: var(--white);
}

.why-number {

    position: absolute;

    right: 25px;

    top: 15px;

    font-size: 60px;

    line-height: 1;

    font-weight: 800;

    color: rgba(18,63,140,.07);
}

.active-card .why-number {

    color: rgba(255,255,255,.1);
}

.why-icon {

    width: 60px;

    height: 60px;

    border-radius: 12px;

    background: var(--yellow);

    color: var(--dark);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

    margin-bottom: 25px;
}

.why-card h3 {

    color: var(--dark);

    font-size: 22px;

    font-weight: 800;

    margin-bottom: 12px;
}

.active-card h3 {

    color: var(--white);
}

.why-card p {

    font-size: 15px;

    line-height: 1.75;
}

.active-card p {

    color: rgba(255,255,255,.75);
}


/* ==========================================================
   FACILITIES
========================================================== */

.facilities-section {

    padding: 105px 0;
}

.facilities-section .section-heading {

    margin-bottom: 50px;
}

.facility-card {

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 15px;

    overflow: hidden;

    transition: .3s;

    height: 100%;
}

.facility-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow-md);
}

.facility-image {

    height: 245px;

    overflow: hidden;
}

.facility-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;
}

.facility-card:hover .facility-image img {

    transform: scale(1.06);
}

.facility-content {

    padding: 25px;
}

.facility-icon {

    width: 48px;

    height: 48px;

    border-radius: 10px;

    background: var(--primary-light);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;

    margin-bottom: 16px;
}

.facility-content h3 {

    color: var(--dark);

    font-size: 21px;

    font-weight: 800;

    margin-bottom: 8px;
}

.facility-content p {

    font-size: 14px;

    line-height: 1.7;

    margin-bottom: 15px;
}

.facility-content a {

    color: var(--primary);

    font-size: 14px;

    font-weight: 800;
}

.facility-content a i {

    margin-left: 4px;

    transition: .3s;
}

.facility-content a:hover i {

    margin-left: 9px;
}


/* ==========================================================
   PRINCIPAL
========================================================== */

.principal-section {

    padding: 100px 0;

    background: var(--light);
}

.principal-wrapper {

    background: var(--white);

    border-radius: 18px;

    overflow: hidden;

    display: grid;

    grid-template-columns: 40% 60%;

    box-shadow: var(--shadow-md);
}

.principal-image {

    min-height: 500px;

    overflow: hidden;
}

.principal-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}

.principal-content {

    padding: 65px;
}

.principal-content h2 {

    font-family: "Playfair Display", serif;

    color: var(--dark);

    font-size: 42px;

    line-height: 1.2;

    font-weight: 800;

    margin-bottom: 25px;
}

.principal-content h2 span {

    color: var(--primary);
}

.principal-quote {

    color: var(--primary);

    font-size: 18px;

    font-weight: 600;

    line-height: 1.8;

    padding-left: 20px;

    border-left: 4px solid var(--yellow);

    margin-bottom: 20px;
}

.principal-name {

    margin-top: 30px;

    padding-top: 20px;

    border-top: 1px solid var(--border);
}

.principal-name strong {

    display: block;

    color: var(--dark);

    font-size: 17px;
}

.principal-name span {

    display: block;

    color: var(--text);

    font-size: 13px;
}


/* ==========================================================
   GALLERY
========================================================== */

.gallery-section {

    padding: 105px 0;
}

.gallery-section .section-heading {

    margin-bottom: 45px;
}

.gallery-grid {

    display: grid;

    grid-template-columns:
        1.3fr 1fr 1fr;

    grid-template-rows:
        230px 230px;

    gap: 15px;
}

.gallery-item {

    border-radius: 12px;

    overflow: hidden;

    position: relative;
}

.gallery-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;
}

.gallery-item:hover img {

    transform: scale(1.07);
}

.gallery-large {

    grid-row: span 2;
}


/* ==========================================================
   ADMISSION
========================================================== */

.admission-section {

    padding: 30px 0 90px;
}

.admission-wrapper {

    background:
        linear-gradient(
            120deg,
            var(--primary-dark),
            var(--primary)
        );

    border-radius: 18px;

    padding: 55px 65px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    position: relative;

    overflow: hidden;
}

.admission-wrapper::after {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    border-radius: 50%;

    background: rgba(245,180,0,.12);

    right: -80px;

    top: -100px;
}

.admission-wrapper .section-label {

    color: var(--yellow);
}

.admission-wrapper h2 {

    font-family: "Playfair Display", serif;

    color: var(--white);

    font-size: 42px;

    line-height: 1.15;

    font-weight: 800;

    max-width: 650px;

    margin-bottom: 12px;
}

.admission-wrapper h2 span {

    color: var(--yellow);
}

.admission-wrapper p {

    color: rgba(255,255,255,.75);

    margin: 0;
}

.admission-button {

    position: relative;

    z-index: 2;

    flex-shrink: 0;

    background: var(--yellow);

    color: var(--dark);

    padding: 15px 24px;

    border-radius: 8px;

    font-weight: 800;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    transition: .3s;
}

.admission-button:hover {

    background: var(--white);

    color: var(--primary);

    transform: translateY(-3px);
}


/* ==========================================================
   FOOTER
========================================================== */

.footer-section {

    background: var(--primary-dark);

    color: rgba(255,255,255,.7);

    padding: 75px 0 0;
}

.footer-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;
}

.footer-brand img {

    width: 60px;

    height: 60px;

    object-fit: contain;

    background: var(--white);

    border-radius: 50%;
}

.footer-brand strong {

    display: block;

    color: var(--white);

    font-size: 15px;
}

.footer-brand span {

    display: block;

    color: var(--yellow);

    font-size: 13px;

    font-weight: 700;
}

.footer-section p {

    font-size: 14px;

    line-height: 1.8;
}

.footer-section h4 {

    color: var(--white);

    font-size: 18px;

    font-weight: 800;

    margin-bottom: 20px;
}

.footer-section ul {

    list-style: none;

    padding: 0;

    margin: 0;
}

.footer-section li {

    margin-bottom: 10px;
}

.footer-section li a {

    color: rgba(255,255,255,.68);

    font-size: 14px;

    transition: .3s;
}

.footer-section li a:hover {

    color: var(--yellow);

    padding-left: 5px;
}


/* ==========================================================
   FOOTER SOCIAL
========================================================== */

.footer-social {

    display: flex;

    gap: 9px;

    margin-top: 20px;
}

.footer-social a {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.08);

    color: var(--white);

    transition: .3s;
}

.footer-social a:hover {

    background: var(--yellow);

    color: var(--dark);

    transform: translateY(-3px);
}


/* ==========================================================
   FOOTER CONTACT
========================================================== */

.footer-contact {

    display: flex;

    flex-direction: column;

    gap: 17px;
}

.footer-contact > div {

    display: flex;

    gap: 12px;

    align-items: flex-start;
}

.footer-contact i {

    color: var(--yellow);

    font-size: 18px;
}

.footer-contact span {

    font-size: 14px;

    line-height: 1.6;
}


/* ==========================================================
   FOOTER BOTTOM
========================================================== */

.footer-bottom {

    margin-top: 55px;

    padding: 20px 0;

    border-top:
        1px solid rgba(255,255,255,.12);

    display: flex;

    justify-content: space-between;

    gap: 20px;

    font-size: 12px;
}

.footer-bottom a {

    color: var(--yellow);

    font-weight: 700;
}


/* ==========================================================
   RESPONSIVE - 1199
========================================================== */

@media (max-width: 1199px) {

    .desktop-nav {

        gap: 0;
    }

    .desktop-nav > a {

        padding-left: 7px;

        padding-right: 7px;

        font-size: 13px;
    }

    .school-name h1 {

        font-size: 17px;
    }

}


/* ==========================================================
   RESPONSIVE - 991
========================================================== */

@media (max-width: 991px) {

    .top-right {

        display: none;
    }

    .top-bar-content {

        justify-content: center;
    }

    .desktop-nav {

        display: none;
    }

    .mobile-menu-button {

        display: flex;

        align-items: center;

        justify-content: center;
    }

    .hero-section {

        padding: 65px 0 100px;
    }

    .hero-content {

        text-align: center;
    }

    .hero-small-title {

        justify-content: center;
    }

    .hero-content > p {

        margin-left: auto;

        margin-right: auto;
    }

    .hero-buttons {

        justify-content: center;
    }

    .hero-trust {

        justify-content: center;
    }

    .hero-image-wrapper {

        max-width: 650px;

        margin: 20px auto 0;
    }

    .feature-wrapper {

        grid-template-columns: 1fr;
    }

    .feature-card {

        border-right: none;

        border-bottom: 1px solid var(--border);
    }

    .feature-card:last-child {

        border-bottom: none;
    }

    .about-section {

        padding: 80px 0;
    }

    .principal-wrapper {

        grid-template-columns: 1fr;
    }

    .principal-image {

        height: 450px;

        min-height: 0;
    }

    .principal-content {

        padding: 45px;
    }

    .admission-wrapper {

        padding: 45px;
    }

}


/* ==========================================================
   RESPONSIVE - 767
========================================================== */

@media (max-width: 767px) {

    .top-bar {

        font-size: 11px;
    }

    .top-left {

        gap: 12px;
    }

    .header-content {

        min-height: 80px;
    }

    .school-logo {

        width: 52px;

        height: 52px;
    }

    .school-logo img {

        max-height: 52px;
    }

    .school-name h1 {

        font-size: 14px;
    }

    .school-name span {

        font-size: 11px;
    }

    .hero-content h2 {

        font-size: 43px;
    }

    .hero-content > p {

        font-size: 15px;
    }

    .hero-image {

        height: 400px;
    }

    .hero-floating-card {

        max-width: 260px;

        padding: 12px 15px;
    }

    .hero-yellow-circle {

        width: 110px;

        height: 110px;
    }

    .about-section,
    .why-section,
    .facilities-section,
    .principal-section,
    .gallery-section {

        padding: 70px 0;
    }

    .about-main-image {

        height: 420px;
    }

    .about-points {

        grid-template-columns: 1fr;
    }

    .section-heading h2 {

        font-size: 35px;
    }

    .stat-box strong {

        font-size: 34px;
    }

    .why-card {

        min-height: auto;

        padding: 30px;
    }

    .principal-content {

        padding: 35px 25px;
    }

    .principal-content h2 {

        font-size: 34px;
    }

    .gallery-grid {

        grid-template-columns: 1fr 1fr;

        grid-template-rows:
            200px 200px 200px;
    }

    .gallery-large {

        grid-column: span 2;

        grid-row: span 1;
    }

    .admission-wrapper {

        flex-direction: column;

        align-items: flex-start;

        padding: 35px 25px;
    }

    .admission-wrapper h2 {

        font-size: 34px;
    }

    .footer-bottom {

        flex-direction: column;

        text-align: center;
    }

}


/* ==========================================================
   RESPONSIVE - 480
========================================================== */

@media (max-width: 480px) {

    .top-left span:last-child {

        display: none;
    }

    .school-name h1 {

        font-size: 13px;
    }

    .hero-section {

        padding-top: 50px;
    }

    .hero-content h2 {

        font-size: 38px;
    }

    .hero-buttons {

        flex-direction: column;

        width: 100%;
    }

    .hero-buttons a {

        width: 100%;
    }

    .hero-trust {

        flex-direction: column;

        gap: 10px;
    }

    .hero-image-wrapper {

        padding: 10px 10px 30px;
    }

    .hero-image {

        height: 350px;

        border-radius: 12px;
    }

    .hero-floating-card {

        left: 0;

        bottom: 0;
    }

    .feature-card {

        padding: 24px 20px;
    }

    .about-main-image {

        height: 350px;
    }

    .about-experience {

        width: 160px;

        padding: 15px;
    }

    .about-experience strong {

        font-size: 34px;
    }

    .facility-image {

        height: 210px;
    }

    .gallery-grid {

        grid-template-columns: 1fr;

        grid-template-rows:
            repeat(5, 220px);
    }

    .gallery-large {

        grid-column: span 1;
    }

    .admission-wrapper h2 {

        font-size: 30px;
    }

}
/* ==========================================================
   ABOUT / WELCOME SECTION
========================================================== */

.about-welcome-section {

    padding: 90px 0;

    background: #eefbfc;
}


/* ==========================================================
   LEFT CONTENT
========================================================== */

.about-welcome-content {

    padding: 10px 25px 10px 0;
}

.about-label {

    display: flex;

    align-items: center;

    gap: 9px;

    color: var(--primary);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    margin-bottom: 12px;
}

.about-label span {

    width: 30px;

    height: 3px;

    background: var(--yellow);

    border-radius: 5px;
}


.about-welcome-content h2 {

    font-family: "Playfair Display", serif;

    color: #17659a;

    font-size: clamp(34px, 3.4vw, 48px);

    line-height: 1.2;

    font-weight: 700;

    margin-bottom: 25px;
}

.about-welcome-content h2 span {

    display: inline;

    color: #17659a;
}


.about-welcome-content p {

    color: #343b42;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 17px;

    line-height: 1.75;

    text-align: justify;

    margin-bottom: 17px;
}


/* ==========================================================
   READ MORE BUTTON
========================================================== */

.about-read-more {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: var(--yellow);

    color: #ffffff;

    padding: 12px 22px;

    border-radius: 5px;

    font-size: 14px;

    font-weight: 700;

    margin-top: 10px;

    box-shadow:
        0 5px 15px rgba(245,180,0,.25);

    transition: all .3s ease;
}

.about-read-more:hover {

    background: var(--primary);

    color: #ffffff;

    transform: translateY(-2px);
}

.about-read-more i {

    transition: .3s;
}

.about-read-more:hover i {

    transform: translateX(4px);
}


/* ==========================================================
   RIGHT ACTION BUTTONS
========================================================== */

.about-action-buttons {

    display: flex;

    flex-direction: column;

    gap: 14px;

    height: 100%;
}


.about-action {

    min-height: 78px;

    display: flex;

    align-items: stretch;

    position: relative;

    overflow: hidden;

    color: #ffffff;

    border-radius: 2px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.about-action:hover {

    color: #ffffff;

    transform: translateX(-5px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.13);
}


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

.about-action .action-icon {

    width: 72px;

    min-width: 72px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0,0,0,.15);

    font-size: 24px;
}


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

.about-action .action-text {

    flex: 1;

    display: flex;

    justify-content: center;

    flex-direction: column;

    padding: 10px 14px;
}


.about-action .action-text strong {

    font-size: 17px;

    line-height: 1.3;

    font-weight: 700;
}


.about-action .action-text small {

    display: block;

    font-size: 11px;

    opacity: .85;

    margin-top: 3px;

    line-height: 1.3;
}


/* ==========================================================
   ACTION ARROW
========================================================== */

.about-action .action-arrow {

    width: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 17px;

    opacity: .8;

    transition: .3s;
}


.about-action:hover .action-arrow {

    transform: translateX(4px);

    opacity: 1;
}


/* ==========================================================
   BUTTON COLORS
========================================================== */

.admission-action {

    background:
        linear-gradient(
            90deg,
            #d90909,
            #e74b16
        );
}


.prospectus-action {

    background:
        linear-gradient(
            90deg,
            #e87900,
            #f19a00
        );
}


.notice-action {

    background:
        linear-gradient(
            90deg,
            #008c36,
            #14a94d
        );
}


.result-action {

    background:
        linear-gradient(
            90deg,
            #b92525,
            #d94b42
        );
}


.gallery-action {

    background:
        linear-gradient(
            90deg,
            #147fa6,
            #2497bd
        );
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .about-welcome-content {

        padding-right: 0;
    }

    .about-action-buttons {

        margin-top: 15px;
    }

}


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

@media (max-width: 767px) {

    .about-welcome-section {

        padding: 65px 0;
    }

    .about-welcome-content h2 {

        font-size: 34px;
    }

    .about-welcome-content p {

        font-size: 16px;

        text-align: left;
    }

    .about-action {

        min-height: 72px;
    }

    .about-action .action-icon {

        width: 62px;

        min-width: 62px;
    }

    .about-action .action-text strong {

        font-size: 15px;
    }

}


@media (max-width: 480px) {

    .about-welcome-content h2 {

        font-size: 30px;
    }

    .about-action .action-icon {

        width: 55px;

        min-width: 55px;

        font-size: 20px;
    }

    .about-action .action-text {

        padding-left: 11px;

        padding-right: 5px;
    }

    .about-action .action-text strong {

        font-size: 13px;
    }

    .about-action .action-text small {

        font-size: 10px;
    }

    .about-action .action-arrow {

        width: 35px;
    }

}

/* ==========================================================
   STICKY ADMISSION ENQUIRY
========================================================== */

.sticky-admission {

    position: fixed;

    left: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 9999;

}


/* ==========================================================
   VERTICAL TAB
========================================================== */

.admission-tab {

    position: absolute;

    left: 0;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(0);

    width: 48px;

    height: 190px;

    border: none;

    background: var(--primary);

    color: var(--white);

    border-radius:
        0 8px 8px 0;

    cursor: pointer;

    box-shadow:
        4px 8px 25px rgba(0,0,0,.18);

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .3s;
}


.admission-tab:hover {

    background: var(--yellow);

    color: var(--dark);
}


.admission-tab span {

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


/* ==========================================================
   ADMISSION PANEL
========================================================== */

.admission-panel {

    position: absolute;

    left: 0;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(-100%);

    width: 365px;

    max-height: 88vh;

    overflow-y: auto;

    background: var(--white);

    border-radius:
        0 14px 14px 0;

    box-shadow:
        8px 15px 45px rgba(0,0,0,.22);

    opacity: 0;

    visibility: hidden;

    transition:
        transform .4s ease,
        opacity .3s ease,
        visibility .3s ease;
}


/* ==========================================================
   OPEN STATE
========================================================== */

.sticky-admission.open .admission-panel {

    transform:
        translateY(-50%)
        translateX(0);

    opacity: 1;

    visibility: visible;
}


.sticky-admission.open .admission-tab {

    transform:
        translateY(-50%)
        translateX(365px);

    background: var(--yellow);

    color: var(--dark);

    border-radius:
        0 8px 8px 0;
}


/* ==========================================================
   PANEL HEADER
========================================================== */

.admission-panel-header {

    padding: 20px 20px;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    color: var(--white);

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.admission-panel-header small {

    display: block;

    color: var(--yellow);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 3px;
}


.admission-panel-header h3 {

    margin: 0;

    font-size: 21px;

    font-weight: 800;

    color: var(--white);
}


/* ==========================================================
   CLOSE BUTTON
========================================================== */

.admission-close {

    width: 34px;

    height: 34px;

    border: none;

    border-radius: 50%;

    background:
        rgba(255,255,255,.12);

    color: var(--white);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: .3s;
}


.admission-close:hover {

    background: var(--yellow);

    color: var(--dark);

    transform: rotate(90deg);
}


/* ==========================================================
   FORM
========================================================== */

.admission-form {

    padding: 20px;
}


.form-group {

    margin-bottom: 13px;
}


.form-group label {

    display: block;

    font-size: 12px;

    color: var(--dark);

    font-weight: 700;

    margin-bottom: 5px;
}


.input-box {

    position: relative;
}


.input-box > i {

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--primary);

    z-index: 2;

    font-size: 15px;
}


.input-box .form-control {

    padding-left: 37px;
}


.admission-form .form-control {

    height: 42px;

    border: 1px solid #dfe4eb;

    border-radius: 6px;

    font-size: 13px;

    color: var(--dark);

    box-shadow: none;

    transition: .3s;
}


.admission-form .form-control:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(18,63,140,.08);
}


.admission-form select.form-control {

    appearance: auto;

    padding-left: 37px;
}


.enquiry-message {

    height: auto !important;

    resize: vertical;

    padding: 10px 12px !important;
}


/* ==========================================================
   SUBMIT
========================================================== */

.submit-enquiry {

    width: 100%;

    border: none;

    background: var(--yellow);

    color: var(--dark);

    padding: 13px;

    border-radius: 7px;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    transition: .3s;

    margin-top: 5px;
}


.submit-enquiry:hover {

    background: var(--primary);

    color: var(--white);

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(18,63,140,.18);
}


/* ==========================================================
   NOTE
========================================================== */

.admission-note {

    text-align: center;

    margin-top: 12px;

    font-size: 10px;

    color: #7a8491;
}


.admission-note i {

    color: var(--primary);

    margin-right: 3px;
}


/* ==========================================================
   SCROLLBAR
========================================================== */

.admission-panel::-webkit-scrollbar {

    width: 5px;
}


.admission-panel::-webkit-scrollbar-track {

    background: #f2f4f7;
}


.admission-panel::-webkit-scrollbar-thumb {

    background: var(--primary);

    border-radius: 10px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 767px) {

    .admission-panel {

        width: 320px;
    }

    .sticky-admission.open .admission-tab {

        transform:
            translateY(-50%)
            translateX(320px);
    }

}


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

@media (max-width: 480px) {

    .admission-panel {

        width: calc(100vw - 38px);

        max-height: 90vh;
    }

    .sticky-admission.open .admission-tab {

        transform:
            translateY(-50%)
            translateX(calc(100vw - 38px));
    }

    .admission-tab {

        width: 42px;

        height: 165px;
    }

}

/* ==========================================================
   STICKY SOCIAL / CONTACT BUTTONS
========================================================== */

.sticky-social {

    position: fixed;

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    z-index: 9998;

    display: flex;

    flex-direction: column;

    gap: 6px;
}


/* ==========================================================
   SOCIAL BUTTON
========================================================== */

.social-float {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    color: #ffffff;

    border-radius: 7px 0 0 7px;

    font-size: 20px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.15);

    transition:
        width .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.social-float:hover {

    width: 135px;

    color: #ffffff;

    box-shadow:
        0 8px 25px rgba(0,0,0,.22);
}


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

.social-float i {

    width: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;

    justify-content: center;
}


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

.social-float span {

    position: absolute;

    left: 48px;

    white-space: nowrap;

    font-size: 12px;

    font-weight: 700;

    opacity: 0;

    transform: translateX(10px);

    transition:
        opacity .2s ease,
        transform .2s ease;
}


.social-float:hover span {

    opacity: 1;

    transform: translateX(0);
}


/* ==========================================================
   WHATSAPP
========================================================== */

.whatsapp-float {

    background: #25D366;
}


/* ==========================================================
   CALL
========================================================== */

.call-float {

    background: #123f8c;
}


/* ==========================================================
   FACEBOOK
========================================================== */

.facebook-float {

    background: #1877F2;
}


/* ==========================================================
   YOUTUBE
========================================================== */

.youtube-float {

    background: #FF0000;
}


/* ==========================================================
   HOVER
========================================================== */

.whatsapp-float:hover {

    background: #20b957;
}

.call-float:hover {

    background: #082d6b;
}

.facebook-float:hover {

    background: #0d65d9;
}

.youtube-float:hover {

    background: #d90000;
}


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

@media (max-width: 576px) {

    .sticky-social {

        right: 0;

        gap: 4px;
    }

    .social-float {

        width: 42px;

        height: 42px;

        font-size: 17px;
    }

    .social-float i {

        width: 42px;

        min-width: 42px;
    }

    /*
       On mobile don't expand the buttons.
       This keeps the screen clean.
    */

    .social-float:hover {

        width: 42px;
    }

    .social-float span {

        display: none;
    }

}

/* ==========================================================
   HOME PAGE SLIDER
========================================================== */

.home-slider {

    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--primary-dark);
}


/* ==========================================================
   SLIDER ITEM
========================================================== */

.home-slider .carousel-item {

    position: relative;

    height: 650px;

    overflow: hidden;
}


/* ==========================================================
   SLIDER IMAGE
========================================================== */

.slider-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;
}

.slider-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* ==========================================================
   DARK OVERLAY
========================================================== */

.slider-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 30, 72, .88) 0%,
            rgba(7, 42, 92, .70) 38%,
            rgba(7, 42, 92, .28) 72%,
            rgba(7, 42, 92, .10) 100%
        );

    z-index: 2;
}


/* ==========================================================
   SLIDER CONTAINER
========================================================== */

.slider-container {

    position: relative;

    height: 100%;

    display: flex;

    align-items: center;

    z-index: 5;
}


/* ==========================================================
   SLIDER CONTENT
========================================================== */

.slider-content {

    max-width: 720px;

    color: var(--white);

    padding-top: 15px;
}


/* ==========================================================
   SMALL TITLE
========================================================== */

.slider-small-title {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--yellow);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    margin-bottom: 18px;
}

.slider-small-title span {

    display: block;

    width: 35px;

    height: 3px;

    background: var(--yellow);

    border-radius: 5px;
}


/* ==========================================================
   MAIN HEADING
========================================================== */

.slider-content h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 5.5vw, 76px);

    line-height: 1.04;

    font-weight: 800;

    color: var(--white);

    margin-bottom: 22px;

    letter-spacing: -.5px;
}

.slider-content h2 span {

    color: var(--yellow);
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.slider-content p {

    max-width: 650px;

    font-size: 18px;

    line-height: 1.75;

    color: rgba(255,255,255,.88);

    margin-bottom: 30px;
}


/* ==========================================================
   BUTTONS
========================================================== */

.slider-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-wrap: wrap;
}


/* PRIMARY BUTTON */

.slider-btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 14px 25px;

    background: var(--white);

    color: var(--primary-dark);

    border: 2px solid var(--white);

    border-radius: 7px;

    font-size: 15px;

    font-weight: 800;

    transition: .3s;
}

.slider-btn-primary:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: var(--white);

    transform: translateY(-3px);
}


/* YELLOW BUTTON */

.slider-btn-yellow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 14px 25px;

    background: var(--yellow);

    color: var(--dark);

    border: 2px solid var(--yellow);

    border-radius: 7px;

    font-size: 15px;

    font-weight: 800;

    transition: .3s;
}

.slider-btn-yellow:hover {

    background: var(--white);

    border-color: var(--white);

    color: var(--primary-dark);

    transform: translateY(-3px);
}


/* ==========================================================
   SLIDER ARROWS
========================================================== */

.home-slider .carousel-control-prev,
.home-slider .carousel-control-next {

    width: 70px;

    opacity: 1;

    z-index: 10;
}


.slider-arrow {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: rgba(255,255,255,.13);

    border: 1px solid rgba(255,255,255,.35);

    color: var(--white);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;

    backdrop-filter: blur(5px);

    transition: .3s;
}

.carousel-control-prev:hover .slider-arrow,
.carousel-control-next:hover .slider-arrow {

    background: var(--yellow);

    border-color: var(--yellow);

    color: var(--dark);
}


/* ==========================================================
   INDICATORS
========================================================== */

.home-slider .carousel-indicators {

    z-index: 10;

    bottom: 30px;

    margin-bottom: 0;

    justify-content: flex-start;

    left: calc((100% - 1240px) / 2);

    right: auto;

    width: auto;

    margin-left: 0;
}


.home-slider .carousel-indicators button {

    width: 32px;

    height: 4px;

    margin: 0 4px;

    border: none;

    border-radius: 5px;

    background: rgba(255,255,255,.45);

    opacity: 1;

    transition: .3s;
}


.home-slider .carousel-indicators button.active {

    width: 55px;

    background: var(--yellow);
}


/* ==========================================================
   SLIDE ANIMATION
========================================================== */

.carousel-fade .carousel-item {

    transition:
        opacity .8s ease-in-out;
}


.carousel-item.active .slider-content {

    animation:
        sliderContentUp .9s ease both;
}


@keyframes sliderContentUp {

    from {

        opacity: 0;

        transform: translateY(35px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==========================================================
   IMAGE ZOOM
========================================================== */

.carousel-item.active .slider-image img {

    animation:
        sliderImageZoom 7s ease-out both;
}


@keyframes sliderImageZoom {

    from {

        transform: scale(1.08);

    }

    to {

        transform: scale(1);

    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .home-slider .carousel-item {

        height: 590px;
    }

    .slider-content {

        max-width: 650px;

        margin: 0 auto;

        text-align: center;
    }

    .slider-small-title {

        justify-content: center;
    }

    .slider-content p {

        margin-left: auto;

        margin-right: auto;
    }

    .slider-buttons {

        justify-content: center;
    }

    .home-slider .carousel-indicators {

        left: 50%;

        transform: translateX(-50%);

        justify-content: center;

        width: 100%;
    }

}


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

@media (max-width: 767px) {

    .home-slider .carousel-item {

        height: 570px;
    }

    .slider-overlay {

        background:
            linear-gradient(
                180deg,
                rgba(5,30,72,.48),
                rgba(5,30,72,.88)
            );
    }

    .slider-content {

        padding: 30px 15px 45px;
    }

    .slider-small-title {

        font-size: 11px;

        letter-spacing: 1.2px;
    }

    .slider-content h2 {

        font-size: 43px;

        line-height: 1.08;
    }

    .slider-content p {

        font-size: 15px;

        line-height: 1.7;
    }

    .slider-buttons {

        flex-direction: column;

        width: 100%;
    }

    .slider-buttons a {

        width: 100%;

        max-width: 250px;
    }

    .home-slider .carousel-control-prev,
    .home-slider .carousel-control-next {

        width: 45px;
    }

    .slider-arrow {

        width: 36px;

        height: 36px;

        font-size: 15px;
    }

    .home-slider .carousel-indicators {

        bottom: 18px;
    }

}


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

@media (max-width: 480px) {

    .home-slider .carousel-item {

        height: 535px;
    }

    .slider-content h2 {

        font-size: 36px;
    }

    .slider-content p {

        font-size: 14px;

        margin-bottom: 22px;
    }

    .slider-small-title {

        margin-bottom: 13px;
    }

    .slider-btn-primary,
    .slider-btn-yellow {

        padding: 12px 20px;

        font-size: 14px;
    }

    .home-slider .carousel-control-prev,
    .home-slider .carousel-control-next {

        display: none;
    }

}

/* ==========================================================
   FACILITIES SECTION
========================================================== */

.facilities-section {

    padding: 100px 0;

    background: #fffdf3;
}


/* ==========================================================
   FACILITIES HEADING
========================================================== */

.facilities-heading {

    max-width: 760px;

    margin: 0 auto 50px;

    text-align: center;
}


.facilities-heading .section-label {

    justify-content: center;
}


.facilities-heading h2 {

    font-family: "Playfair Display", serif;

    color: var(--primary-dark);

    font-size: clamp(36px, 4vw, 52px);

    line-height: 1.15;

    font-weight: 800;

    margin-bottom: 18px;
}


.facilities-heading h2 span {

    color: var(--primary);
}


.facilities-heading p {

    color: var(--text);

    font-size: 16px;

    line-height: 1.8;

    max-width: 700px;

    margin: 0 auto;
}


/* ==========================================================
   FACILITY BOX
========================================================== */

.facility-box {

    background: var(--white);

    height: 100%;

    box-shadow:
        0 8px 25px rgba(20,45,80,.07);

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.facility-box:hover {

    transform: translateY(-6px);

    box-shadow:
        0 18px 40px rgba(20,45,80,.14);
}


/* ==========================================================
   FACILITY TITLE
========================================================== */

.facility-title {

    height: 67px;

    background: #344f88;

    color: var(--white);

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 10px 15px;

    font-family: "Playfair Display", serif;

    font-size: 23px;

    font-weight: 700;

    line-height: 1.2;
}


/* ==========================================================
   FACILITY IMAGE
========================================================== */

.facility-image {

    height: 270px;

    overflow: hidden;

    position: relative;
}


.facility-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform .6s ease;
}


.facility-box:hover .facility-image img {

    transform: scale(1.06);
}


/* ==========================================================
   IMAGE OVERLAY
========================================================== */

.facility-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 65%,
            rgba(0,0,0,.12)
        );

    pointer-events: none;
}


/* ==========================================================
   FACILITY DESCRIPTION
========================================================== */

.facility-description {

    min-height: 122px;

    padding: 24px 25px;

    color: #566576;

    font-size: 16px;

    line-height: 1.65;

    background: var(--white);
}


/* ==========================================================
   FACILITY CARD TOP BORDER
========================================================== */

.facility-box::before {

    content: "";

    display: block;

    height: 4px;

    background: var(--yellow);

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .facilities-section {

        padding: 80px 0;
    }

    .facility-image {

        height: 250px;
    }

}


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

@media (max-width: 767px) {

    .facilities-section {

        padding: 65px 0;
    }

    .facilities-heading {

        margin-bottom: 35px;
    }

    .facilities-heading h2 {

        font-size: 35px;
    }

    .facility-title {

        height: 62px;

        font-size: 21px;
    }

    .facility-image {

        height: 230px;
    }

    .facility-description {

        min-height: auto;

        font-size: 15px;

        padding: 20px;
    }

}

/* ==========================================================
   LEADERSHIP SECTION
========================================================== */

.leadership-section {

    padding: 100px 0;

    background: #ffffff;
}


/* ==========================================================
   SECTION HEADING
========================================================== */

.leadership-heading {

    max-width: 760px;

    margin: 0 auto 50px;

    text-align: center;
}


.leadership-heading .section-label {

    justify-content: center;
}


.leadership-heading h2 {

    font-family: "Playfair Display", serif;

    color: var(--primary-dark);

    font-size: clamp(36px, 4vw, 52px);

    line-height: 1.15;

    font-weight: 800;

    margin-bottom: 18px;
}


.leadership-heading h2 span {

    color: var(--primary);
}


.leadership-heading p {

    max-width: 700px;

    margin: 0 auto;

    color: #687586;

    font-size: 16px;

    line-height: 1.8;
}


/* ==========================================================
   LEADER CARD
========================================================== */

.leader-card {

    height: 100%;

    background: #ffffff;

    border: 1px solid #e7ebf0;

    border-radius: 8px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(20,45,80,.07);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.leader-card:hover {

    transform: translateY(-8px);

    box-shadow:
        0 18px 40px rgba(20,45,80,.14);
}


/* ==========================================================
   LEADER IMAGE
========================================================== */

.leader-image {

    height: 330px;

    position: relative;

    overflow: hidden;

    background: #eef3f8;
}


.leader-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center top;

    transition:
        transform .5s ease;
}


.leader-card:hover .leader-image img {

    transform: scale(1.04);
}


/* ==========================================================
   DESIGNATION BADGE
========================================================== */

.leader-designation {

    position: absolute;

    left: 20px;

    bottom: 20px;

    background: var(--yellow);

    color: #17202a;

    padding: 9px 18px;

    border-radius: 4px;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.2px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.15);
}


/* ==========================================================
   LEADER CONTENT
========================================================== */

.leader-content {

    padding: 25px 25px 27px;

    text-align: left;
}


.leader-content h3 {

    color: var(--primary-dark);

    font-family: "Playfair Display", serif;

    font-size: 25px;

    font-weight: 700;

    margin-bottom: 5px;
}


.leader-content h4 {

    color: var(--primary);

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 15px;
}


.leader-content p {

    color: #687586;

    font-size: 15px;

    line-height: 1.7;

    margin-bottom: 20px;
}


/* ==========================================================
   READ MESSAGE
========================================================== */

.leader-read-more {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--primary);

    font-size: 13px;

    font-weight: 800;

    border-bottom: 2px solid var(--yellow);

    padding-bottom: 4px;

    transition: .3s;
}


.leader-read-more:hover {

    color: var(--yellow);

    gap: 12px;
}


/* ==========================================================
   OPTIONAL CARD TOP ACCENT
========================================================== */

.leader-card::before {

    content: "";

    display: block;

    height: 4px;

    background: var(--yellow);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .leadership-section {

        padding: 80px 0;
    }

    .leader-image {

        height: 310px;
    }

}


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

@media (max-width: 767px) {

    .leadership-section {

        padding: 65px 0;
    }

    .leadership-heading {

        margin-bottom: 35px;
    }

    .leadership-heading h2 {

        font-size: 35px;
    }

    .leader-image {

        height: 330px;
    }

}

/* ==========================================================
   NOTICE + ENQUIRY SECTION
========================================================== */

.notice-enquiry-section {

    padding: 90px 0;

    background: #f4f9fc;
}


/* ==========================================================
   MAIN WRAPPER
========================================================== */

.notice-enquiry-wrapper {

    background: #ffffff;

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 12px 40px rgba(18,63,140,.09);
}


/* ==========================================================
   LEFT NOTICE PANEL
========================================================== */

.notice-panel {

    height: 100%;

    padding: 45px 42px;

    background: #ffffff;

    border-right: 1px solid #e5ebf2;
}


/* ==========================================================
   NOTICE HEADING
========================================================== */

.notice-heading {

    margin-bottom: 25px;
}


.notice-heading .section-label {

    margin-bottom: 8px;
}


.notice-heading h2,
.enquiry-heading h2 {

    font-family: "Playfair Display", serif;

    font-size: 38px;

    line-height: 1.15;

    font-weight: 800;

    color: var(--primary-dark);

    margin: 0;
}


.notice-heading h2 span,
.enquiry-heading h2 span {

    color: var(--primary);
}


/* ==========================================================
   NOTICE LIST
========================================================== */

.notice-list {

    border-top: 1px solid #e4e9ef;
}


/* ==========================================================
   NOTICE ITEM
========================================================== */

.notice-item {

    position: relative;

    display: flex;

    align-items: center;

    gap: 17px;

    padding: 18px 5px;

    border-bottom: 1px solid #e4e9ef;

    color: inherit;

    transition: .3s;
}


.notice-item:hover {

    background: #f8fbfd;

    padding-left: 10px;

    color: inherit;
}


/* ==========================================================
   NOTICE DATE
========================================================== */

.notice-date {

    width: 58px;

    min-width: 58px;

    height: 62px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: var(--primary);

    color: #ffffff;

    border-radius: 5px;
}


.notice-date strong {

    font-size: 21px;

    line-height: 1;

    font-weight: 800;
}


.notice-date span {

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    margin-top: 4px;
}


/* ==========================================================
   NOTICE DETAILS
========================================================== */

.notice-details {

    flex: 1;

    min-width: 0;
}


.notice-details h4 {

    font-size: 16px;

    font-weight: 750;

    color: var(--primary-dark);

    line-height: 1.35;

    margin: 0 0 5px;
}


.notice-details p {

    font-size: 13px;

    color: #718096;

    line-height: 1.5;

    margin: 0;
}


/* ==========================================================
   NOTICE ARROW
========================================================== */

.notice-arrow {

    color: var(--primary);

    font-size: 15px;

    transition: .3s;
}


.notice-item:hover .notice-arrow {

    color: var(--yellow);

    transform: translateX(4px);
}


/* ==========================================================
   VIEW ALL NOTICES
========================================================== */

.view-all-notices {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 25px;

    padding: 11px 20px;

    background: var(--yellow);

    color: var(--dark);

    border-radius: 5px;

    font-size: 13px;

    font-weight: 800;

    transition: .3s;
}


.view-all-notices:hover {

    background: var(--primary);

    color: #ffffff;

    transform: translateY(-2px);
}


/* ==========================================================
   RIGHT ENQUIRY PANEL
========================================================== */

.enquiry-panel {

    height: 100%;

    padding: 45px 42px;

    background:
        linear-gradient(
            145deg,
            #eef7fb,
            #f8fcfd
        );
}


/* ==========================================================
   ENQUIRY HEADING
========================================================== */

.enquiry-heading {

    margin-bottom: 25px;
}


.enquiry-heading p {

    color: #657386;

    font-size: 14px;

    line-height: 1.65;

    margin: 12px 0 0;

    max-width: 500px;
}


/* ==========================================================
   FORM LABEL
========================================================== */

.enquiry-panel label {

    display: block;

    margin-bottom: 5px;

    color: var(--primary-dark);

    font-size: 12px;

    font-weight: 750;
}


/* ==========================================================
   INPUT
========================================================== */

.enquiry-input {

    position: relative;
}


.enquiry-input > i {

    position: absolute;

    left: 12px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--primary);

    z-index: 2;

    font-size: 14px;
}


.enquiry-input .form-control {

    height: 44px;

    padding-left: 36px;

    border: 1px solid #d7e0e8;

    border-radius: 5px;

    background: #ffffff;

    color: #333;

    font-size: 13px;

    box-shadow: none;

    transition: .3s;
}


.enquiry-input .form-control:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(18,63,140,.08);
}


.enquiry-input select.form-control {

    appearance: auto;
}


/* ==========================================================
   MESSAGE
========================================================== */

.enquiry-message {

    min-height: 85px;

    resize: vertical;

    border: 1px solid #d7e0e8;

    border-radius: 5px;

    padding: 12px;

    font-size: 13px;

    box-shadow: none;
}


.enquiry-message:focus {

    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(18,63,140,.08);
}


/* ==========================================================
   SUBMIT
========================================================== */

.enquiry-submit {

    width: 100%;

    height: 47px;

    border: none;

    border-radius: 5px;

    background: var(--primary);

    color: #ffffff;

    font-size: 14px;

    font-weight: 800;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    cursor: pointer;

    transition: .3s;
}


.enquiry-submit:hover {

    background: var(--yellow);

    color: var(--dark);

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(18,63,140,.15);
}


/* ==========================================================
   BOTTOM NOTE
========================================================== */

.enquiry-bottom-note {

    margin-top: 14px;

    text-align: center;

    color: #7b8794;

    font-size: 10px;

    line-height: 1.5;
}


.enquiry-bottom-note i {

    color: #198754;

    margin-right: 3px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .notice-enquiry-section {

        padding: 75px 0;
    }

    .notice-panel {

        border-right: none;

        border-bottom: 1px solid #e5ebf2;
    }

    .enquiry-panel {

        padding-top: 40px;
    }

}


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

@media (max-width: 767px) {

    .notice-enquiry-section {

        padding: 60px 0;
    }

    .notice-panel,
    .enquiry-panel {

        padding: 32px 22px;
    }

    .notice-heading h2,
    .enquiry-heading h2 {

        font-size: 32px;
    }

    .notice-item {

        gap: 12px;
    }

    .notice-date {

        width: 52px;

        min-width: 52px;

        height: 57px;
    }

    .notice-date strong {

        font-size: 19px;
    }

    .notice-details h4 {

        font-size: 14px;
    }

    .notice-details p {

        font-size: 12px;
    }

}


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

@media (max-width: 480px) {

    .notice-panel,
    .enquiry-panel {

        padding: 28px 17px;
    }

    .notice-item {

        align-items: flex-start;
    }

    .notice-arrow {

        display: none;
    }

}

/* ==========================================================
   TOPPERS SECTION
========================================================== */

.toppers-section {

    padding: 100px 0;

    background:
        linear-gradient(
            135deg,
            #f7fbfd 0%,
            #fffdf3 100%
        );
}


/* ==========================================================
   SECTION HEADING
========================================================== */

.toppers-heading {

    max-width: 760px;

    margin: 0 auto 50px;

    text-align: center;
}


.toppers-heading .section-label {

    justify-content: center;
}


.toppers-heading h2 {

    font-family: "Playfair Display", serif;

    font-size: clamp(38px, 4vw, 54px);

    line-height: 1.15;

    font-weight: 800;

    color: var(--primary-dark);

    margin-bottom: 17px;
}


.toppers-heading h2 span {

    color: var(--primary);
}


.toppers-heading p {

    max-width: 700px;

    margin: 0 auto;

    color: #667487;

    font-size: 16px;

    line-height: 1.8;
}


/* ==========================================================
   TOPPER PANEL
========================================================== */

.topper-panel {

    height: 100%;

    background: #ffffff;

    border-radius: 10px;

    overflow: hidden;

    border: 1px solid #e4eaf0;

    box-shadow:
        0 10px 35px rgba(20,45,80,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.topper-panel:hover {

    transform: translateY(-5px);

    box-shadow:
        0 18px 45px rgba(20,45,80,.13);
}


/* ==========================================================
   PANEL HEADER
========================================================== */

.topper-panel-header {

    min-height: 90px;

    padding: 18px 25px;

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary)
        );

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.topper-panel-header small {

    display: block;

    color: var(--yellow);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 4px;
}


.topper-panel-header h3 {

    margin: 0;

    color: #ffffff;

    font-family: "Playfair Display", serif;

    font-size: 27px;

    font-weight: 700;
}


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

.topper-class-icon {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--yellow);

    color: var(--dark);

    font-size: 23px;
}


/* ==========================================================
   MAIN TOPPER CARD
========================================================== */

.topper-main-card {

    display: flex;

    padding: 25px;

    gap: 25px;
}


/* ==========================================================
   TOPPER PHOTO
========================================================== */

.topper-photo {

    width: 210px;

    min-width: 210px;

    height: 260px;

    position: relative;

    overflow: hidden;

    border-radius: 7px;

    background: #edf2f6;
}


.topper-photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center top;

    transition: transform .5s ease;
}


.topper-panel:hover .topper-photo img {

    transform: scale(1.04);
}


/* ==========================================================
   TOPPER BADGE
========================================================== */

.topper-rank {

    position: absolute;

    left: 10px;

    bottom: 10px;

    background: var(--yellow);

    color: var(--dark);

    padding: 7px 11px;

    border-radius: 4px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}


.topper-rank i {

    margin-right: 3px;
}


/* ==========================================================
   TOPPER INFORMATION
========================================================== */

.topper-info {

    flex: 1;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.topper-session {

    display: inline-block;

    width: fit-content;

    color: var(--primary);

    background: #eef5fb;

    padding: 5px 9px;

    border-radius: 3px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    margin-bottom: 10px;
}


.topper-info h4 {

    color: var(--primary-dark);

    font-family: "Playfair Display", serif;

    font-size: 27px;

    font-weight: 700;

    margin-bottom: 8px;
}


/* ==========================================================
   PERCENTAGE
========================================================== */

.topper-percentage {

    display: flex;

    align-items: baseline;

    gap: 7px;

    margin-bottom: 12px;
}


.topper-percentage strong {

    font-size: 34px;

    line-height: 1;

    font-weight: 900;

    color: var(--primary);
}


.topper-percentage span {

    font-size: 12px;

    font-weight: 700;

    color: #7a8794;
}


.topper-info p {

    color: #687586;

    font-size: 13px;

    line-height: 1.6;

    margin-bottom: 15px;
}


/* ==========================================================
   TOPPER BUTTON
========================================================== */

.topper-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    width: fit-content;

    padding: 9px 15px;

    background: var(--yellow);

    color: var(--dark);

    border-radius: 4px;

    font-size: 11px;

    font-weight: 800;

    transition: .3s;
}


.topper-button:hover {

    background: var(--primary);

    color: #ffffff;

    transform: translateX(3px);
}


/* ==========================================================
   OTHER TOPPERS
========================================================== */

.topper-mini-list {

    display: grid;

    grid-template-columns: 1fr 1fr;

    border-top: 1px solid #e8edf2;
}


.topper-mini-card {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 15px 20px;

    transition: .3s;
}


.topper-mini-card + .topper-mini-card {

    border-left: 1px solid #e8edf2;
}


.topper-mini-card:hover {

    background: #f7fafc;
}


.topper-mini-card img {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    object-fit: cover;

    object-position: center top;
}


.topper-mini-card h5 {

    margin: 0 0 3px;

    color: var(--primary-dark);

    font-size: 13px;

    font-weight: 750;
}


.topper-mini-card span {

    color: var(--primary);

    font-size: 12px;

    font-weight: 800;
}


/* ==========================================================
   FOOTER MESSAGE
========================================================== */

.topper-footer {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 35px;

    color: var(--primary-dark);

    font-size: 14px;

    font-weight: 700;
}


.topper-footer i {

    color: var(--yellow);

    font-size: 16px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991px) {

    .toppers-section {

        padding: 80px 0;
    }

    .topper-main-card {

        gap: 20px;
    }

    .topper-photo {

        width: 180px;

        min-width: 180px;

        height: 240px;
    }

}


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

@media (max-width: 767px) {

    .toppers-section {

        padding: 65px 0;
    }

    .toppers-heading {

        margin-bottom: 35px;
    }

    .toppers-heading h2 {

        font-size: 36px;
    }

    .topper-panel-header {

        padding: 17px 20px;
    }

    .topper-panel-header h3 {

        font-size: 23px;
    }

    .topper-main-card {

        flex-direction: column;

        align-items: center;

        text-align: center;
    }

    .topper-photo {

        width: 190px;

        min-width: 190px;

        height: 235px;
    }

    .topper-info {

        align-items: center;
    }

    .topper-button {

        margin: 0 auto;
    }

}


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

@media (max-width: 480px) {

    .topper-mini-list {

        grid-template-columns: 1fr;
    }

    .topper-mini-card + .topper-mini-card {

        border-left: none;

        border-top: 1px solid #e8edf2;
    }

    .topper-footer {

        text-align: center;

        font-size: 12px;
    }

}

/* ==========================================================
   SCHOOL BRAND / LOGO
========================================================== */

.school-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    width: auto;

    text-decoration: none;

    flex-shrink: 0;
}


/* ==========================================================
   LOGO
========================================================== */

.school-logo {

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;
}


.school-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;
}


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

.school-brand-text {

    display: flex;

    flex-direction: column;

    justify-content: center;

    line-height: 1.1;

    white-space: nowrap;
}


.school-name {

    font-family: "Playfair Display", Georgia, serif;

    font-size: 32px;

    font-weight: 800;

    color: #123f8c;

    line-height: 1.15;
}


.school-subtitle {

    margin-top: 4px;

    font-family: Arial, sans-serif;

    font-size: 22px;

    font-weight: 800;

    color: #f5b400;

    letter-spacing: .2px;

    line-height: 1.2;
}

/* ==========================================================
   MAIN NAVIGATION
========================================================== */

.main-navigation {

    display: flex;

    align-items: stretch;

    list-style: none;

    padding: 0;

    margin: 0;

    height: 100%;
}


.main-navigation > li {

    position: relative;

    display: flex;

    align-items: stretch;
}


.main-navigation > li > a {

    display: flex;

    align-items: center;

    gap: 6px;

    padding: 0 20px;

    color: #12284b;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

    transition: .3s;
}


.main-navigation > li > a:hover {

    color: #f5b400;
}


/* ==========================================================
   DOWN ARROW
========================================================== */

.main-navigation > li > a i {

    font-size: 10px;

    transition: transform .3s ease;
}


.dropdown-menu-item:hover > a i {

    transform: rotate(180deg);
}


/* ==========================================================
   DROPDOWN
========================================================== */

.school-dropdown {

    position: absolute;

    top: 100%;

    left: 0;

    width: 245px;

    padding: 0;

    margin: 0;

    list-style: none;

    background: #0b3159;

    border-top: 3px solid #f5b400;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);

    z-index: 9999;

    /* Hidden initially */

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;
}


/* ==========================================================
   SHOW DROPDOWN ON MOUSE HOVER
========================================================== */

.dropdown-menu-item:hover > .school-dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* ==========================================================
   DROPDOWN ITEMS
========================================================== */

.school-dropdown li {

    width: 100%;

    border-bottom: 1px solid rgba(255,255,255,.18);
}


.school-dropdown li:last-child {

    border-bottom: none;
}


.school-dropdown li a {

    display: flex;

    align-items: center;

    min-height: 47px;

    padding: 10px 15px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.3;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        padding-left .25s ease;
}


.school-dropdown li a:hover {

    background: #f5b400;

    color: #12284b;

    padding-left: 21px;
}

/* ==========================================================
   FINAL MOBILE RESPONSIVE FIX
   KKR BALIKA INTER COLLEGE
   Add this at the VERY END of default.css
========================================================== */


/* ==========================================================
   GLOBAL MOBILE SAFETY
========================================================== */

html,
body {

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;
}


img,
iframe,
video {

    max-width: 100%;
}


/* ==========================================================
   CONTAINER
========================================================== */

@media (max-width: 767px) {

    .container {

        width: 100%;

        max-width: 100%;

        padding-left: 15px;

        padding-right: 15px;
    }

}


/* ==========================================================
   HEADER
========================================================== */

@media (max-width: 991px) {

    .header-content {

        min-height: 76px;

        width: 100%;

        gap: 10px;

        padding-left: 15px;

        padding-right: 15px;
    }


    /* Hide desktop navigation */

    .desktop-nav,
    .main-navigation {

        display: none !important;
    }


    /* Show mobile button */

    .mobile-menu-button {

        display: flex !important;

        align-items: center;

        justify-content: center;

        flex-shrink: 0;

        width: 44px;

        height: 44px;
    }


    /* School brand must be allowed to shrink */

    .school-brand {

        min-width: 0;

        max-width: calc(100% - 55px);

        flex-shrink: 1;

        gap: 9px;
    }


    .school-logo {

        width: 52px;

        height: 52px;

        min-width: 52px;

        flex-shrink: 0;
    }


    .school-logo img {

        width: 100%;

        height: 100%;

        max-height: 52px;

        object-fit: contain;
    }


    /* IMPORTANT:
       The previous 32px nowrap school-name
       is overridden here.
    */

    .school-brand-text {

        min-width: 0;

        max-width: 100%;

        white-space: normal;

        overflow: hidden;
    }


    .school-name {

        font-size: 17px !important;

        line-height: 1.1 !important;

        white-space: normal !important;

        overflow-wrap: break-word;

        word-break: normal;
    }


    .school-subtitle {

        font-size: 11px !important;

        line-height: 1.2 !important;

        white-space: normal !important;
    }


    /* If your old header uses school-name h1/span */

    .school-name h1 {

        font-size: 15px !important;

        line-height: 1.1;

        white-space: normal;

        overflow-wrap: break-word;
    }


    .school-name span {

        font-size: 10px !important;

        line-height: 1.2;

        white-space: normal;
    }

}


/* ==========================================================
   MOBILE NAVIGATION PANEL
========================================================== */

@media (max-width: 991px) {

    .mobile-nav {

        width: 100%;

        max-width: 100%;

        overflow-x: hidden;
    }


    .mobile-nav a {

        width: 100%;

        max-width: 100%;

        white-space: normal;
    }


    .mobile-nav .school-dropdown {

        position: static;

        width: 100%;

        max-width: 100%;

        transform: none;

        opacity: 1;

        visibility: visible;
    }

}


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

@media (max-width: 767px) {

    .hero-section {

        width: 100%;

        overflow: hidden;
    }


    .hero-content {

        width: 100%;

        max-width: 100%;
    }


    .hero-content h2 {

        font-size: clamp(34px, 9vw, 43px);

        word-break: normal;

        overflow-wrap: break-word;
    }


    .hero-content > p {

        max-width: 100%;

        font-size: 15px;
    }


    .hero-image-wrapper {

        width: 100%;

        max-width: 100%;
    }


    .hero-image {

        width: 100%;

        max-width: 100%;
    }

}


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

@media (max-width: 767px) {

    .home-slider {

        width: 100%;

        max-width: 100%;

        overflow: hidden;
    }


    .home-slider .carousel-item {

        width: 100%;

        max-width: 100%;

        height: 535px;
    }


    .slider-container {

        width: 100%;

        padding-left: 15px;

        padding-right: 15px;
    }


    .slider-content {

        width: 100%;

        max-width: 100%;

        padding-left: 5px;

        padding-right: 5px;
    }


    .slider-content h2 {

        font-size: clamp(32px, 9vw, 43px);

        overflow-wrap: break-word;
    }


    .slider-content p {

        max-width: 100%;
    }

}


/* ==========================================================
   BOOTSTRAP ROW SAFETY
========================================================== */

@media (max-width: 767px) {

    .row {

        --bs-gutter-x: 1.5rem;
    }


    .row > * {

        min-width: 0;
    }

}


/* ==========================================================
   ABOUT SECTION
========================================================== */

@media (max-width: 767px) {

    .about-welcome-content {

        width: 100%;

        max-width: 100%;

        padding-right: 0;
    }


    .about-welcome-content p {

        width: 100%;

        max-width: 100%;

        overflow-wrap: break-word;
    }


    .about-action-buttons {

        width: 100%;

        max-width: 100%;
    }


    .about-action {

        width: 100%;

        max-width: 100%;
    }


    .about-action .action-text {

        min-width: 0;

        overflow: hidden;
    }


    .about-action .action-text strong,
    .about-action .action-text small {

        overflow-wrap: break-word;
    }

}


/* ==========================================================
   FACILITIES
========================================================== */

@media (max-width: 767px) {

    .facility-box,
    .facility-card {

        width: 100%;

        max-width: 100%;

        overflow: hidden;
    }


    .facility-image {

        width: 100%;

        max-width: 100%;
    }


    .facility-description {

        width: 100%;

        overflow-wrap: break-word;
    }

}


/* ==========================================================
   NOTICE + ENQUIRY
========================================================== */

@media (max-width: 767px) {

    .notice-enquiry-wrapper {

        width: 100%;

        max-width: 100%;

        overflow: hidden;
    }


    .notice-panel,
    .enquiry-panel {

        width: 100%;

        max-width: 100%;

        overflow: hidden;
    }


    .notice-item {

        width: 100%;

        min-width: 0;
    }


    .notice-details {

        min-width: 0;

        overflow: hidden;
    }


    .notice-details h4,
    .notice-details p {

        overflow-wrap: break-word;
    }

}


/* ==========================================================
   LEADERSHIP
========================================================== */

@media (max-width: 767px) {

    .leader-card {

        width: 100%;

        max-width: 100%;

        overflow: hidden;
    }


    .leader-card img {

        max-width: 100%;

        height: auto;
    }

}


/* ==========================================================
   TOPPERS
========================================================== */

@media (max-width: 767px) {

    .topper-panel {

        width: 100%;

        max-width: 100%;

        overflow: hidden;
    }


    .topper-main-card {

        width: 100%;

        max-width: 100%;
    }


    .topper-info {

        min-width: 0;

        max-width: 100%;
    }


    .topper-info h4,
    .topper-info p {

        overflow-wrap: break-word;
    }

}


/* ==========================================================
   GALLERY
========================================================== */

@media (max-width: 767px) {

    .gallery-grid {

        width: 100%;

        max-width: 100%;

        overflow: hidden;
    }


    .gallery-item {

        min-width: 0;

        width: 100%;
    }

}


/* ==========================================================
   ADMISSION STICKY PANEL
========================================================== */

@media (max-width: 480px) {

    .sticky-admission {

        max-width: 100vw;

        left: 0;
    }


    .admission-panel {

        width: calc(100vw - 42px) !important;

        max-width: calc(100vw - 42px);

        overflow-x: hidden;
    }


    .admission-form {

        width: 100%;

        max-width: 100%;
    }


    .admission-panel-header {

        padding: 17px 15px;
    }


    .admission-form {

        padding: 17px 15px;
    }

}


/* ==========================================================
   SOCIAL BUTTONS
========================================================== */

@media (max-width: 576px) {

    .sticky-social {

        right: 0;

        max-width: 42px;
    }


    .social-float {

        width: 42px !important;

        min-width: 42px;

        max-width: 42px;
    }

}


/* ==========================================================
   INNER PAGE BANNER
========================================================== */

@media (max-width: 767px) {

    .inner-page-banner {

        width: 100%;

        overflow: hidden;

        padding: 45px 0;
    }


    .inner-banner-content h1 {

        font-size: clamp(34px, 9vw, 42px);

        overflow-wrap: break-word;
    }


    .inner-breadcrumb {

        flex-wrap: wrap;
    }

}


/* ==========================================================
   FOOTER
========================================================== */

@media (max-width: 767px) {

    .footer-section {

        width: 100%;

        overflow: hidden;
    }


    .footer-brand {

        max-width: 100%;
    }


    .footer-brand strong {

        overflow-wrap: break-word;
    }


    .footer-bottom {

        gap: 8px;
    }

}


/* ==========================================================
   FINAL MOBILE OVERFLOW PROTECTION
========================================================== */

@media (max-width: 767px) {

    * {

        max-width: 100%;
    }


    .container,
    .container-fluid {

        max-width: 100%;
    }


    table {

        max-width: 100%;

        display: block;

        overflow-x: auto;
    }


    input,
    select,
    textarea,
    button {

        max-width: 100%;
    }

}