/* =========================================================
   ISACC - ALBERT
   FINAL STYLE.CSS
========================================================= */

:root {
    --blue: #173b73;
    --blue-dark: #081c3a;
    --blue-light: #edf3fb;

    --red: #ed173d;
    --red-dark: #c80d2f;

    --text: #15223a;
    --muted: #6c788c;

    --white: #ffffff;
    --light: #f6f8fc;
    --border: #e4e8ef;

    --shadow: 0 18px 50px rgba(12, 35, 70, 0.11);

    --transition: 0.3s ease;
}


/* =========================================================
   RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    color: var(--text);
    background: #ffffff;
    overflow-x: hidden;
}

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

button,
input,
textarea,
select {
    font-family: inherit;
}

button {
    cursor: pointer;
}

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


/* =========================================================
   REMOVE ALL DEFAULT LIST BULLETS
========================================================= */

ul,
ol {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.nav-menu,
.nav-menu li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}


.container {
    width: min(1180px, 92%);
    margin: auto;
}

/* =========================================================
   ISACC TOP BAR - FINAL
========================================================= */

.top-bar {
    width: 100%;
    display: block !important;

    background: rgb(96, 96, 214);
    color: #fff;

    font-size: 13px;
}

.top-bar-inner {
    width: min(1450px, 96%);
    min-height: 34px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.top-left,
.top-right {
    display: flex !important;
    align-items: center;
}

.top-left {
    gap: 22px;
}

.top-right {
    gap: 13px;
}

.top-left span,
.top-right a {
    display: inline-flex !important;
    align-items: center;

    gap: 6px;

    color: #fff;
    text-decoration: none;

    white-space: nowrap;
}

.top-right a {
    transition: .2s ease;
}

.top-right a:hover {
    opacity: .8;
}

.top-bar i {
    font-size: 11px;
}

.login-divider {
    color: rgba(255, 255, 255, .65);
}


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

@media (max-width: 1100px) {

    .top-bar {
        display: block !important;
    }

    .top-bar-inner {
        width: 95%;
        gap: 12px;
    }

    .top-left {
        gap: 12px;
    }

    .top-right {
        gap: 8px;
    }

    .top-left span,
    .top-right a {
        font-size: 10px;
        gap: 4px;
    }

}


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

@media (max-width: 768px) {

    .top-bar {
        display: block !important;

        width: 100%;
        min-height: 58px;
    }

    .top-bar-inner {
        width: 100%;

        padding: 5px 6px;

        display: flex !important;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 4px;
    }


    /* ================= PHONE / TIME / EMAIL ================= */

    .top-left {
        width: 100%;

        display: flex !important;

        align-items: center;
        justify-content: center;

        flex-wrap: wrap;

        gap: 3px 10px;
    }

    .top-left span {
        display: inline-flex !important;

        align-items: center;

        color: #fff;

        font-size: 8px;

        line-height: 1.2;

        gap: 3px;
    }


    /* ================= NOTICE / STUDENT / ADMIN ================= */

    .top-right {
        width: 100%;

        display: flex !important;

        align-items: center;
        justify-content: center;

        gap: 7px;
    }

    .top-right a {
        display: inline-flex !important;

        align-items: center;
        justify-content: center;

        color: #fff;

        font-size: 8px;

        line-height: 1.2;

        gap: 3px;

        white-space: nowrap;
    }

    .top-bar i {
        font-size: 7px;
    }

    .login-divider {
        display: inline-block !important;

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

        font-size: 8px;
    }

}


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

@media (max-width: 480px) {

    .top-bar {
        min-height: 57px;
    }

    .top-bar-inner {
        padding: 5px 4px;

        gap: 4px;
    }

    .top-left {
        gap: 3px 7px;
    }

    .top-left span {
        font-size: 7.5px;
    }

    .top-right {
        gap: 5px;
    }

    .top-right a {
        font-size: 7.5px;
    }

    .top-bar i {
        font-size: 6.5px;
    }

    .login-divider {
        font-size: 7.5px;
    }

}


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

@media (max-width: 360px) {

    .top-bar {
        min-height: 55px;
    }

    .top-bar-inner {
        padding: 4px 2px;
    }

    .top-left {
        gap: 2px 5px;
    }

    .top-left span {
        font-size: 6.7px;
    }

    .top-right {
        gap: 4px;
    }

    .top-right a {
        font-size: 6.7px;
    }

    .top-bar i {
        font-size: 6px;
    }

    .login-divider {
        font-size: 6.7px;
    }

}

/* =========================================================
   MOBILE TOP BAR - LOGIN TEXT SIZE
========================================================= */

@media (max-width: 768px) {

    .top-right a {
        font-size: 10px !important;
        font-weight: 600;
        gap: 4px;
    }

    .top-right i {
        font-size: 9px !important;
    }

    .login-divider {
        font-size: 10px !important;
    }

}


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

@media (max-width: 480px) {

    .top-right {
        gap: 7px;
    }

    .top-right a {
        font-size: 9.5px !important;
    }

    .top-right i {
        font-size: 8px !important;
    }

    .login-divider {
        font-size: 9.5px !important;
    }

}


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

@media (max-width: 360px) {

    .top-right {
        gap: 5px;
    }

    .top-right a {
        font-size: 9px !important;
    }

    .top-right i {
        font-size: 7.5px !important;
    }

    .login-divider {
        font-size: 9px !important;
    }

}

/* =========================================================
   STUDENT LOGIN MAIN
========================================================= */

.student-login-main {
    min-height: calc(100vh - 110px);

    padding: 70px 0;

    display: flex;
    align-items: center;

    background:
        radial-gradient(circle at 10% 20%,
            rgba(23, 59, 115, .08),
            transparent 30%),
        radial-gradient(circle at 90% 80%,
            rgba(237, 23, 61, .07),
            transparent 30%),
        #f6f8fc;
}

.student-login-container {
    width: min(1100px, 92%);
    margin: auto;
}


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

.student-login-card {
    display: grid;

    grid-template-columns: 1fr 1fr;

    background: #fff;

    border: 1px solid #e4e8ef;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(8, 28, 58, .13);
}


/* =========================================================
   LEFT SIDE
========================================================= */

.student-login-left {
    position: relative;

    padding: 50px 45px;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            #081c3a,
            #173b73);

    color: #fff;
}

.student-login-left::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -150px;
    right: -120px;

    border: 45px solid rgba(255, 255, 255, .04);

    border-radius: 50%;
}

.student-login-left::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    left: -130px;
    bottom: -130px;

    border: 40px solid rgba(237, 23, 61, .10);

    border-radius: 50%;
}


/* Logo */

.student-login-logo {
    position: relative;
    z-index: 2;

    width: 210px;
    height: 62px;

    margin-bottom: 25px;

    display: flex;
    align-items: center;
}

.student-login-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: left center;
}


/* Tag */

.student-login-tag {
    position: relative;
    z-index: 2;

    display: inline-block;

    margin-bottom: 12px;

    color: #ffccd5;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


/* Heading */

.student-login-left h1 {
    position: relative;
    z-index: 2;

    margin: 0 0 17px;

    font-size: clamp(34px, 4vw, 47px);

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.student-login-left h1 span {
    display: block;

    color: #ed173d;
}

.student-login-left>p {
    position: relative;
    z-index: 2;

    max-width: 450px;

    margin: 0 0 28px;

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

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   FEATURES
========================================================= */

.student-login-features {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 13px;
}

.login-feature {
    display: flex;
    align-items: center;

    gap: 11px;
}

.login-feature>i {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

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

    color: #fff;

    font-size: 13px;
}

.login-feature strong {
    display: block;

    margin-bottom: 2px;

    color: #fff;

    font-size: 11px;
}

.login-feature span {
    display: block;

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

    font-size: 9px;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.student-login-right {
    padding: 45px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


/* Heading */

.login-heading {
    text-align: center;

    margin-bottom: 28px;
}

.login-icon {
    width: 54px;
    height: 54px;

    margin: 0 auto 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #edf3fb;

    color: #173b73;

    font-size: 21px;
}

.login-heading>span {
    color: #ed173d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.login-heading h2 {
    margin: 5px 0;

    color: #081c3a;

    font-size: 28px;

    line-height: 1.2;
}

.login-heading p {
    margin: 0;

    color: #7d8797;

    font-size: 11px;
}


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

.student-form-group {
    margin-bottom: 17px;
}

.student-form-group label {
    display: block;

    margin-bottom: 7px;

    color: #27344b;

    font-size: 11px;
    font-weight: 700;
}

.password-label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 7px;
}

.password-label label {
    margin: 0;
}

.password-label a {
    color: #ed173d;

    font-size: 10px;
    font-weight: 600;

    text-decoration: none;
}

.password-label a:hover {
    text-decoration: underline;
}


/* Input */

.student-input {
    width: 100%;
    height: 49px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 13px;

    background: #f8fafc;

    border: 1px solid #e0e5ec;

    border-radius: 9px;

    transition: .25s ease;
}

.student-input:focus-within {
    background: #fff;

    border-color: #173b73;

    box-shadow:
        0 0 0 3px rgba(23, 59, 115, .08);
}

.student-input>i {
    width: 16px;

    flex-shrink: 0;

    color: #8a94a4;

    font-size: 13px;
}

.student-input input {
    width: 100%;
    height: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #243149;

    font-family: inherit;

    font-size: 12px;
}

.student-input input::placeholder {
    color: #a1a9b5;
}


/* Password Toggle */

.password-toggle {
    width: 28px;
    height: 30px;

    flex-shrink: 0;

    border: 0;

    background: transparent;

    color: #8993a3;

    cursor: pointer;
}

.password-toggle:hover {
    color: #173b73;
}


/* =========================================================
   OPTIONS
========================================================= */

.student-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 3px 0 19px;
}

.remember-me {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #6c788c;

    font-size: 10px;

    cursor: pointer;
}

.remember-me input {
    width: 14px;
    height: 14px;

    accent-color: #173b73;

    cursor: pointer;
}

.secure-login {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #8b95a5;

    font-size: 9px;
}

.secure-login i {
    color: #173b73;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.student-login-btn {
    width: 100%;
    min-height: 51px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border: 0;
    border-radius: 9px;

    background: #ed173d;

    color: #fff;

    font-family: inherit;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .7px;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(237, 23, 61, .20);

    transition: .3s ease;
}

.student-login-btn:hover {
    background: #c80d2f;

    transform: translateY(-2px);
}

.student-login-btn i {
    transition: .3s ease;
}

.student-login-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   REGISTER
========================================================= */

.student-register {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-top: 18px;

    color: #8993a3;

    font-size: 10px;
}

.student-register a {
    color: #173b73;

    font-weight: 800;

    text-decoration: none;
}

.student-register a:hover {
    color: #ed173d;
}


/* =========================================================
   SUPPORT
========================================================= */

.student-login-help {
    margin-top: 23px;
    padding-top: 17px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    border-top: 1px solid #edf0f4;

    color: #929baa;

    font-size: 9px;
}

.student-login-help i {
    color: #173b73;
}

.student-login-help a {
    color: #ed173d;

    font-weight: 700;

    text-decoration: none;
}


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

@media (max-width: 900px) {

    .student-login-main {
        padding: 50px 0;
    }

    .student-login-card {
        grid-template-columns: 1fr;
    }

    .student-login-left {
        padding: 40px 35px;
    }

    .student-login-left>p {
        max-width: 650px;
    }

    .student-login-features {
        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 15px;
    }

    .student-login-right {
        padding: 40px 35px;
    }

}


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

@media (max-width: 600px) {

    .student-login-main {
        min-height: auto;

        padding: 35px 0;
    }

    .student-login-container {
        width: 92%;
    }

    .student-login-card {
        border-radius: 17px;
    }

    .student-login-left {
        padding: 30px 23px;
    }

    .student-login-logo {
        width: 175px;
        height: 53px;

        margin-bottom: 18px;
    }

    .student-login-left h1 {
        font-size: 32px;
    }

    .student-login-left>p {
        font-size: 11px;
    }

    .student-login-features {
        grid-template-columns: 1fr;
    }

    .student-login-right {
        padding: 32px 23px;
    }

    .login-heading h2 {
        font-size: 25px;
    }

}


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

@media (max-width: 400px) {

    .student-login-left {
        padding: 27px 19px;
    }

    .student-login-right {
        padding: 28px 19px;
    }

    .student-login-logo {
        width: 155px;
        height: 48px;
    }

    .student-login-left h1 {
        font-size: 29px;
    }

    .secure-login {
        display: none;
    }

}

/* =========================================================
   ADMIN LOGIN MAIN
========================================================= */

.admin-login-main {
    min-height: calc(100vh - 110px);

    padding: 70px 0;

    display: flex;
    align-items: center;

    background:
        radial-gradient(circle at 10% 20%,
            rgba(23, 59, 115, .08),
            transparent 30%),
        radial-gradient(circle at 90% 80%,
            rgba(237, 23, 61, .07),
            transparent 30%),
        #f6f8fc;
}

.admin-login-container {
    width: min(1100px, 92%);
    margin: auto;
}


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

.admin-login-card {
    display: grid;

    grid-template-columns: 1fr 1fr;

    background: #fff;

    border: 1px solid #e4e8ef;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(8, 28, 58, .13);
}


/* =========================================================
   LEFT SIDE
========================================================= */

.admin-login-left {
    position: relative;

    padding: 50px 45px;

    overflow: hidden;

    background:
        linear-gradient(145deg,
            #081c3a,
            #173b73);

    color: #fff;
}

.admin-login-left::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -150px;
    right: -120px;

    border: 45px solid rgba(255, 255, 255, .04);

    border-radius: 50%;
}

.admin-login-left::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    left: -130px;
    bottom: -130px;

    border: 40px solid rgba(237, 23, 61, .10);

    border-radius: 50%;
}


/* Logo */

.admin-login-logo {
    position: relative;
    z-index: 2;

    width: 210px;
    height: 62px;

    margin-bottom: 25px;

    display: flex;
    align-items: center;
}

.admin-login-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: left center;
}


/* Tag */

.admin-login-tag {
    position: relative;
    z-index: 2;

    display: inline-block;

    margin-bottom: 12px;

    color: #ffccd5;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


/* Heading */

.admin-login-left h1 {
    position: relative;
    z-index: 2;

    margin: 0 0 17px;

    font-size: clamp(34px, 4vw, 47px);

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.admin-login-left h1 span {
    display: block;

    color: #ed173d;
}

.admin-login-left>p {
    position: relative;
    z-index: 2;

    max-width: 450px;

    margin: 0 0 28px;

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

    font-size: 12px;

    line-height: 1.8;
}


/* =========================================================
   FEATURES
========================================================= */

.admin-login-features {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 13px;
}

.admin-feature {
    display: flex;
    align-items: center;

    gap: 11px;
}

.admin-feature>i {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

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

    color: #fff;

    font-size: 13px;
}

.admin-feature strong {
    display: block;

    margin-bottom: 2px;

    color: #fff;

    font-size: 11px;
}

.admin-feature span {
    display: block;

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

    font-size: 9px;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.admin-login-right {
    padding: 45px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}


/* Heading */

.admin-login-heading {
    text-align: center;

    margin-bottom: 28px;
}

.admin-login-icon {
    width: 54px;
    height: 54px;

    margin: 0 auto 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #edf3fb;

    color: #173b73;

    font-size: 21px;
}

.admin-login-heading>span {
    color: #ed173d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.admin-login-heading h2 {
    margin: 5px 0;

    color: #081c3a;

    font-size: 28px;

    line-height: 1.2;
}

.admin-login-heading p {
    margin: 0;

    color: #7d8797;

    font-size: 11px;
}


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

.admin-form-group {
    margin-bottom: 17px;
}

.admin-form-group label {
    display: block;

    margin-bottom: 7px;

    color: #27344b;

    font-size: 11px;
    font-weight: 700;
}

.admin-password-label {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 7px;
}

.admin-password-label label {
    margin: 0;
}

.admin-password-label a {
    color: #ed173d;

    font-size: 10px;
    font-weight: 600;

    text-decoration: none;
}

.admin-password-label a:hover {
    text-decoration: underline;
}


/* Input */

.admin-input {
    width: 100%;
    height: 49px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 13px;

    background: #f8fafc;

    border: 1px solid #e0e5ec;

    border-radius: 9px;

    transition: .25s ease;
}

.admin-input:focus-within {
    background: #fff;

    border-color: #173b73;

    box-shadow:
        0 0 0 3px rgba(23, 59, 115, .08);
}

.admin-input>i {
    width: 16px;

    flex-shrink: 0;

    color: #8a94a4;

    font-size: 13px;
}

.admin-input input {
    width: 100%;
    height: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #243149;

    font-family: inherit;

    font-size: 12px;
}

.admin-input input::placeholder {
    color: #a1a9b5;
}


/* Password Toggle */

.admin-password-toggle {
    width: 28px;
    height: 30px;

    flex-shrink: 0;

    border: 0;

    background: transparent;

    color: #8993a3;

    cursor: pointer;
}

.admin-password-toggle:hover {
    color: #173b73;
}


/* =========================================================
   OPTIONS
========================================================= */

.admin-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin: 3px 0 19px;
}

.admin-remember {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #6c788c;

    font-size: 10px;

    cursor: pointer;
}

.admin-remember input {
    width: 14px;
    height: 14px;

    accent-color: #173b73;

    cursor: pointer;
}

.admin-secure {
    display: flex;
    align-items: center;

    gap: 5px;

    color: #8b95a5;

    font-size: 9px;
}

.admin-secure i {
    color: #173b73;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.admin-login-btn {
    width: 100%;
    min-height: 51px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border: 0;
    border-radius: 9px;

    background: #ed173d;

    color: #fff;

    font-family: inherit;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .7px;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(237, 23, 61, .20);

    transition: .3s ease;
}

.admin-login-btn:hover {
    background: #c80d2f;

    transform: translateY(-2px);

    box-shadow:
        0 15px 30px rgba(237, 23, 61, .25);
}

.admin-login-btn i {
    transition: .3s ease;
}

.admin-login-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   SECURITY NOTICE
========================================================= */

.admin-security-notice {
    margin-top: 22px;

    padding: 12px;

    display: flex;
    align-items: flex-start;

    gap: 10px;

    background: #fff7f8;

    border: 1px solid #f6dfe3;

    border-radius: 9px;
}

.admin-security-notice>i {
    margin-top: 2px;

    color: #ed173d;

    font-size: 13px;
}

.admin-security-notice strong {
    display: block;

    margin-bottom: 3px;

    color: #27344b;

    font-size: 10px;
}

.admin-security-notice span {
    display: block;

    color: #8b95a5;

    font-size: 8.5px;

    line-height: 1.5;
}


/* =========================================================
   SUPPORT
========================================================= */

.admin-login-help {
    margin-top: 18px;
    padding-top: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    border-top: 1px solid #edf0f4;

    color: #929baa;

    font-size: 9px;
}

.admin-login-help i {
    color: #173b73;
}

.admin-login-help a {
    color: #ed173d;

    font-weight: 700;

    text-decoration: none;
}


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

@media (max-width: 900px) {

    .admin-login-main {
        padding: 50px 0;
    }

    .admin-login-card {
        grid-template-columns: 1fr;
    }

    .admin-login-left {
        padding: 40px 35px;
    }

    .admin-login-left>p {
        max-width: 650px;
    }

    .admin-login-features {
        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 15px;
    }

    .admin-login-right {
        padding: 40px 35px;
    }

}


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

@media (max-width: 600px) {

    .admin-login-main {
        min-height: auto;

        padding: 35px 0;
    }

    .admin-login-container {
        width: 92%;
    }

    .admin-login-card {
        border-radius: 17px;
    }

    .admin-login-left {
        padding: 30px 23px;
    }

    .admin-login-logo {
        width: 175px;
        height: 53px;

        margin-bottom: 18px;
    }

    .admin-login-left h1 {
        font-size: 32px;
    }

    .admin-login-left>p {
        font-size: 11px;
    }

    .admin-login-features {
        grid-template-columns: 1fr;
    }

    .admin-login-right {
        padding: 32px 23px;
    }

    .admin-login-heading h2 {
        font-size: 25px;
    }

}


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

@media (max-width: 400px) {

    .admin-login-left {
        padding: 27px 19px;
    }

    .admin-login-right {
        padding: 28px 19px;
    }

    .admin-login-logo {
        width: 155px;
        height: 48px;
    }

    .admin-login-left h1 {
        font-size: 29px;
    }

    .admin-secure {
        display: none;
    }

}

/* =========================================================
   STUDENT REGISTRATION PAGE
========================================================= */

.register-main {
    min-height: calc(100vh - 110px);
    padding: 70px 20px;
    background:
        radial-gradient(circle at 10% 20%,
            rgba(23, 59, 115, 0.08),
            transparent 30%),
        radial-gradient(circle at 90% 80%,
            rgba(237, 23, 61, 0.07),
            transparent 30%),
        #f6f8fc;

    display: flex;
    align-items: center;
}


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

.register-container {
    width: min(1180px, 100%);
    margin: auto;
}


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

.register-card {
    width: 100%;
    min-height: 720px;

    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    box-shadow:
        0 25px 70px rgba(8, 28, 58, 0.14);

    border: 1px solid rgba(23, 59, 115, 0.08);
}


/* =========================================================
   LEFT SIDE
========================================================= */

.register-left {
    position: relative;

    padding: 55px 48px;

    background:
        linear-gradient(145deg,
            #081c3a 0%,
            #173b73 65%,
            #24549a 100%);

    color: #ffffff;

    overflow: hidden;
}


/* Decorative circles */

.register-left::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);

    top: -110px;
    right: -100px;
}

.register-left::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: rgba(237, 23, 61, 0.12);

    bottom: -100px;
    left: -90px;
}


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

.register-logo {
    width: 230px;
    height: 80px;

    display: flex;
    align-items: center;

    margin-bottom: 30px;

    position: relative;
    z-index: 2;
}

.register-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: left center;

    display: block;
}


/* =========================================================
   TAG
========================================================= */

.register-tag {
    display: inline-block;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;

    color: #ffffff;

    opacity: 0.75;

    margin-bottom: 17px;

    position: relative;
    z-index: 2;
}


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

.register-left h1 {
    margin: 0 0 18px;

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

    line-height: 1.08;

    letter-spacing: -1.5px;

    font-weight: 800;

    position: relative;
    z-index: 2;
}

.register-left h1 span {
    color: #ed173d;
}


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

.register-left>p {
    margin: 0;

    max-width: 480px;

    font-size: 14px;

    line-height: 1.8;

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

    position: relative;
    z-index: 2;
}


/* =========================================================
   BENEFITS
========================================================= */

.register-benefits {
    margin-top: 38px;

    display: flex;
    flex-direction: column;

    gap: 18px;

    position: relative;
    z-index: 2;
}

.register-benefit {
    display: flex;
    align-items: center;

    gap: 13px;
}

.benefit-icon {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.11);

    color: #ffffff;

    font-size: 17px;
}

.register-benefit strong {
    display: block;

    font-size: 13px;

    margin-bottom: 3px;
}

.register-benefit span {
    display: block;

    font-size: 10px;

    color: rgba(255, 255, 255, 0.62);
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.register-right {
    padding: 45px 55px;

    background: #ffffff;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


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

.register-heading {
    text-align: center;

    margin-bottom: 25px;
}

.register-icon {
    width: 55px;
    height: 55px;

    margin: 0 auto 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: #edf3fb;

    color: #173b73;

    font-size: 21px;
}

.register-heading>span {
    display: block;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;

    color: #ed173d;

    margin-bottom: 5px;
}

.register-heading h2 {
    margin: 0;

    font-size: 30px;

    color: #15223a;

    letter-spacing: -0.8px;
}

.register-heading p {
    margin: 6px 0 0;

    font-size: 12px;

    color: #6c788c;
}


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

#registerForm {
    width: 100%;
}

.register-form-group {
    margin-bottom: 14px;
}

.register-form-group label {
    display: block;

    font-size: 11px;

    font-weight: 700;

    color: #25324a;

    margin-bottom: 6px;
}


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

.register-input {
    width: 100%;
    height: 48px;

    display: flex;
    align-items: center;

    border: 1px solid #dfe5ee;

    border-radius: 9px;

    background: #fbfcfe;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.register-input:focus-within {
    border-color: #173b73;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(23, 59, 115, 0.08);
}

.register-input>i {
    width: 45px;

    text-align: center;

    color: #8793a6;

    font-size: 14px;
}

.register-input input,
.register-input select {
    flex: 1;

    min-width: 0;

    height: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #15223a;

    font-size: 12px;

    font-family: inherit;
}

.register-input input::placeholder {
    color: #a4adba;
}

.register-input select {
    cursor: pointer;

    padding-right: 12px;
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.register-password-toggle {
    width: 43px;
    height: 100%;

    border: 0;

    background: transparent;

    cursor: pointer;

    color: #8793a6;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: color .2s ease;
}

.register-password-toggle:hover {
    color: #173b73;
}


/* =========================================================
   TERMS
========================================================= */

.register-terms {
    margin: 17px 0;
}

.register-terms label {
    display: flex;

    align-items: flex-start;

    gap: 8px;

    cursor: pointer;

    font-size: 10px;

    line-height: 1.5;

    color: #6c788c;
}

.register-terms input {
    width: 14px;
    height: 14px;

    flex-shrink: 0;

    margin-top: 1px;

    accent-color: #173b73;

    cursor: pointer;
}

.register-terms a {
    color: #173b73;

    font-weight: 700;

    text-decoration: none;
}

.register-terms a:hover {
    color: #ed173d;
}


/* =========================================================
   REGISTER BUTTON
========================================================= */

.register-btn {
    width: 100%;

    min-height: 50px;

    border: 0;

    border-radius: 9px;

    background:
        linear-gradient(135deg,
            #173b73,
            #24549a);

    color: #ffffff;

    font-family: inherit;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.7px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    cursor: pointer;

    box-shadow:
        0 10px 22px rgba(23, 59, 115, 0.20);

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

.register-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 28px rgba(23, 59, 115, 0.27);
}

.register-btn:disabled {
    opacity: 0.7;

    cursor: not-allowed;

    transform: none;
}


/* =========================================================
   LOGIN LINK
========================================================= */

.register-login {
    margin-top: 17px;

    text-align: center;

    font-size: 11px;

    color: #7a8597;
}

.register-login a {
    margin-left: 5px;

    color: #ed173d;

    font-weight: 800;

    text-decoration: none;
}

.register-login a:hover {
    color: #173b73;
}

.register-login a i {
    margin-left: 3px;

    font-size: 9px;
}


/* =========================================================
   SECURITY
========================================================= */

.register-security {
    margin-top: 20px;

    padding-top: 15px;

    border-top: 1px solid #edf0f5;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    font-size: 9px;

    color: #8a95a6;
}

.register-security i {
    color: #173b73;

    font-size: 11px;
}


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

@media (max-width: 1000px) {

    .register-main {
        padding: 45px 18px;
    }

    .register-card {
        grid-template-columns: 1fr;
    }

    .register-left {
        padding: 40px;
    }

    .register-left h1 {
        font-size: 40px;
    }

    .register-benefits {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .register-right {
        padding: 45px;
    }

}


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

@media (max-width: 650px) {

    .register-main {
        padding: 25px 12px;
    }

    .register-card {
        border-radius: 18px;
    }

    .register-left {
        padding: 32px 24px;
    }

    .register-logo {
        width: 190px;
        height: 65px;

        margin-bottom: 22px;
    }

    .register-left h1 {
        font-size: 32px;
    }

    .register-left>p {
        font-size: 12px;
    }

    .register-benefits {
        grid-template-columns: 1fr;

        gap: 13px;

        margin-top: 27px;
    }

    .register-benefit {
        gap: 10px;
    }

    .benefit-icon {
        width: 39px;
        height: 39px;

        font-size: 14px;
    }

    .register-benefit strong {
        font-size: 11px;
    }

    .register-benefit span {
        font-size: 9px;
    }

    .register-right {
        padding: 32px 22px;
    }

    .register-heading h2 {
        font-size: 26px;
    }

}


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

@media (max-width: 400px) {

    .register-main {
        padding: 15px 8px;
    }

    .register-left {
        padding: 27px 18px;
    }

    .register-left h1 {
        font-size: 28px;
    }

    .register-right {
        padding: 28px 17px;
    }

    .register-heading h2 {
        font-size: 23px;
    }

    .register-input {
        height: 46px;
    }

    .register-btn {
        min-height: 47px;
    }

}

/* =========================================================
   NAVBAR
========================================================= */

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 9999;

    background: #ffffff;

    border-bottom: none;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.08),
        0 12px 30px rgba(8, 28, 58, 0.10);
}

.navbar {
    width: min(1450px, 96%);

    min-height: 76px;

    margin: auto;

    display: flex;
    align-items: center;

    gap: 25px;
}


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

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-logo {
    width: 250px;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    overflow: hidden;

    background: transparent;
}

.brand-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}

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

.navigation {
    margin-left: auto;
}

.nav-menu {
    display: flex;

    align-items: center;

    gap: 2px;

    list-style: none !important;

    margin: 0 !important;

    padding: 0 !important;
}

.nav-item {
    position: relative;

    list-style: none !important;
}

.nav-link {
    min-height: 44px;

    padding: 0 11px;

    border-radius: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    color: #16243b;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;

    transition: var(--transition);
}

.nav-link>i {
    font-size: 8px;

    transition: .25s;
}

.nav-item:hover>.nav-link>i {
    transform: rotate(180deg);
}


/* ACTIVE */

.nav-item.active>.nav-link {
    background: var(--blue);

    color: white;

    box-shadow:
        0 7px 18px rgba(23, 59, 115, .2);
}


/* NORMAL HOVER */

.nav-item:not(.active):not(.enquiry)>.nav-link:hover {
    background: var(--blue-light);

    color: var(--blue);
}


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

.enquiry>.nav-link {
    background: var(--red);

    color: white;

    margin-left: 5px;

    padding-left: 16px;
    padding-right: 16px;
}

.enquiry>.nav-link:hover {
    background: var(--red-dark);

    transform: translateY(-2px);
}


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

.dropdown-item {
    position: relative;
}


/*
   IMPORTANT HOVER BRIDGE

   Navbar aur dropdown ke beech ka chhota gap
   dropdown ko disappear nahi hone dega.
*/

.dropdown-item::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 100%;

    height: 14px;

    background: transparent;

    z-index: 20;
}


/* DROPDOWN BOX */

.dropdown {
    position: absolute;

    top: calc(100% + 9px);

    left: 0;

    width: 245px;

    padding: 7px;

    background: #ffffff;

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

    border-radius: 10px;

    box-shadow:
        0 20px 45px rgba(11, 37, 82, .16);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(8px);

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

    pointer-events: none;

    z-index: 99999;
}


/* TOP ARROW */

.dropdown::before {
    content: "";

    position: absolute;

    top: -6px;

    left: 26px;

    width: 10px;

    height: 10px;

    background: white;

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

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

    transform: rotate(45deg);
}


/* SHOW MAIN DROPDOWN */

.dropdown-item:hover>.dropdown {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

    pointer-events: auto;
}


/* DROPDOWN LINKS */

.dropdown>a,
.dropdown-parent-link {
    min-height: 42px;

    padding: 0 13px;

    border-radius: 7px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #354158;

    font-size: 12px;

    font-weight: 500;

    transition: .25s ease;
}


.dropdown>a:hover,
.dropdown-parent:hover>.dropdown-parent-link {
    background: var(--blue);

    color: white;

    padding-left: 17px;
}


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

.dropdown-parent {
    position: relative;
}


/*
   IMPORTANT:

   Submenu ko main dropdown se exactly touch karaya gaya hai.
   Isliye beech mein koi gap nahi hai.

   Ye Test Series ke:
   XI -> Online
   XII -> Online
   Passout -> Online
   IX & X -> Online

   sabko stable rakhega.
*/

.sub-dropdown {
    position: absolute;

    top: -7px;

    left: 100%;

    width: 240px;

    padding: 7px;

    background: #ffffff;

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

    border-radius: 10px;

    box-shadow:
        0 20px 45px rgba(11, 37, 82, .16);

    opacity: 0;

    visibility: hidden;

    transform:
        translateX(7px);

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

    pointer-events: none;

    z-index: 100000;
}


/*
   SUBMENU LEFT ARROW
*/

.sub-dropdown::before {
    content: "";

    position: absolute;

    left: -6px;

    top: 18px;

    width: 10px;

    height: 10px;

    background: white;

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

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

    transform: rotate(45deg);

    z-index: 2;
}


/*
   EXTRA INVISIBLE BRIDGE

   Parent aur submenu ke beech exact hover area.
*/

.dropdown-parent::after {
    content: "";

    position: absolute;

    top: 0;

    right: -8px;

    width: 10px;

    height: 100%;

    background: transparent;

    z-index: 100001;
}


/* SHOW SUBMENU */

.dropdown-parent:hover>.sub-dropdown {
    opacity: 1;

    visibility: visible;

    transform:
        translateX(0);

    pointer-events: auto;
}


/* SUBMENU LINKS */

.sub-dropdown a {
    min-height: 42px;

    padding: 0 13px;

    border-radius: 7px;

    display: flex;

    align-items: center;

    color: #354158;

    font-size: 12px;

    transition: .25s ease;
}

.sub-dropdown a:hover {
    background: var(--blue);

    color: #ffffff;

    padding-left: 17px;
}


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

.mobile-menu {
    display: none;

    width: 43px;

    height: 43px;

    border: 0;

    border-radius: 9px;

    background: var(--blue);

    padding: 9px;
}

.mobile-menu span {
    display: block;

    height: 2px;

    background: white;

    margin: 5px 0;
}


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

.hero {
    height:
        calc(100vh - 116px);

    min-height: 570px;

    position: relative;

    overflow: hidden;

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

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.04);

    /* IMPORTANT: inactive slides must not block buttons/links */
    pointer-events: none;

    transition:
        opacity .8s ease,
        transform 5.5s ease;
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1);

    /* only active slide can receive clicks */
    pointer-events: auto;
}

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(4, 16, 36, .92),
            rgba(5, 24, 51, .74) 45%,
            rgba(5, 24, 51, .22) 78%,
            rgba(5, 24, 51, .1));
}

.hero-container {
    position: relative;

    z-index: 2;

    height: 100%;

    width: min(1450px, 100%);

    margin: auto;

    padding: 0 8%;

    display: flex;

    align-items: center;
}

.hero-content {
    max-width: 760px;

    color: white;
}

.hero-tag {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #ff4c68;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 18px;
}

.hero-tag span {
    width: 27px;

    height: 2px;

    background: var(--red);
}

.hero h1 {
    font-size:
        clamp(45px, 6vw, 78px);

    line-height: 1.02;

    letter-spacing: -3px;

    margin-bottom: 20px;
}

.hero h1 strong {
    display: block;

    color: #ff3f5d;
}

.hero-content p {
    max-width: 590px;

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

    font-size: 15px;

    line-height: 1.85;

    margin-bottom: 30px;
}

/* =========================================================
   SLIDE 4 - CLASS 10 SCIENCE NOTES
========================================================= */

.hero-notes-slide {
    background-size: cover;
    background-position: center center;
}


/* Separate overlay */

.hero-notes-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(4, 16, 36, .94) 0%,
            rgba(4, 16, 36, .82) 32%,
            rgba(4, 16, 36, .30) 60%,
            rgba(4, 16, 36, .08) 100%);

    pointer-events: none;
}


/* Content above image */

.hero-notes-content {
    position: relative;

    z-index: 3;

    pointer-events: auto;
}


/* Buttons */

.hero-notes-content .hero-buttons {
    position: relative;

    z-index: 10;

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    pointer-events: auto;
}


.hero-notes-content .btn {
    position: relative;

    z-index: 11;

    cursor: pointer;

    pointer-events: auto;
}


/* Button hover */

.hero-notes-content .btn-red {
    background: var(--red);

    color: #ffffff;
}

.hero-notes-content .btn-red:hover {
    background: var(--red-dark);

    transform: translateY(-3px);
}


.hero-notes-content .btn-white {
    background: #ffffff;

    color: var(--blue);
}

.hero-notes-content .btn-white:hover {
    background: #f3f6fb;

    transform: translateY(-3px);
}


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

@media (min-width: 1100px) {

    .hero-notes-slide {
        background-position: center center;
    }

    .hero-notes-content {
        max-width: 650px;
    }

}


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

@media (max-width: 1080px) {

    .hero-notes-content {
        max-width: 650px;
    }

}


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

@media (max-width: 760px) {

    .hero-notes-slide {
        background-position: 58% center;
    }

    .hero-notes-overlay {
        background:
            linear-gradient(90deg,
                rgba(4, 16, 36, .94),
                rgba(4, 16, 36, .65));
    }

    .hero-notes-content {
        width: 100%;

        max-width: 100%;
    }

    .hero-notes-content .hero-buttons {
        width: 100%;

        max-width: 320px;

        gap: 9px;
    }

    .hero-notes-content .btn {
        min-height: 46px;

        padding: 0 16px;

        font-size: 11px;
    }

}


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

@media (max-width: 450px) {

    .hero-notes-slide {
        background-position: 60% center;
    }

    .hero-notes-content .hero-buttons {
        flex-direction: column;

        align-items: stretch;

        max-width: 300px;
    }

    .hero-notes-content .btn {
        width: 100%;
    }

}

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

.hero-buttons {
    display: flex;

    gap: 11px;

    flex-wrap: wrap;
}

.btn {
    min-height: 49px;

    padding: 0 21px;

    border-radius: 8px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    font-size: 12px;

    font-weight: 700;

    transition: var(--transition);
}

.btn-red {
    background: var(--red);

    color: white;
}

.btn-red:hover {
    background: var(--red-dark);

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(237, 23, 61, .28);
}

.btn-white {
    background: white;

    color: var(--blue);
}

.btn-white:hover {
    transform: translateY(-3px);
}


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

.hero-arrow {
    position: absolute;

    z-index: 5;

    top: 50%;

    transform: translateY(-50%);

    width: 46px;

    height: 46px;

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

    border-radius: 50%;

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

    color: white;

    backdrop-filter: blur(8px);

    transition: var(--transition);
}

.hero-arrow:hover {
    background: white;

    color: var(--blue);
}

.hero-arrow.previous {
    left: 25px;
}

.hero-arrow.next {
    right: 25px;
}


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

.hero-dots {
    position: absolute;

    z-index: 5;

    left: 8%;

    bottom: 34px;

    display: flex;

    gap: 7px;
}

.hero-dots button {
    width: 25px;

    height: 4px;

    border: 0;

    border-radius: 10px;

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

    transition: .3s;
}

.hero-dots button.active {
    width: 47px;

    background: var(--red);
}

/* =========================================================
   QUICK FEATURES - CONTINUOUS RIGHT TO LEFT
========================================================= */

.quick-section {
    width: 100%;

    position: relative;

    z-index: 20;

    overflow: hidden;

    padding: 22px 0;

    background: #ffffff;
}


/* =========================================================
   MOVING TRACK
========================================================= */

.quick-track {
    width: max-content;

    display: flex;

    align-items: center;

    animation:
        quickMove 28s linear infinite;
}


/* =========================================================
   EACH SET
========================================================= */

.quick-container {
    width: max-content;

    display: flex;

    align-items: center;

    gap: 18px;

    padding-right: 18px;
}


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

@keyframes quickMove {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================================================
   QUICK CARD
========================================================= */

.quick-card {
    width: 280px;

    min-height: 105px;

    flex-shrink: 0;

    padding: 18px;

    background: #ffffff;

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

    border-radius: 13px;

    box-shadow:
        0 8px 25px rgba(12, 35, 70, 0.10);

    display: flex;

    align-items: center;

    gap: 13px;

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


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

.quick-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 15px 35px rgba(12, 35, 70, 0.15);
}

/* =========================================================
   CLASS 10 SCIENCE NOTES
========================================================= */

.science-notes-section {
    position: relative;
    padding: 95px 0;
    background: #f6f8fc;
    overflow: hidden;
}

.science-notes-container {
    width: min(1200px, 92%);
    margin: auto;
}


/* Heading */

.science-notes-heading {
    max-width: 720px;
    margin: 0 auto 48px;
    text-align: center;
}

.science-notes-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 15px;

    border-radius: 50px;

    background: #edf3fb;
    color: #173b73;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.science-notes-heading h2 {
    margin: 14px 0 12px;

    color: #081c3a;

    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.1;
    font-weight: 800;
}

.science-notes-heading h2 span {
    color: #ed173d;
}

.science-notes-heading p {
    margin: 0;

    color: #6c788c;

    font-size: 15px;
    line-height: 1.8;
}


/* Product */

.science-notes-product {
    display: grid;
    grid-template-columns: 1.5fr 1fr auto auto;
    align-items: center;

    gap: 28px;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #e4e8ef;

    border-radius: 20px;

    box-shadow:
        0 20px 55px rgba(12, 35, 70, .10);

    transition: .3s ease;
}

.science-notes-product:hover {
    transform: translateY(-5px);

    box-shadow:
        0 25px 65px rgba(12, 35, 70, .15);
}


/* Product Info */

.science-notes-info {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.science-notes-icon {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: #edf3fb;

    color: #173b73;

    font-size: 25px;
}

.science-notes-small {
    display: block;

    margin-bottom: 7px;

    color: #ed173d;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.science-notes-info h3 {
    margin: 0 0 9px;

    color: #15223a;

    font-size: 21px;
    line-height: 1.3;
}

.science-notes-description {
    max-width: 570px;

    margin: 0;

    color: #6c788c;

    font-size: 13px;
    line-height: 1.7;
}


/* Features */

.science-notes-features {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.science-notes-features div {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #3f4b60;

    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;
}

.science-notes-features i {
    color: #ed173d;
    font-size: 13px;
}


/* Price */

.science-notes-price {
    min-width: 95px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.old-price {
    color: #9aa3b2;

    font-size: 13px;

    text-decoration: line-through;
}

.science-notes-price strong {
    color: #173b73;

    font-size: 31px;
    line-height: 1.1;
}

.science-notes-price small {
    margin-top: 4px;

    color: #8b95a5;

    font-size: 9px;
}


/* Buy Button */

.science-buy-btn {
    min-width: 145px;
    min-height: 50px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 0;
    border-radius: 9px;

    background: #ed173d;
    color: #ffffff;

    font-family: inherit;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .5px;

    cursor: pointer;

    box-shadow: 0 10px 25px rgba(237, 23, 61, .22);

    transition: .3s ease;
}

.science-buy-btn:hover {
    background: #c80d2f;

    transform: translateY(-3px);

    box-shadow: 0 14px 30px rgba(237, 23, 61, .28);
}

.science-buy-btn i {
    transition: .3s ease;
}

.science-buy-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   MODAL
========================================================= */

.notes-modal {
    position: fixed;

    inset: 0;

    z-index: 100000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transition: .3s ease;
}

.notes-modal.active {
    opacity: 1;
    visibility: visible;
}

.notes-modal-overlay {
    position: absolute;

    inset: 0;

    background: rgba(4, 17, 38, .72);

    backdrop-filter: blur(5px);
}


/* Modal Box */

.notes-modal-box {
    position: relative;

    z-index: 2;

    width: min(500px, 100%);

    max-height: 92vh;

    overflow-y: auto;

    padding: 32px;

    background: #ffffff;

    border-radius: 20px;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, .25);

    transform: translateY(25px) scale(.97);

    transition: .3s ease;
}

.notes-modal.active .notes-modal-box {
    transform: translateY(0) scale(1);
}


/* Close */

.notes-modal-close {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 50%;

    background: #f1f4f8;

    color: #4c5870;

    cursor: pointer;

    transition: .25s ease;
}

.notes-modal-close:hover {
    background: #ed173d;
    color: #ffffff;
}


/* Modal Header */

.notes-modal-header {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 26px;
}

.notes-modal-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #edf3fb;

    color: #173b73;

    font-size: 21px;
}

.notes-modal-header span,
.payment-heading span {
    color: #ed173d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.2px;
}

.notes-modal-header h3 {
    margin: 3px 0 3px;

    color: #081c3a;

    font-size: 22px;
}

.notes-modal-header p {
    margin: 0;

    color: #7b8595;

    font-size: 11px;
}


/* Form */

.notes-form-group {
    margin-bottom: 17px;
}

.notes-form-group label {
    display: block;

    margin-bottom: 7px;

    color: #27344b;

    font-size: 11px;
    font-weight: 700;
}

.notes-input {
    height: 48px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 14px;

    background: #f8fafc;

    border: 1px solid #e1e6ed;

    border-radius: 9px;

    transition: .25s ease;
}

.notes-input:focus-within {
    border-color: #173b73;

    background: #ffffff;

    box-shadow: 0 0 0 3px rgba(23, 59, 115, .08);
}

.notes-input i {
    width: 16px;

    color: #7e8999;

    font-size: 13px;
}

.notes-input input,
.notes-input select {
    width: 100%;
    height: 100%;

    border: 0;
    outline: 0;

    background: transparent;

    color: #243149;

    font-family: inherit;

    font-size: 12px;
}

.notes-input input::placeholder {
    color: #a0a8b5;
}

.notes-input select {
    cursor: pointer;
}


/* Order Summary */

.notes-order-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin: 20px 0;

    padding: 15px;

    background: #f5f7fb;

    border-radius: 10px;
}

.notes-order-summary div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notes-order-summary span {
    color: #8993a3;

    font-size: 9px;
}

.notes-order-summary strong {
    color: #173b73;

    font-size: 12px;
}

.notes-order-summary div:last-child {
    text-align: right;
}

.notes-order-summary div:last-child strong {
    color: #ed173d;

    font-size: 20px;
}


/* Register Button */

.notes-register-btn {
    width: 100%;
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border: 0;
    border-radius: 9px;

    background: #173b73;
    color: #ffffff;

    font-family: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition: .3s ease;
}

.notes-register-btn:hover {
    background: #081c3a;

    transform: translateY(-2px);
}

.notes-secure-text {
    margin: 13px 0 0;

    text-align: center;

    color: #929baa;

    font-size: 9px;
}

.notes-secure-text i {
    margin-right: 4px;

    color: #173b73;
}


/* =========================================================
   PAYMENT
========================================================= */

.payment-box {
    max-width: 460px;

    text-align: center;
}

.payment-success-icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #edf3fb;

    color: #173b73;

    font-size: 25px;
}

.payment-heading h3 {
    margin: 5px 0 8px;

    color: #081c3a;

    font-size: 25px;
}

.payment-heading p {
    max-width: 350px;

    margin: auto;

    color: #7a8595;

    font-size: 12px;
    line-height: 1.7;
}

.payment-product {
    margin: 25px 0;

    padding: 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    text-align: left;

    background: #f5f7fb;

    border-radius: 11px;
}

.payment-product>div {
    display: flex;
    align-items: center;

    gap: 11px;
}

.payment-product>div>i {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #ffffff;

    color: #ed173d;
}

.payment-product strong {
    display: block;

    color: #243149;

    font-size: 12px;
}

.payment-product small {
    display: block;

    margin-top: 4px;

    color: #8b95a4;

    font-size: 9px;
}

.payment-product .payment-amount {
    color: #ed173d;

    font-size: 22px;
}

.payment-now-btn {
    width: 100%;
    min-height: 52px;

    border: 0;
    border-radius: 9px;

    background: #ed173d;
    color: #ffffff;

    font-family: inherit;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    box-shadow: 0 10px 25px rgba(237, 23, 61, .22);

    transition: .3s ease;
}

.payment-now-btn:hover {
    background: #c80d2f;

    transform: translateY(-2px);
}

.payment-methods {
    margin-top: 17px;

    display: flex;
    justify-content: center;

    gap: 18px;

    color: #8993a3;

    font-size: 9px;
}

.payment-methods span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.payment-methods i {
    color: #173b73;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {

    .science-notes-product {
        grid-template-columns: 1fr 1fr;
    }

    .science-notes-info {
        grid-column: span 2;
    }

    .science-notes-price {
        align-items: flex-start;
    }

}


@media (max-width: 700px) {

    .science-notes-section {
        padding: 70px 0;
    }

    .science-notes-container {
        width: min(92%, 550px);
    }

    .science-notes-heading {
        margin-bottom: 32px;
    }

    .science-notes-heading h2 {
        font-size: 32px;
    }

    .science-notes-heading p {
        font-size: 13px;
    }

    .science-notes-product {
        grid-template-columns: 1fr;

        gap: 22px;

        padding: 22px;
    }

    .science-notes-info {
        grid-column: auto;
    }

    .science-notes-features {
        gap: 10px;
    }

    .science-notes-features div {
        white-space: normal;
    }

    .science-notes-price {
        flex-direction: row;
        align-items: center;

        gap: 8px;
    }

    .science-notes-price small {
        margin-left: 3px;
    }

    .science-buy-btn {
        width: 100%;
    }

}


@media (max-width: 500px) {

    .notes-modal {
        padding: 12px;
    }

    .notes-modal-box {
        padding: 25px 20px;

        border-radius: 16px;
    }

    .notes-modal-header h3 {
        font-size: 19px;
    }

    .notes-order-summary {
        align-items: flex-start;
    }

    .payment-methods {
        flex-direction: column;

        align-items: center;

        gap: 8px;
    }

}

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

.quick-icon {

    width: 47px;

    height: 47px;

    flex-shrink: 0;

    border-radius: 12px;

    background:
        var(--blue-light);

    color:
        var(--blue);

    display: grid;

    place-items: center;

    font-size: 17px;
}


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

.quick-card h3 {

    font-size: 13px;

    margin-bottom: 5px;

    color: var(--text);

    white-space: nowrap;
}


.quick-card p {

    font-size: 10px;

    color: var(--muted);

    line-height: 1.5;

    white-space: nowrap;
}


/* =========================================================
   PAUSE WHEN MOUSE OVER
========================================================= */

.quick-section:hover .quick-track {

    animation-play-state: paused;
}


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

@media (max-width: 760px) {

    .quick-section {

        padding: 16px 0;

    }


    .quick-track {

        animation-duration: 22s;

    }


    .quick-container {

        gap: 12px;

        padding-right: 12px;

    }


    .quick-card {

        width: 245px;

        min-height: 90px;

        padding: 15px;

    }


    .quick-icon {

        width: 43px;

        height: 43px;

    }

}

/* =========================================================
   COMMON SECTIONS
========================================================= */

.section {
    padding: 100px 0;
}

.section-heading {
    text-align: center;

    max-width: 700px;

    margin:
        0 auto 50px;
}

.section-tag {
    color: var(--red);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    margin-bottom: 12px;
}

.section-heading h2,
.section-content h2 {
    font-size:
        clamp(32px, 4vw, 48px);

    line-height: 1.1;

    letter-spacing: -1.5px;
}

.section-heading h2 span,
.section-content h2 span {
    color: var(--blue);
}

.section-heading p,
.section-content>p {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.85;

    margin-top: 15px;
}

/* =========================================================
   WELCOME SECTION
========================================================= */

.welcome {
    background: var(--light);
}

.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}


/* =========================================================
   WELCOME IMAGE
========================================================= */

.welcome-image {
    position: relative;
    overflow: visible;
}

.welcome-image img {
    width: 100%;
    height: 470px;

    object-fit: cover;
    border-radius: 18px;

    box-shadow: var(--shadow);

    display: block;

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}


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

.welcome-image:hover img {
    transform: scale(1.04) translateY(-6px);

    box-shadow:
        0 25px 55px rgba(12, 35, 70, 0.22);
}


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

.welcome-image::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 18px;

    background:
        linear-gradient(135deg,
            rgba(23, 59, 115, 0.08),
            rgba(237, 23, 61, 0.08));

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.45s ease;
}

.welcome-image:hover::after {
    opacity: 1;
}


/* =========================================================
   IMAGE BADGE
========================================================= */

.image-badge {
    position: absolute;

    right: -18px;
    bottom: 25px;

    padding: 16px 20px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow: var(--shadow);

    display: flex;
    flex-direction: column;

    z-index: 2;

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease;
}

.welcome-image:hover .image-badge {
    transform: translateY(-8px);

    box-shadow:
        0 18px 40px rgba(12, 35, 70, 0.18);
}

.image-badge strong {
    color: var(--blue);
    font-size: 20px;
}

.image-badge span {
    color: var(--muted);
    font-size: 9px;
    margin-top: 3px;
}


/* =========================================================
   WELCOME CONTENT
========================================================= */

.section-content>p {
    margin-top: 19px;
}


/* =========================================================
   CHECKS
========================================================= */

.checks {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin: 25px 0;
}

.checks div {
    font-size: 11px;
    font-weight: 600;
}

.checks i {
    color: var(--red);
    margin-right: 6px;
}


/* =========================================================
   KNOW MORE LINK
========================================================= */

.text-link {
    color: var(--blue);

    font-size: 12px;
    font-weight: 800;

    display: inline-flex;
    align-items: center;

    gap: 9px;

    transition:
        color 0.25s ease,
        gap 0.25s ease;
}

.text-link:hover {
    color: var(--red);
    gap: 13px;
}


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

@media (max-width: 900px) {

    .two-column {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .welcome-image img {
        height: 420px;
    }

}


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

@media (max-width: 768px) {

    .two-column {
        gap: 35px;
    }

    .welcome-image img {
        height: 340px;
        border-radius: 15px;
    }

    .welcome-image:hover img {
        transform: scale(1.02) translateY(-3px);
    }

    .welcome-image::after {
        border-radius: 15px;
    }

    .image-badge {
        right: 8px;
        bottom: 15px;

        padding: 12px 15px;
    }

    .image-badge strong {
        font-size: 17px;
    }

    .image-badge span {
        font-size: 8px;
    }

    .checks {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 450px) {

    .welcome-image img {
        height: 300px;
    }

    .image-badge {
        right: 7px;
        bottom: 12px;

        padding: 10px 13px;
    }

    .image-badge strong {
        font-size: 15px;
    }

    .image-badge span {
        font-size: 7px;
    }

}


/* =========================================================
   COURSES
========================================================= */

.course-grid {
    display: grid;

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

    gap: 18px;
}

.course-card {
    position: relative;

    min-height: 300px;

    padding: 27px;

    background: white;

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

    border-radius: 15px;

    overflow: hidden;

    transition: var(--transition);
}

.course-card:hover {
    transform: translateY(-7px);

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

.course-card.featured {
    background:
        linear-gradient(145deg,
            var(--blue),
            var(--blue-dark));

    color: white;

    border-color: transparent;
}


.course-icon {
    width: 51px;

    height: 51px;

    border-radius: 12px;

    background: var(--blue-light);

    color: var(--blue);

    display: grid;

    place-items: center;

    font-size: 19px;

    margin-bottom: 24px;
}

.featured .course-icon {
    background:
        rgba(255, 255, 255, .1);

    color: white;
}

.course-card small {
    color: var(--red);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.course-card h3 {
    font-size: 18px;

    margin: 8px 0 12px;
}

.course-card p {
    color: var(--muted);

    font-size: 11px;

    line-height: 1.7;
}

.featured p {
    color:
        rgba(255, 255, 255, .7);
}

.course-link {
    position: absolute;

    left: 27px;

    bottom: 24px;

    color: var(--blue);

    font-size: 11px;

    font-weight: 800;

    display: flex;

    gap: 8px;

    align-items: center;
}

.featured .course-link {
    color: white;
}


/* =========================================================
   DIRECTOR
========================================================= */

.director {
    background: var(--light);
}

.director-grid {
    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 70px;

    align-items: center;
}

.director-image {
    position: relative;
}

.director-image img {
    height: 450px;

    object-fit: cover;

    border-radius: 18px;
}



/* =========================================================
   OUR COURSES SHOWCASE
========================================================= */

.courses-showcase {
    width: 100%;

    padding: 75px 0 85px;

    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f8faff 100%);

    position: relative;

    overflow: hidden;
}


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

.courses-container {
    width: min(1150px, 92%);

    margin: 0 auto;
}


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

.courses-heading {
    text-align: center;

    margin-bottom: 48px;
}

.courses-heading h2 {
    margin: 0;

    font-size: 32px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .3px;

    color: #1c2d46;
}

.courses-heading h2 span {
    color: #9b00c5;
}

.courses-heading p {
    margin: 10px 0 0;

    color: #001f91;

    font-size: 18px;

    font-weight: 700;

    font-style: italic;

    letter-spacing: .2px;
}


/* =========================================================
   COURSE GRID
========================================================= */

.courses-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    align-items: stretch;
}


/* =========================================================
   COURSE CARD
========================================================= */

.course-card {
    position: relative;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #d9e0ea;

    border-radius: 2px;

    box-shadow:
        0 7px 18px rgba(15, 35, 70, .10);

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


/* Hover */

.course-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 18px 38px rgba(15, 35, 70, .18);
}


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

.course-image {
    width: 100%;

    height: 208px;

    overflow: hidden;

    background: #edf1f6;
}

.course-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .5s ease;
}

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


/* =========================================================
   COURSE CONTENT
========================================================= */

.course-content {
    min-height: 150px;

    padding: 20px 15px 18px;

    color: #ffffff;
}


/* Different colors */

.chemistry-card .course-content,
.mathematics-card .course-content {
    background: #89008d;
}

.biology-card .course-content,
.physics-card .course-content {
    background: #078b0b;
}


/* =========================================================
   BOARD
========================================================= */

.course-board {
    display: block;

    margin-bottom: 9px;

    color: #ffffff;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 500;
}


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

.course-content h3 {
    margin: 0 0 10px;

    color: #fff000;

    font-size: 18px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .3px;
}


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

.course-content p {
    margin: 0;

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

    font-size: 12px;

    line-height: 1.65;

    font-weight: 400;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================================
   EXPLORE BUTTON
========================================================= */

.course-btn {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 15px;

    padding: 7px 12px;

    color: #ffffff;

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

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

    border-radius: 5px;

    font-size: 10px;

    font-weight: 700;

    text-decoration: none;

    transition: .25s ease;
}

.course-btn i {
    font-size: 9px;

    transition: .25s ease;
}

.course-btn:hover {
    background: #ffffff;

    color: #78007e;

    border-color: #ffffff;
}

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


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

@media (max-width: 1000px) {

    .courses-container {
        width: min(900px, 92%);
    }

    .courses-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

    .course-image {
        height: 230px;
    }

}


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

@media (max-width: 600px) {

    .courses-showcase {
        padding: 58px 0 65px;
    }

    .courses-container {
        width: 90%;
    }

    .courses-heading {
        margin-bottom: 32px;
    }

    .courses-heading h2 {
        font-size: 27px;
    }

    .courses-heading p {
        margin-top: 9px;

        font-size: 13px;

        line-height: 1.5;
    }

    .courses-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .course-image {
        height: 220px;
    }

    .course-content {
        min-height: auto;

        padding: 19px 16px 20px;
    }

    .course-content h3 {
        font-size: 18px;
    }

    .course-content p {
        font-size: 12px;
    }

}


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

@media (max-width: 400px) {

    .courses-showcase {
        padding: 50px 0 58px;
    }

    .courses-heading h2 {
        font-size: 24px;
    }

    .courses-heading p {
        font-size: 12px;
    }

    .course-image {
        height: 195px;
    }

    .course-content {
        padding: 17px 14px 18px;
    }

}

/* =========================================================
   WHY ISACC
========================================================= */

.feature-grid {
    display: grid;

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

    gap: 16px;
}

.feature-card {
    padding: 25px 21px;

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

    border-radius: 14px;

    background: white;

    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-6px);

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

.feature-icon {
    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: var(--blue-light);

    color: var(--blue);

    display: grid;

    place-items: center;

    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 14px;

    margin-bottom: 8px;
}

.feature-card p {
    font-size: 11px;

    line-height: 1.7;

    color: var(--muted);
}


/* =========================================================
   TEST SERIES
========================================================= */

.test-section {
    padding: 90px 0;

    background:
        linear-gradient(110deg,
            var(--blue-dark),
            var(--blue));

    color: white;
}

.test-grid {
    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 80px;

    align-items: center;
}

.test-section .section-tag {
    color: #ff5069;
}

.test-section h2 {
    font-size:
        clamp(35px, 4vw, 55px);

    line-height: 1.08;

    letter-spacing: -2px;
}

.test-section h2 span {
    color: #ff5069;
}

.test-section p {
    max-width: 560px;

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

    font-size: 13px;

    line-height: 1.8;

    margin: 18px 0 27px;
}

.test-buttons {
    display: flex;

    gap: 10px;
}

.test-buttons a {
    padding: 13px 17px;

    border-radius: 8px;

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

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

    font-size: 11px;

    font-weight: 700;

    display: flex;

    gap: 8px;

    align-items: center;
}

.test-buttons a:hover {
    background: white;

    color: var(--blue);
}

.test-circle {
    width: 260px;

    height: 260px;

    margin: auto;

    border-radius: 50%;

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

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

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}

.test-circle i {
    width: 62px;

    height: 62px;

    border-radius: 50%;

    background: var(--red);

    display: grid;

    place-items: center;

    font-size: 24px;

    margin-bottom: 14px;
}

.test-circle strong {
    font-size: 20px;
}

.test-circle small {
    font-size: 8px;

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

    margin-top: 8px;
}


/* =========================================================
   STATS
========================================================= */

.stats {
    padding: 52px 0;

    background: var(--red);

    color: white;
}

.stats-grid {
    display: grid;

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

.stat {
    text-align: center;

    padding: 10px;

    border-right:
        1px solid rgba(255, 255, 255, .2);
}

.stat:last-child {
    border-right: 0;
}

.stat i {
    font-size: 19px;

    margin-bottom: 9px;
}

.stat strong {
    display: block;

    font-size: 34px;
}

.stat span {
    font-size: 9px;

    opacity: .8;
}


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

.topper-grid {
    display: grid;

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

    gap: 20px;
}

.topper-card {
    overflow: hidden;

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

    border-radius: 14px;

    background: white;

    transition: var(--transition);
}

.topper-card:hover {
    transform: translateY(-7px);

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

.topper-card img {
    height: 290px;

    object-fit: cover;
}

.topper-card>div {
    position: relative;

    padding: 17px;
}

.topper-card small {
    color: var(--red);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}

.topper-card h3 {
    font-size: 14px;

    margin-top: 5px;
}

.topper-card strong {
    position: absolute;

    right: 17px;

    bottom: 17px;

    color: var(--red);

    font-size: 18px;
}


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

.gallery {
    background: var(--light);
}

.gallery-grid {
    display: grid;

    grid-template-columns:
        1.4fr 1fr;

    grid-template-rows:
        230px 230px;

    gap: 14px;
}

.gallery-item {
    position: relative;

    overflow: hidden;

    border-radius: 14px;
}

.gallery-item.large {
    grid-row:
        span 2;
}

.gallery-item img {
    height: 100%;

    object-fit: cover;

    transition: .5s;
}

.gallery-item:hover img {
    transform: scale(1.07);
}

.gallery-item>span {
    position: absolute;

    inset: 0;

    background:
        rgba(8, 29, 59, .45);

    display: grid;

    place-items: center;

    opacity: 0;

    transition: var(--transition);
}

.gallery-item:hover>span {
    opacity: 1;
}

.gallery-item>span i {
    width: 43px;

    height: 43px;

    border-radius: 50%;

    background: white;

    color: var(--blue);

    display: grid;

    place-items: center;
}


/* =========================================================
   CTA
========================================================= */

.cta {
    padding: 62px 0;

    background:
        linear-gradient(120deg,
            #edf2fa,
            #fff);
}

.cta-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}

.cta-inner small {
    color: var(--red);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.cta-inner h2 {
    font-size: 34px;

    margin-top: 8px;
}

.cta-inner h2 span {
    color: var(--blue);
}

.cta-inner>a {
    padding: 15px 21px;

    background: var(--blue);

    color: white;

    border-radius: 8px;

    font-size: 11px;

    font-weight: 700;

    display: flex;

    align-items: center;

    gap: 9px;
}

.cta-inner>a:hover {
    background: var(--red);
}


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

.footer {
    background: var(--blue-dark);

    color: white;
}

.footer-grid {
    padding: 65px 0;

    display: grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1.1fr;

    gap: 45px;
}

.footer-brand {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;
}

.footer-brand .brand-logo {
    width: 180px;
    height: 100px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    overflow: visible;
    background: transparent;
    flex-shrink: 0;
}

.footer-brand .brand-logo img {
    width: 180px;
    height: 100px;

    object-fit: contain;
    object-position: left center;

    display: block;
}

.footer-brand strong {
    font-size: 18px;
}

.footer-about>p {
    max-width: 330px;

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

    font-size: 10px;

    line-height: 1.8;
}

.footer-social {
    display: flex;

    gap: 8px;

    margin-top: 19px;
}

.footer-social a {
    width: 31px;

    height: 31px;

    border-radius: 50%;

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

    display: grid;

    place-items: center;

    font-size: 10px;
}

.footer-social a:hover {
    background: var(--red);
}

.footer-column {
    display: flex;

    flex-direction: column;

    gap: 11px;
}

.footer-column h3 {
    font-size: 13px;

    margin-bottom: 7px;
}

.footer-column a,
.footer-column p {
    color:
        rgba(255, 255, 255, .58);

    font-size: 10px;

    line-height: 1.7;
}

.footer-column a:hover {
    color: white;

    padding-left: 3px;
}

.footer-column p {
    display: flex;

    gap: 8px;
}

.footer-column p i {
    color: #ff4964;

    margin-top: 3px;
}


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

.footer-bottom {
    border-top:
        1px solid rgba(255, 255, 255, .1);
}

.footer-bottom .container {
    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: space-between;

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

    font-size: 9px;
}


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

@media (max-width: 1250px) {

    .navbar {
        width: 98%;
    }

    .nav-link {
        padding: 0 8px;

        font-size: 11px;
    }

    .brand-text small {
        display: none;
    }
}


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

@media (max-width: 1080px) {

    .mobile-menu {
        display: block;

        margin-left: auto;
    }


    .navigation {
        position: absolute;

        top: 100%;

        left: 0;
        right: 0;

        background: white;

        border-bottom: none;

        box-shadow:
            0 10px 28px rgba(8, 28, 58, .14);

        max-height: 0;

        overflow-y: auto;

        opacity: 0;

        visibility: hidden;

        transition:
            max-height .35s ease,
            opacity .25s ease;
    }


    .navigation.open {
        max-height:
            calc(100vh - 105px);

        opacity: 1;

        visibility: visible;
    }


    .nav-menu {
        display: block;

        padding: 10px !important;

        list-style: none !important;
    }


    .nav-menu li {
        list-style: none !important;
    }


    .nav-item {
        margin: 2px 0;
    }


    .nav-link {
        justify-content: flex-start;

        min-height: 47px;

        padding: 0 15px;

        border-radius: 8px;
    }


    /*
       Desktop hover bridge mobile mein disable.
    */

    .dropdown-item::after {
        display: none;
    }


    /* MAIN DROPDOWN */

    .dropdown {
        position: static;

        width: 100%;

        display: none;

        opacity: 1;

        visibility: visible;

        transform: none;

        pointer-events: auto;

        box-shadow: none;

        border-radius: 7px;

        background: #f5f7fb;

        margin: 3px 0;
    }


    .dropdown-item.open>.dropdown {
        display: block;
    }


    .dropdown::before {
        display: none;
    }


    /* SUB DROPDOWN */

    .sub-dropdown {
        position: static;

        width: 100%;

        display: none;

        opacity: 1;

        visibility: visible;

        transform: none;

        pointer-events: auto;

        box-shadow: none;

        border: 0;

        background: #eaf0f8;

        margin-top: 3px;
    }


    .dropdown-parent::after {
        display: none;
    }


    .dropdown-parent.open>.sub-dropdown {
        display: block;
    }


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


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


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

@media (max-width: 760px) {

    .top-bar {
        display: none;
    }


    .navbar {
        min-height: 68px;

        padding: 0 14px;
    }


    .brand-logo {
        width: 175px;
        height: 58px;
    }

    .brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }


    .brand-text strong {
        font-size: 16px;
    }


    .hero {
        height: 620px;

        min-height: 570px;
    }


    .hero-container {
        padding: 0 22px;
    }


    .hero h1 {
        font-size: 44px;

        letter-spacing: -2px;
    }


    .hero-content p {
        font-size: 13px;
    }


    .hero-arrow {
        display: none;
    }


    .quick-container {
        grid-template-columns: 1fr;
    }


    .quick-section {
        margin-top: -30px;
    }


    .section {
        padding: 75px 0;
    }


    .two-column,
    .director-grid,
    .test-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .welcome-image img,
    .director-image img {
        height: 390px;
    }


    .image-badge {
        right: 12px;
    }


    .checks {
        grid-template-columns: 1fr;
    }


    .course-grid {
        grid-template-columns: 1fr;
    }


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

        gap: 25px;
    }


    .stat {
        border-right: 0;
    }


    .topper-grid {
        grid-template-columns: 1fr;
    }


    .gallery-grid {
        grid-template-columns: 1fr;

        grid-template-rows:
            repeat(3, 230px);
    }


    .gallery-item.large {
        grid-row: auto;
    }


    .cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }


    .cta-inner h2 {
        font-size: 29px;
    }


    .footer-grid {
        grid-template-columns:
            1fr 1fr;

        gap: 35px;
    }


    .footer-bottom .container {
        flex-direction: column;

        justify-content: center;

        gap: 5px;

        padding: 13px 0;
    }
}


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

@media (max-width: 450px) {

    .hero h1 {
        font-size: 37px;
    }


    .hero-buttons {
        width: 100%;

        max-width: 320px;

        flex-direction: column;
    }


    .btn {
        width: 100%;
    }


    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   FINAL RESPONSIVE POLISH
   ========================================================= */

/* Large desktop */
@media (min-width: 1400px) {
    .hero-container {
        padding-left: 7%;
        padding-right: 7%;
    }
}

/* Tablet / small laptop */
@media (max-width: 1080px) {
    .navbar {
        width: 100%;
        padding: 0 22px;
        gap: 15px;
    }

    .brand-logo {
        width: 210px;
        height: 72px;
    }

    .hero {
        height: calc(100vh - 76px);
        min-height: 560px;
    }

    .hero-container {
        padding: 0 6%;
    }

    .hero-content {
        max-width: 680px;
    }

    .hero h1 {
        font-size: clamp(42px, 6vw, 64px);
    }

    .hero-arrow.previous {
        left: 15px;
    }

    .hero-arrow.next {
        right: 15px;
    }

    .hero-dots {
        left: 6%;
    }
}

/* Mobile */
@media (max-width: 760px) {
    .site-header {
        box-shadow:
            0 6px 18px rgba(8, 28, 58, .12);
    }

    .navbar {
        min-height: 68px;
        padding: 0 14px;
    }

    .brand-logo {
        width: 175px;
        height: 58px;
    }

    .mobile-menu {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
    }

    .navigation {
        border-bottom: none;
        max-height: 0;
    }

    .navigation.open {
        max-height: calc(100vh - 68px);
    }

    .hero {
        height: 600px;
        min-height: 600px;
    }

    .hero-container {
        padding: 0 22px;
        align-items: center;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero-tag {
        font-size: 9px;
        letter-spacing: 1.5px;
        margin-bottom: 14px;
    }

    .hero h1 {
        font-size: 43px;
        line-height: 1.04;
        letter-spacing: -1.8px;
        margin-bottom: 17px;
    }

    .hero-content p {
        max-width: 100%;
        font-size: 12px;
        line-height: 1.7;
        margin-bottom: 23px;
    }

    .hero-buttons {
        gap: 9px;
    }

    .btn {
        min-height: 46px;
        padding: 0 17px;
    }

    .hero-dots {
        left: 22px;
        bottom: 24px;
    }

    .quick-section {
        margin-top: -30px;
    }

    .quick-card {
        width: 245px;
        min-height: 90px;
    }

    .section {
        padding: 72px 0;
    }

    .section-heading {
        margin-bottom: 35px;
    }

    .section-heading h2,
    .section-content h2 {
        font-size: 34px;
    }

    .two-column,
    .director-grid,
    .test-grid {
        gap: 30px;
    }

    .welcome-image img,
    .director-image img {
        height: 340px;
    }

    .image-badge {
        right: 8px;
        bottom: 15px;
    }

    .test-circle {
        width: 220px;
        height: 220px;
    }

    .topper-card img {
        height: 320px;
    }

    .gallery-grid {
        grid-template-rows: repeat(3, 210px);
    }

    .cta {
        padding: 50px 0;
    }

    .footer-grid {
        padding: 50px 0;
    }
}

/* Small mobile */
@media (max-width: 450px) {
    .navbar {
        padding: 0 12px;
    }

    .brand-logo {
        width: 155px;
        height: 52px;
    }

    .mobile-menu {
        width: 40px;
        height: 40px;
    }

    .hero {
        height: 570px;
        min-height: 570px;
    }

    .hero-container {
        padding: 0 18px;
    }

    .hero h1 {
        font-size: 36px;
        letter-spacing: -1.4px;
    }

    .hero-content p {
        font-size: 11.5px;
    }

    .hero-buttons {
        width: 100%;
        max-width: 310px;
        flex-direction: column;
        align-items: stretch;
    }

    .btn {
        width: 100%;
    }

    .quick-card {
        width: 225px;
    }

    .quick-card h3 {
        font-size: 12px;
    }

    .quick-card p {
        font-size: 9px;
    }

    .section {
        padding: 62px 0;
    }

    .section-heading h2,
    .section-content h2 {
        font-size: 30px;
    }

    .welcome-image img,
    .director-image img {
        height: 300px;
    }

    .stats-grid {
        gap: 12px;
    }

    .stat strong {
        font-size: 28px;
    }

    .test-circle {
        width: 190px;
        height: 190px;
    }

    .test-circle strong {
        font-size: 17px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .brand-logo {
        width: 140px;
        height: 48px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero {
        min-height: 550px;
        height: 550px;
    }

    .quick-card {
        width: 210px;
    }
}

/* Accessibility / motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/*about section */
/* =========================================================
   ISACC - ALBERT
   MODERN ABOUT PAGE
========================================================= */

.about-page {
    background: #f7f9fc;
    color: #15223a;
}


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

.about-container {
    width: min(1180px, 92%);
    margin: auto;
}


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

.about-hero {
    min-height: 360px;

    position: relative;

    display: flex;
    align-items: center;

    background:
        linear-gradient(135deg,
            #081c3a,
            #173b73);

    overflow: hidden;
}

.about-hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    right: -180px;
    top: -250px;

    background: rgba(237, 23, 61, .15);
}

.about-hero::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    left: -180px;
    bottom: -220px;

    background: rgba(255, 255, 255, .05);
}

.about-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(8, 28, 58, .96),
            rgba(23, 59, 115, .80));
}

.about-hero-content {
    position: relative;
    z-index: 2;

    text-align: center;

    max-width: 800px;

    margin: auto;
}

.about-hero-content>span {
    display: inline-block;

    color: #ff526c;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 13px;
}

.about-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 6vw, 65px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;
}

.about-hero-content p {
    margin: 17px 0 20px;

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

    font-size: 14px;
}




/* =========================================================
   COMMON SECTION
========================================================= */

.about-section {
    padding: 100px 0;

    background: #ffffff;
}

.about-section:nth-child(even) {
    background: #f7f9fc;
}

.about-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 75px;

    align-items: center;
}


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

.about-image-wrap {
    position: relative;

    padding: 10px;
}

.about-image {
    position: relative;

    overflow: hidden;

    border-radius: 20px;

    box-shadow:
        0 25px 60px rgba(8, 28, 58, .16);
}

.about-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(23, 59, 115, .12),
            rgba(237, 23, 61, .08));

    opacity: 0;

    transition: .4s ease;

    pointer-events: none;
}

.about-image img {
    width: 100%;

    height: 440px;

    display: block;

    object-fit: cover;

    transition:
        transform .55s ease;
}

.about-image:hover img {
    transform: scale(1.06);
}

.about-image:hover::after {
    opacity: 1;
}


/* =========================================================
   IMAGE DECORATION
========================================================= */

.about-image-wrap::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    border-top: 4px solid #ed173d;
    border-left: 4px solid #ed173d;

    left: -2px;
    top: -2px;

    border-radius: 18px 0 0 0;
}

.about-image-wrap::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    border-right: 4px solid #173b73;
    border-bottom: 4px solid #173b73;

    right: -2px;
    bottom: -2px;

    border-radius: 0 0 18px 0;
}


/* =========================================================
   IMAGE CARD
========================================================= */

.about-image-card {
    position: absolute;

    right: -18px;
    bottom: 35px;

    z-index: 3;

    padding: 17px 22px;

    background: #ffffff;

    border-radius: 12px;

    box-shadow:
        0 15px 35px rgba(8, 28, 58, .18);

    display: flex;
    flex-direction: column;
}

.about-image-card strong {
    color: #173b73;

    font-size: 20px;
}

.about-image-card span {
    color: #6c788c;

    font-size: 9px;

    margin-top: 3px;
}



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

.about-content {
    max-width: 580px;
}

.about-label {
    display: inline-flex;

    align-items: center;

    padding: 9px 15px;

    border-radius: 30px;

    background: #edf3fb;

    color: #173b73;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 17px;
}

.about-content h2 {
    margin: 0 0 20px;

    color: #15223a;

    font-size: clamp(31px, 4vw, 46px);

    line-height: 1.12;

    letter-spacing: -1.5px;

    font-weight: 850;
}

.about-content h2 span {
    display: block;

    color: #ed173d;
}

.about-content p {
    margin: 0 0 17px;

    color: #68758a;

    font-size: 13px;

    line-height: 1.85;
}

.about-content strong {
    color: #26364e;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.about-highlights {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 25px;
}

.about-highlight {
    padding: 13px;

    border: 1px solid #e4e8ef;

    border-radius: 11px;

    background: #ffffff;

    display: flex;

    align-items: center;

    gap: 10px;

    transition: .3s ease;
}

.about-highlight:hover {
    transform: translateY(-4px);

    border-color: #cdd8e8;

    box-shadow:
        0 10px 25px rgba(12, 35, 70, .09);
}

.about-highlight>i {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius: 9px;

    background: #edf3fb;

    color: #173b73;

    font-size: 14px;
}

.about-highlight strong {
    display: block;

    font-size: 10px;

    margin-bottom: 3px;
}

.about-highlight span {
    display: block;

    color: #8792a3;

    font-size: 8px;
}


/* =========================================================
   MISSION POINTS
========================================================= */

.mission-points {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 23px;
}

.mission-points div {
    color: #536176;

    font-size: 10px;

    font-weight: 600;
}

.mission-points i {
    color: #ed173d;

    margin-right: 5px;
}


/* =========================================================
   COMMITMENT
========================================================= */

.commitment-list {
    margin-top: 25px;

    display: flex;
    flex-direction: column;

    gap: 13px;
}

.commitment-list>div {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    color: #637086;

    font-size: 12px;

    line-height: 1.6;
}

.commitment-list i {
    width: 21px;
    height: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    margin-top: 1px;

    border-radius: 50%;

    background: #edf3fb;

    color: #173b73;

    font-size: 8px;
}


/* =========================================================
   CTA
========================================================= */

.about-cta {
    padding: 70px 0;

    background:
        linear-gradient(135deg,
            #081c3a,
            #173b73);
}

.about-cta-box {
    padding: 42px 50px;

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

    border-radius: 20px;

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

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.about-cta-box span {
    color: #ff526c;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.about-cta-box h2 {
    margin: 8px 0;

    color: #ffffff;

    font-size: 32px;
}

.about-cta-box h2 strong {
    color: #ff526c;
}

.about-cta-box p {
    margin: 0;

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

    font-size: 12px;
}

.about-cta-btn {
    min-height: 50px;

    padding: 0 22px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    border-radius: 9px;

    background: #ed173d;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    text-decoration: none;

    transition: .3s ease;
}

.about-cta-btn:hover {
    background: #ffffff;

    color: #173b73;

    transform: translateY(-3px);
}


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

@media (max-width: 900px) {

    .about-section {
        padding: 75px 0;
    }

    .about-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .about-content {
        max-width: 100%;
    }

    .about-image img {
        height: 400px;
    }

    .reverse-mobile .about-image-wrap {
        order: -1;
    }

    .about-cta-box {
        padding: 35px;
    }

}


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

@media (max-width: 600px) {

    .about-container {
        width: 90%;
    }

    .about-hero {
        min-height: 300px;
    }

    .about-hero h1 {
        font-size: 40px;
    }

    .about-hero-content>p {
        font-size: 12px;
    }

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

    .about-grid {
        gap: 35px;
    }

    .about-image-wrap {
        padding: 5px;
    }

    .about-image img {
        height: 300px;
    }

    .about-image-wrap::before,
    .about-image-wrap::after {
        width: 55px;
        height: 55px;

        border-width: 3px;
    }

    .about-image-card {
        right: 5px;
        bottom: 20px;

        padding: 12px 15px;
    }

    .about-image-card strong {
        font-size: 16px;
    }

    .about-image-card span {
        font-size: 8px;
    }

    .section-number {
        left: 5px;
        bottom: 20px;

        width: 48px;
        height: 48px;

        font-size: 12px;
    }

    .about-content h2 {
        font-size: 31px;
    }

    .about-content p {
        font-size: 12px;

        line-height: 1.75;
    }

    .about-highlights,
    .mission-points {
        grid-template-columns: 1fr;
    }

    .about-cta {
        padding: 50px 0;
    }

    .about-cta-box {
        padding: 28px 22px;

        flex-direction: column;

        align-items: flex-start;
    }

    .about-cta-box h2 {
        font-size: 26px;
    }

    .about-cta-btn {
        width: 100%;
    }

}


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

@media (max-width: 400px) {

    .about-hero {
        min-height: 270px;
    }

    .about-hero h1 {
        font-size: 34px;
    }

    .about-image img {
        height: 260px;
    }

}


/*director*/
/* =========================================================
   ISACC - ALBERT
   DIRECTOR DESK
   MODERN PROFESSIONAL DESIGN
========================================================= */

.director-page {
    width: 100%;

    background: #f7f9fc;

    color: #15223a;

    overflow: hidden;
}

.director-container {
    width: min(1180px, 92%);

    margin: 0 auto;
}


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

.director-hero {
    min-height: 340px;

    position: relative;

    display: flex;
    align-items: center;

    background:
        linear-gradient(135deg,
            #081c3a,
            #173b73);

    overflow: hidden;
}

.director-hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    right: -180px;
    top: -270px;

    background:
        rgba(237, 23, 61, .15);
}

.director-hero::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    left: -170px;
    bottom: -240px;

    background:
        rgba(255, 255, 255, .05);
}

.director-hero-bg {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(8, 28, 58, .94),
            rgba(23, 59, 115, .75));
}

.director-hero-content {
    position: relative;

    z-index: 2;

    text-align: center;

    max-width: 850px;

    margin: auto;
}

.director-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #ff536b;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;
}

.director-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(42px, 6vw, 64px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;
}

.director-hero h1 span {
    color: #ff526c;
}

.director-hero-content p {
    margin: 17px 0;

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

    font-size: 14px;
}



/* =========================================================
   INTRO
========================================================= */

.director-intro {
    padding: 100px 0;

    background: #ffffff;
}

.director-main-grid {
    display: grid;

    grid-template-columns:
        440px 1fr;

    gap: 75px;

    align-items: center;
}


/* =========================================================
   DIRECTOR PHOTO
========================================================= */

.director-photo-area {
    position: relative;

    padding: 12px;
}

.director-photo-frame {
    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
        0 25px 60px rgba(8, 28, 58, .18);
}

.director-photo-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(23, 59, 115, .08),
            rgba(237, 23, 61, .10));

    opacity: 0;

    transition: .4s ease;

    pointer-events: none;
}

.director-photo-frame img {
    width: 100%;

    height: 500px;

    display: block;

    object-fit: cover;

    transition:
        transform .55s ease;
}

.director-photo-frame:hover img {
    transform: scale(1.06);
}

.director-photo-frame:hover::after {
    opacity: 1;
}


/* =========================================================
   PHOTO DECORATION
========================================================= */

.director-photo-area::before {
    content: "";

    position: absolute;

    top: -2px;
    left: -2px;

    width: 100px;
    height: 100px;

    border-top: 5px solid #ed173d;
    border-left: 5px solid #ed173d;

    border-radius: 20px 0 0 0;
}

.director-photo-area::after {
    content: "";

    position: absolute;

    bottom: -2px;
    right: -2px;

    width: 100px;
    height: 100px;

    border-right: 5px solid #173b73;
    border-bottom: 5px solid #173b73;

    border-radius: 0 0 20px 0;
}


/* =========================================================
   EXPERIENCE BADGE
========================================================= */

.director-experience {
    position: absolute;

    top: 35px;
    right: -25px;

    z-index: 4;

    min-width: 105px;

    padding: 14px 17px;

    border-radius: 13px;

    background:
        linear-gradient(135deg,
            #ed173d,
            #c80d2f);

    color: #ffffff;

    display: flex;

    align-items: center;

    gap: 9px;

    box-shadow:
        0 12px 28px rgba(237, 23, 61, .28);
}

.director-experience strong {
    font-size: 27px;

    line-height: 1;
}

.director-experience span {
    font-size: 8px;

    line-height: 1.3;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;
}


/* =========================================================
   NAME CARD
========================================================= */

.director-name-card {
    position: absolute;

    left: -20px;
    bottom: 35px;

    z-index: 4;

    min-width: 190px;

    padding: 17px 20px;

    background: #ffffff;

    border-radius: 13px;

    box-shadow:
        0 15px 35px rgba(8, 28, 58, .18);
}

.director-name-card span {
    display: block;

    margin-bottom: 4px;

    color: #ed173d;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.director-name-card h2 {
    margin: 0;

    color: #173b73;

    font-size: 20px;
}

.director-name-card p {
    margin: 3px 0 0;

    color: #8993a3;

    font-size: 8px;

    font-weight: 600;
}


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

.director-content {
    max-width: 620px;
}


.director-content h2 {
    margin: 18px 0 22px;

    color: #15223a;

    font-size: clamp(32px, 4vw, 47px);

    line-height: 1.1;

    letter-spacing: -1.5px;
}

.director-content h2 span {
    display: block;

    color: #ed173d;
}

.director-content>p {
    margin: 0 0 16px;

    color: #68758a;

    font-size: 13px;

    line-height: 1.85;
}


/* =========================================================
   QUOTE
========================================================= */

.director-quote {
    position: relative;

    margin: 25px 0;

    padding: 20px 22px 20px 48px;

    background: #f7f9fc;

    border-left: 4px solid #ed173d;

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

.director-quote>i {
    position: absolute;

    left: 17px;
    top: 20px;

    color: #ed173d;

    font-size: 21px;
}

.director-quote p {
    margin: 0;

    color: #35455d;

    font-size: 13px;

    line-height: 1.75;

    font-weight: 600;
}





/* =========================================================
   HIGHLIGHTS
========================================================= */

.director-highlights {
    padding: 95px 0;

    background: #f7f9fc;
}

.director-section-heading {
    text-align: center;

    max-width: 650px;

    margin: 0 auto 45px;
}

.director-section-heading>span {
    color: #ed173d;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.director-section-heading h2 {
    margin: 9px 0 10px;

    color: #15223a;

    font-size: 38px;
}

.director-section-heading h2 strong {
    color: #173b73;
}

.director-section-heading p {
    margin: 0;

    color: #778397;

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   FEATURE GRID
========================================================= */

.director-feature-grid {
    display: grid;

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

    gap: 17px;
}

.director-feature {
    padding: 25px 20px;

    background: #ffffff;

    border: 1px solid #e4e8ef;

    border-radius: 15px;

    display: flex;

    flex-direction: column;

    gap: 17px;

    transition: .35s ease;
}

.director-feature:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 35px rgba(12, 35, 70, .10);

    border-color: #d1dbe9;
}

.director-feature-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #edf3fb;

    color: #173b73;

    font-size: 18px;

    transition: .3s ease;
}

.director-feature:hover .director-feature-icon {
    background: #ed173d;

    color: #ffffff;
}

.director-feature h3 {
    margin: 0 0 7px;

    color: #1d2c43;

    font-size: 14px;
}

.director-feature p {
    margin: 0;

    color: #7b8798;

    font-size: 10px;

    line-height: 1.7;
}


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

.director-details {
    padding: 100px 0;

    background: #ffffff;
}

.director-details-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: start;
}

.director-detail-column h2,
.director-map-column h2 {
    margin: 17px 0 27px;

    color: #15223a;

    font-size: 35px;

    line-height: 1.15;

    letter-spacing: -1px;
}

.director-detail-column h2 span,
.director-map-column h2 span {
    color: #ed173d;
}


/* =========================================================
   INFO CARDS
========================================================= */

.director-info-card {
    display: flex;

    gap: 15px;

    padding: 17px;

    margin-bottom: 12px;

    background: #f7f9fc;

    border: 1px solid #e5eaf1;

    border-radius: 12px;

    transition: .3s ease;
}

.director-info-card:hover {
    transform: translateX(5px);

    border-color: #ccd7e6;

    box-shadow:
        0 8px 22px rgba(12, 35, 70, .07);
}

.director-info-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: #173b73;

    color: #ffffff;

    font-size: 14px;
}

.director-info-card strong {
    display: block;

    margin-bottom: 5px;

    color: #26364e;

    font-size: 11px;
}

.director-info-card p {
    margin: 2px 0;

    color: #718096;

    font-size: 10px;

    line-height: 1.6;
}

.director-info-card a {
    color: #173b73;

    text-decoration: none;

    font-weight: 600;
}

.director-info-card a:hover {
    color: #ed173d;
}


/* =========================================================
   MAP
========================================================= */

.director-map {
    width: 100%;

    height: 390px;

    overflow: hidden;

    border-radius: 17px;

    border: 1px solid #e1e6ee;

    box-shadow:
        0 15px 35px rgba(12, 35, 70, .10);
}

.director-map iframe {
    width: 100%;
    height: 100%;

    border: 0;

    display: block;
}


/* =========================================================
   CTA
========================================================= */

.director-cta {
    padding: 70px 0;

    background:
        linear-gradient(135deg,
            #081c3a,
            #173b73);
}

.director-cta-box {
    padding: 42px 50px;

    border-radius: 20px;

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

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}

.director-cta-box>div>span {
    color: #ff526c;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2px;
}

.director-cta-box h2 {
    margin: 8px 0;

    color: #ffffff;

    font-size: 31px;
}

.director-cta-box h2 strong {
    color: #ff526c;
}

.director-cta-box p {
    margin: 0;

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

    font-size: 11px;
}

.director-cta-btn {
    min-height: 50px;

    padding: 0 22px;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    border-radius: 9px;

    background: #ed173d;

    color: #ffffff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 800;

    transition: .3s ease;
}

.director-cta-btn:hover {
    background: #ffffff;

    color: #173b73;

    transform: translateY(-3px);
}


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

@media (max-width: 1000px) {

    .director-main-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .director-photo-area {
        width: min(500px, 100%);

        margin: auto;
    }

    .director-content {
        max-width: 100%;
    }

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

    .director-details-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

}


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

@media (max-width: 600px) {

    .director-container {
        width: 90%;
    }

    .director-hero {
        min-height: 290px;
    }

    .director-hero h1 {
        font-size: 40px;
    }

    .director-hero-content>p {
        font-size: 11px;
    }

    .director-intro,
    .director-highlights,
    .director-details {
        padding: 60px 0;
    }

    .director-main-grid {
        gap: 38px;
    }

    .director-photo-frame img {
        height: 390px;
    }

    .director-experience {
        right: -5px;

        top: 25px;

        padding: 11px 13px;
    }

    .director-experience strong {
        font-size: 23px;
    }

    .director-name-card {
        left: 5px;

        bottom: 25px;

        padding: 13px 16px;
    }

    .director-content h2 {
        font-size: 32px;
    }

    .director-content>p {
        font-size: 12px;
    }

    .director-quote {
        padding-left: 43px;
    }

    .director-feature-grid {
        grid-template-columns: 1fr;
    }

    .director-section-heading h2 {
        font-size: 29px;
    }

    .director-detail-column h2,
    .director-map-column h2 {
        font-size: 29px;
    }

    .director-map {
        height: 300px;
    }

    .director-cta {
        padding: 50px 0;
    }

    .director-cta-box {
        padding: 28px 22px;

        flex-direction: column;

        align-items: flex-start;
    }

    .director-cta-box h2 {
        font-size: 25px;
    }

    .director-cta-btn {
        width: 100%;
    }

}


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

@media (max-width: 400px) {

    .director-hero {
        min-height: 270px;
    }

    .director-hero h1 {
        font-size: 34px;
    }

    .director-photo-frame img {
        height: 330px;
    }

    .director-experience {
        right: 0;
    }

    .director-name-card {
        left: 0;
    }

}

/* =========================================================
   FUNCTION LIST PAGE
========================================================= */

.function-page {
    width: 100%;
    overflow: hidden;
    background: #f7f9fc;
}

.function-container {
    width: min(1250px, 92%);
    margin: auto;
}


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

.function-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        linear-gradient(120deg,
            #081c3a,
            #173b73 55%,
            #294f8d);
}

.function-hero::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    right: -100px;
    top: -180px;
}

.function-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(237, 23, 61, .25);
    border-radius: 50%;
    left: -120px;
    bottom: -180px;
}

.function-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 75% 40%,
            rgba(237, 23, 61, .16),
            transparent 35%);
}

.function-hero-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
    padding: 65px 0;
}

.function-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #ff536d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;

    margin-bottom: 17px;
}

.function-kicker i {
    font-size: 13px;
}

.function-hero h1 {
    margin: 0 0 17px;

    color: #ffffff;
    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.function-hero h1 span {
    display: block;
    color: #ff405d;
}

.function-hero p {
    max-width: 620px;
    margin: 0;

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

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   FUNCTION SECTION
========================================================= */

.function-section {
    padding: 75px 0 85px;
    background: #f7f9fc;
}


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

.function-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 48px;
}

.function-heading-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    color: #ed173d;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;

    margin-bottom: 14px;
}

.function-heading-tag span {
    width: 28px;
    height: 2px;
    background: #ed173d;
    border-radius: 5px;
}

.function-heading h2 {
    margin: 0 0 13px;

    color: #15223a;

    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.15;
    letter-spacing: -1.2px;
}

.function-heading h2 strong {
    color: #173b73;
}

.function-heading p {
    margin: 0;

    color: #6c788c;

    font-size: 14px;
    line-height: 1.8;
}


/* =========================================================
   EVENT GRID
========================================================= */

.function-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


/* =========================================================
   EVENT CARD
========================================================= */

.function-card {
    position: relative;

    background: #ffffff;

    border: 1px solid #e4e8ef;
    border-radius: 17px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(12, 35, 70, .07);

    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.function-card:hover {
    transform: translateY(-9px);

    border-color: rgba(23, 59, 115, .18);

    box-shadow:
        0 25px 55px rgba(12, 35, 70, .15);
}


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

.function-image {
    position: relative;

    height: 270px;

    overflow: hidden;

    background: #edf1f7;
}

.function-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s ease,
        filter .4s ease;
}

.function-card:hover .function-image img {
    transform: scale(1.08);
    filter: brightness(.82);
}


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

.function-image-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(8, 28, 58, .35);

    opacity: 0;

    transition: opacity .4s ease;
}

.function-card:hover .function-image-overlay {
    opacity: 1;
}

.function-image-overlay span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 17px;

    color: #173b73;
    background: #ffffff;

    border-radius: 30px;

    font-size: 11px;
    font-weight: 800;

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




/* =========================================================
   CARD CONTENT
========================================================= */

.function-content {
    padding: 22px 23px 24px;
}

.function-type {
    display: block;

    color: #ed173d;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;

    margin-bottom: 8px;
}

.function-content h3 {
    margin: 0;

    color: #15223a;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

.function-content h3 small {
    display: inline;

    color: #173b73;

    font-size: 13px;
    font-weight: 600;
}

.function-line {
    width: 38px;
    height: 3px;

    margin: 13px 0;

    background: #ed173d;
    border-radius: 10px;

    transition: width .35s ease;
}

.function-card:hover .function-line {
    width: 65px;
}

.function-content p {
    margin: 0;

    color: #6c788c;

    font-size: 12px;
    line-height: 1.75;
}


/* =========================================================
   CTA
========================================================= */

.function-cta {
    padding: 0 0 75px;

    background: #f7f9fc;
}

.function-cta-box {
    position: relative;

    display: flex;
    align-items: center;
    gap: 22px;

    padding: 30px 35px;

    border-radius: 18px;

    overflow: hidden;

    background:
        linear-gradient(110deg,
            #081c3a,
            #173b73);

    box-shadow:
        0 20px 50px rgba(8, 28, 58, .18);
}

.function-cta-box::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -80px;
    top: -110px;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.function-cta-icon {
    position: relative;
    z-index: 2;

    width: 55px;
    height: 55px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: #ffffff;
    background: #ed173d;

    font-size: 20px;

    box-shadow:
        0 10px 25px rgba(237, 23, 61, .3);
}

.function-cta-text {
    position: relative;
    z-index: 2;

    flex: 1;
}

.function-cta-text span {
    color: #ff526b;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.function-cta-text h2 {
    margin: 4px 0 4px;

    color: #ffffff;

    font-size: 22px;
    line-height: 1.3;
}

.function-cta-text p {
    margin: 0;

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

    font-size: 12px;
}

.function-cta-btn {
    position: relative;
    z-index: 2;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    min-height: 46px;

    padding: 0 19px;

    color: #173b73;
    background: #ffffff;

    border-radius: 8px;

    font-size: 11px;
    font-weight: 800;

    transition: .3s ease;
}

.function-cta-btn:hover {
    transform: translateY(-3px);

    color: #ffffff;
    background: #ed173d;

    box-shadow:
        0 10px 25px rgba(237, 23, 61, .3);
}


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

@media (max-width: 1000px) {

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

    .function-image {
        height: 260px;
    }

}


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

@media (max-width: 650px) {

    .function-container {
        width: min(92%, 500px);
    }

    .function-hero {
        min-height: 270px;
    }

    .function-hero-content {
        padding: 55px 0;
    }

    .function-hero h1 {
        font-size: 38px;
        letter-spacing: -1.5px;
    }

    .function-hero p {
        font-size: 13px;
    }

    .function-section {
        padding: 55px 0 60px;
    }

    .function-heading {
        margin-bottom: 32px;
    }

    .function-heading h2 {
        font-size: 29px;
    }

    .function-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .function-image {
        height: 280px;
    }

    .function-content {
        padding: 20px;
    }

    .function-cta {
        padding-bottom: 55px;
    }

    .function-cta-box {
        flex-direction: column;
        align-items: flex-start;

        padding: 27px 23px;
    }

    .function-cta-btn {
        width: 100%;
        justify-content: center;
    }

}


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

@media (max-width: 400px) {

    .function-hero h1 {
        font-size: 33px;
    }

    .function-image {
        height: 240px;
    }

    .function-content h3 {
        font-size: 18px;
    }

}

/* =========================================================
   STUDENT FEW WORDS PAGE
========================================================= */

.student-words-page {
    width: 100%;
    overflow: hidden;
    background: #f6f8fc;
}

.student-words-container {
    width: min(1250px, 92%);
    margin: auto;
}


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

.student-words-hero {
    position: relative;
    min-height: 300px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(120deg,
            #071a36,
            #173b73 55%,
            #294f8d);
}

.student-words-hero::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -130px;
    top: -210px;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.student-words-hero::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -140px;
    bottom: -190px;

    border: 1px solid rgba(237, 23, 61, .25);
    border-radius: 50%;
}

.student-words-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 75% 45%,
            rgba(237, 23, 61, .18),
            transparent 34%);
}

.student-words-hero-content {
    position: relative;
    z-index: 2;

    padding: 62px 0;
}

.student-words-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 15px;

    color: #ff4b67;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.student-words-kicker i {
    font-size: 13px;
}

.student-words-hero h1 {
    margin: 0 0 14px;

    color: #fff;

    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.student-words-hero h1 span {
    color: #ff3f5d;
}

.student-words-hero p {
    max-width: 650px;

    margin: 0 0 22px;

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

    font-size: 14px;
    line-height: 1.8;
}

.student-words-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

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

    font-size: 11px;
}

.student-words-breadcrumb a {
    color: rgba(255, 255, 255, .72);

    transition: .25s ease;
}

.student-words-breadcrumb a:hover {
    color: #ff405d;
}

.student-words-breadcrumb i {
    font-size: 8px;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.student-words-section {
    padding: 75px 0 80px;
}


/* =========================================================
   TWO COLUMN
========================================================= */

.student-words-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr);

    gap: 28px;

    align-items: start;
}


/* =========================================================
   COMMON CARD
========================================================= */

.student-message-card,
.student-features-card {
    background: #fff;

    border: 1px solid #e4e8ef;
    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(12, 35, 70, .07);

    overflow: hidden;

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

.student-message-card:hover,
.student-features-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 22px 50px rgba(12, 35, 70, .12);
}


/* =========================================================
   CARD TOP
========================================================= */

.student-card-top {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 25px 27px;

    background:
        linear-gradient(135deg,
            #f5f8fd,
            #ffffff);

    border-bottom: 1px solid #e9edf3;
}

.student-card-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    color: #fff;
    background: #173b73;

    font-size: 19px;

    box-shadow:
        0 8px 20px rgba(23, 59, 115, .22);
}

.feature-icon {


    box-shadow:
        0 8px 20px rgba(237, 23, 61, .22);
}

.student-card-label {
    display: block;

    margin-bottom: 5px;

    color: #ed173d;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.student-card-top h2 {
    margin: 0;

    color: #15223a;

    font-size: 24px;
    line-height: 1.2;
}

.student-card-top h2 span {
    color: #173b73;
}


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

.student-message-content {
    padding: 28px 30px 15px;
}

.student-message-content p {
    position: relative;

    margin: 0 0 20px;
    padding-left: 18px;

    color: #5e6c80;

    font-size: 13px;
    line-height: 1.85;
}

.student-message-content p::before {
    content: "";

    position: absolute;

    left: 0;
    top: 8px;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #ed173d;
}

.student-message-content p:last-child {
    margin-bottom: 5px;
}


/* =========================================================
   SIGNATURE
========================================================= */

.student-message-sign {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 8px 30px 28px;
    padding-top: 17px;

    border-top: 1px solid #e8ecf2;
}

.sign-line {
    width: 38px;
    height: 3px;

    border-radius: 10px;

    background: #ed173d;
}

.student-message-sign strong {
    display: block;

    color: #173b73;

    font-size: 13px;
}

.student-message-sign span {
    display: block;

    margin-top: 2px;

    color: #8993a2;

    font-size: 9px;
    letter-spacing: 1px;
}


/* =========================================================
   FEATURES
========================================================= */

.student-features-list {
    padding: 8px 27px 20px;
}

.student-feature {
    display: grid;

    grid-template-columns: 35px 1fr;

    gap: 13px;

    padding: 17px 0;

    border-bottom: 1px solid #edf0f4;
}

.student-feature:last-child {
    border-bottom: 0;
}

.feature-number {
    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    color: #173b73;
    background: #edf3fb;

    font-size: 9px;
    font-weight: 800;

    transition: .3s ease;
}

.student-feature:hover .feature-number {
    color: #fff;
    background: #ed173d;

    transform: rotate(-5deg);
}

.student-feature h3 {
    margin: 0 0 5px;

    color: #15223a;

    font-size: 13px;
    font-weight: 800;
}

.student-feature p {
    margin: 0;

    color: #6c788c;

    font-size: 11px;
    line-height: 1.65;
}


/* =========================================================
   BOTTOM IMAGE AREA
========================================================= */

.student-bottom-image {
    margin-top: 55px;

    text-align: center;
}

.student-image-heading {
    max-width: 700px;

    margin: 0 auto 27px;
}

.student-image-heading span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 9px;

    color: #ed173d;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.student-image-heading h2 {
    margin: 0;

    color: #15223a;

    font-size: clamp(25px, 4vw, 37px);
    line-height: 1.25;
}

.student-image-heading strong {
    color: #173b73;
}


/* =========================================================
   IMAGE
   FIXED WIDTH + AUTO HEIGHT
========================================================= */

.student-image-frame {
    width: min(100%, 1050px);

    margin: auto;

    overflow: hidden;

    border-radius: 18px;

    background: #fff;

    border: 1px solid #e3e8f0;

    box-shadow:
        0 18px 45px rgba(12, 35, 70, .12);
}

.student-image-frame img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: contain;

    transition:
        transform .6s ease;
}

.student-image-frame:hover img {
    transform: scale(1.025);
}


/* =========================================================
   CTA
========================================================= */

.student-words-cta {
    padding: 0 0 75px;
}

.student-cta-box {
    position: relative;

    display: flex;
    align-items: center;
    gap: 20px;

    padding: 28px 32px;

    border-radius: 18px;

    overflow: hidden;

    background:
        linear-gradient(110deg,
            #081c3a,
            #173b73);

    box-shadow:
        0 20px 50px rgba(8, 28, 58, .17);
}

.student-cta-box::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -80px;
    top: -120px;

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

    border-radius: 50%;
}

.student-cta-icon {
    position: relative;
    z-index: 2;

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: #ed173d;

    border-radius: 14px;

    font-size: 20px;
}

.student-cta-content {
    position: relative;
    z-index: 2;

    flex: 1;
}

.student-cta-content span {
    color: #ff526b;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.student-cta-content h2 {
    margin: 4px 0;

    color: #fff;

    font-size: 21px;
}

.student-cta-content p {
    margin: 0;

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

    font-size: 11px;
}

.student-cta-btn {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 45px;

    padding: 0 19px;

    border-radius: 8px;

    color: #173b73;
    background: #fff;

    font-size: 11px;
    font-weight: 800;

    transition: .3s ease;
}

.student-cta-btn:hover {
    color: #fff;
    background: #ed173d;

    transform: translateY(-3px);
}


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

@media (max-width: 900px) {

    .student-words-grid {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 600px) {

    .student-words-container {
        width: 92%;
    }

    .student-words-hero {
        min-height: 270px;
    }

    .student-words-hero-content {
        padding: 50px 0;
    }

    .student-words-hero h1 {
        font-size: 36px;
    }

    .student-words-hero p {
        font-size: 12px;
    }

    .student-words-section {
        padding: 50px 0 60px;
    }

    .student-card-top {
        padding: 20px;
    }

    .student-card-icon {
        width: 46px;
        height: 46px;

        font-size: 16px;
    }

    .student-card-top h2 {
        font-size: 20px;
    }

    .student-message-content {
        padding: 23px 20px 10px;
    }

    .student-message-content p {
        font-size: 12px;
    }

    .student-message-sign {
        margin-left: 20px;
        margin-right: 20px;
    }

    .student-features-list {
        padding-left: 20px;
        padding-right: 20px;
    }

    .student-bottom-image {
        margin-top: 42px;
    }

    .student-image-frame {
        border-radius: 12px;
    }

    .student-words-cta {
        padding-bottom: 55px;
    }

    .student-cta-box {
        flex-direction: column;
        align-items: flex-start;

        padding: 25px 22px;
    }

    .student-cta-btn {
        width: 100%;
    }

}

/* =========================================================
   PARENT FEW WORDS PAGE
========================================================= */

.parent-words-page {
    width: 100%;
    overflow: hidden;
    background: #f6f8fc;
}

.parent-container {
    width: min(1250px, 92%);
    margin: auto;
}


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

.parent-words-hero {
    position: relative;
    min-height: 300px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(120deg,
            #071a36,
            #173b73 55%,
            #294f8d);
}

.parent-words-hero::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -130px;
    top: -220px;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.parent-words-hero::after {
    content: "";

    position: absolute;

    width: 290px;
    height: 290px;

    left: -150px;
    bottom: -200px;

    border: 1px solid rgba(237, 23, 61, .25);
    border-radius: 50%;
}

.parent-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 75% 45%,
            rgba(237, 23, 61, .18),
            transparent 35%);
}

.parent-hero-content {
    position: relative;
    z-index: 2;

    padding: 62px 0;
}

.parent-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 15px;

    color: #ff4b67;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.parent-hero-kicker i {
    font-size: 13px;
}

.parent-hero-content h1 {
    margin: 0 0 14px;

    color: #fff;

    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.parent-hero-content h1 span {
    color: #ff405d;
}

.parent-hero-content p {
    max-width: 650px;

    margin: 0 0 22px;

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

    font-size: 14px;
    line-height: 1.8;
}

.parent-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

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

    font-size: 11px;
}

.parent-breadcrumb a {
    color: rgba(255, 255, 255, .72);

    transition: .25s ease;
}

.parent-breadcrumb a:hover {
    color: #ff405d;
}

.parent-breadcrumb i {
    font-size: 8px;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.parent-words-section {
    padding: 75px 0 80px;
}


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

.parent-section-heading {
    max-width: 720px;

    margin: 0 auto 48px;

    text-align: center;
}

.parent-section-heading>span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 10px;

    color: #ed173d;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.parent-section-heading h2 {
    margin: 0 0 12px;

    color: #15223a;

    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.15;
    letter-spacing: -1px;
}

.parent-section-heading h2 strong {
    color: #173b73;
}

.parent-section-heading p {
    margin: 0;

    color: #6c788c;

    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   CONTENT GRID
========================================================= */

.parent-content-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr) minmax(330px, .75fr);

    gap: 30px;

    align-items: stretch;
}


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

.parent-message-card {
    background: #fff;

    border: 1px solid #e3e8f0;
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(12, 35, 70, .07);

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

.parent-message-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 22px 50px rgba(12, 35, 70, .12);
}


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

.parent-message-header {
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 26px 30px;

    background:
        linear-gradient(135deg,
            #f4f7fc,
            #fff);

    border-bottom: 1px solid #e8edf3;
}

.parent-message-icon {
    width: 53px;
    height: 53px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    background: #173b73;

    border-radius: 14px;

    font-size: 18px;

    box-shadow:
        0 9px 22px rgba(23, 59, 115, .22);
}

.parent-message-header span {
    display: block;

    margin-bottom: 5px;

    color: #ed173d;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.parent-message-header h3 {
    margin: 0;

    color: #15223a;

    font-size: 22px;
    line-height: 1.25;
}

.parent-message-header h3 em {
    color: #173b73;
    font-style: normal;
}


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

.parent-message-body {
    padding: 28px 30px 8px;
}

.parent-message-body p {
    position: relative;

    margin: 0 0 19px;
    padding-left: 17px;

    color: #5f6c80;

    font-size: 13px;
    line-height: 1.85;
}

.parent-message-body p::before {
    content: "";

    position: absolute;

    left: 0;
    top: 9px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #ed173d;
}

.parent-message-body strong {
    color: #173b73;
    font-weight: 800;
}


/* =========================================================
   SIGNATURE
========================================================= */

.parent-signature {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 5px 30px 28px;
    padding-top: 18px;

    border-top: 1px solid #e9edf3;
}

.parent-sign-line {
    width: 38px;
    height: 3px;

    border-radius: 10px;

    background: #ed173d;
}

.parent-signature strong {
    display: block;

    color: #173b73;

    font-size: 12px;
}

.parent-signature small {
    display: block;

    margin-top: 2px;

    color: #8993a2;

    font-size: 9px;
    letter-spacing: 1px;
}


/* =========================================================
   IMAGE CARD
========================================================= */

.parent-image-card {
    display: flex;
    flex-direction: column;

    background: #fff;

    border: 1px solid #e3e8f0;
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(12, 35, 70, .07);

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

.parent-image-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 22px 50px rgba(12, 35, 70, .13);
}


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

.parent-image-wrap {
    position: relative;

    overflow: hidden;

    background: #e9eef5;
}

.parent-image-wrap img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: contain;

    transition:
        transform .6s ease,
        filter .4s ease;
}

.parent-image-card:hover .parent-image-wrap img {
    transform: scale(1.05);
    filter: brightness(.88);
}


/* =========================================================
   IMAGE BADGE
========================================================= */

.parent-image-badge {
    position: absolute;

    left: 16px;
    bottom: 16px;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 10px 13px;

    border-radius: 11px;

    background: rgba(8, 28, 58, .90);

    color: #fff;

    backdrop-filter: blur(8px);
}

.parent-image-badge>i {
    width: 31px;
    height: 31px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    color: #fff;
    background: #ed173d;

    font-size: 12px;
}

.parent-image-badge strong {
    display: block;

    font-size: 10px;
}

.parent-image-badge span {
    display: block;

    margin-top: 2px;

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

    font-size: 8px;
}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.parent-image-caption {
    padding: 20px 22px 23px;
}

.parent-image-caption>span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 7px;

    color: #ed173d;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.parent-image-caption h3 {
    margin: 0;

    color: #15223a;

    font-size: 19px;
    line-height: 1.35;
}

.parent-image-caption h3 strong {
    color: #173b73;
}


/* =========================================================
   VALUES
========================================================= */

.parent-values {
    display: grid;

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

    gap: 20px;

    margin-top: 30px;
}

.parent-value {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    padding: 22px;

    background: #fff;

    border: 1px solid #e4e8ef;
    border-radius: 15px;

    box-shadow:
        0 8px 25px rgba(12, 35, 70, .05);

    transition: .35s ease;
}

.parent-value:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 38px rgba(12, 35, 70, .11);
}

.parent-value-icon {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    color: #173b73;
    background: #edf3fb;

    font-size: 16px;

    transition: .3s ease;
}

.parent-value:hover .parent-value-icon {
    color: #fff;
    background: #ed173d;
}

.parent-value h3 {
    margin: 1px 0 5px;

    color: #15223a;

    font-size: 13px;
}

.parent-value p {
    margin: 0;

    color: #6c788c;

    font-size: 10px;
    line-height: 1.65;
}


/* =========================================================
   CTA
========================================================= */

.parent-cta-section {
    padding-bottom: 75px;
}

.parent-cta {
    position: relative;

    display: flex;
    align-items: center;
    gap: 20px;

    padding: 29px 32px;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(110deg,
            #081c3a,
            #173b73);

    box-shadow:
        0 20px 50px rgba(8, 28, 58, .17);
}

.parent-cta::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -90px;
    top: -120px;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.parent-cta-icon {
    position: relative;
    z-index: 2;

    width: 54px;
    height: 54px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: #ed173d;

    border-radius: 14px;

    font-size: 20px;
}

.parent-cta-content {
    position: relative;
    z-index: 2;

    flex: 1;
}

.parent-cta-content>span {
    color: #ff526b;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.parent-cta-content h2 {
    margin: 4px 0;

    color: #fff;

    font-size: 21px;
}

.parent-cta-content p {
    margin: 0;

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

    font-size: 11px;
}

.parent-cta-btn {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 45px;

    padding: 0 19px;

    border-radius: 8px;

    color: #173b73;
    background: #fff;

    font-size: 11px;
    font-weight: 800;

    transition: .3s ease;
}

.parent-cta-btn:hover {
    color: #fff;
    background: #ed173d;

    transform: translateY(-3px);
}


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

@media (max-width: 950px) {

    .parent-content-grid {
        grid-template-columns: 1fr;
    }

    .parent-image-card {
        max-width: 650px;
        width: 100%;
        margin: auto;
    }

}


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

@media (max-width: 650px) {

    .parent-container {
        width: 92%;
    }

    .parent-words-hero {
        min-height: 270px;
    }

    .parent-hero-content {
        padding: 50px 0;
    }

    .parent-hero-content h1 {
        font-size: 36px;
    }

    .parent-hero-content p {
        font-size: 12px;
    }

    .parent-words-section {
        padding: 52px 0 60px;
    }

    .parent-section-heading {
        margin-bottom: 32px;
    }

    .parent-section-heading h2 {
        font-size: 29px;
    }

    .parent-message-header {
        padding: 21px;
    }

    .parent-message-icon {
        width: 46px;
        height: 46px;

        font-size: 16px;
    }

    .parent-message-header h3 {
        font-size: 19px;
    }

    .parent-message-body {
        padding: 23px 20px 8px;
    }

    .parent-message-body p {
        font-size: 12px;
        line-height: 1.8;
    }

    .parent-signature {
        margin-left: 20px;
        margin-right: 20px;
    }

    .parent-image-card {
        border-radius: 14px;
    }

    .parent-image-caption {
        padding: 18px 19px 21px;
    }

    .parent-values {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .parent-value {
        padding: 18px;
    }

    .parent-cta-section {
        padding-bottom: 55px;
    }

    .parent-cta {
        flex-direction: column;
        align-items: flex-start;

        padding: 25px 22px;
    }

    .parent-cta-btn {
        width: 100%;
    }

}

/* =========================================================
   PHYSICS CLASS XI PAGE
========================================================= */

.physics-page {
    width: 100%;
    overflow: hidden;
    background: #f6f8fc;
}

.physics-container {
    width: min(1250px, 92%);
    margin: auto;
}


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

.physics-hero {
    position: relative;
    min-height: 320px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(120deg,
            #071a36,
            #173b73 58%,
            #294f8d);
}

.physics-hero::before {
    content: "";

    position: absolute;

    width: 460px;
    height: 460px;

    right: -150px;
    top: -240px;

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

    border-radius: 50%;
}

.physics-hero::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -150px;
    bottom: -220px;

    border: 1px solid rgba(237, 23, 61, .25);

    border-radius: 50%;
}

.physics-hero-bg {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 75% 45%,
            rgba(237, 23, 61, .18),
            transparent 35%);
}

.physics-hero-content {
    position: relative;
    z-index: 2;

    padding: 65px 0;
}

.physics-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 14px;

    color: #ff4b67;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 2px;
}

.physics-kicker i {
    font-size: 14px;
}

.physics-hero h1 {
    margin: 0 0 15px;

    color: #fff;

    font-size: clamp(42px, 5vw, 62px);
    line-height: 1;
    letter-spacing: -2px;
}

.physics-hero h1 span {
    color: #ff405d;
}

.physics-hero-content>p {
    max-width: 650px;

    margin: 0 0 20px;

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

    font-size: 14px;
    line-height: 1.8;
}

.physics-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

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

    font-size: 10px;
}

.physics-breadcrumb a {
    color: rgba(255, 255, 255, .72);

    transition: .25s ease;
}

.physics-breadcrumb a:hover {
    color: #ff405d;
}

.physics-breadcrumb i {
    font-size: 7px;
}


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

.physics-content-section {
    padding: 65px 0 80px;
}

.physics-layout {
    display: grid;

    grid-template-columns: 265px minmax(0, 1fr);

    gap: 32px;

    align-items: start;
}


/* =========================================================
   SIDEBAR
========================================================= */

.physics-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.physics-side-card {
    background: #fff;

    border: 1px solid #e3e8f0;
    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 9px 28px rgba(12, 35, 70, .06);
}

.physics-side-title {
    padding: 20px 20px 15px;

    border-bottom: 1px solid #edf0f4;
}

.physics-side-title span {
    display: block;

    margin-bottom: 5px;

    color: #ed173d;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.physics-side-title h3 {
    margin: 0;

    color: #15223a;

    font-size: 17px;
}


/* =========================================================
   COURSE MENU
========================================================= */

.physics-course-menu {
    padding: 8px;
}

.physics-course-menu a {
    position: relative;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 13px 12px;

    margin-bottom: 4px;

    color: #667286;

    border-radius: 8px;

    transition: .3s ease;
}

.physics-course-menu a:last-child {
    margin-bottom: 0;
}

.physics-course-menu a span {
    font-size: 12px;
    font-weight: 800;
}

.physics-course-menu a small {
    flex: 1;

    font-size: 9px;
}

.physics-course-menu a i {
    font-size: 9px;

    opacity: 0;

    transform: translateX(-5px);

    transition: .3s ease;
}

.physics-course-menu a:hover,
.physics-course-menu a.active {
    color: #fff;

    background: #173b73;
}

.physics-course-menu a:hover i,
.physics-course-menu a.active i {
    opacity: 1;
    transform: translateX(0);
}

.physics-course-menu a.active::after {
    content: "";

    position: absolute;

    right: 0;
    top: 9px;
    bottom: 9px;

    width: 3px;

    border-radius: 5px;

    background: #ed173d;
}


/* =========================================================
   SUBJECT MENU
========================================================= */

.physics-subject-menu {
    padding: 8px;
}

.physics-subject-menu a {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px;

    margin-bottom: 4px;

    border-radius: 8px;

    color: #657185;

    font-size: 11px;
    font-weight: 700;

    transition: .3s ease;
}

.physics-subject-menu a i {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    color: #173b73;
    background: #edf3fb;

    font-size: 11px;

    transition: .3s ease;
}

.physics-subject-menu a:hover,
.physics-subject-menu a.active {
    color: #173b73;

    background: #f0f4fa;
}

.physics-subject-menu a.active i,
.physics-subject-menu a:hover i {
    color: #fff;
    background: #ed173d;
}


/* =========================================================
   FEEDBACK
========================================================= */

.physics-feedback {
    padding: 22px;

    background: #fff;

    border: 1px solid #e3e8f0;
    border-radius: 15px;

    box-shadow:
        0 9px 28px rgba(12, 35, 70, .05);
}

.feedback-quote {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    color: #fff;
    background: #ed173d;

    border-radius: 9px;

    font-size: 12px;
}

.physics-feedback>span {
    color: #173b73;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;
}

.physics-feedback>p {
    margin: 11px 0 17px;

    color: #6b7789;

    font-size: 11px;
    line-height: 1.7;
}

.feedback-user {
    display: flex;
    align-items: center;
    gap: 9px;
}

.feedback-avatar {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #173b73;
    background: #edf3fb;

    border-radius: 50%;
}

.feedback-user strong {
    display: block;

    color: #15223a;

    font-size: 10px;
}

.feedback-user small {
    color: #8993a2;

    font-size: 8px;
}


/* =========================================================
   ADDRESS
========================================================= */

.physics-address {
    padding: 3px 5px;
}

.physics-address>span {
    color: #ed173d;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.physics-address h3 {
    margin: 4px 0 11px;

    color: #15223a;

    font-size: 17px;
}

.physics-address p {
    margin: 0 0 12px;

    color: #6b7789;

    font-size: 10px;
    line-height: 1.7;
}

.physics-address a {
    display: block;

    margin-top: 6px;

    color: #173b73;

    font-size: 10px;
    font-weight: 700;
}

.physics-address a i {
    margin-right: 5px;

    color: #ed173d;
}


/* =========================================================
   SIDEBAR CTA
========================================================= */

.physics-side-cta {
    position: relative;

    display: block;

    padding: 8px;

    overflow: hidden;

    border-radius: 15px;

    color: #fff;

    background:
        linear-gradient(135deg,
            #ed173d,
            #c80d2f);

    box-shadow:
        0 13px 30px rgba(237, 23, 61, .22);

    transition: .3s ease;
}

.physics-side-cta:hover {
    color: #fff;

    transform: translateY(-4px);

    box-shadow:
        0 20px 38px rgba(237, 23, 61, .28);
}

.physics-side-cta span {
    display: block;

    margin-bottom: 5px;

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

    font-size: 8px;
    font-weight: 500;

    letter-spacing: 1.3px;
}

.physics-side-cta strong {
    display: block;

    max-width: 80px;

    font-size: 13px;
    line-height: 1.2;
}

.physics-side-cta strong b {
    display: block;

    color: #fff;
}

.physics-side-cta>i {
    position: absolute;

    right: 19px;
    bottom: 19px;

    font-size: 18px;
}


/* =========================================================
   MAIN INTRO CARD
========================================================= */

.physics-intro-card {
    display: grid;

    grid-template-columns: 42% 58%;

    background: #fff;

    border: 1px solid #e3e8f0;
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 13px 38px rgba(12, 35, 70, .08);
}

.physics-intro-image {
    position: relative;

    min-height: 390px;

    overflow: hidden;

    background: #edf1f7;
}

.physics-intro-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.physics-intro-card:hover .physics-intro-image img {
    transform: scale(1.05);
}

.physics-image-badge {
    position: absolute;

    left: 18px;
    bottom: 18px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 13px;

    color: #fff;

    border-radius: 9px;

    background: rgba(8, 28, 58, .9);

    backdrop-filter: blur(8px);
}

.physics-image-badge i {
    color: #ff405d;
}

.physics-image-badge span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}


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

.physics-intro-content {
    padding: 39px 38px;
}

.physics-content-label {
    display: block;

    margin-bottom: 8px;

    color: #ed173d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.physics-intro-content h2 {
    margin: 0 0 18px;

    color: #15223a;

    font-size: 29px;
    line-height: 1.2;

    letter-spacing: -.7px;
}

.physics-intro-content h2 strong {
    display: block;

    color: #173b73;
}

.physics-intro-content p {
    margin: 0 0 15px;

    color: #697689;

    font-size: 12px;
    line-height: 1.85;
}

.physics-intro-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.physics-highlights {
    display: grid;

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

    gap: 13px;

    margin-top: 18px;
}

.physics-highlight {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 15px;

    background: #fff;

    border: 1px solid #e4e8ef;
    border-radius: 12px;

    box-shadow:
        0 7px 20px rgba(12, 35, 70, .045);

    transition: .3s ease;
}

.physics-highlight:hover {
    transform: translateY(-4px);

    box-shadow:
        0 14px 28px rgba(12, 35, 70, .09);
}

.physics-highlight>div {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #173b73;
    background: #edf3fb;

    border-radius: 9px;
}

.physics-highlight span {
    color: #536176;

    font-size: 8px;
    font-weight: 800;

    line-height: 1.35;
}


/* =========================================================
   STRUCTURE
========================================================= */

.physics-structure {
    margin-top: 55px;
}

.physics-section-heading {
    margin-bottom: 27px;
}

.physics-section-heading>span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 7px;

    color: #ed173d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.physics-section-heading h2 {
    margin: 0 0 8px;

    color: #15223a;

    font-size: 31px;
}

.physics-section-heading h2 strong {
    color: #173b73;
}

.physics-section-heading p {
    margin: 0;

    color: #778397;

    font-size: 12px;
}


/* =========================================================
   TOPICS GRID
========================================================= */

.physics-topics {
    display: grid;

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

    gap: 14px;
}

.physics-topic {
    position: relative;

    display: flex;
    align-items: flex-start;
    gap: 13px;

    min-height: 112px;

    padding: 18px;

    background: #fff;

    border: 1px solid #e4e8ef;
    border-radius: 13px;

    overflow: hidden;

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

.physics-topic::after {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background: #ed173d;

    transform: scaleY(0);

    transform-origin: bottom;

    transition: transform .3s ease;
}

.physics-topic:hover {
    transform: translateY(-5px);

    border-color: #d9e1ed;

    box-shadow:
        0 13px 30px rgba(12, 35, 70, .09);
}

.physics-topic:hover::after {
    transform: scaleY(1);
}

.physics-topic>span {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    color: #173b73;
    background: #edf3fb;

    font-size: 9px;
    font-weight: 800;
}

.physics-topic h3 {
    margin: 2px 0 6px;

    color: #15223a;

    font-size: 12px;
    line-height: 1.35;
}

.physics-topic p {
    margin: 0;

    color: #7a8595;

    font-size: 10px;
    line-height: 1.65;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.physics-bottom-cta {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 35px;
    padding: 23px 25px;

    border-radius: 15px;

    background:
        linear-gradient(110deg,
            #081c3a,
            #173b73);

    box-shadow:
        0 15px 35px rgba(8, 28, 58, .16);
}

.physics-bottom-icon {
    width: 47px;
    height: 47px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    background: #ed173d;

    border-radius: 12px;
}

.physics-bottom-cta>div:nth-child(2) {
    flex: 1;
}

.physics-bottom-cta span {
    color: #ff526b;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.physics-bottom-cta h2 {
    margin: 3px 0 0;

    color: #fff;

    font-size: 17px;
}

.physics-bottom-cta>a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 11px 16px;

    color: #173b73;
    background: #fff;

    border-radius: 8px;

    font-size: 10px;
    font-weight: 800;

    transition: .3s ease;
}

.physics-bottom-cta>a:hover {
    color: #fff;
    background: #ed173d;

    transform: translateY(-2px);
}


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

@media (max-width: 1050px) {

    .physics-layout {
        grid-template-columns: 230px minmax(0, 1fr);
        gap: 23px;
    }

    .physics-intro-card {
        grid-template-columns: 1fr;
    }

    .physics-intro-image {
        min-height: 330px;
        max-height: 420px;
    }

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

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

}


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

@media (max-width: 760px) {

    .physics-container {
        width: 92%;
    }

    .physics-hero {
        min-height: 285px;
    }

    .physics-hero-content {
        padding: 52px 0;
    }

    .physics-hero h1 {
        font-size: 39px;
    }

    .physics-hero-content>p {
        font-size: 12px;
    }

    .physics-content-section {
        padding: 50px 0 60px;
    }

    .physics-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .physics-sidebar {
        order: 2;
    }

    .physics-main {
        order: 1;
    }

    .physics-side-card,
    .physics-feedback,
    .physics-address,
    .physics-side-cta {
        width: 100%;
    }

    .physics-intro-image {
        min-height: auto;
        max-height: none;
    }

    .physics-intro-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .physics-intro-content {
        padding: 27px 22px;
    }

    .physics-intro-content h2 {
        font-size: 25px;
    }

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

    .physics-structure {
        margin-top: 42px;
    }

    .physics-section-heading h2 {
        font-size: 27px;
    }

    .physics-topics {
        grid-template-columns: 1fr;
    }

    .physics-bottom-cta {
        flex-wrap: wrap;
    }

    .physics-bottom-cta>a {
        width: 100%;
        justify-content: center;
    }

}


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

@media (max-width: 430px) {

    .physics-highlights {
        grid-template-columns: 1fr;
    }

    .physics-highlight {
        padding: 13px;
    }

    .physics-intro-content p {
        font-size: 11px;
    }

    .physics-topic {
        padding: 16px;
    }

}

/* =========================================================
   CLASS XI COURSE CARDS
========================================================= */

.xi-course-card {
    position: relative;

    display: flex;
    gap: 18px;

    margin-bottom: 18px;
    padding: 23px;

    background: #fff;

    border: 1px solid #e3e8f0;
    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 9px 28px rgba(12, 35, 70, .055);

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

.xi-course-card:hover {
    transform: translateY(-5px);

    border-color: #d5deeb;

    box-shadow:
        0 18px 38px rgba(12, 35, 70, .11);
}



.xi-course-content {
    flex: 1;
}

.xi-course-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 12px;
}

.xi-course-label {
    display: block;

    margin-bottom: 4px;

    color: #ed173d;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.4px;
}

.xi-course-top h3 {
    margin: 0;

    color: #15223a;

    font-size: 18px;
    line-height: 1.3;
}

.xi-course-code {
    flex-shrink: 0;

    padding: 7px 10px;

    color: #173b73;
    background: #edf3fb;

    border-radius: 7px;

    font-size: 9px;
    font-weight: 800;
}

.xi-course-description {
    padding: 13px 0;

    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
}

.xi-course-description p {
    margin: 0;

    color: #657286;

    font-size: 11px;
    line-height: 1.75;
}

.xi-course-description strong {
    color: #173b73;
}

.xi-course-details {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 15px;
}

.xi-course-details>div {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.xi-course-details i {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ed173d;
    background: #fff0f3;

    border-radius: 8px;

    font-size: 10px;
}

.xi-course-details span {
    color: #536176;

    font-size: 10px;
    line-height: 1.5;
}

.xi-course-details small {
    display: block;

    margin-bottom: 2px;

    color: #8993a2;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .8px;
}

.xi-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 17px;

    padding: 10px 15px;

    color: #fff;
    background: #ed173d;

    border-radius: 7px;

    font-size: 10px;
    font-weight: 800;

    transition: .3s ease;
}

.xi-apply-btn:hover {
    color: #fff;
    background: #c80d2f;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(237, 23, 61, .2);
}


/* =========================================================
   SUMMARY
========================================================= */

.xi-summary {
    margin-top: 48px;
}

.xi-summary-heading {
    margin-bottom: 22px;
}

.xi-summary-heading>span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 6px;

    color: #ed173d;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.4px;
}

.xi-summary-heading h2 {
    margin: 0;

    color: #15223a;

    font-size: 27px;
}

.xi-summary-heading h2 strong {
    color: #173b73;
}

.xi-summary-grid {
    display: grid;

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

    gap: 14px;
}

.xi-summary-card {
    position: relative;

    padding: 21px;

    background: #fff;

    border: 1px solid #e4e8ef;
    border-radius: 13px;

    transition: .3s ease;
}

.xi-summary-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 30px rgba(12, 35, 70, .09);
}

.xi-summary-card>i {
    width: 37px;
    height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 12px;

    color: #173b73;
    background: #edf3fb;

    border-radius: 9px;
}

.xi-summary-card h3 {
    margin: 0 0 7px;

    color: #15223a;

    font-size: 13px;
}

.xi-summary-card p {
    margin: 0 0 12px;

    color: #718094;

    font-size: 10px;
    line-height: 1.65;
}

.xi-summary-card>strong {
    color: #ed173d;

    font-size: 9px;

    letter-spacing: 1px;
}


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

@media (max-width: 760px) {

    .xi-course-card {
        padding: 19px;

        gap: 12px;
    }



    .xi-course-top {
        flex-direction: column;
        gap: 8px;
    }

    .xi-course-top h3 {
        font-size: 16px;
    }

    .xi-course-code {
        align-self: flex-start;
    }

    .xi-course-details {
        grid-template-columns: 1fr;
    }

    .xi-summary-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 430px) {

    .xi-course-card {
        display: block;
    }



    .xi-course-description p {
        font-size: 10px;
    }

}

/*class12 css start here*/
.xii-page {
    width: 100%;
    overflow: hidden;
    background: #f6f8fc;
}

.xii-container {
    width: min(1250px, 92%);
    margin: auto;
}


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

.xii-hero {
    position: relative;
    min-height: 310px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(120deg,
            #081c3a,
            #173b73 60%,
            #294f8d);
}

.xii-hero::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -190px;
    top: -300px;

    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}

.xii-hero::after {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    left: -180px;
    bottom: -250px;

    border: 1px solid rgba(237, 23, 61, .3);
    border-radius: 50%;
}

.xii-hero-pattern {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 75% 45%,
            rgba(237, 23, 61, .18),
            transparent 34%);
}

.xii-hero-content {
    position: relative;
    z-index: 2;

    padding: 65px 0;
}

.xii-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 13px;

    color: #ff405d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.8px;
}

.xii-hero h1 {
    margin: 0 0 14px;

    color: #fff;

    font-size: clamp(40px, 5vw, 61px);
    line-height: 1;
    letter-spacing: -2px;
}

.xii-hero h1 span {
    color: #ff405d;
}

.xii-hero-content>p {
    max-width: 610px;

    margin: 0 0 20px;

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

    font-size: 13px;
    line-height: 1.8;
}




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

.xii-content {
    padding: 60px 0 75px;
}

.xii-layout {
    display: grid;

    grid-template-columns: 255px minmax(0, 1fr);

    gap: 32px;

    align-items: start;
}


/* ================= SIDEBAR ================= */

.xii-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.xii-side-card {
    background: rgba(255, 255, 255, .82);

    border-radius: 14px;

    box-shadow:
        0 5px 22px rgba(12, 35, 70, .055);

    overflow: hidden;

    transition: .3s ease;
}

.xii-side-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(12, 35, 70, .09);
}

.xii-side-heading {
    padding: 16px 18px 12px;

    border-bottom: 1px solid #edf0f4;
}

.xii-side-heading span {
    display: block;

    margin-bottom: 4px;

    color: #ed173d;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.4px;
}

.xii-side-heading h3 {
    margin: 0;

    color: #15223a;

    font-size: 15px;
}


/* ================= CLASS MENU ================= */

.xii-class-menu {
    padding: 6px;
}

.xii-class-menu a {
    position: relative;

    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 39px;

    padding: 9px 11px;

    margin-bottom: 2px;

    color: #68758a;

    border-radius: 8px;

    transition: .3s ease;
}

.xii-class-menu a strong {
    font-size: 11px;
}

.xii-class-menu a small {
    flex: 1;

    font-size: 8px;
}

.xii-class-menu a i {
    opacity: 0;

    font-size: 8px;

    transform: translateX(-4px);

    transition: .3s ease;
}

.xii-class-menu a:hover,
.xii-class-menu a.active {
    color: #fff;
    background: #173b73;
}

.xii-class-menu a:hover i,
.xii-class-menu a.active i {
    opacity: 1;
    transform: translateX(0);
}

.xii-class-menu a.active::after {
    content: "";

    position: absolute;

    right: 0;
    top: 8px;
    bottom: 8px;

    width: 3px;

    border-radius: 5px;

    background: #ed173d;
}


/* ================= PROGRAM MENU ================= */

.xii-program-menu {
    padding: 6px;
}

.xii-program-menu a {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 8px 10px;

    margin-bottom: 2px;

    color: #637085;

    border-radius: 8px;

    font-size: 10px;
    font-weight: 700;

    transition: .3s ease;
}

.xii-program-menu a i {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #173b73;
    background: #edf3fb;

    border-radius: 7px;

    font-size: 10px;
}

.xii-program-menu a:hover {
    color: #173b73;
    background: #f0f4fa;
}

.xii-program-menu a:hover i {
    color: #fff;
    background: #ed173d;
}


/* ================= FEEDBACK ================= */

.xii-feedback {
    padding: 18px;

    background: #fff;

    border-radius: 14px;

    box-shadow:
        0 5px 22px rgba(12, 35, 70, .05);
}

.xii-quote {
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 10px;

    color: #fff;
    background: #ed173d;

    border-radius: 8px;
}

.xii-feedback>span {
    color: #173b73;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;
}

.xii-feedback p {
    margin: 9px 0 14px;

    color: #6c788c;

    font-size: 10px;
    line-height: 1.65;
}

.xii-feedback-user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.xii-feedback-user>div {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #173b73;
    background: #edf3fb;

    border-radius: 50%;
}

.xii-feedback-user section strong {
    display: block;

    color: #15223a;

    font-size: 10px;
}

.xii-feedback-user section small {
    color: #8993a2;
    font-size: 8px;
}


/* ================= ADDRESS ================= */

.xii-address {
    padding: 5px 3px;
}

.xii-address>span {
    color: #ed173d;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.4px;
}

.xii-address h3 {
    margin: 3px 0 8px;

    color: #15223a;

    font-size: 15px;
}

.xii-address p {
    margin: 0 0 11px;

    color: #6c788c;

    font-size: 9px;
    line-height: 1.65;
}

.xii-address a {
    display: block;

    margin-top: 6px;

    color: #173b73;

    font-size: 9px;
    font-weight: 700;
}

.xii-address a i {
    margin-right: 5px;
    color: #ed173d;
}


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

.xii-admission {
    position: relative;

    display: block;

    padding: 18px;

    color: #fff;

    border-radius: 13px;

    background:
        linear-gradient(135deg,
            #ed173d,
            #c80d2f);

    box-shadow:
        0 9px 22px rgba(237, 23, 61, .18);

    transition: .3s ease;
}

.xii-admission:hover {
    color: #fff;

    transform: translateY(-4px);
}

.xii-admission span {
    display: block;

    margin-bottom: 4px;

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

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.xii-admission strong {
    display: block;

    font-size: 17px;
    line-height: 1.2;
}

.xii-admission strong b {
    display: block;
}

.xii-admission>i {
    position: absolute;

    right: 17px;
    bottom: 17px;
}


/* ================= INTRO ================= */

.xii-intro {
    display: grid;

    grid-template-columns: 40% 60%;

    background: #fff;

    border: 1px solid #e3e8f0;
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 13px 38px rgba(12, 35, 70, .08);
}

.xii-intro-image {
    position: relative;

    overflow: hidden;

    background: #edf1f7;
}

.xii-intro-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: .6s ease;
}

.xii-intro:hover img {
    transform: scale(1.05);
}

.xii-image-label {
    position: absolute;

    left: 16px;
    bottom: 16px;

    display: flex;
    align-items: center;
    gap: 7px;

    padding: 9px 12px;

    color: #fff;
    background: rgba(8, 28, 58, .9);

    border-radius: 8px;

    font-size: 8px;
    font-weight: 800;
}

.xii-image-label i {
    color: #ff405d;
}

.xii-intro-content {
    padding: 37px;
}

.xii-intro-content>span {
    display: block;

    margin-bottom: 8px;

    color: #ed173d;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.xii-intro-content h2 {
    margin: 0 0 17px;

    color: #15223a;

    font-size: 29px;
    line-height: 1.2;
}

.xii-intro-content h2 strong {
    display: block;
    color: #173b73;
}

.xii-intro-content p {
    margin: 0 0 14px;

    color: #697689;

    font-size: 11px;
    line-height: 1.8;
}


/* ================= HIGHLIGHTS ================= */

.xii-highlights {
    display: grid;

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

    gap: 13px;

    margin-top: 18px;
}

.xii-highlights>div {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 15px;

    background: #fff;

    border: 1px solid #e4e8ef;
    border-radius: 12px;

    transition: .3s ease;
}

.xii-highlights>div:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 25px rgba(12, 35, 70, .08);
}

.xii-highlights i {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #173b73;
    background: #edf3fb;

    border-radius: 9px;
}

.xii-highlights span {
    color: #536176;

    font-size: 7px;
    font-weight: 800;

    line-height: 1.35;
}


/* ================= COURSE TITLE ================= */

.xii-courses {
    margin-top: 50px;
}

.xii-title {
    margin-bottom: 22px;
}

.xii-title>span {
    color: #ed173d;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.xii-title h2 {
    margin: 5px 0 7px;

    color: #15223a;

    font-size: 30px;
}

.xii-title h2 strong {
    color: #173b73;
}

.xii-title p {
    margin: 0;

    color: #778397;

    font-size: 11px;
}


/* ================= COURSE CARD ================= */

.xii-course {
    display: flex;
    gap: 17px;

    margin-bottom: 16px;
    padding: 22px;

    background: #fff;

    border: 1px solid #e3e8f0;
    border-radius: 15px;

    box-shadow:
        0 8px 25px rgba(12, 35, 70, .05);

    transition: .35s ease;
}

.xii-course:hover {
    transform: translateY(-5px);

    box-shadow:
        0 18px 38px rgba(12, 35, 70, .10);
}


.xii-course-body {
    flex: 1;
}

.xii-course-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 15px;

    margin-bottom: 12px;
}

.xii-course-head span {
    display: block;

    margin-bottom: 4px;

    color: #ed173d;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.xii-course-head h3 {
    margin: 0;

    color: #15223a;

    font-size: 17px;
}

.xii-course-head b {
    padding: 7px 10px;

    color: #173b73;
    background: #edf3fb;

    border-radius: 7px;

    font-size: 8px;
}

.xii-description {
    padding: 12px 0;

    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
}

.xii-description p {
    margin: 0;

    color: #687589;

    font-size: 10px;
    line-height: 1.7;
}

.xii-details {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-top: 14px;
}

.xii-details>div {
    display: flex;
    gap: 8px;
}

.xii-details i {
    width: 29px;
    height: 29px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #ed173d;
    background: #fff0f3;

    border-radius: 7px;

    font-size: 9px;
}

.xii-details span {
    color: #59677a;

    font-size: 9px;
}

.xii-details small {
    display: block;

    margin-bottom: 2px;

    color: #8a94a3;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .8px;
}

.xii-apply {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 15px;

    padding: 9px 14px;

    color: #fff;
    background: #ed173d;

    border-radius: 7px;

    font-size: 9px;
    font-weight: 800;

    transition: .3s ease;
}

.xii-apply:hover {
    color: #fff;

    background: #c80d2f;

    transform: translateY(-2px);
}


/* ================= SUMMARY ================= */

.xii-summary {
    margin-top: 45px;
}

.xii-summary-grid {
    display: grid;

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

    gap: 14px;
}

.xii-summary-grid>div {
    padding: 20px;

    background: #fff;

    border: 1px solid #e4e8ef;
    border-radius: 13px;

    transition: .3s ease;
}

.xii-summary-grid>div:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 30px rgba(12, 35, 70, .08);
}

.xii-summary-grid i {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 11px;

    color: #173b73;
    background: #edf3fb;

    border-radius: 9px;
}

.xii-summary-grid h3 {
    margin: 0 0 6px;

    color: #15223a;

    font-size: 12px;
}

.xii-summary-grid p {
    margin: 0;

    color: #718094;

    font-size: 9px;
    line-height: 1.65;
}


/* ================= BOTTOM CTA ================= */

.xii-bottom-cta {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 32px;
    padding: 22px 24px;

    border-radius: 14px;

    background:
        linear-gradient(110deg,
            #081c3a,
            #173b73);

    box-shadow:
        0 15px 35px rgba(8, 28, 58, .16);
}

.xii-bottom-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    color: #fff;
    background: #ed173d;

    border-radius: 11px;
}

.xii-bottom-cta>div:nth-child(2) {
    flex: 1;
}

.xii-bottom-cta span {
    color: #ff526b;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.xii-bottom-cta h2 {
    margin: 3px 0 0;

    color: #fff;

    font-size: 17px;
}

.xii-bottom-cta>a {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 10px 15px;

    color: #173b73;
    background: #fff;

    border-radius: 7px;

    font-size: 9px;
    font-weight: 800;

    transition: .3s ease;
}

.xii-bottom-cta>a:hover {
    color: #fff;
    background: #ed173d;
}


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

@media(max-width:1050px) {

    .xii-layout {
        grid-template-columns: 225px minmax(0, 1fr);
        gap: 23px;
    }

    .xii-intro {
        grid-template-columns: 1fr;
    }

    .xii-intro-image {
        max-height: 380px;
    }

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


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

@media(max-width:760px) {

    .xii-container {
        width: 92%;
    }

    .xii-hero {
        min-height: 280px;
    }

    .xii-hero-content {
        padding: 50px 0;
    }

    .xii-hero h1 {
        font-size: 38px;
    }

    .xii-content {
        padding: 45px 0 60px;
    }

    .xii-layout {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .xii-sidebar {
        order: 2;
    }

    .xii-main {
        order: 1;
    }

    .xii-intro-image {
        max-height: none;
    }

    .xii-intro-image img {
        height: auto;
        object-fit: contain;
    }

    .xii-intro-content {
        padding: 27px 22px;
    }

    .xii-intro-content h2 {
        font-size: 25px;
    }

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

    .xii-details {
        grid-template-columns: 1fr;
    }

    .xii-summary-grid {
        grid-template-columns: 1fr;
    }

    .xii-bottom-cta {
        flex-wrap: wrap;
    }

    .xii-bottom-cta>a {
        width: 100%;
        justify-content: center;
    }
}


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

@media(max-width:430px) {

    .xii-highlights {
        grid-template-columns: 1fr;
    }

    .xii-course {
        display: block;
    }


    .xii-course-head {
        flex-direction: column;
    }

    .xii-hero h1 {
        font-size: 34px;
    }
}

/*passout*/
/* =========================================================
   CLASS XII PASSOUT PAGE
========================================================= */

.passout-page {
    background: #f5f7fb;
    color: #10294d;
}


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

.passout-hero {
    min-height: 330px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(120deg,
            #071b3a,
            #123d73,
            #071a37);

    overflow: hidden;

    border-top: 4px solid var(--red);
}


.passout-hero::before {
    content: "";
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

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

    right: -150px;
    top: -220px;
}


.passout-hero::after {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

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

    left: -120px;
    bottom: -190px;
}


.passout-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at 50% 20%,
            rgba(255, 255, 255, .10),
            transparent 45%);
}


.passout-hero-content {
    position: relative;
    z-index: 2;

    text-align: center;

    max-width: 900px;

    padding: 60px 20px;
}


.passout-eyebrow {
    display: inline-block;

    color: #ff405d;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 14px;
}


.passout-hero h1 {
    margin: 0;

    color: white;

    font-size: clamp(38px, 5vw, 65px);

    line-height: 1.08;

    letter-spacing: -2px;
}


.passout-hero h1 strong {
    display: inline-block;
    color: #ff405d;
}


.passout-hero p {
    margin: 20px auto;

    max-width: 600px;

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

    font-size: 15px;
}




/* =========================================================
   MAIN SECTION
========================================================= */

.passout-section {
    padding: 70px 20px;
}


.passout-container {
    width: min(1180px, 100%);
    margin: auto;
}


/* =========================================================
   INTRO
========================================================= */

.passout-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 42px;

    background: white;

    border: 1px solid #e4e9f1;

    border-radius: 22px;

    box-shadow:
        0 18px 50px rgba(13, 39, 72, .08);
}


.section-label {
    display: block;

    color: #ed173d;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2.2px;

    margin-bottom: 12px;
}


.passout-intro h2,
.course-heading h2 {
    margin: 0;

    color: #10294d;

    font-size: clamp(30px, 4vw, 46px);

    line-height: 1.1;

    letter-spacing: -1.5px;
}


.passout-intro h2 strong,
.course-heading h2 strong {
    color: #164783;
}


.intro-text {
    max-width: 730px;

    margin: 20px 0 0;

    color: #65748b;

    font-size: 14px;

    line-height: 1.8;
}


.passout-intro-badge {
    min-width: 145px;
    height: 145px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #edf3fb;

    border: 8px solid white;

    box-shadow:
        0 0 0 1px #dce5f0,
        0 15px 30px rgba(17, 53, 94, .12);

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}


.passout-intro-badge i {
    font-size: 28px;
    color: #ed173d;

    margin-bottom: 7px;
}


.passout-intro-badge span {
    font-size: 17px;
    font-weight: 900;
}


.passout-intro-badge small {
    margin-top: 3px;

    font-size: 7px;

    letter-spacing: 1px;

    color: #718096;
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.passout-highlights {
    display: grid;

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

    gap: 14px;

    margin-top: 18px;
}


.highlight-card {
    min-height: 92px;

    padding: 18px;

    display: flex;
    align-items: center;

    gap: 14px;

    background: white;

    border: 1px solid #e4e9f1;

    border-radius: 14px;

    transition: .3s ease;
}


.highlight-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 30px rgba(13, 39, 72, .10);
}


.highlight-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

    border-radius: 12px;

    background: #edf3fb;

    color: #174783;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 17px;
}


.highlight-card strong {
    display: block;

    color: #173d70;

    font-size: 13px;
}


.highlight-card span {
    display: block;

    margin-top: 5px;

    color: #8995a7;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: .6px;
}


/* =========================================================
   COURSE HEADING
========================================================= */

.course-heading {
    margin-top: 70px;

    margin-bottom: 28px;
}


.course-heading p {
    margin: 12px 0 0;

    color: #718096;

    font-size: 14px;
}


/* =========================================================
   COURSE GRID
========================================================= */

.passout-courses {
    display: grid;

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

    gap: 22px;
}


.passout-course-card {
    position: relative;

    padding: 30px;

    background: white;

    border: 1px solid #e1e7ef;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(13, 39, 72, .07);

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


.passout-course-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 22px 50px rgba(13, 39, 72, .13);
}


.passout-course-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 5px;
    height: 100%;

    background: #ed173d;
}


.course-number {
    position: absolute;

    right: 25px;
    top: 20px;

    color: #e7edf5;

    font-size: 50px;

    font-weight: 900;

    line-height: 1;
}


.course-card-top {
    position: relative;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;
}


.course-type {
    color: #ed173d;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.8px;
}


.passout-course-card h3 {
    margin: 8px 0 0;

    color: #112e56;

    font-size: 22px;
}


.course-code {
    padding: 7px 10px;

    flex-shrink: 0;

    border-radius: 7px;

    background: #edf3fb;

    color: #174783;

    font-size: 9px;

    font-weight: 800;
}


.course-divider {
    height: 1px;

    background: #edf0f4;

    margin: 23px 0;
}


.course-description {
    min-height: 82px;

    color: #66758a;

    font-size: 13px;

    line-height: 1.8;

    margin: 0;
}


/* =========================================================
   COURSE INFO
========================================================= */

.course-info {
    display: grid;

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

    gap: 12px;

    margin-top: 25px;
}


.course-info>div {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 13px;

    border-radius: 10px;

    background: #f7f9fc;
}


.course-info i {
    color: #ed173d;

    font-size: 15px;
}


.course-info span {
    color: #173d70;

    font-size: 11px;

    font-weight: 700;
}


.course-info small {
    display: block;

    margin-bottom: 3px;

    color: #8a96a8;

    font-size: 8px;

    font-weight: 500;

    text-transform: uppercase;
}


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

.course-card-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 25px;
}


.goal-tag {
    color: #64748b;

    font-size: 10px;

    font-weight: 700;
}


.goal-tag i {
    color: #ed173d;

    margin-right: 5px;
}


.apply-btn {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 12px 18px;

    border-radius: 8px;

    background: #ed173d;

    color: white;

    font-size: 11px;

    font-weight: 800;

    transition: .3s ease;
}


.apply-btn:hover {
    background: #c90e2e;

    color: white;

    transform: translateX(3px);
}


/* =========================================================
   CTA
========================================================= */

.passout-cta {
    margin-top: 50px;

    padding: 30px 35px;

    border-radius: 18px;

    background:
        linear-gradient(120deg,
            #0b2850,
            #174783);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


.passout-cta span {
    color: #ff405d;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;
}


.passout-cta h3 {
    margin: 8px 0 0;

    color: white;

    font-size: 23px;
}


.cta-btn {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 21px;

    border-radius: 9px;

    background: white;

    color: #123b70;

    font-size: 11px;

    font-weight: 900;

    transition: .3s ease;
}


.cta-btn:hover {
    transform: translateY(-3px);

    color: #ed173d;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

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

    .passout-courses {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .passout-section {
        padding: 45px 15px;
    }

    .passout-intro {
        padding: 27px;

        flex-direction: column;

        align-items: flex-start;
    }

    .passout-intro-badge {
        align-self: center;
    }

    .passout-highlights {
        grid-template-columns: 1fr;
    }

    .passout-course-card {
        padding: 24px;
    }

    .course-info {
        grid-template-columns: 1fr;
    }

    .course-card-footer {
        align-items: flex-start;

        flex-direction: column;
    }

    .passout-cta {
        padding: 27px;

        flex-direction: column;

        align-items: flex-start;
    }

    .cta-btn {
        width: 100%;

        justify-content: center;
    }

}

/*class9 th start here*/
/* =========================================================
   CLASS IX PAGE
========================================================= */

.class9-page {
    background: #f5f7fb;
    color: #10284d;
}


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

.class9-hero {
    min-height: 330px;
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        url("images/page-banner.jpg") center/cover no-repeat;

    border-top: 4px solid var(--red, #ed173d);
}

.class9-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(5, 22, 49, .96),
            rgba(8, 38, 78, .86),
            rgba(4, 16, 36, .82));
}

.class9-hero-content {
    position: relative;
    z-index: 2;

    width: min(1200px, 92%);

    text-align: center;

    color: #fff;
}

.class9-eyebrow {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    margin-bottom: 14px;

    color: #ff405f;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}

.class9-eyebrow::before,
.class9-eyebrow::after {
    content: "";

    width: 28px;
    height: 2px;

    background: #ed173d;
}

.class9-hero h1 {
    margin: 0;

    font-size: clamp(38px, 5vw, 62px);

    line-height: 1.08;

    letter-spacing: -2px;

    font-weight: 800;
}

.class9-hero h1 span {
    color: #ff405f;
}

.class9-hero p {
    margin: 15px 0 20px;

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

    font-size: 15px;
}




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

.class9-content {
    padding: 75px 0 90px;
}

.class9-container {
    width: min(1180px, 92%);
    margin: auto;
}


/* =========================================================
   INTRO
========================================================= */

.class9-intro {

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr) minmax(350px, .7fr);

    gap: 65px;

    align-items: center;

    padding: 45px;

    background: #fff;

    border: 1px solid #e3e9f2;

    border-radius: 24px;

    box-shadow:
        0 20px 55px rgba(15, 40, 75, .08);

    position: relative;

    overflow: hidden;
}

.class9-intro::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background: rgba(237, 23, 61, .05);

    right: -100px;
    top: -100px;
}


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

.class9-section-label {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 14px;

    color: #ed173d;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.class9-section-label>span {

    width: 28px;
    height: 2px;

    background: #ed173d;
}


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

.class9-intro-text h2 {

    margin: 0 0 22px;

    max-width: 650px;

    color: #10284d;

    font-size: clamp(32px, 4vw, 49px);

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.class9-intro-text h2 strong {

    display: block;

    color: #17447d;
}

.class9-intro-text p {

    max-width: 700px;

    margin: 0 0 18px;

    color: #66758b;

    font-size: 14px;

    line-height: 1.9;
}


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

.class9-image-box {

    position: relative;

    padding: 10px;

    border-radius: 20px;

    background: #f0f4fa;

    overflow: hidden;
}

.class9-image-glow {

    position: absolute;

    width: 170px;
    height: 170px;

    background: #ed173d;

    opacity: .12;

    filter: blur(50px);

    top: -50px;
    right: -30px;
}

.class9-image-box img {

    position: relative;

    z-index: 2;

    display: block;

    width: 100%;

    height: auto;

    max-height: 420px;

    object-fit: cover;

    border-radius: 14px;
}

.class9-image-caption {

    position: absolute;

    z-index: 4;

    left: 25px;
    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 15px;

    border-radius: 8px;

    background: rgba(8, 30, 61, .90);

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    backdrop-filter: blur(10px);
}

.class9-image-caption i {
    color: #ff405f;
}


/* =========================================================
   PROGRAM SECTION
========================================================= */

.class9-program-section {

    margin-top: 75px;
}

.class9-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 30px;

    margin-bottom: 28px;
}

.class9-heading h2 {

    margin: 0;

    color: #10284d;

    font-size: 40px;

    line-height: 1.1;
}

.class9-heading h2 strong {
    color: #17447d;
}

.class9-heading p {

    max-width: 400px;

    margin: 0;

    color: #718096;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   PROGRAM GRID
========================================================= */

.class9-program-grid {

    display: grid;

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

    gap: 22px;
}


/* =========================================================
   PROGRAM CARD
========================================================= */

.class9-program-card {

    position: relative;

    display: flex;

    gap: 20px;

    padding: 28px;

    background: #fff;

    border: 1px solid #e1e8f2;

    border-radius: 18px;

    overflow: hidden;

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

.class9-program-card::after {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background: #ed173d;

    transform: scaleY(0);

    transform-origin: bottom;

    transition: .3s;
}

.class9-program-card:hover {

    transform: translateY(-7px);

    border-color: #d6dfec;

    box-shadow:
        0 18px 40px rgba(15, 40, 75, .10);
}

.class9-program-card:hover::after {
    transform: scaleY(1);
}



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

.class9-program-icon {

    flex-shrink: 0;

    width: 54px;
    height: 54px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #edf3fb;

    color: #17447d;

    font-size: 20px;
}

.class9-program-card:hover .class9-program-icon {

    background: #ed173d;

    color: #fff;
}


/* =========================================================
   PROGRAM CONTENT
========================================================= */

.class9-program-content {

    position: relative;
    z-index: 2;

    flex: 1;
}

.class9-program-content>span {

    color: #ed173d;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.class9-program-content h3 {

    margin: 7px 0 9px;

    color: #10284d;

    font-size: 23px;
}

.class9-program-content p {

    margin: 0;

    color: #718096;

    font-size: 12px;
}


/* =========================================================
   CARD BOTTOM
========================================================= */

.class9-program-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    margin-top: 22px;

    padding-top: 17px;

    border-top: 1px solid #edf0f5;
}

.class9-program-bottom>span {

    color: #617087;

    font-size: 11px;

    font-weight: 600;
}

.class9-program-bottom>span i {

    margin-right: 5px;

    color: #ed173d;
}

.class9-program-bottom a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 9px 14px;

    border-radius: 7px;

    background: #ed173d;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    transition: .3s;
}

.class9-program-bottom a:hover {

    background: #c90f30;

    transform: translateX(3px);
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.class9-highlight {

    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 50px;

    padding: 28px 32px;

    border-radius: 18px;

    background:
        linear-gradient(135deg,
            #102f5b,
            #17447d);

    color: #fff;

    box-shadow:
        0 18px 40px rgba(16, 47, 91, .18);
}

.class9-highlight-icon {

    flex-shrink: 0;

    width: 60px;
    height: 60px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 15px;

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

    color: #ff405f;

    font-size: 23px;
}

.class9-highlight span {

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    color: #ff667e;
}

.class9-highlight h3 {

    margin: 5px 0 6px;

    font-size: 23px;
}

.class9-highlight p {

    margin: 0;

    max-width: 800px;

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

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   CTA
========================================================= */

.class9-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    margin-top: 25px;

    padding: 32px 35px;

    border-radius: 18px;

    background: #fff;

    border: 1px solid #e1e8f2;

    box-shadow:
        0 10px 30px rgba(15, 40, 75, .05);
}

.class9-cta span {

    color: #ed173d;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.class9-cta h2 {

    margin: 7px 0 0;

    color: #10284d;

    font-size: 24px;
}

.class9-cta a {

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 21px;

    border-radius: 8px;

    background: #ed173d;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    transition: .3s;
}

.class9-cta a:hover {

    background: #c90f30;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(237, 23, 61, .25);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .class9-intro {

        grid-template-columns: 1fr;

        gap: 35px;

        padding: 30px;
    }

    .class9-image-box {
        max-width: 550px;
        margin: auto;
    }

    .class9-heading {
        align-items: start;
        flex-direction: column;
    }

}


@media (max-width: 700px) {

    .class9-hero {
        min-height: 280px;
    }

    .class9-content {
        padding: 45px 0 60px;
    }

    .class9-intro {
        padding: 22px;
        border-radius: 16px;
    }

    .class9-intro-text h2 {
        font-size: 32px;
    }

    .class9-program-grid {
        grid-template-columns: 1fr;
    }

    .class9-program-card {
        padding: 22px;
    }

    .class9-highlight {
        align-items: flex-start;
        padding: 23px;
    }

    .class9-cta {
        align-items: flex-start;
        flex-direction: column;
        padding: 25px;
    }

    .class9-cta a {
        width: 100%;
        justify-content: center;
    }

}


@media (max-width: 480px) {

    .class9-hero h1 {
        font-size: 34px;
    }

    .class9-program-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .class9-program-bottom a {
        width: 100%;
        justify-content: center;
    }

}

/* =====================================================
   CLASS 10 - HERO
   ===================================================== */

.class10-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background: url("images/page-banner.jpg") center center / cover no-repeat;

    border-top: 5px solid #ef2448;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(5, 19, 40, 0.94),
            rgba(11, 45, 92, 0.82),
            rgba(20, 20, 30, 0.80));
}

.hero-content {
    position: relative;
    z-index: 2;

    text-align: center;
    color: #fff;

    padding: 45px 20px;
}

.hero-label {
    display: inline-block;

    color: #ff4565;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;

    margin-bottom: 10px;
}

.hero-content h1 {
    margin: 0 0 16px;

    color: #fff;

    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.15;
    font-weight: 800;

    text-shadow: 0 5px 20px rgba(0, 0, 0, .25);
}




/* =====================================================
   MAIN SECTION
   ===================================================== */

.class10-section {
    padding: 80px 20px 70px;

    background:
        radial-gradient(circle at 10% 20%,
            rgba(23, 74, 135, .06),
            transparent 30%),
        radial-gradient(circle at 90% 70%,
            rgba(239, 36, 72, .05),
            transparent 30%),
        #f5f8fc;
}

.class10-container {
    width: min(1180px, 100%);
    margin: auto;
}


/* =====================================================
   INTRO HEADING
   ===================================================== */

.section-heading {
    max-width: 760px;
    margin-bottom: 40px;
}

.section-tag {
    display: inline-block;

    color: #ef2448;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;

    margin-bottom: 8px;
}

.section-heading h2 {
    margin: 0 0 16px;

    color: #0b2d5c;

    font-size: clamp(30px, 4vw, 45px);
    line-height: 1.15;
    font-weight: 800;
}

.section-heading h2 span {
    display: block;
    color: #ef2448;
}

.section-heading p {
    margin: 0;

    color: #68768a;

    font-size: 16px;
}


/* =====================================================
   MAIN CONTENT CARD
   ===================================================== */

.class10-main-card {
    display: grid;

    grid-template-columns: 1.25fr .75fr;

    background: #fff;

    border: 1px solid #e3e9f2;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 20px 60px rgba(19, 48, 82, .10);

    margin-bottom: 35px;
}


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

.class10-content {
    padding: 48px;
}

.content-badge {
    width: 70px;
    height: 70px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #eef4ff;

    border: 1px solid #dce8fb;

    border-radius: 18px;

    margin-bottom: 20px;
}

.content-badge span {
    color: #174a87;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
}

.content-badge strong {
    color: #ef2448;

    font-size: 27px;
    line-height: 1;
}

.class10-content h3 {
    margin: 0 0 18px;

    color: #0b2d5c;

    font-size: 29px;
    line-height: 1.25;
}

.class10-content p {
    margin: 0 0 18px;

    color: #68768a;

    font-size: 15px;
}

.class10-content p strong {
    color: #0b2d5c;
}

.lead-text {
    color: #4c5c72 !important;
    font-size: 16px !important;
    font-weight: 500;
}


/* =====================================================
   PROGRAM TITLE
   ===================================================== */

.program-title {
    display: flex;
    align-items: center;

    gap: 12px;

    margin: 30px 0 17px;
}

.program-title span {
    width: 35px;
    height: 3px;

    background: #ef2448;

    border-radius: 10px;
}

.program-title h4 {
    margin: 0;

    color: #0b2d5c;

    font-size: 17px;
}


/* =====================================================
   PROGRAM LIST
   ===================================================== */

.program-list {
    display: grid;
    gap: 12px;
}

.program-item {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding: 17px;

    background: #f7f9fc;

    border: 1px solid #e7edf5;

    border-radius: 14px;

    transition: .3s ease;
}

.program-item:hover {
    transform: translateX(5px);

    border-color: #d3deed;

    box-shadow:
        0 8px 25px rgba(23, 74, 135, .08);
}

.program-number {
    flex: 0 0 43px;

    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #0b2d5c;

    color: #fff;

    border-radius: 11px;

    font-size: 12px;
    font-weight: 800;
}

.program-item h5 {
    margin: 0 0 2px;

    color: #0b2d5c;

    font-size: 15px;
}

.program-item h5 small {
    color: #ef2448;

    font-size: 11px;

    margin-left: 5px;
}

.program-item p {
    margin: 0;

    color: #68768a;

    font-size: 13px;

    line-height: 1.5;
}


/* =====================================================
   HIGHLIGHTS
   ===================================================== */

.highlights {
    display: grid;

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

    gap: 10px;

    margin-top: 28px;
}

.highlight-box {
    display: flex;
    align-items: center;

    gap: 9px;

    padding: 13px 10px;

    background: #fff;

    border: 1px solid #e3e9f2;

    border-radius: 12px;
}

.highlight-icon {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff0f3;

    color: #ef2448;

    border-radius: 9px;

    font-weight: 800;
}

.highlight-box strong {
    display: block;

    color: #0b2d5c;

    font-size: 11px;
    line-height: 1.3;
}

.highlight-box span {
    display: block;

    color: #8994a4;

    font-size: 9px;

    line-height: 1.4;
}


/* =====================================================
   RIGHT IMAGE
   ===================================================== */

.class10-image-area {
    position: relative;

    min-height: 620px;

    overflow: hidden;

    background: #102f59;
}

.class10-image-area img {
    width: 100%;
    height: 520px;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.class10-image-area:hover img {
    transform: scale(1.04);
}

.class10-image-area::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(5, 25, 50, .30),
            transparent 40%,
            rgba(5, 25, 50, .80));

    pointer-events: none;
}


/* =====================================================
   IMAGE LABEL
   ===================================================== */

.image-label {
    position: absolute;

    top: 25px;
    left: 25px;

    z-index: 3;

    color: #fff;
}

.image-label span {
    display: block;

    color: #ff5571;

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 800;
}

.image-label strong {
    display: block;

    margin-top: 2px;

    font-size: 17px;
}


/* =====================================================
   IMAGE BOTTOM CARD
   ===================================================== */

.image-bottom-card {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 25px;

    z-index: 3;

    padding: 22px;

    border-radius: 16px;

    background: rgba(7, 27, 55, .80);

    backdrop-filter: blur(10px);

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

    color: #fff;
}

.image-bottom-card span {
    color: #ff5571;

    font-size: 9px;

    letter-spacing: 2px;

    font-weight: 800;
}

.image-bottom-card strong {
    display: block;

    margin-top: 5px;

    font-size: 25px;

    line-height: 1.2;
}


/* =====================================================
   CTA
   ===================================================== */

.class10-cta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 32px 38px;

    background: #0b2d5c;

    border-radius: 20px;

    box-shadow:
        0 15px 45px rgba(11, 45, 92, .18);
}

.class10-cta>div>span {
    color: #ff5571;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.class10-cta h3 {
    margin: 5px 0 0;

    color: #fff;

    font-size: 22px;

    line-height: 1.3;
}

.admission-btn {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 14px 20px 14px 24px;

    background: #ef2448;

    color: #fff;

    text-decoration: none;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    transition: .3s ease;
}

.admission-btn>span {
    color: #fff;

    font-size: 20px;
}

.admission-btn:hover {
    background: #d9193c;

    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(239, 36, 72, .30);
}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 900px) {

    .class10-main-card {
        grid-template-columns: 1fr;
    }

    .class10-image-area {
        min-height: 500px;
        order: -1;
    }

    .class10-content {
        padding: 35px;
    }

    .highlights {
        grid-template-columns: 1fr;
    }

    .class10-cta {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 600px) {

    .class10-hero {
        min-height: 250px;
    }

    .hero-content h1 {
        font-size: 30px;
    }


    .class10-section {
        padding: 50px 15px;
    }

    .section-heading h2 {
        font-size: 30px;
    }

    .class10-main-card {
        border-radius: 18px;
    }

    .class10-content {
        padding: 25px 20px;
    }

    .class10-content h3 {
        font-size: 24px;
    }

    .class10-image-area {
        min-height: 420px;
    }

    .program-item {
        padding: 14px;
    }

    .class10-cta {
        padding: 25px 20px;
        border-radius: 16px;
    }

    .class10-cta h3 {
        font-size: 19px;
    }

    .admission-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   DIFFERENT COURSES PAGE
   ========================================================= */

.different-course-section {
    background: #f5f7fb;
    padding: 90px 20px 100px;
    font-family: "Poppins", Arial, sans-serif;
    color: #10264b;
}

.different-course-container {
    max-width: 1180px;
    margin: auto;
}


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

.different-course-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(rgba(5, 15, 35, .82),
            rgba(5, 15, 35, .78)),
        url("images/page-banner.jpg") center/cover no-repeat;

    border-top: 5px solid #ed1b3b;
    overflow: hidden;
}

.different-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 20%,
            rgba(237, 27, 59, .15),
            transparent 55%);
}

.different-hero-content {
    position: relative;
    text-align: center;
    color: #fff;
    z-index: 2;
}

.different-hero-label {
    display: inline-block;
    color: #ff3152;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.different-hero-content h1 {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.2;
    font-weight: 800;
}




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

.different-section-heading {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.different-section-tag {
    display: inline-block;
    margin-bottom: 13px;

    color: #ed1b3b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.different-section-heading h2 {
    margin: 0 0 18px;

    color: #10264b;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
}

.different-section-heading h2 span {
    color: #ed1b3b;
}

.different-section-heading p {
    margin: 0;

    color: #66748b;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   COURSE CATEGORY
   ========================================================= */

.course-category {
    position: relative;

    margin-bottom: 35px;
    padding: 32px;

    background: #fff;

    border: 1px solid #e3e8f0;
    border-radius: 20px;

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

    overflow: hidden;
}

.course-category::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background: #ed1b3b;
}


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

.category-header {
    display: flex;
    align-items: center;
    gap: 18px;

    padding-bottom: 25px;
    margin-bottom: 25px;

    border-bottom: 1px solid #edf0f5;
}

.category-icon {
    width: 65px;
    height: 65px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #102f68;
    color: #fff;

    border-radius: 16px;

    font-size: 16px;
    font-weight: 800;

    box-shadow: 0 10px 22px rgba(16, 47, 104, .18);
}

.category-header span {
    display: block;

    margin-bottom: 5px;

    color: #ed1b3b;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.category-header h3 {
    margin: 0;

    color: #10264b;
    font-size: 25px;
    font-weight: 800;
}


/* =========================================================
   CATEGORY CONTENT
   ========================================================= */

.course-category-content {
    display: grid;

    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);

    gap: 45px;

    align-items: center;
}

.course-category-text {
    min-width: 0;
}

.category-intro {
    margin: 0 0 22px;

    color: #59687e;

    font-size: 14px;
    line-height: 1.7;
    font-weight: 500;
}


/* =========================================================
   COURSE MINI CARD
   ========================================================= */

.course-mini-card {
    display: flex;
    align-items: center;
    gap: 17px;

    padding: 17px 19px;
    margin-bottom: 12px;

    background: #f7f9fc;

    border: 1px solid #e8edf4;
    border-radius: 13px;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.course-mini-card:hover {
    transform: translateX(5px);

    border-color: #d9dfeb;

    box-shadow:
        0 10px 25px rgba(20, 42, 80, .08);
}

.mini-number {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eaf0fb;
    color: #123b78;

    border-radius: 11px;

    font-size: 12px;
    font-weight: 800;
}

.mini-content h4 {
    margin: 0 0 5px;

    color: #122c55;

    font-size: 16px;
    font-weight: 800;
}

.course-code {
    color: #7b8799;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .7px;
}


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

.category-image {
    position: relative;

    min-height: 275px;

    border-radius: 17px;

    overflow: hidden;

    background: #10264b;

    box-shadow:
        0 18px 40px rgba(16, 38, 75, .15);
}

.category-image img {
    width: 100%;
    height: 275px;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}

.category-image:hover img {
    transform: scale(1.05);
}

.category-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(transparent 35%,
            rgba(5, 17, 39, .78));
}

.image-caption {
    position: absolute;

    left: 22px;
    right: 22px;
    bottom: 20px;

    z-index: 2;

    color: #fff;
}

.image-caption strong {
    display: block;

    margin-bottom: 4px;

    font-size: 17px;
}

.image-caption span {
    font-size: 12px;
    color: #dce5f2;
}


/* =========================================================
   FOUNDATION CATEGORY
   ========================================================= */

.foundation-category {
    margin-bottom: 50px;
}

.foundation-category .category-icon {
    background: #ed1b3b;
}


/* =========================================================
   CTA
   ========================================================= */

.different-course-cta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 65px;
    padding: 35px 42px;

    background:
        linear-gradient(120deg,
            #102f68,
            #17498c);

    border-radius: 20px;

    box-shadow:
        0 20px 45px rgba(16, 47, 104, .18);
}

.cta-content span {
    display: block;

    margin-bottom: 7px;

    color: #ff4864;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.cta-content h3 {
    margin: 0;

    color: #fff;

    font-size: 25px;
    line-height: 1.4;
}

.different-admission-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;

    flex-shrink: 0;

    padding: 14px 22px;

    background: #ed1b3b;
    color: #fff;

    border-radius: 10px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    box-shadow: 0 10px 25px rgba(237, 27, 59, .28);

    transition: .25s ease;
}

.different-admission-btn span {
    font-size: 20px;
    line-height: 1;
}

.different-admission-btn:hover {
    background: #d91432;
    transform: translateY(-3px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .different-course-hero {
        min-height: 260px;
    }

    .different-hero-content h1 {
        font-size: 34px;
    }

    .course-category-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .category-image {
        max-width: 600px;
        width: 100%;
    }

    .different-section-heading h2 {
        font-size: 32px;
    }

}


@media (max-width: 600px) {

    .different-course-section {
        padding: 60px 15px 70px;
    }

    .different-course-hero {
        min-height: 230px;
    }

    .different-hero-content h1 {
        font-size: 27px;
    }

    .different-breadcrumb {
        font-size: 12px;
    }

    .different-section-heading {
        margin-bottom: 40px;
    }

    .different-section-heading h2 {
        font-size: 28px;
    }

    .course-category {
        padding: 22px 18px;
        border-radius: 15px;
    }

    .category-header {
        gap: 12px;
    }

    .category-icon {
        width: 53px;
        height: 53px;
        border-radius: 12px;
        font-size: 13px;
    }

    .category-header h3 {
        font-size: 20px;
    }

    .category-image {
        min-height: 220px;
    }

    .category-image img {
        height: 220px;
    }

    .different-course-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 24px;
    }

    .cta-content h3 {
        font-size: 21px;
    }

    .different-admission-btn {
        width: 100%;
        justify-content: center;
    }

}

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

.admission-section,
.admission-section * {
    box-sizing: border-box;
}

.admission-section {
    background: #f5f7fb;
    padding: 75px 20px 90px;
    font-family: Arial, Helvetica, sans-serif;
    color: #10284d;
}

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


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

.admission-hero {
    position: relative;
    min-height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    background:
        linear-gradient(120deg,
            rgba(5, 17, 39, .96),
            rgba(16, 40, 77, .82),
            rgba(40, 20, 20, .88)),
        url("images/banner.jpg") center/cover no-repeat;

    border-top: 5px solid #ed1b3b;
}

.admission-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 40%,
            rgba(237, 27, 59, .15),
            transparent 35%);
}

.admission-hero-content {
    position: relative;
    text-align: center;
    z-index: 2;
}

.admission-label {
    display: inline-block;
    color: #ed1b3b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.admission-hero h1 {
    color: #fff;
    font-size: 48px;
    line-height: 1.1;
    margin: 0 0 18px;
    font-weight: 800;
}




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

.admission-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
}

.section-tag {
    position: relative;
    display: inline-block;
    color: #ed1b3b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.section-tag::before {
    content: "";
    width: 30px;
    height: 3px;
    background: #ed1b3b;
    position: absolute;
    left: 0;
    bottom: -7px;
}

.admission-heading h2 {
    font-size: 38px;
    line-height: 1.15;
    margin: 8px 0 12px;
    color: #0b2348;
}

.admission-heading h2 span {
    color: #1c4c87;
}

.admission-heading p {
    margin: 0;
    max-width: 650px;
    color: #71809a;
    font-size: 15px;
    line-height: 1.7;
}



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

.admission-card {
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 55px rgba(15, 40, 75, .08);
}


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

.form-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 25px 32px;
    background: linear-gradient(100deg,
            #102e5c,
            #1b477f);
    color: #fff;
}

.form-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .12);
    font-size: 25px;
}

.form-header h3 {
    margin: 0 0 5px;
    font-size: 21px;
}

.form-header p {
    margin: 0;
    color: #d9e2ef;
    font-size: 13px;
}


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

.admission-card form {
    padding: 35px;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.form-section-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 8px 0 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #edf0f5;
}



.form-section-title h4 {
    margin: 0 0 4px;
    color: #102d55;
    font-size: 17px;
}

.form-section-title p {
    margin: 0;
    color: #8a96a8;
    font-size: 12px;
}


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

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 21px 22px;
    margin-bottom: 38px;
}

.form-full {
    grid-column: 1 / -1;
}

.login-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 25px;
}


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

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    color: #30445f;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    border: 1px solid #dce2eb;
    background: #fbfcfe;
    color: #243953;
    border-radius: 9px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
    transition: all .25s ease;
}

.form-group input,
.form-group select {
    height: 48px;
    padding: 0 14px;
}

.form-group textarea {
    padding: 13px 14px;
    resize: vertical;
    min-height: 95px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #a5afbd;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #1d4f8c;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(29, 79, 140, .08);
}


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

.file-input {
    height: 48px;
    border: 1px dashed #cbd4e0;
    border-radius: 9px;
    background: #fbfcfe;
    padding: 7px;
    display: flex;
    align-items: center;
}

.file-input input {
    border: 0;
    height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
}


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

.form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    border-top: 1px solid #edf0f5;
    padding-top: 28px;
}

.submit-note {
    display: flex;
    align-items: center;
    gap: 10px;
}

.submit-note>span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e9f7ee;
    color: #19a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.submit-note p {
    margin: 0;
    max-width: 430px;
    color: #7d8999;
    font-size: 12px;
    line-height: 1.5;
}

.admission-submit {
    border: 0;
    cursor: pointer;
    min-width: 220px;
    height: 52px;
    padding: 0 22px;
    border-radius: 9px;
    background: #ed1b3b;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    box-shadow: 0 10px 22px rgba(237, 27, 59, .2);
    transition: all .25s ease;
}

.admission-submit span {
    margin-left: 12px;
    font-size: 18px;
}

.admission-submit:hover {
    background: #c91431;
    transform: translateY(-2px);
    box-shadow: 0 14px 25px rgba(237, 27, 59, .25);
}


/* =========================================================
   BOTTOM INFO
========================================================= */

.admission-bottom {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 22px;
}

.bottom-box {
    background: #fff;
    border: 1px solid #e3e8f0;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}



.bottom-box strong {
    display: block;
    color: #16345e;
    font-size: 13px;
    margin-bottom: 4px;
}

.bottom-box small {
    color: #8995a5;
    font-size: 11px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .admission-hero {
        min-height: 230px;
    }

    .admission-hero h1 {
        font-size: 38px;
    }

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

    .admission-bottom {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .admission-section {
        padding: 50px 15px 60px;
    }

    .admission-heading {
        align-items: flex-start;
    }

    .admission-heading h2 {
        font-size: 29px;
    }



    .form-grid,
    .login-grid {
        grid-template-columns: 1fr;
    }

    .form-full {
        grid-column: auto;
    }

    .admission-card form {
        padding: 22px 18px;
    }

    .form-header {
        padding: 22px 18px;
    }

    .form-submit {
        flex-direction: column;
        align-items: stretch;
    }

    .admission-submit {
        width: 100%;
    }

    .admission-hero h1 {
        font-size: 30px;
    }

    .admission-label {
        font-size: 9px;
    }

}

/* test section class11*/
/* =========================================================
   CLASS XI TEST SERIES
========================================================= */

.xi-test-section {
    background: #f7f9fc;
    padding: 80px 0 100px;
    font-family: "Poppins", Arial, sans-serif;
    color: #24324a;
}

.xi-container {
    width: min(1180px, 92%);
    margin: auto;
}


/* ================= INTRO ================= */

.xi-intro-card {
    display: grid;
    grid-template-columns: 1.45fr .75fr;
    gap: 45px;
    align-items: center;
    background: #fff;
    padding: 45px;
    border-radius: 22px;
    box-shadow: 0 15px 45px rgba(25, 42, 70, .08);
    border: 1px solid #e9edf3;
}

.xi-section-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ed1738;
    margin-bottom: 12px;
}

.xi-intro-content h2 {
    font-size: 34px;
    margin: 0 0 20px;
    color: #17253d;
}

.xi-intro-content p {
    color: #64748b;
    line-height: 1.85;
    font-size: 15px;
    margin: 0 0 15px;
}

.xi-info-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 11px 18px;
    border-radius: 30px;
    background: #eefbf7;
    color: #087f67;
    font-size: 13px;
    font-weight: 700;
}

.xi-intro-image {
    position: relative;
}

.xi-intro-image img {
    width: 400px;
    height: 300px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}


/* ================= FEE + DETAILS ================= */

.xi-fee-details {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 25px;
    margin-top: 35px;
}

.xi-fee-card {
    background: #172f58;
    color: #fff;
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(23, 47, 88, .16);
}

.fee-label {
    color: #ffcf4a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.xi-fee-card h3 {
    font-size: 24px;
    margin: 10px 0 25px;
}

.fee-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    font-size: 13px;
}

.fee-row strong {
    white-space: nowrap;
}

.xi-apply-btn {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 22px;
    border-radius: 8px;
    background: #ed1738;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: .3s;
}

.xi-apply-btn:hover {
    transform: translateY(-2px);
    background: #c90f2c;
}

.xi-details-card {
    background: #fff;
    padding: 35px;
    border-radius: 20px;
    border: 1px solid #e7ebf1;
    box-shadow: 0 10px 30px rgba(25, 42, 70, .06);
}

.xi-small-title {
    color: #ed1738;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.xi-details-card h3 {
    font-size: 25px;
    margin: 10px 0 20px;
}

.detail-line {
    padding: 15px 0;
    border-bottom: 1px solid #edf0f4;
    color: #64748b;
    line-height: 1.7;
    font-size: 14px;
}

.detail-line b {
    color: #263750;
}


/* ================= PLANNING HEADING ================= */

.planning-heading {
    text-align: center;
    padding: 80px 0 35px;
}

.planning-heading>span {
    color: #ed1738;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.planning-heading h2 {
    margin: 8px 0;
    font-size: 32px;
    color: #17253d;
}

.planning-heading h2 small {
    font-size: 18px;
    font-weight: 500;
}

.planning-heading p {
    display: inline-block;
    margin: 8px 0;
    padding: 8px 18px;
    background: #fff;
    border-radius: 30px;
    color: #087f67;
    font-weight: 700;
    font-size: 13px;
}


/* ================= MONTH ================= */

.month-section {
    margin-top: 38px;
}

.month-section>h3,
.revision-phase h2 {
    text-align: center;
    font-size: 20px;
    color: #17253d;
    margin: 0 0 20px;
    position: relative;
}

.month-section>h3::after,
.revision-phase h2::after {
    content: "";
    display: block;
    width: 35px;
    height: 3px;
    background: #ed1738;
    margin: 8px auto 0;
    border-radius: 10px;
}


/* ================= TEST GRID ================= */

.test-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.test-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 25px rgba(30, 45, 70, .06);
    transition: .3s;
}

.test-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(30, 45, 70, .12);
}

.test-head,
.test-row {
    display: grid;
    grid-template-columns: 25% 37.5% 37.5%;
}

.test-head span,
.test-row span {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-right: 1px solid #dce5e9;
    border-bottom: 1px solid #dce5e9;
    font-size: 12px;
}

.test-head {
    background: #f3f7fa;
    color: #52657d;
    font-weight: 700;
}

.test-row {
    color: #64748b;
}

.test-row span:last-child,
.test-head span:last-child {
    border-right: none;
}


/* ================= REVISION ================= */

.revision-phase {
    text-align: center;
    padding: 55px 0 10px;
}

.revision-phase span {
    display: inline-block;
    color: #ed1738;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.revision-phase h2 {
    margin-bottom: 20px;
}

.vst {
    padding-top: 65px;
}


/* ================= FEB CALENDAR ================= */

.feb-calendar {
    background: #fff;
    border: 1px solid #dce5e9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(30, 45, 70, .07);
}

.feb-row {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
}

.feb-row span {
    min-height: 50px;
    display: flex;
    align-items: center;
    padding: 10px;
    border-right: 1px solid #dce5e9;
    border-bottom: 1px solid #dce5e9;
    font-size: 12px;
    color: #64748b;
}

.feb-row span:last-child {
    border-right: none;
}

.feb-row.values span {
    min-height: 60px;
    color: #263750;
    font-weight: 600;
}

.feb-row:last-child span {
    border-bottom: none;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 992px) {

    .xi-intro-card,
    .xi-fee-details {
        grid-template-columns: 1fr;
    }

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

    .xi-intro-image img {
        height: 280px;
    }
}


@media (max-width: 600px) {

    .xi-test-section {
        padding: 50px 0 70px;
    }

    .xi-intro-card {
        padding: 25px;
    }

    .xi-intro-content h2 {
        font-size: 26px;
    }

    .test-grid {
        grid-template-columns: 1fr;
    }

    .xi-fee-card,
    .xi-details-card {
        padding: 25px;
    }

    .planning-heading {
        padding-top: 55px;
    }

    .planning-heading h2 {
        font-size: 25px;
    }

    .feb-calendar {
        overflow-x: auto;
    }

    .feb-row {
        min-width: 850px;
    }
}

/*class 12th test*/
/* =========================================================
   CLASS XII TEST SERIES
========================================================= */

.xii-test-section {
    padding: 80px 20px;
    background: #f7f9fc;
    font-family: Arial, sans-serif;
    color: #263238;
}

.xii-test-container {
    max-width: 1180px;
    margin: auto;
}


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

.xii-about-grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 55px;
    align-items: center;
    margin-bottom: 55px;
}

.xii-about-content {
    background: #fff;
    padding: 42px;
    border-radius: 18px;
    border: 1px solid #e8edf3;
    box-shadow: 0 12px 35px rgba(20, 40, 80, .07);
}

.xii-section-tag {
    display: inline-block;
    color: #ed1836;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.xii-about-content h2,
.xii-course-card h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #172b4d;
}

.xii-title-line {
    width: 55px;
    height: 4px;
    background: #ed1836;
    border-radius: 10px;
    margin: 14px 0 24px;
}

.xii-about-content p {
    font-size: 15px;
    line-height: 1.85;
    color: #65748b;
    margin: 0 0 14px;
}


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

.xii-about-image {
    position: relative;
    min-height: 390px;
}

.xii-about-image img {
    width: 100%;
    height: 390px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .15);
}

.xii-image-badge {
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 20px;
    background: #ed1836;
    color: #fff;
    padding: 13px 18px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(237, 24, 54, .3);
}

.xii-image-badge span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.xii-image-badge strong {
    display: block;
    margin-top: 3px;
    font-size: 17px;
}


/* ================= HIGHLIGHT ================= */

.xii-info-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f0f8f3;
    border-left: 4px solid #20a05a;
    padding: 15px 18px;
    border-radius: 8px;
    margin: 22px 0;
    color: #24633e;
}

.xii-info-highlight span {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #20a05a;
    color: #fff;
    font-weight: bold;
}


/* ================= COURSE GRID ================= */

.xii-course-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
    align-items: stretch;
}


/* ================= FEE CARD ================= */

.xii-fee-card {
    position: relative;
    overflow: hidden;
    background: var(--blue-dark);
    color: #fff;
    padding: 35px;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(237, 24, 54, .22);
}

.xii-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .16);
    font-size: 25px;
    font-weight: 800;
    margin-bottom: 22px;
}

.xii-card-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    opacity: .8;
}

.xii-fee-card h3 {
    font-size: 27px;
    margin: 7px 0 28px;
}

.xii-fee-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.xii-fee-list div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    font-size: 13px;
}

.xii-fee-list div:last-child {
    border-bottom: 0;
}

.xii-fee-list span {
    opacity: .92;
    line-height: 1.5;
}

.xii-fee-list strong {
    white-space: nowrap;
}


/* ================= COURSE CARD ================= */

.xii-course-card {
    background: #fff;
    border-radius: 18px;
    padding: 38px 42px;
    border: 1px solid #e8edf3;
    box-shadow: 0 12px 35px rgba(20, 40, 80, .07);
}

.xii-detail {
    display: flex;
    gap: 18px;
    margin: 23px 0;
}

.xii-detail-icon {
    min-width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff0f2;
    color: #ed1836;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.xii-detail strong {
    display: block;
    color: #243b5a;
    font-size: 15px;
    margin-bottom: 6px;
}

.xii-detail p {
    margin: 0;
    color: #718096;
    font-size: 14px;
    line-height: 1.7;
}

.xii-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 5px;
    padding: 13px 22px;
    background: #ed1836;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    transition: .3s;
}

.xii-apply-btn span {
    font-size: 20px;
    line-height: 0;
}

.xii-apply-btn:hover {
    background: #c90927;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(237, 24, 54, .25);
}


/* ================= BOTTOM BANNER ================= */

.xii-bottom-banner {
    margin-top: 35px;
    padding: 28px 35px;
    border-radius: 16px;
    background: #172b4d;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 22px;
}

.xii-banner-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ed1836;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    font-weight: bold;
}

.xii-bottom-banner span {
    font-size: 11px;
    letter-spacing: 1.5px;
    opacity: .7;
    font-weight: 700;
}

.xii-bottom-banner h3 {
    margin: 5px 0;
    font-size: 21px;
}

.xii-bottom-banner p {
    margin: 0;
    font-size: 13px;
    color: #c8d2df;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {

    .xii-about-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .xii-course-grid {
        grid-template-columns: 1fr;
    }

    .xii-about-image,
    .xii-about-image img {
        min-height: 300px;
        height: 300px;
    }
}


@media (max-width: 600px) {

    .xii-test-section {
        padding: 45px 15px;
    }

    .xii-about-content,
    .xii-course-card,
    .xii-fee-card {
        padding: 25px;
    }

    .xii-about-content h2,
    .xii-course-card h3 {
        font-size: 23px;
    }

    .xii-fee-list div {
        flex-direction: column;
        gap: 4px;
    }

    .xii-bottom-banner {
        padding: 22px;
        align-items: flex-start;
    }

    .xii-bottom-banner h3 {
        font-size: 17px;
    }
}


/* =========================================================
   XII PASS OUT TEST SERIES
========================================================= */

.passout-section {
    padding: 75px 20px;
    background: #f7f9fc;
    font-family: Arial, sans-serif;
    color: #27364b;
}

.passout-container {
    max-width: 1180px;
    margin: auto;
}


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

.passout-about {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 45px;
    align-items: center;
    margin-bottom: 45px;
}

.passout-about-content {
    background: #fff;
    padding: 38px 42px;
    border-radius: 18px;
    border: 1px solid #e7ebf1;
    box-shadow: 0 12px 35px rgba(20, 40, 70, .07);
}

.passout-tag {
    display: inline-block;
    color: #ed1836;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.passout-about h2,
.passout-details h3 {
    margin: 0;
    color: #172b4d;
    font-size: 28px;
    font-weight: 800;
}

.passout-line {
    width: 55px;
    height: 4px;
    background: #ed1836;
    border-radius: 10px;
    margin: 13px 0 22px;
}

.passout-about p {
    color: #68778c;
    font-size: 14px;
    line-height: 1.85;
    margin: 0 0 13px;
}


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

.passout-image {
    position: relative;
}

.passout-image img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .14);
}

.passout-image-badge {
    position: absolute;
    z-index: 2;
    left: 18px;
    top: 18px;
    padding: 13px 17px;
    border-radius: 10px;
    background: #ed1836;
    color: #fff;
    box-shadow: 0 8px 20px rgba(237, 24, 54, .3);
}

.passout-image-badge small,
.passout-image-badge span {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    opacity: .85;
}

.passout-image-badge strong {
    display: block;
    font-size: 17px;
    margin: 2px 0;
}


/* ================= HIGHLIGHT ================= */

.passout-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin: 20px 0;
    background: #eff9f3;
    border-left: 4px solid #20a05a;
    border-radius: 8px;
    color: #25623e;
    font-size: 14px;
}

.passout-highlight span {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #20a05a;
    color: #fff;
    border-radius: 50%;
    font-weight: bold;
}


/* ================= MAIN GRID ================= */

.passout-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 28px;
    align-items: stretch;
}


/* ================= FEE CARD ================= */

.passout-fee-card {
    background: var(--blue-dark);
    color: #fff;
    padding: 34px;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(237, 24, 54, .22);
}

.passout-fee-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 20px;
}

.passout-small-title {
    font-size: 11px;
    letter-spacing: 1.5px;
    opacity: .8;
    font-weight: 700;
}

.passout-fee-card h3 {
    margin: 7px 0 25px;
    font-size: 27px;
}

.passout-fee-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    font-size: 15px;
}

.passout-fee-item strong {
    font-size: 16px;
    white-space: nowrap;
}

.passout-fee-note {
    margin-top: 25px;
    font-size: 12px;
    line-height: 1.6;
    opacity: .82;
}


/* ================= DETAILS CARD ================= */

.passout-details {
    background: #fff;
    padding: 35px 40px;
    border-radius: 18px;
    border: 1px solid #e7ebf1;
    box-shadow: 0 12px 35px rgba(20, 40, 70, .07);
}

.passout-detail-row {
    display: flex;
    gap: 17px;
    margin: 22px 0;
}

.passout-number {
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff0f2;
    color: #ed1836;
    font-size: 12px;
    font-weight: 800;
}

.passout-detail-row h4 {
    margin: 0 0 6px;
    color: #243b5a;
    font-size: 15px;
}

.passout-detail-row p {
    margin: 0;
    color: #718096;
    font-size: 14px;
    line-height: 1.7;
}

.passout-detail-row b {
    color: #d31631;
}


.passout-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 13px 22px;
    margin-top: 3px;
    border-radius: 8px;
    background: #ed1836;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: .3s;
}

.passout-apply-btn span {
    font-size: 20px;
}

.passout-apply-btn:hover {
    background: #c90727;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(237, 24, 54, .25);
}


/* ================= CTA ================= */

.passout-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    padding: 26px 32px;
    border-radius: 16px;
    background: #172b4d;
    color: #fff;
}

.passout-cta-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    background: #ed1836;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 22px;
}

.passout-cta span {
    font-size: 10px;
    letter-spacing: 1.5px;
    font-weight: 700;
    opacity: .7;
}

.passout-cta h3 {
    margin: 5px 0;
    font-size: 21px;
}

.passout-cta p {
    margin: 0;
    color: #c7d1df;
    font-size: 13px;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {

    .passout-about {
        grid-template-columns: 1fr;
    }

    .passout-grid {
        grid-template-columns: 1fr;
    }

    .passout-image img {
        height: 320px;
    }
}


@media (max-width: 600px) {

    .passout-section {
        padding: 45px 15px;
    }

    .passout-about-content,
    .passout-details,
    .passout-fee-card {
        padding: 25px;
    }

    .passout-about h2,
    .passout-details h3 {
        font-size: 23px;
    }

    .passout-fee-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .passout-cta {
        padding: 22px;
        align-items: flex-start;
    }

    .passout-cta h3 {
        font-size: 17px;
    }
}

/*class 9 and 10th test */
/* =========================================================
   CLASS XI-X TEST SERIES
========================================================= */

.xi-x-section {
    width: 100%;
    padding: 90px 20px;
    background:
        linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    font-family: "Poppins", Arial, sans-serif;
    color: #1e293b;
}

.xi-x-container {
    max-width: 1180px;
    margin: auto;
}


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

.xi-x-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 55px;
}

.xi-x-heading span,
.xi-x-small-title,
.xi-x-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #e11d48;
}

.xi-x-heading h2 {
    margin: 12px 0;
    font-size: 38px;
    line-height: 1.2;
    color: #111827;
    font-weight: 700;
}

.xi-x-heading p {
    margin: 0;
    color: #64748b;
    font-size: 15px;
    line-height: 1.8;
}


/* ================= INTRO ================= */

.xi-x-intro {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 15px 45px rgba(15, 23, 42, .08);
    border: 1px solid #e5e7eb;
    margin-bottom: 35px;
}

.xi-x-intro-content {
    padding: 45px;
}

.xi-x-intro-content h3 {
    font-size: 28px;
    margin: 12px 0 20px;
    color: #111827;
}

.xi-x-intro-content p {
    color: #64748b;
    line-height: 1.85;
    font-size: 14px;
    margin-bottom: 15px;
}

.xi-x-highlight {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    margin: 22px 0;
    border-radius: 10px;
    background: #fff1f2;
    color: #9f1239;
    font-size: 14px;
}

.xi-x-highlight span {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e11d48;
    color: white;
    font-weight: bold;
}


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

.xi-x-image {
    position: relative;
    min-height: 420px;
    overflow: hidden;
}

.xi-x-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.xi-x-image:hover img {
    transform: scale(1.05);
}

.xi-x-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            transparent 55%,
            rgba(15, 23, 42, .65));
}

.xi-x-image-badge {
    position: absolute;
    z-index: 2;
    bottom: 25px;
    left: 25px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, .95);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

.xi-x-image-badge strong {
    display: block;
    font-size: 22px;
    color: #e11d48;
}

.xi-x-image-badge small {
    color: #64748b;
}


/* ================= MAIN GRID ================= */

.xi-x-grid {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 28px;
    margin-bottom: 70px;
}


/* ================= FEE CARD ================= */

.xi-x-fee-card {
    position: relative;
    padding: 35px;
    border-radius: 20px;
    color: #fff;
    background:
        var(--blue-dark);
    box-shadow: 0 18px 40px rgba(225, 29, 72, .22);
    overflow: hidden;
}

.xi-x-fee-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 35px solid rgba(255, 255, 255, .08);
    right: -80px;
    top: -70px;
}

.xi-x-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .15);
    font-size: 24px;
    margin-bottom: 25px;
}

.xi-x-fee-card .xi-x-small-title {
    color: rgba(255, 255, 255, .75);
}

.xi-x-fee-card h3 {
    font-size: 23px;
    margin: 8px 0 30px;
}

.xi-x-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.xi-x-price span {
    font-size: 14px;
}

.xi-x-price strong {
    font-size: 18px;
}

.xi-x-fee-card p {
    margin-top: 25px;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .75);
}


/* ================= DETAILS CARD ================= */

.xi-x-details-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 38px 42px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .06);
}

.xi-x-details-card h3 {
    margin: 8px 0 28px;
    font-size: 24px;
    color: #111827;
}

.xi-x-detail {
    display: flex;
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px solid #edf0f3;
}

.xi-x-detail:last-child {
    border-bottom: 0;
}

.xi-x-detail-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #fff1f2;
    color: #e11d48;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.xi-x-detail h4 {
    margin: 0 0 7px;
    font-size: 15px;
    color: #334155;
}

.xi-x-detail p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
    font-size: 13px;
}

.xi-x-apply {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding: 13px 23px;
    border-radius: 8px;
    background: #e11d48;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: .3s ease;
}

.xi-x-apply span {
    font-size: 18px;
    transition: transform .3s ease;
}

.xi-x-apply:hover {
    background: #be123c;
    color: #fff;
    transform: translateY(-2px);
}

.xi-x-apply:hover span {
    transform: translateX(5px);
}


/* ================= BENEFITS ================= */

.xi-x-benefits {
    padding-top: 10px;
}

.xi-x-benefit-heading {
    text-align: center;
    margin-bottom: 35px;
}

.xi-x-benefit-heading span {
    font-size: 12px;
    letter-spacing: 2px;
    color: #e11d48;
    font-weight: 700;
}

.xi-x-benefit-heading h3 {
    margin: 10px 0;
    font-size: 28px;
    color: #111827;
}

.xi-x-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.xi-x-benefit {
    background: #fff;
    padding: 28px 23px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    transition: .3s ease;
}

.xi-x-benefit:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 35px rgba(15, 23, 42, .09);
    border-color: #fecdd3;
}



.xi-x-benefit h4 {
    margin: 0 0 10px;
    color: #1e293b;
    font-size: 16px;
}

.xi-x-benefit p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .xi-x-intro {
        grid-template-columns: 1fr;
    }

    .xi-x-image {
        min-height: 320px;
    }

    .xi-x-grid {
        grid-template-columns: 1fr;
    }

    .xi-x-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .xi-x-section {
        padding: 55px 15px;
    }

    .xi-x-heading h2 {
        font-size: 28px;
    }

    .xi-x-intro-content {
        padding: 28px 22px;
    }

    .xi-x-intro-content h3 {
        font-size: 22px;
    }

    .xi-x-details-card {
        padding: 28px 22px;
    }

    .xi-x-benefit-grid {
        grid-template-columns: 1fr;
    }

    .xi-x-image {
        min-height: 260px;
    }

    .xi-x-grid {
        gap: 20px;
    }
}

.topper-section {
    padding: 70px 20px;
    background: #fff;
    border-top: 3px solid #ed1b2f;
}

.topper-heading {
    text-align: center;
    margin-bottom: 45px;
}

.topper-heading h1 {
    margin: 0 0 10px;
    font-size: 36px;
    font-weight: 700;
    color: #222;
}

.topper-heading p {
    margin: 0;
    font-size: 16px;
    color: #777;
}

.topper-heading::after {
    content: "";
    display: block;
    width: 55px;
    height: 3px;
    background: #ed1b2f;
    margin: 18px auto 0;
}

.topper-content {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.topper-item {
    text-align: center;
}

.topper-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    margin-bottom: 20px;
}

.topper-item h3 {
    margin: 0 0 10px;
    font-size: 20px;
    color: #222;
}

.topper-item p {
    margin: 0;
    color: #777;
    font-size: 15px;
    line-height: 1.7;
}

@media (max-width: 768px) {
    .topper-content {
        grid-template-columns: 1fr;
    }

    .topper-heading h1 {
        font-size: 28px;
    }
}


/* student datasheet*/
.datasheet-page {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #ffffff;
    border-top: 3px solid #ed1b2f;
}

.datasheet-content {
    max-width: 800px;
    padding: 40px 20px;
}

.datasheet-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.datasheet-content h1 {
    margin: 0 0 15px;
    font-size: 52px;
    font-weight: 400;
    color: #a80bbd;
}

.datasheet-content p {
    margin: 6px 0;
    font-size: 15px;
    line-height: 1.7;
    color: #666;
}

@media (max-width: 768px) {
    .datasheet-content h1 {
        font-size: 38px;
    }

    .datasheet-page {
        min-height: 65vh;
    }
}

/*examresult*/
.exam-result-page {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #fff;
    border-top: 3px solid #ed1b2f;
}

.exam-result-content {
    max-width: 800px;
    padding: 40px 20px;
}

.result-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.exam-result-content h1 {
    margin: 0 0 15px;
    font-size: 52px;
    font-weight: 400;
    color: #a80bbd;
}

.exam-result-content p {
    margin: 6px 0;
    font-size: 15px;
    line-height: 1.7;
    color: #666;
}

@media (max-width: 768px) {
    .exam-result-content h1 {
        font-size: 38px;
    }

    .exam-result-page {
        min-height: 65vh;
    }
}


/*suggestion images*/

/* =========================================
   STUDENT SUGGESTION PAGE
========================================= */

.student-suggestion-page {
    width: 100%;
    background: #fff;
    padding: 70px 0;
    box-sizing: border-box;
}


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

.suggestion-container {
    width: 1100px;
    max-width: 92%;
    margin: 0 auto;

    display: flex;
    align-items: flex-start;
    gap: 45px;
}


/* =========================================
   LEFT IMAGE
========================================= */

.suggestion-image {
    width: 430px;
    height: 570px;

    flex: 0 0 430px;

    overflow: hidden;
    position: relative;

    border-radius: 2px;
}

.suggestion-image img {
    width: 100%;
    height: 100%;

    display: block;
    object-fit: cover;

    transition: transform 0.45s ease;
}


/* ONLY IMAGE HOVER */

.suggestion-image:hover img {
    transform: scale(1.05);
}


/* =========================================
   RIGHT CONTENT
========================================= */

.suggestion-content {
    flex: 1;
    min-width: 0;
}


/* MAIN HEADING */

.suggestion-content h1 {
    margin: 5px 0 40px;

    font-family: Arial, sans-serif;
    font-size: 26px;
    font-weight: 500;

    letter-spacing: 3px;
    color: #122b50;
}


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

.suggestion-section {
    margin-bottom: 22px;
}

.suggestion-section h2 {
    margin: 0 0 12px;

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;

    color: #4a4a4a;
}


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

.suggestion-section ul {
    margin: 0;
    padding-left: 19px;
}

.suggestion-section li {
    margin-bottom: 10px;

    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.65;

    color: #6d7680;
}


/* =========================================
   DESKTOP HOVER - NO POSITION CHANGE
========================================= */

.suggestion-image,
.suggestion-image img {
    transform-origin: center center;
}


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

@media (max-width: 950px) {

    .suggestion-container {
        width: 90%;
        gap: 30px;
    }

    .suggestion-image {
        width: 350px;
        flex: 0 0 350px;
        height: 500px;
    }

    .suggestion-content h1 {
        font-size: 23px;
        letter-spacing: 2px;
    }

}


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

@media (max-width: 768px) {

    .student-suggestion-page {
        padding: 45px 0;
    }

    .suggestion-container {
        width: 92%;
        max-width: 92%;

        display: block;
    }

    .suggestion-image {
        width: 100%;
        height: auto;

        margin-bottom: 35px;
    }

    .suggestion-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .suggestion-content h1 {
        margin: 0 0 30px;

        font-size: 22px;
        letter-spacing: 2px;
    }

    .suggestion-section {
        margin-bottom: 25px;
    }

}


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

@media (max-width: 480px) {

    .student-suggestion-page {
        padding: 35px 0;
    }

    .suggestion-container {
        width: 90%;
    }

    .suggestion-content h1 {
        font-size: 20px;
        letter-spacing: 1.5px;
    }

    .suggestion-section h2 {
        font-size: 14px;
    }

    .suggestion-section li {
        font-size: 13px;
        line-height: 1.6;
    }

}

/* success letter */
/* =========================================
   SEVEN LETTERS OF SUCCESS
========================================= */

.seven-letter-page {
    width: 100%;
    background: #fff;
    padding: 65px 0 80px;
    box-sizing: border-box;
}

.seven-letter-container {
    width: 1140px;
    max-width: 90%;
    margin: 0 auto;
}


/* PAGE TITLE */

.seven-letter-title {
    margin: 0;
    padding: 0 0 28px;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;

    color: #152c4d;
    letter-spacing: .3px;
}

.seven-letter-title span {
    color: #c52626;
}


/* DIVIDER */

.seven-letter-line {
    width: 100%;
    height: 1px;
    background: #e5e5e5;
    margin-bottom: 25px;
}


/* EACH STEP */

.success-step {
    margin-bottom: 25px;
}


/* STEP HEADING */

.success-step h2 {
    margin: 0 0 17px;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;

    line-height: 1.6;
    color: #46576b;
}

.success-step h2 u {
    text-decoration: underline;
}


/* LIST */

.success-step ul {
    margin: 0;
    padding-left: 20px;
}

.success-step li {
    margin-bottom: 14px;
    padding-left: 3px;

    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.75;
    color: #687585;
}


/* SIMPLE HOVER */

.success-step li {
    transition: color .25s ease;
}

.success-step li:hover {
    color: #3f5065;
}


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

@media (max-width: 900px) {

    .seven-letter-page {
        padding: 50px 0 65px;
    }

    .seven-letter-container {
        max-width: 92%;
    }

    .seven-letter-title {
        font-size: 19px;
    }

    .success-step h2 {
        font-size: 13px;
    }

    .success-step li {
        font-size: 13px;
    }
}


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

@media (max-width: 600px) {

    .seven-letter-page {
        padding: 40px 0 50px;
    }

    .seven-letter-container {
        max-width: 90%;
    }

    .seven-letter-title {
        font-size: 18px;
        line-height: 1.5;
    }

    .seven-letter-line {
        margin-bottom: 22px;
    }

    .success-step {
        margin-bottom: 23px;
    }

    .success-step h2 {
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 13px;
    }

    .success-step ul {
        padding-left: 18px;
    }

    .success-step li {
        font-size: 13px;
        line-height: 1.7;
        margin-bottom: 12px;
    }
}


/* SMALL MOBILE */

@media (max-width: 400px) {

    .seven-letter-title {
        font-size: 17px;
    }

    .success-step h2 {
        font-size: 12px;
    }

    .success-step li {
        font-size: 12.5px;
    }

}

/* ===============================
   FEEDBACK PAGE
================================ */

.feedback-page {
    width: 100%;
    background: #ffffff;
    padding: 70px 0 80px;
    font-family: Arial, Helvetica, sans-serif;
}

.feedback-container {
    width: 80%;
    max-width: 1100px;
    margin: 0 auto;
}


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

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

.feedback-header h1 {
    margin: 0 0 15px;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #222;
}

.feedback-header h1::after {
    content: "";
    display: block;
    width: 55px;
    height: 2px;
    background: #ed1b2f;
    margin: 15px auto 0;
}

.feedback-header p {
    margin: 0;
    color: #777;
    font-size: 15px;
    line-height: 1.7;
}


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

.feedback-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: start;
}


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

.feedback-info {
    padding-top: 5px;
}

.feedback-info h2 {
    margin: 0 0 25px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
    letter-spacing: .5px;
}

.feedback-info h2::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background: #ed1b2f;
    margin-top: 12px;
}

.feedback-info p {
    margin: 0 0 20px;
    font-size: 15px;
    line-height: 1.9;
    color: #666;
}


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

.feedback-form {
    border-left: 1px solid #eeeeee;
    padding-left: 45px;
}

.feedback-field {
    margin-bottom: 20px;
}

.feedback-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #444;
}

.feedback-field input,
.feedback-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #dddddd;
    background: #fff;
    font-size: 14px;
    font-family: inherit;
    color: #555;
    outline: none;
    transition: border-color .3s ease;
}

.feedback-field input {
    height: 44px;
}

.feedback-field textarea {
    resize: vertical;
    min-height: 130px;
}

.feedback-field input:focus,
.feedback-field textarea:focus {
    border-color: #ed1b2f;
}

.feedback-field input::placeholder,
.feedback-field textarea::placeholder {
    color: #aaa;
}


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

.feedback-form button {
    border: none;
    background: #ed1b2f;
    color: #fff;
    padding: 12px 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    cursor: pointer;
    transition: background .3s ease;
}

.feedback-form button:hover {
    background: #c91527;
}


/* ===============================
   RESPONSIVE
================================ */

@media (max-width: 768px) {

    .feedback-page {
        padding: 45px 0 55px;
    }

    .feedback-container {
        width: 90%;
    }

    .feedback-header {
        margin-bottom: 35px;
    }

    .feedback-header h1 {
        font-size: 25px;
    }

    .feedback-content {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .feedback-form {
        border-left: none;
        border-top: 1px solid #eeeeee;
        padding-left: 0;
        padding-top: 35px;
    }
}

/* =========================================
   CONTACT PAGE
========================================= */

.contact-page {
    width: 100%;
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    color: #555;
}


/* =========================================
   CONTACT SECTION
========================================= */

.contact-section {
    padding: 70px 0 65px;
}

.contact-container {
    width: 80%;
    max-width: 1100px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
}


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

.contact-form-area h2,
.contact-info h2 {
    margin: 0 0 35px;

    font-size: 24px;
    font-weight: 600;
    color: #222;
}

.contact-form-area h2::after,
.contact-info h2::after {
    content: "";

    display: block;

    width: 45px;
    height: 2px;

    background: #ed1b2f;

    margin-top: 13px;
}


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

.contact-form {
    width: 100%;
}

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

.form-group label {
    display: block;

    margin-bottom: 7px;

    font-size: 13px;
    font-weight: 600;

    color: #555;
}

.form-group input,
.form-group textarea {
    width: 100%;
    box-sizing: border-box;

    border: 1px solid #ddd;
    background: #fff;

    padding: 12px 14px;

    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;

    color: #555;

    outline: none;

    transition: border-color .25s ease;
}

.form-group input {
    height: 44px;
}

.form-group textarea {
    height: 115px;

    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #ed1b2f;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aaa;
}


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

.contact-submit {
    margin-top: 3px;

    padding: 11px 27px;

    border: 0;

    background: #ed1b2f;
    color: #fff;

    font-size: 13px;
    font-weight: 600;

    text-transform: uppercase;

    cursor: pointer;

    transition: background .25s ease;
}

.contact-submit:hover {
    background: #c91529;
}


/* =========================================
   CONTACT INFORMATION
========================================= */

.contact-info {
    padding-left: 5px;
}

.contact-intro {
    max-width: 500px;

    margin: 0 0 38px;

    font-size: 15px;
    line-height: 1.8;

    color: #666;
}


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

.contact-details {
    margin-top: 10px;
}

.contact-detail {
    display: flex;
    align-items: flex-start;

    margin-bottom: 28px;
}

.contact-icon {
    width: 48px;
    height: 48px;

    margin-right: 18px;

    border: 1px solid #eee;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 23px;

    color: #ed1b2f;

    flex-shrink: 0;

    transition: all .25s ease;
}

.contact-detail:hover .contact-icon {
    background: #ed1b2f;
    color: #fff;
}

.contact-detail h3 {
    margin: 1px 0 7px;

    font-size: 14px;
    font-weight: 600;

    color: #222;
}

.contact-detail p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #777;
}

.contact-detail a {
    color: #777;
    text-decoration: none;

    transition: color .2s ease;
}

.contact-detail a:hover {
    color: #ed1b2f;
}


/* =========================================
   MAP
========================================= */

.contact-map {
    width: 80%;
    max-width: 1170px;

    margin: 0 auto 55px;

    height: 390px;

    overflow: hidden;
}

.contact-map iframe {
    width: 100%;
    height: 100%;

    border: 0;

    display: block;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .contact-container {
        width: 90%;

        grid-template-columns: 1fr;

        gap: 55px;
    }

    .contact-info {
        padding-left: 0;
    }

    .contact-map {
        width: 90%;
        height: 350px;
    }
}


@media (max-width: 600px) {

    .contact-section {
        padding: 45px 0;
    }

    .contact-container {
        width: 90%;
    }

    .contact-form-area h2,
    .contact-info h2 {
        font-size: 21px;
    }

    .contact-map {
        width: 90%;
        height: 280px;
    }
}

/* =====================================================
   FAQ PAGE
===================================================== */

.faq-page {
    width: 100%;
    padding: 65px 0 85px;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}


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

.faq-container {
    width: 82%;
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 2.5fr 1fr;

    gap: 55px;
    align-items: start;
}


/* =====================================================
   FAQ CONTENT
===================================================== */

.faq-content h1 {
    margin: 0;

    color: #172f55;

    font-size: 27px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.3px;
}


.faq-line {
    width: 100%;
    height: 1px;

    background: #e5e5e5;

    margin: 25px 0 10px;
}


/* =====================================================
   FAQ ITEM
===================================================== */

.faq-item {
    border-bottom: 1px solid #eeeeee;
}


/* =====================================================
   QUESTION
===================================================== */

.faq-question {
    min-height: 58px;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 0 7px;

    cursor: pointer;

    color: #17386b;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.5;

    transition: color 0.25s ease;
}


.faq-question:hover {
    color: #ed1737;
}


/* =====================================================
   PLUS / MINUS ICON
===================================================== */

.faq-icon {
    width: 25px;
    height: 25px;

    min-width: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #777777;

    font-size: 21px;
    font-weight: 400;

    transition: color 0.25s ease;
}


.faq-item.active .faq-icon {
    color: #ed1737;
}


.faq-item.active .faq-question {
    color: #ed1737;
}


/* =====================================================
   ANSWER
===================================================== */

.faq-answer {
    display: none;

    padding: 0 25px 20px 47px;

    color: #68778a;

    font-size: 14px;

    line-height: 1.8;
}


.faq-item.active .faq-answer {
    display: block;
}


/* =====================================================
   RIGHT SIDEBAR
===================================================== */

.faq-sidebar {
    padding-top: 2px;
}


.faq-sidebar h2 {
    margin: 0 0 11px;

    color: #172f55;

    font-size: 20px;
    font-weight: 700;
}


.sidebar-line {
    width: 50px;
    height: 2px;

    background: #ed1737;

    margin-bottom: 20px;
}


/* =====================================================
   OPENING HOURS
===================================================== */

.opening-row {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding: 17px 0;

    border-bottom: 1px dashed #d8d8d8;

    color: #69798d;

    font-size: 14px;
}


/* =====================================================
   CONTACT BUTTON
===================================================== */

.faq-contact {
    margin-top: 48px;

    width: 205px;
    height: 62px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #d8d8d8;

    border-radius: 32px;

    color: #172f55;

    text-decoration: none;

    font-size: 19px;
    font-weight: 700;

    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
}


/* CONTACT HOVER */

.faq-contact:hover {
    color: #ed1737;

    text-decoration: none;

    transform: translateY(-2px);

    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.13);
}


/* =====================================================
   RED ARROW CIRCLE
===================================================== */

.contact-arrow {
    width: 62px;
    height: 62px;

    min-width: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: -1px;
    margin-right: 15px;

    border-radius: 50%;

    background: #ed1737;

    color: #ffffff;

    font-size: 32px;
    font-weight: 400;

    transition: background 0.25s ease;
}


/* ARROW HOVER */

.faq-contact:hover .contact-arrow {
    background: #c91430;
}


/* CONTACT TEXT */

.contact-text {
    white-space: nowrap;
}


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

@media (max-width: 900px) {

    .faq-container {
        width: 90%;

        grid-template-columns: 1fr;

        gap: 45px;
    }

    .faq-sidebar {
        width: 100%;
    }

    .faq-contact {
        margin-top: 35px;
    }
}


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

@media (max-width: 600px) {

    .faq-page {
        padding: 45px 0 60px;
    }


    .faq-container {
        width: 92%;
    }


    .faq-content h1 {
        font-size: 23px;
    }


    .faq-question {
        min-height: auto;

        padding: 14px 5px;

        font-size: 14px;

        line-height: 1.5;
    }


    .faq-answer {
        padding: 0 10px 18px 45px;

        font-size: 13px;

        line-height: 1.7;
    }


    .opening-row {
        font-size: 13px;
    }


    .faq-contact {
        width: 190px;
        height: 58px;

        font-size: 17px;
    }


    .contact-arrow {
        width: 58px;
        height: 58px;

        min-width: 58px;

        font-size: 29px;
    }

}


/* =========================================
   QUERY PAGE
========================================= */

.query-page {
    width: 100%;
    padding: 65px 0 80px;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}


/* MAIN CONTAINER */

.query-container {
    width: 82%;
    max-width: 1140px;
    margin: 0 auto;
}


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

.query-heading {
    text-align: center;
    margin-bottom: 42px;
}

.query-heading h1 {
    margin: 0;

    color: #172f55;
    font-size: 28px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .5px;
}

.query-line {
    width: 55px;
    height: 2px;

    background: #ed1737;

    margin: 14px auto 13px;
}

.query-heading p {
    margin: 0;

    color: #718096;
    font-size: 14px;
}


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

.query-form {
    width: 100%;
}


/* TWO COLUMN ROW */

.query-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;

    margin-bottom: 18px;
}


/* FIELD */

.query-field {
    width: 100%;
}

.query-field label {
    display: block;

    margin-bottom: 7px;

    color: #3e5065;
    font-size: 14px;
    font-weight: 600;
}


/* INPUT */

.query-field input,
.query-field textarea {
    width: 100%;
    box-sizing: border-box;

    border: 1px solid #d6d6d6;
    background: #ffffff;

    padding: 13px 14px;

    color: #444;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;

    outline: none;

    transition: border-color .25s ease,
        box-shadow .25s ease;
}


/* INPUT HEIGHT */

.query-field input {
    height: 46px;
}


/* TEXTAREA */

.query-field textarea {
    height: 105px;
    resize: vertical;
    line-height: 1.6;
}


/* PLACEHOLDER */

.query-field input::placeholder,
.query-field textarea::placeholder {
    color: #a5adb6;
}


/* FOCUS */

.query-field input:focus,
.query-field textarea:focus {
    border-color: #ed1737;

    box-shadow: 0 0 0 2px rgba(237, 23, 55, .08);
}


/* MESSAGE */

.query-message {
    margin-top: 2px;
}


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

.query-submit {
    text-align: center;
    margin-top: 25px;
}

.query-submit button {
    min-width: 100px;
    height: 40px;

    padding: 0 25px;

    border: none;
    border-radius: 3px;

    background: #4caf50;
    color: #ffffff;

    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    transition: all .25s ease;
}

.query-submit button:hover {
    background: #3f9843;
    transform: translateY(-1px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .query-container {
        width: 90%;
    }

    .query-row {
        gap: 20px;
    }
}


@media (max-width: 600px) {

    .query-page {
        padding: 45px 0 60px;
    }

    .query-container {
        width: 92%;
    }

    .query-heading {
        margin-bottom: 30px;
    }

    .query-heading h1 {
        font-size: 23px;
    }

    .query-row {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 18px;
    }

    .query-field input {
        height: 44px;
    }

    .query-field textarea {
        height: 100px;
    }

    .query-submit {
        margin-top: 22px;
    }
}

/* =========================================
   NOTICE BOARD PAGE
========================================= */

.notice-board-page {
    width: 100%;
    min-height: 520px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 70px 20px;

    box-sizing: border-box;

    background: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
}


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

.notice-board-container {
    width: 100%;
    max-width: 700px;

    text-align: center;

    padding: 55px 35px;

    box-sizing: border-box;

    border: 1px solid #eeeeee;

    background: #ffffff;

    box-shadow: 0 10px 35px rgba(0, 0, 0, .07);

    position: relative;
}


/* TOP RED LINE */

.notice-board-container::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: #ed1737;
}


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

.notice-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #172f55;

    box-shadow: 0 7px 18px rgba(23, 47, 85, .18);
}

.notice-icon span {
    color: #ffffff;

    font-size: 34px;
    font-weight: 700;

    line-height: 1;
}


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

.notice-board-container h1 {
    margin: 0;

    color: #172f55;

    font-size: 28px;
    font-weight: 700;

    letter-spacing: .7px;

    text-transform: uppercase;
}


/* RED LINE */

.notice-line {
    width: 55px;
    height: 2px;

    margin: 14px auto 20px;

    background: #ed1737;
}


/* =========================================
   COMING SOON
========================================= */

.notice-board-container h2 {
    margin: 0 0 14px;

    color: #ed1737;

    font-size: 25px;
    font-weight: 600;
}


/* DESCRIPTION */

.notice-board-container p {
    max-width: 560px;

    margin: 0 auto;

    color: #69798d;

    font-size: 15px;
    line-height: 1.8;
}


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

.notice-message {
    margin-top: 25px;

    color: #172f55;

    font-size: 14px;
    font-weight: 600;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 600px) {

    .notice-board-page {
        min-height: 450px;

        padding: 45px 15px;
    }

    .notice-board-container {
        padding: 45px 22px;
    }

    .notice-icon {
        width: 58px;
        height: 58px;
    }

    .notice-icon span {
        font-size: 29px;
    }

    .notice-board-container h1 {
        font-size: 23px;
    }

    .notice-board-container h2 {
        font-size: 22px;
    }

    .notice-board-container p {
        font-size: 14px;
    }
}

/* =========================================
   ADMISSION OTS - COMING SOON
========================================= */

.admission-ots-page {
    width: 100%;
    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    font-family: Arial, Helvetica, sans-serif;
}


/* CONTENT */

.admission-ots-content {
    text-align: center;

    padding: 40px 20px;
}


/* MAIN HEADING */

.admission-ots-content h1 {
    margin: 0;

    color: #a900c0;

    font-size: 52px;
    font-weight: 400;

    letter-spacing: .3px;
}


/* RED LINE */

.admission-ots-line {
    width: 55px;
    height: 2px;

    background: #ed1737;

    margin: 18px auto 22px;
}


/* COMING SOON */

.admission-ots-content h2 {
    margin: 0 0 12px;

    color: #172f55;

    font-size: 25px;
    font-weight: 600;
}


/* DESCRIPTION */

.admission-ots-content p {
    margin: 0;

    color: #68778a;

    font-size: 14px;
    line-height: 1.8;
}


/* SECOND MESSAGE */

.admission-ots-note {
    margin-top: 4px !important;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 600px) {

    .admission-ots-page {
        min-height: 450px;
    }

    .admission-ots-content h1 {
        font-size: 38px;
    }

    .admission-ots-content h2 {
        font-size: 22px;
    }

    .admission-ots-content p {
        font-size: 13px;
    }
}


/* =========================================
   IAIS PHOTO GALLERY
========================================= */

.gallery-page {
    width: 100%;
    padding: 75px 0 90px;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}


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

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


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

.gallery-heading {
    text-align: center;
    margin-bottom: 45px;
}

.gallery-heading span {
    display: block;
    margin-bottom: 8px;

    color: #ed1737;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.gallery-heading h1 {
    margin: 0;

    color: #172f55;
    font-size: 32px;
    font-weight: 700;
}

.gallery-line {
    width: 55px;
    height: 3px;

    margin: 16px auto 15px;

    background: #ed1737;
    border-radius: 5px;
}

.gallery-heading p {
    max-width: 650px;
    margin: 0 auto;

    color: #718096;
    font-size: 14px;
    line-height: 1.8;
}


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

.gallery-grid {
    display: grid;

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

    gap: 14px;
}


/* =========================================
   IMAGE BOX
========================================= */

.gallery-item {
    position: relative;

    width: 100%;
    height: 245px;

    overflow: hidden;

    background: #f3f3f3;

    border-radius: 3px;

    cursor: pointer;

    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.08);

    /* IMPORTANT:
       Hover image will NOT move the box */
    transform: translateZ(0);
}


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

.gallery-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.55s ease,
        filter 0.55s ease;
}


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

.gallery-item:hover img {
    transform: scale(1.08);

    filter: brightness(0.72);
}


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

.gallery-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 35px 18px 17px;

    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.78),
            rgba(0, 0, 0, 0));

    opacity: 0;

    transition: opacity 0.35s ease;

    pointer-events: none;
}

.gallery-overlay span {
    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    letter-spacing: .3px;
}

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


/* =========================================
   BORDER EFFECT
========================================= */

.gallery-item::after {
    content: "";

    position: absolute;

    inset: 0;

    border: 2px solid transparent;

    border-radius: 3px;

    pointer-events: none;

    transition: border-color 0.35s ease;
}

.gallery-item:hover::after {
    border-color: rgba(237, 23, 55, 0.75);
}


/* =========================================
   HOVER EFFECT - BOX ONLY
========================================= */

.gallery-item:hover {
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.16);
}


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

@media (max-width: 900px) {

    .gallery-container {
        width: 90%;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .gallery-item {
        height: 230px;
    }
}


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

@media (max-width: 600px) {

    .gallery-page {
        padding: 50px 0 65px;
    }

    .gallery-container {
        width: 92%;
    }

    .gallery-heading {
        margin-bottom: 30px;
    }

    .gallery-heading h1 {
        font-size: 26px;
    }

    .gallery-heading p {
        font-size: 13px;
    }

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

    .gallery-item {
        height: 240px;
    }

    .gallery-overlay {
        opacity: 1;
    }
}


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

@media (max-width: 400px) {

    .gallery-item {
        height: 220px;
    }

    .gallery-heading h1 {
        font-size: 23px;
    }
}


/* =========================================================
   FIX FOR TABLET & MOBILE VIEW (PASTE AT THE VERY BOTTOM)
========================================================= */

/* ================= TABLET FIXES (Screens below 1024px) ================= */
@media (max-width: 1024px) {

    /* Convert 4-column layouts to 2-column */
    .feature-grid,
    .stats-grid,
    .passout-highlights,
    .xi-x-benefit-grid,
    .director-feature-grid,
    .highlights {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Convert 3-column layouts to 2-column */
    .course-grid,
    .topper-grid,
    .gallery-grid,
    .xi-summary-grid,
    .xii-summary-grid,
    .physics-topics,
    .function-grid,
    .parent-values,
    .topper-content {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Convert 2-columns layouts to 1-column where necessary */
    .two-column,
    .director-grid,
    .director-details-grid,
    .about-grid,
    .parent-content-grid,
    .class9-intro,
    .class10-main-card,
    .faq-container,
    .contact-container,
    .suggestion-container,
    .student-login-card,
    .admin-login-card,
    .register-card,
    .test-grid,
    .physics-intro-card,
    .xii-intro,
    .passout-about,
    .xi-intro-card,
    .xi-fee-details,
    .xi-x-intro,
    .feedback-content {
        grid-template-columns: 1fr !important;
        gap: 35px !important;
    }

    /* Fix Layouts with Sidebars */
    .physics-layout,
    .xii-layout,
    .xi-x-grid,
    .passout-grid {
        grid-template-columns: 1fr !important;
    }

    .physics-sidebar,
    .xii-sidebar {
        order: 2;
    }

    /* Fix overflowing images */
    .suggestion-image {
        width: 100% !important;
        height: auto !important;
        max-width: 450px;
        margin: 0 auto;
    }

    .welcome-image img,
    .director-image img,
    .about-image img,
    .director-photo-frame img {
        height: auto !important;
        max-height: 450px;
        object-fit: cover;
    }
}

/* ================= MOBILE FIXES (Screens below 768px) ================= */
@media (max-width: 768px) {

    /* Convert ALL grids to 1-column for Mobile */
    .course-grid,
    .topper-grid,
    .gallery-grid,
    .xi-summary-grid,
    .xii-summary-grid,
    .physics-topics,
    .function-grid,
    .feature-grid,
    .stats-grid,
    .passout-highlights,
    .xi-x-benefit-grid,
    .director-feature-grid,
    .highlights,
    .footer-grid,
    .passout-courses,
    .class9-program-grid,
    .parent-values,
    .topper-content,
    .query-row,
    .form-grid,
    .login-grid {
        grid-template-columns: 1fr !important;
    }

    /* Make Headings responsive */
    .hero h1,
    .about-hero h1,
    .director-hero h1,
    .function-hero h1,
    .student-words-hero h1,
    .parent-words-hero h1,
    .physics-hero h1,
    .passout-hero h1,
    .class9-hero h1,
    .class10-hero h1,
    .different-course-hero h1,
    .admission-hero h1,
    .datasheet-content h1,
    .exam-result-content h1 {
        font-size: clamp(28px, 8vw, 42px) !important;
        line-height: 1.15 !important;
    }

    .section-heading h2,
    .section-content h2 {
        font-size: clamp(26px, 7vw, 34px) !important;
    }

    /* Container Adjustments */
    .container,
    .suggestion-container,
    .feedback-container,
    .contact-container,
    .faq-container,
    .query-container,
    .gallery-container {
        width: 92% !important;
    }

    /* Adjust Gallery heights */
    .gallery-item {
        height: 220px !important;
    }

    .gallery-item.large {
        grid-row: auto !important;
    }

    /* Reduce excess paddings inside cards & forms */
    .course-card,
    .feature-card,
    .test-card,
    .topper-card,
    .xi-summary-card,
    .xii-summary-grid>div,
    .student-login-left,
    .admin-login-left,
    .register-left,
    .student-login-right,
    .admin-login-right,
    .register-right,
    .about-cta-box,
    .director-cta-box,
    .function-cta-box,
    .student-cta-box,
    .parent-cta,
    .class9-cta,
    .class10-cta,
    .different-course-cta,
    .physics-intro-content,
    .class10-content,
    .form-header,
    .admission-card form {
        padding: 25px !important;
    }

    /* Stack CTAs properly */
    .about-cta-box,
    .director-cta-box,
    .function-cta-box,
    .student-cta-box,
    .parent-cta,
    .class9-cta,
    .class10-cta,
    .different-course-cta {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Make buttons full width on small screens */
    .btn,
    .admission-submit,
    .course-btn,
    .xi-apply-btn,
    .xii-apply-btn,
    .passout-apply-btn,
    .different-admission-btn,
    .query-submit button,
    .contact-submit,
    .feedback-form button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Fix Form Submission row */
    .form-submit {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/* ================= EXTRA SMALL MOBILE FIXES (Below 450px) ================= */
@media (max-width: 450px) {
    .brand-logo {
        width: 160px !important;
        height: 60px !important;
    }

    .hero h1 {
        font-size: 32px !important;
    }

    .section-heading h2 {
        font-size: 26px !important;
    }
}