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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    color: #18202a;
    background: #fff;
    overflow-x: hidden;
}

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

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

button {
    font-family: inherit;
}

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


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

.top-bar {
    background: #121b2b;
    color: #fff;
    font-size: 13px;
}

.top-bar-inner {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.top-left,
.top-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-bar a {
    transition: .25s ease;
}

.top-bar a:hover {
    color: #f4bd37;
}

.top-bar i {
    margin-right: 6px;
    color: #f4bd37;
}

.top-divider {
    width: 1px;
    height: 15px;
    background: rgba(255,255,255,.25);
}


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

.main-header {
    height: 92px;
    background: #fff;
    position: relative;
    z-index: 1000;
    border-bottom: 1px solid #eee;
    transition: .3s ease;
}

.main-header.sticky {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 78px;
    box-shadow: 0 8px 30px rgba(0,0,0,.1);
    animation: headerDown .35s ease;
}

@keyframes headerDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.nav-container {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 28px;
}


/* LOGO */

.school-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.school-logo img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-text strong {
    font-family: "Playfair Display", serif;
    color: #172338;
    font-size: 19px;
    letter-spacing: .5px;
}

.logo-text span {
    color: #a27b20;
    font-size: 9px;
    letter-spacing: 1.7px;
    font-weight: 700;
}


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

.main-nav {
    margin-left: auto;
}

.main-nav > ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 2px;
}

.main-nav li {
    position: relative;
}

.main-nav > ul > li > a {
    height: 92px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #17202d;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: .25s ease;
}

.main-header.sticky .main-nav > ul > li > a {
    height: 78px;
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li > a.active {
    color: #b28522;
}

.main-nav > ul > li > a i {
    font-size: 9px;
    transition: .3s ease;
}

.dropdown:hover > a i {
    transform: rotate(180deg);
}


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

.dropdown-menu {
    position: absolute;
    left: 0;
    top: calc(100% - 1px);
    width: 235px;
    background: #fff;
    list-style: none;
    padding: 9px 0;
    border-top: 3px solid #c89a2d;
    box-shadow: 0 18px 45px rgba(0,0,0,.15);

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);

    transition: .25s ease;
}

.dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li a {
    display: flex;
    align-items: center;
    min-height: 45px;
    padding: 8px 18px;
    font-size: 14px;
    color: #222;
    border-bottom: 1px solid #f3f3f3;
    transition: .2s ease;
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-menu li a:hover {
    background: #f8f2e5;
    color: #ad7f18;
    padding-left: 24px;
}


/* TRIANGLE */

.dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 25px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #c89a2d;
}


/* FACILITY */

.facility-menu {
    width: 270px;
    max-height: 590px;
    overflow-y: auto;
}


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

.enquiry-wrapper {
    position: relative;
    flex-shrink: 0;
}

.enquiry-btn {
    border: none;
    background: #e91e46;
    color: #fff;
    height: 46px;
    padding: 0 19px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: .25s ease;
}

.enquiry-btn:hover {
    background: #c91438;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(233,30,70,.25);
}

.enquiry-arrow {
    font-size: 10px;
    transition: .3s ease;
}

.enquiry-wrapper.open .enquiry-arrow {
    transform: rotate(180deg);
}

.enquiry-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: 170px;
    background: #fff;
    border-radius: 4px;
    padding: 8px 0;
    box-shadow: 0 15px 40px rgba(0,0,0,.16);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .25s ease;
}

.enquiry-wrapper.open .enquiry-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.enquiry-menu::before {
    content: "";
    position: absolute;
    right: 25px;
    top: -8px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
}

.enquiry-menu a {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 13px 18px;
    font-size: 14px;
    color: #293244;
}

.enquiry-menu a:hover {
    background: #f7f7f7;
    color: #e91e46;
}

.enquiry-menu i {
    width: 17px;
}


/* MOBILE BUTTON */

.mobile-menu-btn {
    display: none;
    margin-left: auto;
    border: none;
    background: #182338;
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 7px;
    font-size: 19px;
    cursor: pointer;
}


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

.hero-slider {
    height: min(720px, calc(100vh - 134px));
    min-height: 570px;
    position: relative;
    overflow: hidden;
    background: #172338;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;

    opacity: 0;
    visibility: hidden;
    transform: scale(1.06);

    transition:
        opacity .8s ease,
        transform 5s ease,
        visibility .8s;
}

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

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(8,16,30,.82) 0%,
            rgba(8,16,30,.62) 43%,
            rgba(8,16,30,.18) 100%
        );
}

.hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 40px;
}

.hero-small {
    color: #e9bc49;
    font-size: 14px;
    letter-spacing: 3px;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-content h1 {
    font-family: "Playfair Display", serif;
    color: #fff;
    font-size: clamp(45px, 5.2vw, 78px);
    line-height: 1.08;
    max-width: 800px;
    margin-bottom: 22px;
}

.hero-content h1 span {
    color: #eec453;
}

.hero-content p {
    color: rgba(255,255,255,.9);
    font-size: 17px;
    line-height: 1.8;
    max-width: 620px;
    margin-bottom: 32px;
}

.hero-buttons {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
}

.btn {
    min-height: 52px;
    padding: 0 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    transition: .25s ease;
}

.btn-primary {
    background: #e9b936;
    color: #152033;
}

.btn-primary:hover {
    background: #fff;
    transform: translateY(-3px);
}

.btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.65);
}

.btn-outline:hover {
    background: #fff;
    color: #172338;
}


/* SLIDER ARROWS */

.slider-arrow {
    position: absolute;
    z-index: 5;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;
    color: #fff;
    background: rgba(0,0,0,.2);
    backdrop-filter: blur(5px);
    cursor: pointer;
    transition: .25s ease;
}

.slider-arrow:hover {
    background: #eab936;
    color: #162033;
    border-color: #eab936;
}

.slider-prev {
    left: 25px;
}

.slider-next {
    right: 25px;
}


/* DOTS */

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

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
    background: transparent;
    cursor: pointer;
    transition: .3s ease;
}

.slider-dot.active {
    width: 30px;
    border-radius: 20px;
    background: #e9ba3e;
    border-color: #e9ba3e;
}


/* SCROLL */

.scroll-down {
    position: absolute;
    right: 35px;
    bottom: 28px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    z-index: 5;
}

.scroll-down i {
    animation: scrollArrow 1.5s infinite;
}

@keyframes scrollArrow {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}


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

.admission-notice {
    min-height: 64px;
    display: flex;
    align-items: center;
    background: #e9b936;
    color: #182234;
}

.notice-title {
    height: 64px;
    min-width: 220px;
    background: #172338;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.notice-title::after {
    content: "";
    position: absolute;
    right: -16px;
    border-top: 32px solid transparent;
    border-bottom: 32px solid transparent;
    border-left: 16px solid #172338;
}

.notice-title i {
    color: #e9b936;
}

.notice-marquee {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    padding-left: 40px;
    animation: marquee 28s linear infinite;
}

.marquee-content a {
    font-weight: 600;
    transition: .2s ease;
}

.marquee-content a:hover {
    text-decoration: underline;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

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

.notice-btn {
    margin: 0 20px;
    background: #fff;
    padding: 11px 17px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: .25s ease;
}

.notice-btn:hover {
    background: #172338;
    color: #fff;
}


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

.section-padding {
    padding: 100px 0;
}

.section-heading {
    max-width: 700px;
    margin-bottom: 55px;
}

.section-heading > span,
.section-label {
    color: #b28522;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.section-heading h2,
.about-content h2 {
    font-family: "Playfair Display", serif;
    font-size: clamp(35px, 4vw, 53px);
    line-height: 1.15;
    color: #172338;
    margin-top: 13px;
}

.section-heading h2 em,
.about-content h2 em {
    color: #b18420;
    font-style: normal;
}

.section-heading p {
    margin-top: 20px;
    color: #6e7682;
    line-height: 1.8;
}


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

.why-section {
    background: #f8f6f1;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.why-card {
    background: #fff;
    padding: 38px 28px;
    border: 1px solid #eee;
    position: relative;
    transition: .3s ease;
}

.why-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 18px 40px rgba(23,35,56,.1);
}

.why-card.featured {
    background: #172338;
    color: #fff;
}

.why-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #f7e7bd;
    color: #aa7d19;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 25px;
}

.why-card h3 {
    font-size: 20px;
    margin-bottom: 13px;
}

.why-card p {
    color: #737a85;
    font-size: 14px;
    line-height: 1.75;
    margin-bottom: 20px;
}

.why-card.featured p {
    color: rgba(255,255,255,.68);
}

.why-card a {
    color: #aa7d19;
    font-size: 13px;
    font-weight: 700;
}

.why-card a i {
    margin-left: 5px;
}


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

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 90px;
}

.about-images {
    position: relative;
    min-height: 580px;
}

.about-image-main {
    width: 75%;
    height: 490px;
    overflow: hidden;
}

.about-image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-image-small {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 45%;
    height: 240px;
    border: 10px solid #fff;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
}

.about-image-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.experience-box {
    position: absolute;
    left: 55%;
    top: 55px;
    background: #e9b936;
    width: 160px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.experience-box strong {
    font-family: "Playfair Display", serif;
    font-size: 47px;
    line-height: 1;
}

.experience-box span {
    text-align: center;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
}

.about-content > p {
    color: #707782;
    line-height: 1.85;
    margin-top: 20px;
}

.about-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 28px 0;
}

.about-points div {
    font-size: 14px;
    font-weight: 600;
}

.about-points i {
    color: #c09428;
    margin-right: 7px;
}

.dark-btn,
.light-btn {
    min-height: 50px;
    padding: 0 21px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: .25s ease;
}

.dark-btn {
    background: #172338;
    color: #fff;
}

.dark-btn:hover {
    background: #b18420;
    transform: translateY(-3px);
}

.light-btn {
    background: #e9b936;
    color: #172338;
}

.light-btn:hover {
    background: #fff;
}


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

.stats-section {
    background: #e9b936;
    padding: 60px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.stat-item {
    text-align: center;
    border-right: 1px solid rgba(23,35,56,.2);
}

.stat-item:last-child {
    border-right: none;
}

.stat-item i {
    font-size: 28px;
    color: #172338;
    margin-bottom: 13px;
}

.stat-item strong {
    display: block;
    font-family: "Playfair Display", serif;
    font-size: 45px;
    color: #172338;
}

.stat-item span {
    font-size: 13px;
    font-weight: 700;
}


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

.facility-section {
    background: #fff;
}

.facility-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.facility-card {
    height: 360px;
    overflow: hidden;
    position: relative;
    background: #172338;
}

.facility-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease;
}

.facility-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        transparent 30%,
        rgba(8,16,30,.85)
    );
}

.facility-card:hover img {
    transform: scale(1.1);
}

.facility-card > div {
    position: absolute;
    z-index: 2;
    left: 24px;
    bottom: 23px;
    color: #fff;
}

.facility-card i {
    color: #e9b936;
    margin-bottom: 9px;
    font-size: 19px;
}

.facility-card h3 {
    font-family: "Playfair Display", serif;
    font-size: 23px;
}


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

.toppers-section {
    background: #172338;
}

.light-heading h2 {
    color: #fff;
}

.light-heading p {
    color: rgba(255,255,255,.7);
}

.toppers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.topper-card {
    background: #fff;
    display: grid;
    grid-template-columns: 45% 55%;
    min-height: 280px;
}

.topper-image {
    position: relative;
    overflow: hidden;
}

.topper-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topper-image span {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 37px;
    height: 37px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e9b936;
    font-weight: 800;
}

.topper-info {
    padding: 30px 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.topper-info small {
    color: #b18420;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.topper-info h3 {
    font-family: "Playfair Display", serif;
    font-size: 21px;
    margin: 8px 0;
}

.topper-info strong {
    color: #172338;
    font-size: 28px;
}

.topper-info p {
    color: #7b8189;
    font-size: 12px;
    margin-top: 4px;
}

.center-btn {
    text-align: center;
    margin-top: 40px;
}


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

.gallery-grid {
    display: grid;
    grid-template-columns: 1.2fr .8fr .8fr;
    grid-template-rows: 250px 250px;
    gap: 15px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
}

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

.gallery-wide {
    grid-column: span 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease;
}

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

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(23,35,56,.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: .3s ease;
}

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

.gallery-overlay i {
    width: 50px;
    height: 50px;
    background: #e9b936;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}


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

.admission-cta {
    background:
        url("images/admission_cta_home_img.png") center/cover;
    padding: 80px 0;
}

.admission-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.admission-cta span {
    color: #e9b936;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 800;
}

.admission-cta h2 {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(38px, 4vw, 55px);
    line-height: 1.1;
    margin: 12px 0;
}

.admission-cta p {
    color: rgba(255,255,255,.7);
}

.cta-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-white {
    background: #fff;
    color: #172338;
}

.btn-white:hover {
    background: #e9b936;
}

.btn-transparent {
    border: 1px solid rgba(255,255,255,.5);
    color: #fff;
}

.btn-transparent:hover {
    background: #fff;
    color: #172338;
}


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

.footer {
    background: #0e1624;
    color: #fff;
}

.footer-grid {
    padding: 75px 0 60px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
    gap: 55px;
}
.footer-about  p {
    color: rgba(255,255,255,.55);
    line-height: 1.8;
    font-size: 13px;
    max-width: 340px;
}

.social-links {
    display: flex;
    gap: 8px;
    margin-top: 22px;
}

.social-links a {
    width: 37px;
    height: 37px;
    border: 1px solid rgba(255,255,255,.15);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #fff;
    transition: .25s ease;
}

.social-links a:hover {
    background: #e9b936;
    color: #172338;
    border-color: #e9b936;
}

.footer-column h3 {
    font-family: "Playfair Display", serif;
    font-size: 19px;
    margin-bottom: 20px;
}

.footer-column  a {
    display: block;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    padding: 6px 0;
    transition: .2s ease;
}

.footer-column  a:hover {
    color: #e9b936;
    padding-left: 5px;
}

.footer-contact p,
.footer-contact a {
    display: flex;
    gap: 12px;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 13px;
}

.footer-contact i {
    color: #e9b936;
    width: 16px;
    margin-top: 3px;
}

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

.footer-bottom-inner {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-bottom p {
    font-size: 11px;
    color: rgba(255,255,255,.4);
}

.footer-bottom a {
    color: #e9b936;
}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-top {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: #e9b936;
    color: #172338;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: .3s ease;
}

.back-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


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

@media (max-width: 1250px) {

    .main-nav > ul > li > a {
        padding: 0 8px;
        font-size: 13px;
    }

    .school-logo .logo-text {
        display: none;
    }

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

}


@media (max-width: 1050px) {

    .top-left span,
    .top-divider {
        display: none;
    }

    .main-nav {
        position: fixed;
        top: 92px;
        left: 0;
        right: 0;
        background: #fff;
        padding: 15px 5%;
        max-height: calc(100vh - 92px);
        overflow-y: auto;

        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: .3s ease;
    }

    .main-nav.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .main-nav > ul {
        display: block;
    }

    .main-nav > ul > li > a {
        height: auto !important;
        min-height: 50px;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
    }

    .dropdown-menu {
        position: static;
        width: 100%;
        max-height: none;
        box-shadow: none;
        border-top: none;
        background: #f8f6f1;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .dropdown.open > .dropdown-menu {
        display: block;
    }

    .dropdown-menu::before {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .nav-container {
        gap: 15px;
    }

    .enquiry-wrapper {
        margin-left: 0;
    }

    .school-logo {
        margin-right: auto;
    }

}


@media (max-width: 800px) {

    .top-bar {
        display: none;
    }

    .main-header {
        height: 75px;
    }

    .main-nav {
        top: 75px;
        max-height: calc(100vh - 75px);
    }

    .school-logo img {
        width: 50px;
        height: 50px;
    }

    .enquiry-btn {
        height: 40px;
        padding: 0 14px;
    }

    .hero-slider {
        min-height: 620px;
        height: 80vh;
    }

    .hero-content {
        padding: 0 5%;
    }

    .hero-content h1 {
        font-size: 43px;
    }

    .hero-content p {
        font-size: 15px;
    }

    .slider-arrow {
        width: 42px;
        height: 42px;
    }

    .slider-prev {
        left: 12px;
    }

    .slider-next {
        right: 12px;
    }

    .scroll-down {
        display: none;
    }

    .admission-notice {
        flex-wrap: wrap;
    }

    .notice-title {
        min-width: 170px;
        height: 55px;
    }

    .notice-btn {
        display: none;
    }

    .notice-marquee {
        height: 55px;
        display: flex;
        align-items: center;
    }

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

    .about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-images {
        min-height: 500px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .stat-item:nth-child(2) {
        border-right: none;
    }

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

    .admission-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

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

}


@media (max-width: 550px) {

    .school-logo .logo-text {
        display: flex;
    }

    .logo-text strong {
        font-size: 13px;
    }

    .logo-text span {
        font-size: 6px;
    }

    .enquiry-btn {
        font-size: 12px;
        padding: 0 11px;
    }

    .enquiry-btn > i:first-child {
        display: none;
    }

    .hero-slider {
        min-height: 600px;
    }

    .hero-content h1 {
        font-size: 38px;
    }

    .hero-small {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .why-grid,
    .facility-grid {
        grid-template-columns: 1fr;
    }

    .about-images {
        min-height: 400px;
    }

    .about-image-main {
        width: 82%;
        height: 360px;
    }

    .experience-box {
        width: 120px;
        height: 120px;
        left: 60%;
        top: 30px;
    }

    .experience-box strong {
        font-size: 35px;
    }

    .about-image-small {
        height: 170px;
    }

    .about-points {
        grid-template-columns: 1fr;
    }

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

    .stat-item {
        border-right: none;
        border-bottom: 1px solid rgba(23,35,56,.15);
        padding-bottom: 25px;
    }

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

    .gallery-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 190px 190px 190px;
    }

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

    .gallery-wide {
        grid-column: span 2;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        justify-content: center;
        padding: 15px 0;
        text-align: center;
    }

}



/* =========================================================
   TOPTOPS - SCHOOL PROFILE
========================================================= */

.school-profile-page {
    overflow: hidden;
}


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

.profile-hero {
    min-height: 440px;
    position: relative;
    display: flex;
    align-items: center;
    background:
        url("images/school_profile_bg-img.png")
        center/cover no-repeat;
}

.profile-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(12,24,42,.94),
            rgba(12,24,42,.73),
            rgba(12,24,42,.42)
        );
}

.profile-hero-content {
    position: relative;
    z-index: 2;
    padding: 75px 0 65px;
}

.profile-eyebrow {
    color: #e9b936;
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 800;
}

.profile-hero h1 {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(45px, 5vw, 70px);
    margin: 15px 0;
}

.profile-hero h1 span {
    color: #e9b936;
}

.profile-hero p {
    color: rgba(255,255,255,.75);
    max-width: 600px;
    line-height: 1.8;
    font-size: 16px;
}

/* ================= INTRO ================= */

.profile-intro {
    background: #fff;
}

.profile-intro-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 90px;
    align-items: center;
}


/* IMAGE */

.profile-visual {
    position: relative;
    min-height: 550px;
}

.profile-main-image {
    width: 86%;
    height: 500px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.profile-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .7s ease;
}

.profile-main-image:hover img {
    transform: scale(1.05);
}

.profile-floating-card {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 35px;
    width: 255px;
    min-height: 105px;
    background: #e9b936;
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 20px 22px;
    box-shadow: 0 15px 35px rgba(0,0,0,.16);
}

.profile-floating-card > i {
    width: 55px;
    height: 55px;
    background: #172338;
    color: #e9b936;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 21px;
}

.profile-floating-card strong {
    display: block;
    font-family: "Playfair Display", serif;
    font-size: 19px;
    color: #172338;
}

.profile-floating-card span {
    display: block;
    color: #3c3c3c;
    font-size: 10px;
    letter-spacing: 1px;
    margin-top: 4px;
}

.profile-pattern {
    position: absolute;
    width: 180px;
    height: 180px;
    right: -15px;
    top: 20px;
    /*
    background-image: radial-gradient(#d3ad55 1px, transparent 1px);
    */
    background-size: 12px 12px;
    opacity: .35;
}


/* CONTENT */

.profile-section-label {
    color: #b28522;
    font-size: 12px;
    letter-spacing: 2.5px;
    font-weight: 800;
}

.profile-intro-content h2 {
    font-family: "Playfair Display", serif;
    color: #172338;
    font-size: clamp(36px, 4vw, 53px);
    line-height: 1.15;
    margin: 14px 0 22px;
}

.profile-intro-content h2 em {
    color: #b28522;
    font-style: normal;
    display: block;
}

.profile-intro-content p {
    color: #717983;
    line-height: 1.85;
    font-size: 15px;
    margin-bottom: 17px;
}

.profile-highlights {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.profile-highlights div {
    font-size: 13px;
    font-weight: 700;
    color: #273141;
}

.profile-highlights i {
    color: #c09024;
    margin-right: 7px;
}


/* ================= PHILOSOPHY ================= */

.profile-philosophy {
    background: #f7f5ef;
    padding: 100px 0;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.philosophy-content h2 {
    color: #172338;
    font-family: "Playfair Display", serif;
    font-size: clamp(35px, 4vw, 51px);
    line-height: 1.15;
    margin: 14px 0 22px;
}

.philosophy-content h2 em {
    color: #b28522;
    font-style: normal;
    display: block;
}

.philosophy-content p {
    color: #737a82;
    line-height: 1.85;
    font-size: 14px;
    margin-bottom: 16px;
}

.philosophy-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.philosophy-card {
    background: #fff;
    padding: 25px 20px;
    display: flex;
    gap: 16px;
    border: 1px solid #eae6dc;
    transition: .3s ease;
}

.philosophy-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(23,35,56,.08);
}

.philosophy-icon {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 50%;
    background: #f4e5bb;
    color: #ad7f19;
    display: flex;
    align-items: center;
    justify-content: center;
}

.philosophy-card h3 {
    color: #172338;
    margin-bottom: 6px;
    font-size: 17px;
}

.philosophy-card p {
    color: #777e86;
    font-size: 12px;
    line-height: 1.6;
}


/* ================= TITLES ================= */

.profile-title-center {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.profile-title-center h2 {
    font-family: "Playfair Display", serif;
    color: #172338;
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.15;
    margin: 12px 0 17px;
}

.profile-title-center h2 em {
    color: #b28522;
    font-style: normal;
}

.profile-title-center p {
    color: #747b84;
    line-height: 1.8;
    font-size: 14px;
}


/* ================= VISION MISSION ================= */

.vision-mission {
    background: #fff;
}

.vm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.vm-card {
    padding: 42px;
    border: 1px solid #e9e6df;
    position: relative;
    transition: .3s ease;
}

.vm-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 40px rgba(23,35,56,.09);
}

.vision-card {
    background: #172338;
    color: #fff;
}

.mission-card {
    background: #f8f5ed;
}

.vm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vm-icon {
    width: 63px;
    height: 63px;
    border-radius: 50%;
    background: #e9b936;
    color: #172338;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}

.vm-top > span {
    font-family: "Playfair Display", serif;
    font-size: 35px;
    opacity: .2;
}

.vm-card h3 {
    font-family: "Playfair Display", serif;
    font-size: 30px;
    margin: 28px 0 13px;
}

.vm-card p {
    line-height: 1.8;
    font-size: 14px;
    color: #777e87;
}

.vision-card p {
    color: rgba(255,255,255,.66);
}

.vm-line {
    width: 45px;
    height: 3px;
    background: #e9b936;
    margin: 25px 0 17px;
}

.vm-card small {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.vm-card small i {
    color: #bd8e21;
    margin-right: 5px;
}


/* ================= CORE VALUES ================= */

.core-values {
    background: #172338;
    padding: 100px 0;
}

.light-profile-title > span {
    color: #e9b936;
    font-size: 12px;
    letter-spacing: 2.5px;
    font-weight: 800;
}

.light-profile-title h2 {
    color: #fff;
}

.light-profile-title p {
    color: rgba(255,255,255,.6);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.value-item {
    position: relative;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    padding: 32px 28px;
    transition: .3s ease;
    overflow: hidden;
}

.value-item:hover {
    background: rgba(255,255,255,.09);
    transform: translateY(-5px);
}

.value-item  i {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e9b936;
    color: #172338;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px;
    margin-bottom: 20px;
}

.value-item h3 {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: 22px;
    margin-bottom: 9px;
}

.value-item p {
    color: rgba(255,255,255,.57);
    font-size: 13px;
    line-height: 1.75;
}


/* ================= DIFFERENCE ================= */

.why-toptops {
    background: #f8f6f1;
}

.difference-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.difference-card {
    background: #fff;
    padding: 35px 25px;
    border: 1px solid #ece9e2;
    position: relative;
    transition: .3s ease;
}

.difference-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(23,35,56,.09);
}

.difference-card > span {
    position: absolute;
    right: 20px;
    top: 16px;
    color: #ddd6c6;
    font-family: "Playfair Display", serif;
    font-size: 30px;
}

.difference-card > i {
    color: #b28522;
    font-size: 27px;
    margin-bottom: 25px;
}

.difference-card h3 {
    font-family: "Playfair Display", serif;
    color: #172338;
    font-size: 21px;
    margin-bottom: 11px;
}

.difference-card p {
    color: #747b83;
    font-size: 13px;
    line-height: 1.75;
}


/* ================= CAMPUS ================= */

.profile-campus {
    min-height: 500px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.profile-campus-image {
    background:
        linear-gradient(rgba(23,35,56,.15), rgba(23,35,56,.15)),
        url("images/school_profile_cta_bg-img.png")
        center/cover no-repeat;
}

.profile-campus-content {
    background: #e9b936;
    padding: 75px 9%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-campus-content > span {
    color: #172338;
    font-size: 12px;
    letter-spacing: 2.5px;
    font-weight: 800;
}

.profile-campus-content h2 {
    color: #172338;
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.12;
    margin: 15px 0 20px;
}

.profile-campus-content h2 em {
    font-style: normal;
}

.profile-campus-content p {
    color: #42464c;
    font-size: 14px;
    line-height: 1.8;
    max-width: 540px;
}

.profile-gold-btn {
    background: #172338;
    color: #fff;
    width: max-content;
    padding: 15px 20px;
    margin-top: 28px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    gap: 10px;
    align-items: center;
    transition: .25s ease;
}

.profile-gold-btn:hover {
    background: #fff;
    color: #172338;
}


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

.profile-admission {
    background:
        linear-gradient(
            90deg,
            rgba(23,35,56,.98),
            rgba(23,35,56,.87)
        ),
        url("images/cta-bg.jpg")
        center/cover;
    padding: 85px 0;
}

.profile-admission-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.profile-admission-inner > div:first-child > span {
    color: #e9b936;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 800;
}

.profile-admission h2 {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(37px, 4vw, 53px);
    line-height: 1.1;
    margin: 12px 0;
}

.profile-admission p {
    color: rgba(255,255,255,.62);
    font-size: 14px;
}

.profile-admission-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-white-btn,
.profile-outline-btn {
    min-height: 52px;
    padding: 0 21px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: .25s ease;
}

.profile-white-btn {
    background: #fff;
    color: #172338;
}

.profile-white-btn:hover {
    background: #e9b936;
}

.profile-outline-btn {
    border: 1px solid rgba(255,255,255,.45);
    color: #fff;
}

.profile-outline-btn:hover {
    background: #fff;
    color: #172338;
}


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

@media (max-width: 1000px) {

    .profile-intro-grid,
    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .profile-visual {
        max-width: 650px;
        width: 100%;
        margin: auto;
    }

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

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

}


@media (max-width: 750px) {

    .profile-hero {
        min-height: 390px;
    }

    .profile-hero-content {
        padding: 60px 0;
    }

    .profile-intro,
    .profile-philosophy,
    .vision-mission,
    .why-toptops,
    .core-values {
        padding: 70px 0;
    }

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

    .philosophy-cards {
        grid-template-columns: 1fr;
    }

    .profile-campus {
        grid-template-columns: 1fr;
    }

    .profile-campus-image {
        min-height: 350px;
    }

    .profile-admission-inner {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 550px) {

    .profile-hero h1 {
        font-size: 42px;
    }

    .profile-hero p {
        font-size: 14px;
    }

    .profile-visual {
        min-height: 400px;
    }

    .profile-main-image {
        width: 88%;
        height: 370px;
    }

    .profile-floating-card {
        width: 220px;
        bottom: 15px;
    }

    .profile-intro-content h2,
    .philosophy-content h2,
    .profile-title-center h2 {
        font-size: 36px;
    }

    .profile-highlights {
        grid-template-columns: 1fr;
    }

    .values-grid,
    .difference-grid {
        grid-template-columns: 1fr;
    }

    .vm-card {
        padding: 30px 24px;
    }

    .profile-campus-content {
        padding: 60px 6%;
    }

    .profile-admission {
        padding: 65px 0;
    }

    .profile-admission-buttons {
        width: 100%;
    }

    .profile-white-btn,
    .profile-outline-btn {
        width: 100%;
        justify-content: center;
    }

}


/*principal desk*/
/* =========================================================
   TOPTOPS - PRINCIPAL'S DESK
========================================================= */

.principal-page {
    overflow: hidden;
}


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

.principal-hero {
    min-height: 440px;
    position: relative;
    display: flex;
    align-items: center;

    background:
        url("images/principal_desk_bg-img.png")
        center/cover no-repeat;
}

.principal-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(12,24,42,.95),
            rgba(12,24,42,.76),
            rgba(12,24,42,.40)
        );
}

.principal-hero-content {
    position: relative;
    z-index: 2;
    padding: 75px 0 65px;
}

.principal-eyebrow {
    color: #e9b936;
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 800;
}

.principal-hero h1 {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(45px, 5vw, 70px);
    margin: 15px 0;
}

.principal-hero h1 span {
    color: #e9b936;
}

.principal-hero p {
    color: rgba(255,255,255,.75);
    max-width: 600px;
    line-height: 1.8;
}
/* ================= MESSAGE ================= */

.principal-message {
    background: #fff;
}

.principal-message-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px;
    align-items: center;
}


/* PHOTO */

.principal-photo-area {
    position: relative;
    min-height: 590px;
    display: flex;
    align-items: center;
}

.principal-photo {
    width: 84%;
    height: 540px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    background: #eee;
}

.principal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s ease;
}

.principal-photo:hover img {
    transform: scale(1.04);
}

.principal-name-card {
    position: absolute;
    z-index: 5;
    bottom: 35px;
    right: 0;
    width: 250px;
    background: #172338;
    padding: 23px 25px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    border-left: 4px solid #e9b936;
}

.principal-name-card span {
    color: #e9b936;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
}

.principal-name-card h3 {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: 24px;
    margin: 7px 0 3px;
}

.principal-name-card p {
    color: rgba(255,255,255,.55);
    font-size: 11px;
}

.principal-dots {
    position: absolute;
    width: 170px;
    height: 170px;
    left: -20px;
    top: 35px;

    background-image:
        radial-gradient(
            #c59a35 1px,
            transparent 1px
        );

    background-size: 12px 12px;
    opacity: .35;
}


/* MESSAGE CONTENT */

.principal-section-label {
    color: #b28522;
    font-size: 12px;
    letter-spacing: 2.5px;
    font-weight: 800;
}

.principal-message-content h2 {
    color: #172338;
    font-family: "Playfair Display", serif;
    font-size: clamp(37px, 4vw, 53px);
    line-height: 1.13;
    margin: 15px 0 25px;
}

.principal-message-content h2 em {
    color: #b28522;
    font-style: normal;
    display: block;
}

.principal-quote {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;

    background: #f3e6c4;
    color: #b28522;
    border-radius: 50%;
    margin-bottom: 20px;
}

.principal-opening {
    color: #172338 !important;
    font-weight: 700;
}

.principal-message-content p {
    color: #747b83;
    line-height: 1.85;
    font-size: 14px;
    margin-bottom: 16px;
}

.principal-closing {
    color: #4e5660 !important;
    font-weight: 600;
    font-style: italic;
}

.principal-signature {
    margin-top: 30px;
}

.signature-line {
    width: 55px;
    height: 3px;
    background: #e9b936;
    margin-bottom: 12px;
}

.principal-signature strong {
    display: block;
    color: #172338;
    font-family: "Playfair Display", serif;
    font-size: 21px;
}

.principal-signature span {
    display: block;
    color: #8a9096;
    font-size: 11px;
    margin-top: 4px;
}


/* ================= VALUES ================= */

.principal-values {
    padding: 100px 0;
    background: #f7f5ef;
}

.principal-title-center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 55px;
}

.principal-title-center > span {
    color: #b28522;
    font-size: 12px;
    letter-spacing: 2.5px;
    font-weight: 800;
}

.principal-title-center h2 {
    color: #172338;
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.15;
    margin: 13px 0 16px;
}

.principal-title-center h2 em {
    color: #b28522;
    font-style: normal;
    display: block;
}

.principal-title-center p {
    color: #747b83;
    font-size: 14px;
    line-height: 1.8;
}

.principal-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.principal-value-card {
    position: relative;
    background: #fff;
    padding: 34px 27px;
    border: 1px solid #e9e5dc;
    overflow: hidden;
    transition: .3s ease;
}

.principal-value-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 38px rgba(23,35,56,.09);
}

.principal-value-card > span {
    position: absolute;
    top: 12px;
    right: 18px;
    font-family: "Playfair Display", serif;
    color: #e5dfd1;
    font-size: 32px;
}

.principal-value-icon {
    width: 57px;
    height: 57px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f3e6c4;
    color: #ad7f19;
    border-radius: 50%;
    margin-bottom: 24px;
    font-size: 20px;
}

.principal-value-card h3 {
    color: #172338;
    font-family: "Playfair Display", serif;
    font-size: 21px;
    margin-bottom: 11px;
}

.principal-value-card p {
    color: #747b83;
    font-size: 13px;
    line-height: 1.75;
}


/* ================= THOUGHT ================= */

.principal-thought {
    background: #172338;
    padding: 85px 0;
}

.principal-thought-box {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.thought-icon {
    width: 55px;
    height: 55px;
    margin: 0 auto 22px;

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

    border-radius: 50%;
    background: #e9b936;
    color: #172338;
}

.principal-thought h2 {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.3;
    font-weight: 500;
}

.principal-thought p {
    max-width: 650px;
    margin: 18px auto 0;
    color: rgba(255,255,255,.58);
    line-height: 1.8;
    font-size: 14px;
}


/* ================= PARTNERSHIP ================= */

.parent-partnership {
    background: #fff;
}

.partnership-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.partnership-content h2 {
    color: #172338;
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 4vw, 51px);
    line-height: 1.15;
    margin: 15px 0 20px;
}

.partnership-content h2 em {
    color: #b28522;
    font-style: normal;
    display: block;
}

.partnership-content > p {
    color: #747b83;
    line-height: 1.85;
    font-size: 14px;
}

.partnership-points {
    margin-top: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.partnership-points div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #293342;
    font-size: 13px;
    font-weight: 700;
}

.partnership-points i {
    width: 23px;
    height: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f3e6c4;
    color: #a97c1c;
    border-radius: 50%;
    font-size: 10px;
}


/* VISUAL */

.partnership-visual {
    min-height: 400px;

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

    background:
        linear-gradient(
            135deg,
            #f7f1df,
            #eee5ca
        );

    position: relative;
}

.partnership-visual::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(178,133,34,.25);
    border-radius: 50%;
}

.partnership-card {
    width: 310px;
    padding: 40px 35px;
    background: #172338;
    position: relative;
    z-index: 2;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0,0,0,.15);
}

.partnership-card > i {
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 0 auto 20px;

    border-radius: 50%;
    background: #e9b936;
    color: #172338;
    font-size: 23px;
}

.partnership-card h3 {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: 25px;
}

.partnership-card p {
    color: rgba(255,255,255,.58);
    font-size: 13px;
    line-height: 1.7;
    margin-top: 10px;
}


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

.principal-cta {
    padding: 85px 0;
    background:
        linear-gradient(
            90deg,
            rgba(23,35,56,.98),
            rgba(23,35,56,.88)
        );
}

.principal-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.principal-cta-inner > div:first-child > span {
    color: #e9b936;
    font-size: 11px;
    letter-spacing: 2.5px;
    font-weight: 800;
}

.principal-cta h2 {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(37px, 4vw, 53px);
    line-height: 1.1;
    margin: 12px 0;
}

.principal-cta h2 em {
    color: #e9b936;
    font-style: normal;
}

.principal-cta p {
    color: rgba(255,255,255,.58);
    font-size: 14px;
}

.principal-cta-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.principal-btn-primary,
.principal-btn-outline {
    min-height: 52px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    transition: .25s ease;
}

.principal-btn-primary {
    background: #e9b936;
    color: #172338;
}

.principal-btn-primary:hover {
    background: #fff;
}

.principal-btn-outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.4);
}

.principal-btn-outline:hover {
    background: #fff;
    color: #172338;
}


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

@media (max-width: 1050px) {

    .principal-message-grid,
    .partnership-grid {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .principal-values-grid {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 800px) {

    .principal-message-grid,
    .partnership-grid {
        grid-template-columns: 1fr;
    }

    .principal-photo-area {
        max-width: 620px;
        width: 100%;
        margin: auto;
    }

    .principal-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .principal-hero {
        min-height: 390px;
    }

    .principal-hero-content {
        padding: 60px 0;
    }

    .principal-message,
    .principal-values,
    .parent-partnership {
        padding: 70px 0;
    }

    .principal-photo-area {
        min-height: 440px;
    }

    .principal-photo {
        width: 88%;
        height: 410px;
    }

    .principal-name-card {
        width: 220px;
        bottom: 10px;
    }

    .principal-values-grid {
        grid-template-columns: 1fr;
    }

    .partnership-points {
        grid-template-columns: 1fr;
    }

    .partnership-visual {
        min-height: 350px;
    }

    .partnership-card {
        width: 270px;
    }

    .principal-cta {
        padding: 65px 0;
    }

    .principal-cta-buttons {
        width: 100%;
    }

    .principal-btn-primary,
    .principal-btn-outline {
        width: 100%;
        justify-content: center;
    }

}

/* director css start here*/

/* =========================================================
   TOPTOPS
   DIRECTOR'S DESK
========================================================= */

.director-desk-page {
    overflow: hidden;
}

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


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

.dd-hero {
    min-height: 430px;
    position: relative;
    display: flex;
    align-items: center;

    background:
        url("images/director_desk_bg-img.png")
        center/cover no-repeat;
}

.dd-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(13,25,43,.97),
            rgba(13,25,43,.78),
            rgba(13,25,43,.38)
        );
}

.dd-hero-content {
    position: relative;
    z-index: 2;
    padding: 70px 0;
}

.dd-eyebrow {
    color: #e8b936;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 800;
}

.dd-hero h1 {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: clamp(45px, 5vw, 70px);
    line-height: 1.1;
    margin: 15px 0;
}

.dd-hero h1 span {
    color: #e8b936;
}

.dd-hero p {
    color: rgba(255,255,255,.72);
    max-width: 600px;
    font-size: 15px;
    line-height: 1.8;
}
/* ================= MESSAGE ================= */

.dd-message {
    padding: 100px 0;
    background: #fff;
}

.dd-message-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 85px;
    align-items: center;
}


/* PHOTO */

.dd-photo-area {
    min-height: 580px;
    position: relative;
}

.dd-photo {
    position: relative;
    z-index: 2;

    width: 86%;
    height: 540px;

    overflow: hidden;
    background: #eee;
}

.dd-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: .7s ease;
}

.dd-photo:hover img {
    transform: scale(1.05);
}

.dd-dots {
    position: absolute;
    top: 25px;
    left: -18px;

    width: 175px;
    height: 175px;

    background-image:
        radial-gradient(
            #c49a39 1px,
            transparent 1px
        );

    background-size: 11px 11px;
    opacity: .35;
}

.dd-name-card {
    position: absolute;
    z-index: 5;

    right: 0;
    bottom: 30px;

    width: 260px;

    padding: 24px 25px;

    background: #172338;

    border-left: 4px solid #e8b936;

    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.dd-name-card span {
    color: #e8b936;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
}

.dd-name-card h3 {
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: 25px;
    margin: 7px 0 3px;
}

.dd-name-card p {
    color: rgba(255,255,255,.55);
    font-size: 11px;
}


/* MESSAGE CONTENT */

.dd-section-tag {
    color: #b28522;
    font-size: 11px;
    letter-spacing: 2.5px;
    font-weight: 800;
}

.dd-message-content h2 {
    color: #172338;
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 4vw, 53px);
    line-height: 1.12;

    margin: 15px 0 22px;
}

.dd-message-content h2 em {
    color: #b28522;
    font-style: normal;
    display: block;
}

.dd-quote {
    width: 46px;
    height: 46px;

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

    background: #f3e5bd;
    color: #b28522;

    border-radius: 50%;

    margin-bottom: 20px;
}

.dd-message-content p {
    color: #737b83;
    font-size: 14px;
    line-height: 1.85;

    margin-bottom: 16px;
}

.dd-message-content p strong {
    color: #172338;
}

.dd-greeting {
    color: #172338 !important;
    font-weight: 700;
}

.dd-closing {
    font-style: italic;
    color: #555e67 !important;
    font-weight: 600;
}

.dd-signature {
    margin-top: 30px;
}

.dd-sign-line {
    width: 52px;
    height: 3px;

    background: #e8b936;

    margin-bottom: 10px;
}

.dd-signature strong {
    display: block;

    color: #172338;

    font-family: "Playfair Display", serif;
    font-size: 21px;
}

.dd-signature span {
    display: block;

    color: #8b9198;
    font-size: 11px;

    margin-top: 3px;
}


/* ================= VISION ================= */

.dd-vision {
    padding: 100px 0;
    background: #f7f5ef;
}

.dd-heading {
    max-width: 700px;
    margin: 0 auto 55px;

    text-align: center;
}

.dd-heading > span {
    color: #b28522;

    font-size: 11px;
    letter-spacing: 2.5px;
    font-weight: 800;
}

.dd-heading h2 {
    color: #172338;

    font-family: "Playfair Display", serif;

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

    margin: 13px 0 16px;
}

.dd-heading h2 em {
    color: #b28522;
    font-style: normal;
}

.dd-heading p {
    color: #747b83;
    font-size: 14px;
    line-height: 1.8;
}

.dd-vision-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.dd-vision-card {
    position: relative;
    overflow: hidden;

    background: #fff;

    border: 1px solid #e7e3da;

    padding: 33px 25px;

    transition: .3s ease;
}

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

    box-shadow:
        0 20px 38px rgba(23,35,56,.09);
}

.dd-icon {
    width: 57px;
    height: 57px;

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

    border-radius: 50%;

    background: #f3e5bd;
    color: #ad7f19;

    font-size: 20px;

    margin-bottom: 23px;
}

.dd-vision-card h3 {
    color: #172338;

    font-family: "Playfair Display", serif;

    font-size: 21px;

    margin-bottom: 10px;
}

.dd-vision-card p {
    color: #747b83;

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


/* ================= QUOTE ================= */

.dd-quote-section {
    background: #172338;
    padding: 85px 0;
}

.dd-quote-box {
    max-width: 900px;
    margin: auto;

    text-align: center;
}

.dd-big-quote {
    width: 58px;
    height: 58px;

    margin: 0 auto 25px;

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

    border-radius: 50%;

    background: #e8b936;
    color: #172338;

    font-size: 20px;
}

.dd-quote-box h2 {
    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1.3;

    font-weight: 500;
}

.dd-quote-line {
    width: 50px;
    height: 2px;

    background: #e8b936;

    margin: 25px auto 18px;
}

.dd-quote-box p {
    max-width: 650px;

    margin: auto;

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

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


/* ================= COMMITMENT ================= */

.dd-commitment {
    padding: 100px 0;
    background: #fff;
}

.dd-commitment-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 85px;

    align-items: center;
}

.dd-commitment-content h2 {
    color: #172338;

    font-family: "Playfair Display", serif;

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

    line-height: 1.15;

    margin: 14px 0 20px;
}

.dd-commitment-content h2 em {
    display: block;

    color: #b28522;

    font-style: normal;
}

.dd-commitment-content > p {
    color: #747b83;

    font-size: 14px;
    line-height: 1.85;
}

.dd-check-list {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px;

    margin-top: 26px;
}

.dd-check-list div {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #293342;

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

.dd-check-list i {
    width: 23px;
    height: 23px;

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

    border-radius: 50%;

    background: #f3e5bd;
    color: #a97c1c;

    font-size: 9px;
}


/* VISUAL */

.dd-commitment-visual {
    min-height: 430px;

    position: relative;

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

    background: #f6f0df;

    overflow: hidden;
}

.dd-visual-circle {
    position: absolute;

    width: 290px;
    height: 290px;

    border-radius: 50%;

    border: 1px solid rgba(178,133,34,.3);
}

.dd-commitment-card {
    position: relative;
    z-index: 2;

    width: 310px;

    padding: 42px 30px;

    text-align: center;

    background: #172338;

    box-shadow:
        0 25px 50px rgba(0,0,0,.16);
}

.dd-card-icon {
    width: 65px;
    height: 65px;

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

    margin: 0 auto 20px;

    border-radius: 50%;

    background: #e8b936;
    color: #172338;

    font-size: 23px;
}

.dd-commitment-card > span {
    color: #e8b936;

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 800;
}

.dd-commitment-card h3 {
    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: 34px;

    line-height: 1.1;

    margin: 15px 0;
}

.dd-commitment-card p {
    color: rgba(255,255,255,.58);

    font-size: 13px;

    line-height: 1.7;
}


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

.dd-cta {
    padding: 80px 0;

    background: #172338;
}

.dd-cta-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}

.dd-cta-inner > div:first-child > span {
    color: #e8b936;

    font-size: 11px;

    letter-spacing: 2.5px;

    font-weight: 800;
}

.dd-cta h2 {
    color: #fff;

    font-family: "Playfair Display", serif;

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

    line-height: 1.1;

    margin: 13px 0;
}

.dd-cta h2 em {
    color: #e8b936;

    font-style: normal;
}

.dd-cta p {
    color: rgba(255,255,255,.57);

    font-size: 14px;
}

.dd-buttons {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}

.dd-btn-main,
.dd-btn-outline {
    min-height: 52px;

    padding: 0 22px;

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    font-weight: 700;

    transition: .25s ease;
}

.dd-btn-main {
    background: #e8b936;
    color: #172338;
}

.dd-btn-main:hover {
    background: #fff;
}

.dd-btn-outline {
    color: #fff;

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

.dd-btn-outline:hover {
    background: #fff;
    color: #172338;
}


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

@media (max-width: 1050px) {

    .dd-message-grid,
    .dd-commitment-grid {
        gap: 45px;
    }

    .dd-vision-grid {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 800px) {

    .dd-message-grid,
    .dd-commitment-grid {
        grid-template-columns: 1fr;
    }

    .dd-photo-area {
        max-width: 620px;
        width: 100%;
        margin: auto;
    }

    .dd-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .dd-hero {
        min-height: 390px;
    }

    .dd-hero-content {
        padding: 60px 0;
    }

    .dd-message,
    .dd-vision,
    .dd-commitment {
        padding: 70px 0;
    }

    .dd-photo-area {
        min-height: 450px;
    }

    .dd-photo {
        width: 88%;
        height: 415px;
    }

    .dd-name-card {
        width: 220px;
        bottom: 10px;
    }

    .dd-vision-grid {
        grid-template-columns: 1fr;
    }

    .dd-check-list {
        grid-template-columns: 1fr;
    }

    .dd-commitment-visual {
        min-height: 350px;
    }

    .dd-commitment-card {
        width: 275px;
    }

    .dd-buttons {
        width: 100%;
    }

    .dd-btn-main,
    .dd-btn-outline {
        width: 100%;
        justify-content: center;
    }

}

/* =========================================================
   TOPTOPS ENGLISH MEDIUM SCHOOL
   AFFILIATION PAGE
========================================================= */

.affiliation-page {
    overflow: hidden;
    background: #fff;
}

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


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

.aff-hero {
    min-height: 450px;
    position: relative;

    display: flex;
    align-items: center;

    background:
        url("images/affliation_bg-img.png")
        center/cover no-repeat;
}

.aff-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(14,27,46,.97),
            rgba(14,27,46,.80),
            rgba(14,27,46,.35)
        );
}

.aff-hero-content {
    position: relative;
    z-index: 2;

    padding: 70px 0;
}

.aff-eyebrow {
    color: #e8b936;

    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 800;
}

.aff-hero h1 {
    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: clamp(43px, 5vw, 68px);

    line-height: 1.1;

    margin: 15px 0;
}

.aff-hero h1 span {
    color: #e8b936;
}

.aff-hero p {
    max-width: 600px;

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

    font-size: 15px;
    line-height: 1.8;
}
/* =========================================================
   AFFILIATION INTRO
========================================================= */

.aff-intro {
    padding: 65px 0 35px;
    background: #fff;
}

.aff-intro-card {
    min-height: 190px;

    display: flex;
    align-items: center;

    position: relative;

    padding: 28px 50px;

    background: #fff;

    border: 1px solid #ebe5d6;

    box-shadow:
        0 20px 50px rgba(23,35,56,.08);
}

.aff-logo-box {
    width: 145px;
    height: 145px;

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

    border-right: 1px solid #e9e1d0;

    padding-right: 28px;
}

.aff-logo-box img {
    max-width: 110px;
    max-height: 120px;

    object-fit: contain;
}

.aff-intro-content {
    padding-left: 40px;
}

.aff-intro-content span {
    color: #b28522;

    font-size: 10px;
    letter-spacing: 2.5px;
    font-weight: 800;
}

.aff-intro-content h2 {
    color: #172338;

    font-family: "Playfair Display", serif;

    font-size: 39px;

    margin: 7px 0 2px;
}

.aff-intro-content h2 em {
    color: #b28522;
    font-style: normal;
}

.aff-intro-content p {
    color: #7d838a;

    font-size: 13px;
}

.aff-certified {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px 18px;

    border: 1px solid #e8dfca;

    background: #faf7ef;

    color: #8b6a24;
}

.aff-certified i {
    font-size: 23px;
}

.aff-certified span {
    font-size: 10px;

    line-height: 1.5;

    font-weight: 800;

    letter-spacing: .8px;
}


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

.aff-information,
.aff-recognition {
    padding: 80px 0;
}

.aff-information {
    background: #f7f5ef;
}

.aff-section-heading {
    margin-bottom: 42px;
}

.aff-section-heading.center {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.aff-section-heading > span {
    color: #b28522;

    font-size: 10px;

    letter-spacing: 2.5px;

    font-weight: 800;
}

.aff-section-heading h2 {
    color: #172338;

    font-family: "Playfair Display", serif;

    font-size: clamp(35px, 4vw, 50px);

    line-height: 1.15;

    margin: 12px 0;
}

.aff-section-heading h2 em {
    color: #b28522;
    font-style: normal;
}

.aff-section-heading p {
    color: #747b83;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   INFORMATION CARDS
========================================================= */

.aff-info-grid {
    display: grid;

    grid-template-columns: 1.35fr .65fr;

    gap: 22px;
}

.aff-info-card {
    padding: 35px;

    background: #fff;

    border: 1px solid #e7e1d5;
}

.aff-card-head {
    display: flex;
    align-items: center;

    gap: 15px;

    padding-bottom: 25px;

    border-bottom: 1px solid #eee9df;
}

.aff-card-icon {
    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    background: #f3e5bd;

    color: #ad7f19;

    font-size: 19px;
}

.aff-card-head span {
    color: #c0a66d;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}

.aff-card-head h3 {
    color: #172338;

    font-family: "Playfair Display", serif;

    font-size: 23px;

    margin-top: 2px;
}

.aff-detail-list {
    padding-top: 20px;
}

.aff-detail {
    display: grid;

    grid-template-columns: 170px 15px 1fr;

    gap: 7px;

    padding: 12px 0;

    border-bottom: 1px dashed #e6e1d8;
}

.aff-detail:last-child {
    border-bottom: 0;
}

.aff-detail span {
    color: #6e757d;

    font-size: 12px;

    font-weight: 600;
}

.aff-detail strong {
    color: #b28522;

    font-size: 12px;
}

.aff-detail p {
    color: #273241;

    font-size: 12px;

    margin: 0;

    line-height: 1.6;
}


/* CONTACT */

.aff-contact-card {
    padding: 40px 30px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    background: #172338;

    position: relative;

    overflow: hidden;
}

.aff-contact-card::after {
    content: "";

    position: absolute;

    width: 190px;
    height: 190px;

    border: 1px solid rgba(232,185,54,.18);

    border-radius: 50%;

    right: -90px;
    bottom: -90px;
}

.aff-contact-icon {
    width: 58px;
    height: 58px;

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

    border-radius: 50%;

    background: #e8b936;

    color: #172338;

    font-size: 20px;

    margin-bottom: 22px;
}

.aff-contact-card > span {
    color: #e8b936;

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 800;
}

.aff-contact-card h3 {
    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: 31px;

    line-height: 1.15;

    margin: 12px 0 15px;
}

.aff-contact-card h3 em {
    display: block;

    color: #e8b936;

    font-style: normal;
}

.aff-contact-card p {
    color: rgba(255,255,255,.58);

    font-size: 13px;

    line-height: 1.8;

    margin-bottom: 23px;
}

.aff-contact-card a {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 12px 17px;

    background: #fff;

    color: #172338;

    font-size: 12px;

    font-weight: 700;

    transition: .25s;
}

.aff-contact-card a:hover {
    background: #e8b936;
}


/* =========================================================
   RECOGNITION
========================================================= */

.aff-recognition {
    background: #fff;
}

.aff-recognition-grid {
    display: grid;

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

    gap: 17px;

    margin-bottom: 45px;
}

.aff-rec-card {
    position: relative;

    padding: 28px 23px;

    background: #faf8f3;

    border: 1px solid #ebe4d6;

    transition: .3s;
}

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

    box-shadow:
        0 18px 35px rgba(23,35,56,.08);
}

.aff-rec-icon {
    width: 50px;
    height: 50px;

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

    border-radius: 50%;

    background: #f3e5bd;

    color: #aa7c1c;

    font-size: 17px;

    margin-bottom: 20px;
}

.aff-rec-card > span {
    color: #ad8a43;

    font-size: 9px;

    letter-spacing: 1.7px;

    font-weight: 800;
}

.aff-rec-card h3 {
    color: #172338;

    font-family: "Playfair Display", serif;

    font-size: 26px;

    margin: 7px 0 3px;
}

.aff-rec-card p {
    color: #858b91;

    font-size: 11px;
}


/* =========================================================
   DETAILS TABLE
========================================================= */

.aff-details-table {
    overflow: hidden;

    border: 1px solid #e5dfd2;

    box-shadow:
        0 15px 35px rgba(23,35,56,.05);
}

.aff-table-title {
    display: flex;

    align-items: center;

    gap: 16px;

    padding: 23px 30px;

    background: #172338;
}

.aff-table-icon {
    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background: #e8b936;

    color: #172338;
}

.aff-table-title span {
    color: #e8b936;

    font-size: 9px;

    letter-spacing: 2px;

    font-weight: 800;
}

.aff-table-title h3 {
    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: 22px;

    margin-top: 3px;
}

.aff-table-body {
    background: #fff;
}

.aff-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 54px;

    align-items: center;

    border-bottom: 1px solid #eee9df;
}

.aff-row:last-child {
    border-bottom: 0;
}

.aff-row span {
    padding-left: 30px;

    color: #68717a;

    font-size: 13px;
}

.aff-row strong {
    color: #172338;

    font-size: 13px;

    font-weight: 700;
}

.aff-row.highlight {
    background: #fcf8ec;
}

.aff-row.highlight strong {
    color: #a77a19;
}


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

.aff-bottom {
    padding: 70px 0;

    background: #172338;
}

.aff-bottom-inner {
    display: flex;

    align-items: center;

    gap: 25px;

    max-width: 900px;

    margin: auto;
}

.aff-bottom-icon {
    flex-shrink: 0;

    width: 72px;
    height: 72px;

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

    border-radius: 50%;

    background: #e8b936;

    color: #172338;

    font-size: 27px;
}

.aff-bottom-inner span {
    color: #e8b936;

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 800;
}

.aff-bottom-inner h2 {
    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: clamp(30px, 4vw, 43px);

    line-height: 1.15;

    margin: 8px 0 10px;
}

.aff-bottom-inner h2 em {
    color: #e8b936;

    font-style: normal;
}

.aff-bottom-inner p {
    color: rgba(255,255,255,.55);

    font-size: 13px;

    line-height: 1.7;
}


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

@media (max-width: 1000px) {

    .aff-info-grid {
        grid-template-columns: 1fr;
    }

    .aff-recognition-grid {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 750px) {

    .aff-intro-card {
        padding: 25px;

        flex-wrap: wrap;

        gap: 25px;
    }

    .aff-logo-box {
        width: 120px;
        height: 120px;

        padding-right: 20px;
    }

    .aff-intro-content {
        padding-left: 0;
    }

    .aff-certified {
        margin-left: 0;
    }

    .aff-detail {
        grid-template-columns: 145px 12px 1fr;
    }

    .aff-bottom-inner {
        align-items: flex-start;
    }

}


@media (max-width: 600px) {

    .aff-hero {
        min-height: 390px;
    }

    .aff-hero-content {
        padding: 60px 0;
    }

    .aff-information,
    .aff-recognition {
        padding: 65px 0;
    }

    .aff-recognition-grid {
        grid-template-columns: 1fr;
    }

    .aff-info-card {
        padding: 25px 18px;
    }

    .aff-detail {
        grid-template-columns: 1fr;

        gap: 3px;
    }

    .aff-detail strong {
        display: none;
    }

    .aff-row {
        grid-template-columns: 1fr;

        padding: 14px 0;
    }

    .aff-row span {
        padding-left: 18px;

        margin-bottom: 4px;
    }

    .aff-row strong {
        padding-left: 18px;
    }

    .aff-table-title {
        padding: 20px;
    }

    .aff-certified {
        width: 100%;
    }

    .aff-bottom-inner {
        flex-direction: column;
    }

}

/* =========================================================
   TOPTOPS ENGLISH MEDIUM SCHOOL
   TEACHING CADRE
========================================================= */

.teaching-cadre-page {
    overflow: hidden;
    background: #fff;
}

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


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

.tc-hero {
    min-height: 460px;

    position: relative;

    display: flex;
    align-items: center;

    background:
        url("images/teaching_crade_bg-img.png")
        center/cover no-repeat;
}

.tc-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(15,27,46,.97),
            rgba(15,27,46,.78),
            rgba(15,27,46,.35)
        );
}

.tc-hero-content {
    position: relative;
    z-index: 2;

    padding: 70px 0;
}

.tc-eyebrow {
    color: #e8b936;

    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 800;
}

.tc-hero h1 {
    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: clamp(45px, 5vw, 70px);

    line-height: 1.1;

    margin: 15px 0;
}

.tc-hero h1 span {
    color: #e8b936;
}

.tc-hero p {
    max-width: 600px;

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

    font-size: 15px;

    line-height: 1.8;
}

/* =========================================================
   INTRO
========================================================= */

.tc-intro {
    padding: 90px 0 65px;

    background: #fff;
}

.tc-intro-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}

.tc-section-label {
    color: #b28522;

    font-size: 10px;

    letter-spacing: 2.5px;

    font-weight: 800;
}

.tc-intro-heading h2 {
    color: #172338;

    font-family: "Playfair Display", serif;

    font-size: clamp(37px, 4vw, 53px);

    line-height: 1.12;

    margin-top: 13px;
}

.tc-intro-heading h2 em {
    display: block;

    color: #b28522;

    font-style: normal;
}

.tc-intro-text {
    border-left: 3px solid #e8b936;

    padding-left: 30px;
}

.tc-intro-text p {
    color: #727a82;

    font-size: 14px;

    line-height: 1.9;

    margin-bottom: 17px;
}


/* =========================================================
   TEAM
========================================================= */

.tc-team {
    padding: 95px 0;

    background: #f7f5ef;
}

.tc-heading {
    max-width: 680px;

    margin: 0 auto 50px;

    text-align: center;
}

.tc-heading > span {
    color: #b28522;

    font-size: 10px;

    letter-spacing: 2.5px;

    font-weight: 800;
}

.tc-heading h2 {
    color: #172338;

    font-family: "Playfair Display", serif;

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

    line-height: 1.15;

    margin: 12px 0;
}

.tc-heading h2 em {
    color: #b28522;

    font-style: normal;
}

.tc-heading p {
    color: #747b83;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   TEAM GRID
========================================================= */

.tc-team-grid {
    display: grid;

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

    gap: 24px;
}


/* CARD */

.tc-card {
    background: #fff;

    border: 1px solid #e7e1d6;

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

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

    box-shadow:
        0 22px 45px rgba(23,35,56,.11);
}


/* IMAGE */

.tc-card-image {
    height: 330px;

    position: relative;

    overflow: hidden;

    background: #e9e6df;
}

.tc-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

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


/* IMAGE OVERLAY */

.tc-card-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 55px 20px 18px;

    background:
        linear-gradient(
            transparent,
            rgba(15,27,46,.82)
        );

    opacity: 0;

    transition: .3s;
}

.tc-card:hover .tc-card-overlay {
    opacity: 1;
}

.tc-card-overlay span {
    color: #e8b936;

    font-size: 9px;

    letter-spacing: 2px;

    font-weight: 800;
}


/* CARD CONTENT */

.tc-card-content {
    padding: 25px 24px 27px;

    position: relative;
}

.tc-card-content::before {
    content: "";

    position: absolute;

    top: 0;
    left: 24px;

    width: 35px;
    height: 3px;

    background: #e8b936;
}

.tc-role {
    color: #ad8740;

    font-size: 9px;

    letter-spacing: 1.8px;

    font-weight: 800;
}

.tc-card-content h3 {
    color: #172338;

    font-family: "Playfair Display", serif;

    font-size: 23px;

    margin: 7px 0 8px;
}

.tc-card-content p {
    color: #7a8188;

    font-size: 12px;

    line-height: 1.7;

    margin: 0;
}


/* =========================================================
   APPROACH
========================================================= */

.tc-approach {
    padding: 95px 0;

    background: #fff;
}

.tc-approach-box {
    display: grid;

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

    gap: 60px;

    padding: 55px;

    background: #172338;

    position: relative;

    overflow: hidden;
}

.tc-approach-box::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    border: 1px solid rgba(232,185,54,.13);

    right: -150px;
    bottom: -190px;
}

.tc-approach-content {
    position: relative;

    z-index: 2;
}

.tc-approach-content > span {
    color: #e8b936;

    font-size: 10px;

    letter-spacing: 2.5px;

    font-weight: 800;
}

.tc-approach-content h2 {
    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: clamp(35px, 4vw, 48px);

    line-height: 1.12;

    margin: 13px 0 18px;
}

.tc-approach-content h2 em {
    display: block;

    color: #e8b936;

    font-style: normal;
}

.tc-approach-content p {
    color: rgba(255,255,255,.58);

    font-size: 13px;

    line-height: 1.85;
}


/* VALUES */

.tc-values {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 15px;

    align-items: center;
}

.tc-value {
    padding: 27px 20px;

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

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

    transition: .3s;
}

.tc-value:hover {
    background: rgba(232,185,54,.1);

    transform: translateY(-5px);
}

.tc-value-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 18px;

    border-radius: 50%;

    background: #e8b936;

    color: #172338;
}

.tc-value h3 {
    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: 20px;

    margin-bottom: 7px;
}

.tc-value p {
    color: rgba(255,255,255,.5);

    font-size: 11px;

    line-height: 1.7;
}


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

.tc-cta {
    padding: 75px 0;

    background: #f6f0df;
}

.tc-cta-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 35px;
}

.tc-cta-inner > div > span {
    color: #ad7f1a;

    font-size: 10px;

    letter-spacing: 2px;

    font-weight: 800;
}

.tc-cta h2 {
    color: #172338;

    font-family: "Playfair Display", serif;

    font-size: clamp(35px, 4vw, 50px);

    line-height: 1.12;

    margin: 10px 0;
}

.tc-cta h2 em {
    color: #b28522;

    font-style: normal;
}

.tc-cta p {
    color: #727980;

    font-size: 13px;
}

.tc-cta-btn {
    display: flex;

    align-items: center;

    gap: 10px;

    padding: 16px 24px;

    flex-shrink: 0;

    background: #172338;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    transition: .25s;
}

.tc-cta-btn:hover {
    background: #e8b936;

    color: #172338;
}


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

@media (max-width: 1000px) {

    .tc-team-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tc-intro-grid {
        gap: 40px;
    }

    .tc-approach-box {
        grid-template-columns: 1fr;

        gap: 35px;
    }

}


@media (max-width: 700px) {

    .tc-intro-grid {
        grid-template-columns: 1fr;
    }

    .tc-team-grid {
        grid-template-columns: 1fr;
    }

    .tc-approach-box {
        padding: 35px 25px;
    }

    .tc-values {
        grid-template-columns: 1fr;
    }

    .tc-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 500px) {

    .tc-hero {
        min-height: 390px;
    }

    .tc-hero-content {
        padding: 55px 0;
    }

    .tc-intro,
    .tc-team,
    .tc-approach {
        padding: 70px 0;
    }

    .tc-card-image {
        height: 350px;
    }

    .tc-cta-btn {
        width: 100%;

        justify-content: center;
    }

}
/* =========================================================
   TOPTOPS SCHOOL
   ADMISSION PROCEDURE PAGE
========================================================= */

.admission-page {
    --adm-navy: #142238;
    --adm-navy-light: #1d304c;
    --adm-gold: #d5a72c;
    --adm-gold-light: #f1d277;
    --adm-cream: #f8f4e9;
    --adm-text: #69727d;

    overflow: hidden;
    background: #fff;
}

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


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

.admission-hero {
    position: relative;
    min-height: 390px;

    display: flex;
    align-items: center;

   background:
url("images/admission_pro_bg-img.png")

center/cover no-repeat;

    overflow: hidden;
}

.admission-hero::before {
    content: "";

    position: absolute;

    width: 550px;
    height: 550px;

    right: -180px;
    top: -260px;

    border-radius: 50%;

    border: 1px solid rgba(213,167,44,.18);
}

.admission-hero::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -100px;
    bottom: -300px;

    border-radius: 50%;

    border: 1px solid rgba(213,167,44,.12);
}

.admission-hero-content {
    position: relative;
    z-index: 2;

    padding: 70px 0;
}

.admission-kicker {
    display: inline-block;

    color: var(--adm-gold-light);

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

    letter-spacing: 3px;
}

.admission-hero h1 {
    margin: 14px 0;

    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: clamp(46px, 6vw, 76px);

    line-height: 1.05;

    letter-spacing: -.8px;
}

.admission-hero h1 span {
    color: var(--adm-gold);
}

.admission-hero p {
    max-width: 570px;

    margin: 0;

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

    font-size: 15px;
    line-height: 1.8;
}
.admission-hero-badge {
    position: absolute;

    right: 5%;
    top: 50%;

    transform: translateY(-50%);

    width: 210px;
    height: 210px;

    border-radius: 50%;

    border: 1px solid rgba(213,167,44,.35);

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

    color: var(--adm-gold);

    z-index: 2;
}

.admission-hero-badge::before {
    content: "";

    position: absolute;

    inset: 12px;

    border: 1px dashed rgba(213,167,44,.3);

    border-radius: 50%;
}

.admission-hero-badge i {
    font-size: 42px;

    margin-bottom: 15px;
}

.admission-hero-badge span {
    font-size: 9px;
    letter-spacing: 2px;
    font-weight: 800;
}


/* =========================================================
   INTRO
========================================================= */

.admission-intro {
    padding: 95px 0;

    background: #fff;
}

.admission-intro-grid {
    display: grid;

    grid-template-columns: 1.3fr .7fr;

    gap: 85px;

    align-items: center;
}

.admission-label {
    color: #ad8526;

    font-size: 10px;

    letter-spacing: 2.5px;

    font-weight: 800;
}

.admission-intro-content h2 {
    margin: 13px 0 22px;

    color: var(--adm-navy);

    font-family: "Playfair Display", serif;

    font-size: clamp(38px, 4.5vw, 57px);

    line-height: 1.12;
}

.admission-intro-content h2 em {
    display: block;

    color: var(--adm-gold);

    font-style: normal;
}

.admission-intro-content p {
    max-width: 720px;

    color: var(--adm-text);

    font-size: 14px;

    line-height: 1.9;

    margin-bottom: 15px;
}


/* INTRO CARD */

.admission-intro-card {
    position: relative;

    padding: 42px 35px;

    background: var(--adm-navy);

    box-shadow: 18px 18px 0 var(--adm-gold);

    overflow: hidden;
}

.admission-intro-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    bottom: -80px;

    border-radius: 50%;

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

.intro-icon {
    width: 58px;
    height: 58px;

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

    margin-bottom: 23px;

    background: var(--adm-gold);

    color: var(--adm-navy);

    font-size: 22px;
}

.admission-intro-card > span {
    color: var(--adm-gold-light);

    font-size: 9px;

    letter-spacing: 2px;

    font-weight: 800;
}

.admission-intro-card h3 {
    margin: 10px 0;

    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: 29px;
}

.admission-intro-card p {
    color: rgba(255,255,255,.58);

    font-size: 12px;

    line-height: 1.8;
}

.admission-intro-card a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 12px;

    color: var(--adm-gold-light);

    font-size: 11px;

    font-weight: 700;
}

.admission-intro-card a:hover {
    gap: 15px;
}


/* =========================================================
   PROCESS
========================================================= */

.admission-process {
    padding: 95px 0;

    background: #f7f5ef;
}

.admission-heading {
    max-width: 650px;

    margin: 0 auto 55px;

    text-align: center;
}

.admission-heading > span {
    color: #ad8526;

    font-size: 10px;

    letter-spacing: 2.5px;

    font-weight: 800;
}

.admission-heading h2 {
    margin: 12px 0;

    color: var(--adm-navy);

    font-family: "Playfair Display", serif;

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

.admission-heading h2 em {
    color: var(--adm-gold);

    font-style: normal;
}

.admission-heading p {
    color: var(--adm-text);

    font-size: 13px;

    line-height: 1.8;
}


/* STEPS */

.admission-steps {
    position: relative;

    display: grid;

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

    gap: 20px;
}

.admission-steps::before {
    content: "";

    position: absolute;

    top: 43px;
    left: 11%;
    right: 11%;

    height: 1px;

    background: #d9cfae;
}

.admission-step {
    position: relative;

    z-index: 2;

    padding: 30px 22px 25px;

    background: #fff;

    border: 1px solid #e6e0d2;

    transition: .35s;
}

.admission-step:hover {
    transform: translateY(-8px);

    box-shadow: 0 20px 40px rgba(20,34,56,.09);
}
.step-icon {
    position: relative;

    width: 55px;
    height: 55px;

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

    margin-bottom: 28px;

    background: var(--adm-navy);

    border: 6px solid #f7f5ef;

    outline: 1px solid var(--adm-gold);

    border-radius: 50%;

    color: var(--adm-gold);

    font-size: 17px;
}

.step-content span {
    color: #b28a2a;

    font-size: 9px;

    letter-spacing: 1.8px;

    font-weight: 800;
}

.step-content h3 {
    margin: 9px 0;

    color: var(--adm-navy);

    font-family: "Playfair Display", serif;

    font-size: 20px;

    line-height: 1.25;
}

.step-content p {
    color: #7a8188;

    font-size: 11px;

    line-height: 1.75;
}


/* =========================================================
   DOCUMENTS
========================================================= */

.admission-documents {
    padding: 100px 0;

    background: #fff;
}

.documents-grid {
    display: grid;

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

    gap: 90px;

    align-items: center;
}

.documents-content h2 {
    margin: 13px 0;

    color: var(--adm-navy);

    font-family: "Playfair Display", serif;

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

.documents-content > p {
    color: var(--adm-text);

    font-size: 13px;

    line-height: 1.8;

    max-width: 600px;
}

.document-list {
    margin-top: 30px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 13px 25px;
}

.document-list div {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #4e5964;

    font-size: 12px;
}

.document-list i {
    color: var(--adm-gold);

    font-size: 14px;
}


/* DOCUMENT VISUAL */

.documents-visual {
    min-height: 370px;

    position: relative;

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

    background:
        linear-gradient(
            135deg,
            #f8f4e9,
            #eee6d0
        );

    overflow: hidden;
}

.documents-circle {
    position: absolute;

    width: 290px;
    height: 290px;

    border-radius: 50%;

    border: 1px solid rgba(20,34,56,.1);
}

.document-main-icon {
    position: relative;

    z-index: 3;

    width: 130px;
    height: 160px;

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

    background: var(--adm-navy);

    color: var(--adm-gold);

    font-size: 58px;

    box-shadow:
        15px 15px 0 var(--adm-gold);
}

.floating-doc {
    position: absolute;

    z-index: 4;

    width: 60px;
    height: 60px;

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

    background: #fff;

    color: var(--adm-navy);

    font-size: 20px;

    box-shadow: 0 10px 25px rgba(20,34,56,.12);
}

.floating-doc-one {
    top: 65px;
    left: 18%;
}

.floating-doc-two {
    right: 17%;
    bottom: 65px;
}


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

.admission-note {
    padding: 0 0 90px;
}

.note-box {
    display: flex;

    gap: 22px;

    padding: 25px 30px;

    background: #f8f4e9;

    border-left: 4px solid var(--adm-gold);
}

.note-icon {
    flex-shrink: 0;

    color: var(--adm-gold);

    font-size: 23px;
}

.note-box span {
    color: var(--adm-navy);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.note-box p {
    margin: 8px 0 0;

    color: #707982;

    font-size: 12px;

    line-height: 1.8;
}


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

.admission-cta {
    padding: 75px 0;
}

.admission-cta-inner {
    display: flex;

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

    gap: 40px;
}

.admission-cta-inner div:first-child  span {
    color: var(--adm-gold-light);

    font-size: 9px;

    letter-spacing: 2.2px;

    font-weight: 800;
}

.admission-cta h2 {
    margin: 10px 0;

    color: #fff;

    font-family: "Playfair Display", serif;

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

    line-height: 1.12;
}

.admission-cta h2 em {
    color: var(--adm-gold);

    font-style: normal;
}

.admission-cta p {
    margin: 0;

    color: rgba(2 9 30 / 55%);

    font-size: 15px;
}

.admission-buttons {
    display: flex;

    gap: 12px;

    flex-shrink: 0;
}

.admission-btn {
    display: inline-flex;

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

    gap: 10px;

    min-width: 145px;

    padding: 15px 21px;

    font-size: 11px;

    font-weight: 700;

    transition: .3s;
}

.admission-btn.primary {
    background: var(--adm-gold);

    color: var(--adm-navy);
}

.admission-btn.primary:hover {
    background: #fff;
}

.admission-btn.outline {
    border: 1px solid rgba(255,255,255,.25);

    color: #fff;
}

.admission-btn.outline:hover {
    background: #fff;

    border-color: #fff;

    color: var(--adm-navy);
}


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

@media (max-width: 1000px) {

    .admission-hero-badge {
        right: 3%;
        width: 160px;
        height: 160px;
    }

    .admission-hero-badge i {
        font-size: 30px;
    }

    .admission-intro-grid {
        gap: 50px;
    }

    .admission-steps {
        grid-template-columns: 1fr 1fr;
    }

    .admission-steps::before {
        display: none;
    }

    .documents-grid {
        gap: 50px;
    }

}


@media (max-width: 750px) {

    .admission-hero {
        min-height: 410px;
    }

    .admission-hero-badge {
        display: none;
    }

    .admission-intro-grid,
    .documents-grid {
        grid-template-columns: 1fr;
    }

    .admission-intro-card {
        max-width: 450px;
    }

    .documents-visual {
        min-height: 330px;
    }

    .admission-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


@media (max-width: 550px) {

    .admission-intro,
    .admission-process,
    .admission-documents {
        padding: 70px 0;
    }

    .admission-steps {
        grid-template-columns: 1fr;
    }

    .document-list {
        grid-template-columns: 1fr;
    }

    .note-box {
        padding: 22px;

        gap: 14px;
    }

    .admission-buttons {
        width: 100%;

        flex-direction: column;
    }

    .admission-btn {
        width: 100%;
    }

}

/* =========================================================
   TOPTOPS SCHOOL
   PREMIUM SCHOOL FEE PAGE
========================================================= */

.top-fee-page {

    --navy: #101d32;
    --navy-light: #1b304b;
    --gold: #d6a62d;
    --gold-light: #f2d77d;
    --cream: #f8f5ec;
    --text: #687482;

    font-family: "Poppins", sans-serif;

    background: #fff;

    color: var(--navy);

    overflow: hidden;
}

.top-fee-container {

    width: min(1180px, 92%);

    margin: auto;
}


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

.top-fee-hero {

    min-height: 530px;

    position: relative;

    display: flex;

    align-items: center;

   background:
url("images/fee_bg-img.png")

center/cover no-repeat;
    overflow: hidden;
}

.top-fee-hero-bg {

    position: absolute;

    width: 750px;
    height: 750px;

    border-radius: 50%;

    border: 1px solid rgba(214,166,45,.11);

    right: -300px;
    top: -430px;
}

.top-fee-hero-bg::after {

    content: "";

    position: absolute;

    inset: 80px;

    border-radius: 50%;

    border: 1px solid rgba(214,166,45,.08);
}

.top-fee-hero-content {

    position: relative;

    z-index: 5;

    padding: 85px 0;
}

.top-fee-mini-title {

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--gold-light);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;
}

.top-fee-mini-title span {

    width: 25px;

    height: 1px;

    background: var(--gold);
}

.top-fee-hero h1 {

    margin: 18px 0 12px;

    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: clamp(55px, 7vw, 82px);

    line-height: .95;

    font-weight: 400;
}

.top-fee-hero h1 strong {

    color: var(--gold);

    font-weight: 600;
}

.top-fee-hero p {

    max-width: 570px;

    margin: 0;

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

    font-size: 13px;

    line-height: 1.9;
}
/* HERO VISUAL */



.fee-orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(214,166,45,.18);
}

.orbit-one {

    width: 360px;
    height: 360px;
}

.orbit-two {

    width: 260px;
    height: 260px;

    border-style: dashed;
}

.fee-rupee-circle {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 180px;
    height: 180px;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    display: flex;

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

    background:
        linear-gradient(
            145deg,
            #d6a62d,
            #b98513
        );

    box-shadow:
        0 0 0 12px rgba(214,166,45,.08),
        0 25px 60px rgba(0,0,0,.25);
}

.rupee-inner {

    width: 135px;
    height: 135px;

    display: flex;

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

    border-radius: 50%;

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

    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: 70px;
}


/* FLOATING CARDS */

.fee-floating-card {

    position: absolute;

    z-index: 10;

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 14px 17px;

    background: #fff;

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

.fee-floating-card i {

    width: 38px;
    height: 38px;

    display: flex;

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

    background: var(--navy);

    color: var(--gold);

    font-size: 14px;
}

.fee-floating-card small {

    display: block;

    color: #9299a1;

    font-size: 7px;

    letter-spacing: 1.2px;
}

.fee-floating-card b {

    display: block;

    margin-top: 3px;

    color: var(--navy);

    font-size: 11px;
}

.fee-float-one {

    left: 5px;
    top: 85px;
}

.fee-float-two {

    right: 0;
    bottom: 82px;
}




/* =========================================================
   FEE RULES
========================================================= */

.top-fee-rules {

    padding: 115px 0;

    background: #fff;
}

.fee-heading {

    max-width: 700px;

    margin: 0 auto 65px;

    text-align: center;
}

.fee-heading-tag {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #a37a1b;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}

.fee-heading-tag::before,
.fee-heading-tag::after {

    content: "";

    width: 18px;

    height: 1px;

    background: var(--gold);
}

.fee-heading h2 {

    margin: 13px 0;

    color: var(--navy);

    font-family: "Playfair Display", serif;

    font-size: clamp(38px, 5vw, 56px);

    line-height: 1.08;

    font-weight: 500;
}

.fee-heading h2 span {

    display: block;

    color: var(--gold);
}

.fee-heading p {

    margin: 0;

    color: var(--text);

    font-size: 12px;

    line-height: 1.8;
}


/* LAYOUT */

.fee-rules-layout {

    display: grid;

    grid-template-columns: 1fr 340px;

    gap: 65px;

    align-items: start;
}


/* TIMELINE */

.fee-timeline-item {

    position: relative;

    display: grid;

    grid-template-columns: 52px 1fr;

    column-gap: 22px;

    padding-bottom: 34px;
}

.timeline-number {

    position: relative;

    z-index: 3;

    width: 52px;
    height: 52px;

    display: flex;

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

    background: var(--navy);

    color: var(--gold);

    font-size: 10px;

    font-weight: 700;
}

.timeline-line {

    position: absolute;

    width: 1px;

    top: 52px;
    bottom: 0;

    left: 25px;

    background: #e6e1d6;
}

.fee-timeline-item.last .timeline-line {

    display: none;
}

.timeline-content {

    display: flex;

    gap: 18px;

    padding: 0 0 5px;
}

.timeline-icon {

    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: flex;

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

    background: var(--cream);

    color: var(--gold);

    font-size: 15px;
}

.timeline-icon.warning {

    background: #fff6df;

    color: #d39500;
}

.timeline-icon.danger {

    background: #fff0ef;

    color: #c54b44;
}

.timeline-content h3 {

    margin: 1px 0 7px;

    color: var(--navy);

    font-family: "Playfair Display", serif;

    font-size: 21px;
}

.timeline-content p {

    margin: 0;

    color: var(--text);

    font-size: 11px;

    line-height: 1.8;
}

.timeline-content strong {

    color: var(--navy);

    font-weight: 700;
}


/* =========================================================
   SIDE PANEL
========================================================= */

.fee-side-panel {

    position: sticky;

    top: 25px;

    padding: 35px;

    color: #fff;

    background:
        linear-gradient(
            145deg,
            #14253d,
            #0d192a
        );

    box-shadow: 12px 12px 0 var(--gold);

    overflow: hidden;
}

.fee-side-panel::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    border: 1px solid rgba(214,166,45,.12);

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

.side-panel-top {

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.side-panel-top span {

    color: var(--gold-light);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;
}

.side-panel-top i {

    color: var(--gold);

    font-size: 20px;
}

.fee-side-panel h3 {

    margin: 25px 0 12px;

    font-family: "Playfair Display", serif;

    font-size: 31px;

    line-height: 1.15;
}

.fee-side-panel h3 span {

    display: block;

    color: var(--gold);
}

.fee-side-panel > p {

    margin: 0;

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

    font-size: 10px;

    line-height: 1.8;
}

.side-date-box {

    margin: 28px 0;

    padding: 23px;

    text-align: center;

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

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

.side-date-box small {

    display: block;

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

    font-size: 7px;

    letter-spacing: 2px;
}

.side-date-box strong {

    display: block;

    margin: 4px 0;

    color: var(--gold);

    font-family: "Playfair Display", serif;

    font-size: 58px;

    line-height: 1;
}

.side-date-box span {

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

    font-size: 8px;

    letter-spacing: 1px;
}

.side-hours {

    display: flex;

    gap: 13px;

    align-items: center;

    padding-bottom: 23px;

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

.hours-icon {

    width: 42px;
    height: 42px;

    display: flex;

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

    background: var(--gold);

    color: var(--navy);
}

.side-hours small {

    display: block;

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

    font-size: 7px;

    letter-spacing: 1.3px;
}

.side-hours b {

    display: block;

    margin: 3px 0;

    color: #fff;

    font-size: 11px;
}

.side-hours span {

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

    font-size: 8px;
}

.side-bottom-note {

    display: flex;

    gap: 10px;

    margin-top: 23px;

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

    font-size: 9px;

    line-height: 1.6;
}

.side-bottom-note i {

    flex-shrink: 0;

    color: var(--gold);
}


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

.top-fee-default {

    position: relative;

    padding: 105px 0 115px;

    background: var(--navy);

    overflow: hidden;
}

.top-fee-default::before {

    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    border-radius: 50%;

    border: 1px solid rgba(214,166,45,.07);

    right: -400px;
    top: -250px;
}

.fee-heading.light h2 {

    color: #fff;
}

.fee-heading.light p {

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

.default-grid {

    display: grid;

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

    gap: 20px;
}

.default-card {

    position: relative;

    padding: 38px 32px;

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

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

    transition: .35s;

    overflow: hidden;
}

.default-card:hover {

    transform: translateY(-8px);

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

    border-color: rgba(214,166,45,.4);
}
.default-card-icon {

    width: 57px;
    height: 57px;

    display: flex;

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

    background: var(--gold);

    color: var(--navy);

    font-size: 18px;

    margin-bottom: 25px;
}

.default-card h3 {

    margin: 0 0 10px;

    color: #fff;

    font-family: "Playfair Display", serif;

    font-size: 23px;
}

.default-card p {

    margin: 0;

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

    font-size: 10px;

    line-height: 1.9;
}

.default-card strong {

    color: var(--gold-light);
}


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

.top-fee-notice {

    padding: 80px 0;

    background: var(--cream);
}

.fee-notice-box {

    position: relative;

    display: flex;

    align-items: center;

    gap: 25px;

    padding: 32px 38px;

    background: #fff;

    border-left: 5px solid var(--gold);

    box-shadow: 0 15px 45px rgba(16,29,50,.07);
}

.notice-icon {

    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;

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

    background: var(--navy);

    color: var(--gold);

    font-size: 21px;
}

.notice-content {

    flex: 1;
}

.notice-content span {

    color: #a37a1b;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;
}

.notice-content h3 {

    margin: 5px 0;

    color: var(--navy);

    font-family: "Playfair Display", serif;

    font-size: 20px;
}

.notice-content p {

    margin: 0;

    color: var(--text);

    font-size: 10px;
}

.notice-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 20px;

    flex-shrink: 0;

    background: var(--navy);

    color: #fff;

    font-size: 9px;

    font-weight: 700;

    transition: .3s;
}

.notice-button:hover {

    background: var(--gold);

    color: var(--navy);

    gap: 15px;
}


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

@media(max-width: 1050px) {


    .fee-rules-layout {

        grid-template-columns: 1fr 300px;

        gap: 40px;
    }

}


@media(max-width: 850px) {

    .top-fee-hero {

        min-height: 520px;
    }

    
    .fee-quick-grid {

        grid-template-columns: 1fr;
    }

    .fee-quick-card {

        border-right: 0;

        border-bottom: 1px solid #eee9df;
    }

    .fee-quick-card:last-child {

        border-bottom: 0;
    }

    .fee-rules-layout {

        grid-template-columns: 1fr;
    }

    .fee-side-panel {

        position: relative;

        top: auto;

        max-width: 500px;
    }

    .default-grid {

        grid-template-columns: 1fr;
    }

}


@media(max-width: 600px) {

    .top-fee-hero-content {

        padding: 70px 0;
    }

    .top-fee-mini-title {

        font-size: 7px;

        letter-spacing: 2px;
    }

    .top-fee-hero h1 {

        font-size: 55px;
    }

    .top-fee-rules {

        padding: 75px 0;
    }

    .fee-heading {

        margin-bottom: 45px;
    }

    .fee-heading h2 {

        font-size: 37px;
    }

    .fee-timeline-item {

        grid-template-columns: 42px 1fr;

        column-gap: 15px;
    }

    .timeline-number {

        width: 42px;
        height: 42px;

        font-size: 9px;
    }

    .timeline-line {

        left: 20px;

        top: 42px;
    }

    .timeline-content {

        gap: 12px;
    }

    .timeline-icon {

        width: 38px;
        height: 38px;

        font-size: 13px;
    }

    .timeline-content h3 {

        font-size: 18px;
    }

    .timeline-content p {

        font-size: 10px;
    }

    .fee-side-panel {

        padding: 28px;
    }

    .fee-notice-box {

        flex-direction: column;

        align-items: flex-start;

        padding: 28px;
    }

    .notice-button {

        width: 100%;

        justify-content: center;
    }

}


/* =====================================================
   TOPTOPS SCHOOL
   FEE STRUCTURE PAGE
===================================================== */

.fee-page {
    width: 100%;
    background: #f8f9fc;
    overflow: hidden;
}


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

.fee-hero {
    position: relative;

    min-height: 300px;

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

    text-align: center;

    background:
url("images/fee_structure_bg-img.png")
center/cover no-repeat;
}


.fee-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(255,255,255,.15),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(255,255,255,.12),
            transparent 30%
        );
}


.fee-hero-content {
    position: relative;
    z-index: 2;

    color: #ffffff;
}


.fee-small-title {
    display: inline-block;

    margin-bottom: 12px;

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

    letter-spacing: 4px;

    opacity: .9;
}


.fee-hero h1 {
    margin: 0;

    font-size: clamp(45px, 6vw, 78px);

    font-weight: 900;

    letter-spacing: 2px;

    line-height: 1;
}


.fee-hero p {
    margin: 18px 0 0;

    font-size: 17px;

    letter-spacing: 1px;

    opacity: .95;
}


/* =====================================================
   MAIN SECTION
===================================================== */

.fee-section {
    padding: 75px 20px 90px;
}


.fee-container {
    max-width: 1050px;

    margin: auto;
}


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

.fee-heading {
    text-align: center;

    margin-bottom: 42px;
}


.fee-heading span {
    display: inline-block;

    margin-bottom: 8px;

    color: #e23d16;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;
}


.fee-heading h2 {
    margin: 0;

    color: #172033;

    font-size: 38px;

    font-weight: 800;
}


.fee-heading p {
    max-width: 650px;

    margin: 13px auto 0;

    color: #6d7480;

    font-size: 15px;

    line-height: 1.7;
}


/* =====================================================
   FEE STRUCTURE CARD
===================================================== */

.fee-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 30px;

    padding: 38px;

    background: #ffffff;

    border-radius: 22px;

    border: 1px solid #ececf0;

    box-shadow:
        0 18px 45px rgba(20,25,40,.09);

    overflow: hidden;

    transition: .3s ease;
}


.fee-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 6px;

    background:
        linear-gradient(
            180deg,
            #d99a00,
            #e44f00,
            #ed1717
        );
}


.fee-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 25px 55px rgba(20,25,40,.14);
}


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

.fee-icon {
    flex: 0 0 92px;

    width: 92px;
    height: 92px;

    display: flex;

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

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #fff2d1,
            #ffe1d7
        );

    color: #4a61ba;

    font-size: 39px;
}


/* =====================================================
   FEE CARD CONTENT
===================================================== */

.fee-card-content {
    flex: 1;
}


.fee-label {
    display: block;

    margin-bottom: 7px;

    color: #e24a19;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.fee-card h3 {
    margin: 0 0 10px;

    color: #182033;

    font-size: 25px;

    font-weight: 800;
}


.fee-card p {
    margin: 0 0 22px;

    color: #697180;

    font-size: 15px;

    line-height: 1.7;
}


/* =====================================================
   VIEW BUTTON
===================================================== */

.fee-view-btn {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 13px 22px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #a59c86,
            #6657a3,
            #726dbf
        );

    text-decoration: none;

    border-radius: 9px;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 8px 20px rgba(225,65,20,.22);

    transition: .3s ease;
}


.fee-view-btn:hover {
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(225,65,20,.32);
}


.fee-view-btn i {
    transition: .3s ease;
}


.fee-view-btn:hover i {
    transform: translateX(5px);
}


/* =====================================================
   INFORMATION GRID
===================================================== */

.fee-info-grid {
    display: grid;

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

    gap: 20px;

    margin-top: 25px;
}


.fee-info-box {
    display: flex;

    gap: 15px;

    padding: 25px 22px;

    background: #ffffff;

    border-radius: 16px;

    border: 1px solid #eeeeef;

    transition: .3s ease;
}


.fee-info-box:hover {
    transform: translateY(-4px);

    border-color: #f0c7a8;

    box-shadow:
        0 15px 30px rgba(20,25,40,.07);
}


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

.info-icon {
    flex: 0 0 45px;

    width: 45px;
    height: 45px;

    display: flex;

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

    border-radius: 12px;

    background: #fff3e9;

    color: #e54a1a;

    font-size: 19px;
}


.fee-info-box h4 {
    margin: 1px 0 7px;

    color: #202738;

    font-size: 16px;
}


.fee-info-box p {
    margin: 0;

    color: #747b87;

    font-size: 13px;

    line-height: 1.6;
}


/* =====================================================
   PARENT NOTICE
===================================================== */

.fee-notice {
    display: flex;

    align-items: flex-start;

    gap: 17px;

    margin-top: 25px;

    padding: 24px 27px;

    background:
        linear-gradient(
            135deg,
            #fff9ef,
            #fff5f1
        );

    border: 1px solid #f3dcc9;

    border-radius: 16px;
}


.notice-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    color: #e44718;

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


.fee-notice h4 {
    margin: 0 0 6px;

    color: #252b39;

    font-size: 16px;
}


.fee-notice p {
    margin: 0;

    color: #6d737e;

    font-size: 14px;

    line-height: 1.7;
}


/* =====================================================
   ANY DOUBT / CONTACT
===================================================== */

.fee-contact-box {
    position: relative;

    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 28px;

    padding: 32px 35px;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #171c2c 0%,
            #242b42 55%,
            #30384f 100%
        );

    overflow: hidden;

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


.fee-contact-box::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -80px;
    top: -110px;

    border-radius: 50%;

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


.fee-contact-box::after {
    content: "";

    position: absolute;

    width: 140px;
    height: 140px;

    left: 35%;
    bottom: -100px;

    border-radius: 50%;

    background: rgba(255,255,255,.035);
}


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

.fee-contact-icon {
    position: relative;

    z-index: 2;

    flex: 0 0 75px;

    width: 75px;
    height: 75px;

    display: flex;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #566a89,
           #7984d3
        );

    color: #ffffff;

    font-size: 30px;

    box-shadow:
        0 10px 25px rgba(224,76,20,.25);
}


/* =====================================================
   CONTACT CONTENT
===================================================== */

.fee-contact-content {
    position: relative;

    z-index: 2;

    flex: 1;
}


.fee-contact-content > span {
    display: block;

    margin-bottom: 5px;

    color: #ffb54a;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


.fee-contact-content h3 {
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 25px;

    font-weight: 800;
}


.fee-contact-content p {
    max-width: 720px;

    margin: 0;

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

    font-size: 14px;

    line-height: 1.7;
}


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

.fee-contact-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 20px;
}


.fee-contact-btn,
.fee-email-btn {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 11px 19px;

    border-radius: 8px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    transition: .3s ease;
}


.fee-contact-btn {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #7d7eaf,
            #8374bf
        );
}


.fee-email-btn {
    color: #ffffff;

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

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


.fee-contact-btn:hover,
.fee-email-btn:hover {
    color: #ffffff;

    transform: translateY(-3px);
}


.fee-contact-btn:hover {
    box-shadow:
        0 9px 20px rgba(229,67,18,.25);
}


.fee-email-btn:hover {
    background: rgba(255,255,255,.15);
}


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

@media (max-width: 800px) {

    .fee-hero {
        min-height: 240px;
    }


    .fee-hero h1 {
        font-size: 48px;
    }


    .fee-section {
        padding: 55px 15px 65px;
    }


    .fee-heading h2 {
        font-size: 30px;
    }


    .fee-card {
        padding: 28px 24px;
    }


    .fee-info-grid {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 600px) {

    .fee-hero {
        min-height: 210px;
    }


    .fee-small-title {
        font-size: 10px;

        letter-spacing: 2px;
    }


    .fee-hero h1 {
        font-size: 39px;
    }


    .fee-hero p {
        font-size: 14px;
    }


    .fee-card {
        flex-direction: column;

        align-items: flex-start;

        padding: 25px 20px;
    }


    .fee-icon {
        width: 70px;
        height: 70px;

        flex-basis: 70px;

        font-size: 28px;
    }


    .fee-card h3 {
        font-size: 21px;
    }


    .fee-notice {
        padding: 20px;
    }


    .fee-contact-box {
        flex-direction: column;

        align-items: flex-start;

        padding: 27px 22px;
    }


    .fee-contact-icon {
        width: 62px;
        height: 62px;

        flex-basis: 62px;

        font-size: 25px;
    }


    .fee-contact-content h3 {
        font-size: 21px;
    }


    .fee-contact-content p {
        font-size: 13px;
    }


    .fee-contact-actions {
        width: 100%;
    }


    .fee-contact-btn,
    .fee-email-btn {
        justify-content: center;
    }

}


/* =====================================================
   SMART CLASS PAGE
===================================================== */

.smart-page {
    font-family: "Poppins", Arial, sans-serif;
    background: #fff;
    color: #222;
}


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

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


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

.smart-hero {
    position: relative;
    min-height: 330px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background:
        url("images/smart_class_bg-img.png")
        center/cover no-repeat;
}

.smart-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(255,255,255,.14),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(255,255,255,.08),
            transparent 30%
        );
}

.smart-hero-content {
    position: relative;
    z-index: 2;

    width: min(1120px, 92%);
    margin: auto;

    color: #fff;
}

.smart-hero-content span {
    display: inline-block;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;

    margin-bottom: 10px;

    opacity: .9;
}

.smart-hero-content h1 {
    margin: 0;

    font-size: clamp(52px, 7vw, 88px);
    line-height: 1;

    font-weight: 900;
    letter-spacing: 2px;
}

.smart-hero-content p {
    margin: 18px 0 0;

    font-size: 18px;
    font-weight: 400;
}


/* =====================================================
   INTRO SECTION
===================================================== */

.smart-intro {
    padding: 90px 0;
    background: #fff;
}

.smart-container {
    display: flex;
    align-items: center;
    gap: 70px;
}

.smart-intro-content {
    flex: 1;
}

.smart-tag {
    display: inline-block;

    color: #ed5b00;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;

    margin-bottom: 12px;
}

.smart-intro-content h2 {
    margin: 0 0 20px;

    color: #222;
    font-size: 38px;
    line-height: 1.2;
}

.smart-intro-content h2::after {
    content: "";

    display: block;
    width: 65px;
    height: 4px;

    margin-top: 14px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #e5a000,
        #ed250d
    );
}

.smart-intro-content p {
    color: #666;

    font-size: 15px;
    line-height: 1.9;

    margin: 0 0 15px;
}


/* =====================================================
   HIGHLIGHT
===================================================== */

.smart-highlight {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 25px;
    padding: 17px 20px;

    border-radius: 12px;

    background: #fff8ef;
    border-left: 4px solid #ef6900;
}

.smart-highlight > i {
    width: 48px;
    height: 48px;

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

    border-radius: 12px;

    color: #fff;
    font-size: 20px;

    background: linear-gradient(
        135deg,
        #e8a000,
        #ed3c0d
    );
}

.smart-highlight strong {
    display: block;

    color: #333;
    font-size: 15px;
}

.smart-highlight small {
    display: block;

    margin-top: 3px;

    color: #777;
}


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

.smart-image-box {
    position: relative;

    flex: 0 0 48%;

    height: 390px;

    overflow: hidden;

    border-radius: 22px;

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

.smart-image-box::before {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 0;

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

    border-radius: 22px;

    pointer-events: none;
}

.smart-image-box img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .7s ease,
        filter .7s ease;
}


/* Image Hover */

.smart-image-box:hover img {
    transform: scale(1.08);

    filter:
        brightness(.72)
        saturate(1.15);
}


/* Image Overlay */

.smart-image-overlay {
    position: absolute;
    z-index: 3;

    inset: 0;

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

    gap: 12px;

    color: #fff;

    opacity: 0;


    transition: .45s ease;
}

.smart-image-box:hover .smart-image-overlay {
    opacity: 1;
}

.smart-image-icon {
    width: 65px;
    height: 65px;

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

    border-radius: 50%;

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

    color: #ed4b08;

    font-size: 20px;

    transform: translateY(20px);
    transition: .45s ease;
}

.smart-image-box:hover .smart-image-icon {
    transform: translateY(0);
}

.smart-image-overlay span {
    font-size: 18px;
    font-weight: 700;

    transform: translateY(20px);

    transition: .5s ease .05s;
}

.smart-image-box:hover .smart-image-overlay span {
    transform: translateY(0);
}


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

.smart-features {
    padding: 85px 0 95px;

    background: #f8f9fb;
}

.smart-features > .smart-container {
    display: block;
}

.smart-section-heading {
    text-align: center;

    max-width: 680px;

    margin: 0 auto 45px;
}

.smart-section-heading > span {
    color: #ed5b00;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.smart-section-heading h2 {
    margin: 10px 0 12px;

    font-size: 36px;
    color: #222;
}

.smart-section-heading p {
    margin: 0;

    color: #777;
    font-size: 15px;
}


/* Feature Grid */

.smart-feature-grid {
    display: grid;

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

    gap: 22px;
}


/* Cards */

.smart-feature-card {
    position: relative;

    min-height: 285px;

    padding: 32px 24px;

    text-align: center;

    background: #fff;

    border: 1px solid #e9e9e9;

    border-radius: 20px;

    overflow: hidden;

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

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

.smart-feature-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background: linear-gradient(
        90deg,
        #e6a000,
        #ed3a0d
    );

    transform: scaleX(0);

    transform-origin: left;

    transition: .4s ease;
}

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

    box-shadow:
        0 18px 40px rgba(0,0,0,.11);
}

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


/* Feature Icon */

.smart-feature-icon {
    width: 64px;
    height: 64px;

    margin: 0 auto 20px;

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

    border-radius: 17px;

    color: #fff;

    font-size: 25px;

    background: linear-gradient(
        135deg,
        #e7a000,
        #ef4209
    );

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

    transition: .4s ease;
}

.smart-feature-card:hover .smart-feature-icon {
    transform: rotate(-5deg) scale(1.08);
}

.smart-feature-card h3 {
    margin: 0 0 12px;

    font-size: 18px;
    color: #222;
}

.smart-feature-card p {
    margin: 0;

    color: #777;

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


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

.smart-bottom {
    padding: 60px 20px;

   background: linear-gradient(
    110deg,
    #071f49,
    #063b78,
    #07539a,
    #062e63
);
}

.smart-bottom-content {
    width: min(1000px, 92%);

    margin: auto;

    display: flex;
    align-items: center;
    gap: 25px;

    color: #fff;
}

.smart-bottom-icon {
    width: 70px;
    height: 70px;

    flex-shrink: 0;

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

    border-radius: 18px;

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

    font-size: 28px;
}

.smart-bottom-content span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.smart-bottom-content h2 {
    margin: 5px 0 8px;

    font-size: 28px;
}

.smart-bottom-content p {
    margin: 0;

    font-size: 14px;

    opacity: .9;
}


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

@media (max-width: 1000px) {

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

    .smart-container {
        gap: 40px;
    }

    .smart-image-box {
        flex-basis: 45%;
    }
}


@media (max-width: 768px) {

    .smart-hero {
        min-height: 270px;
    }

    .smart-hero-content h1 {
        font-size: 48px;
    }

    .smart-hero-content p {
        font-size: 15px;
    }

    .smart-intro {
        padding: 60px 0;
    }

    .smart-intro > .smart-container {
        flex-direction: column;
    }

    .smart-image-box {
        width: 100%;
        height: 330px;
        flex-basis: auto;
    }

    .smart-feature-grid {
        grid-template-columns: 1fr 1fr;
    }

    .smart-bottom-content {
        align-items: flex-start;
    }
}


@media (max-width: 550px) {

    .smart-feature-grid {
        grid-template-columns: 1fr;
    }

    .smart-hero-content h1 {
        font-size: 40px;
    }

    .smart-intro-content h2 {
        font-size: 30px;
    }

    .smart-image-box {
        height: 280px;
    }

    .smart-bottom-content {
        flex-direction: column;
    }
}

/* =====================================================
   MATHS LAB PAGE
   Unique classes only - avoids CSS overlap
===================================================== */

.maths-lab-page {
    background: #fff;
    overflow: hidden;
}

/* HERO */
.maths-lab-hero {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        url("images/maths_bg-img.png")
        center/cover no-repeat;
}

.maths-lab-hero-content {
    color: #fff;
    padding: 50px 20px;
}

.maths-lab-hero-content span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.maths-lab-hero-content h1 {
    margin: 0;
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 800;
    letter-spacing: 2px;
}

.maths-lab-hero-content p {
    margin: 12px 0 0;
    font-size: 18px;
}


/* CONTENT */
.maths-lab-content {
    padding: 75px 20px;
    background: #fff;
}

.maths-lab-container {
    max-width: 1180px;
    margin: auto;
}


/* INTRO */
.maths-lab-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}

.maths-lab-tag {
    color: #ed4d12;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.maths-lab-text h2 {
    margin: 12px 0 20px;
    font-size: 38px;
    line-height: 1.15;
    color: #222;
}

.maths-lab-text p {
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}


/* HIGHLIGHT */
.maths-lab-highlight {
    margin-top: 25px;
    padding: 18px;
    display: flex;
    gap: 15px;
    align-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff7e6, #fff);
    border-left: 4px solid #f15a00;
}

.maths-lab-highlight i {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
    background: linear-gradient(135deg, #e49b00, #ef4c13);
}

.maths-lab-highlight strong,
.maths-lab-highlight small {
    display: block;
}

.maths-lab-highlight strong {
    color: #222;
    margin-bottom: 4px;
}

.maths-lab-highlight small {
    color: #777;
    line-height: 1.5;
}


/* IMAGE */
.maths-lab-image {
    position: relative;
    height: 390px;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0,0,0,.14);
}

.maths-lab-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .6s ease;
}

.maths-lab-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 25px;
    opacity: 0;
    background: linear-gradient(
        transparent,
        rgba(0,0,0,.75)
    );
    transition: .4s ease;
}

.maths-lab-image-overlay span {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    transform: translateY(20px);
    transition: .4s ease;
}

.maths-lab-image:hover img {
    transform: scale(1.08);
}

.maths-lab-image:hover .maths-lab-image-overlay {
    opacity: 1;
}

.maths-lab-image:hover .maths-lab-image-overlay span {
    transform: translateY(0);
}


/* FEATURES */
.maths-lab-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 75px;
}

.maths-lab-feature-card {
    padding: 30px 22px;
    text-align: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0,0,0,.06);
    transition: .35s ease;
}

.maths-lab-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(0,0,0,.12);
}

.maths-lab-feature-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    font-size: 25px;
    background: linear-gradient(135deg, #e69d00, #ed4812);
}

.maths-lab-feature-card h3 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #222;
}

.maths-lab-feature-card p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


/* BOTTOM */
.maths-lab-bottom {
    margin-top: 65px;
    padding: 35px 40px;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 40px;
    align-items: center;
    border-radius: 18px;
    background: linear-gradient(120deg, #fff7e6, #fff);
    border: 1px solid #f5dfbd;
}

.maths-lab-bottom span {
    color: #ed4d12;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.maths-lab-bottom h2 {
    margin: 8px 0 0;
    color: #222;
    font-size: 28px;
}

.maths-lab-bottom p {
    margin: 0;
    color: #666;
    line-height: 1.8;
}


/* RESPONSIVE */
@media (max-width: 900px) {

    .maths-lab-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .maths-lab-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .maths-lab-bottom {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {

    .maths-lab-hero {
        min-height: 240px;
    }

    .maths-lab-content {
        padding: 50px 16px;
    }

    .maths-lab-text h2 {
        font-size: 30px;
    }

    .maths-lab-image {
        height: 280px;
    }

    .maths-lab-features {
        grid-template-columns: 1fr;
        margin-top: 50px;
    }

    .maths-lab-bottom {
        padding: 25px;
    }
}
/* =====================================================
   KINDERGARTEN CLASSROOM
   Unique classes only
===================================================== */

.kinder-page {
    background: #fff;
    overflow: hidden;
}


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

.kinder-hero {
    min-height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        url("images/kinder_bg-img.png")
        center/cover no-repeat;
}

.kinder-hero-content {
    color: #fff;
    padding: 50px 20px;
}

.kinder-hero-content span {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.kinder-hero-content h1 {
    margin: 0;
    font-size: clamp(42px, 6vw, 74px);
    line-height: .95;
    font-weight: 900;
    letter-spacing: 1px;
}

.kinder-hero-content p {
    margin: 18px 0 0;
    font-size: 18px;
}


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

.kinder-content {
    padding: 75px 20px;
}

.kinder-container {
    max-width: 1180px;
    margin: auto;
}


/* ================= INTRO ================= */

.kinder-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}

.kinder-tag {
    color: #ed4d12;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.kinder-text h2 {
    margin: 12px 0 20px;
    color: #222;
    font-size: 38px;
    line-height: 1.15;
}

.kinder-text p {
    margin-bottom: 15px;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}


/* ================= HIGHLIGHT ================= */

.kinder-highlight {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    padding: 18px;
    border-left: 4px solid #f15a00;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff7e6, #fff);
}

.kinder-highlight-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    font-size: 22px;
    background: linear-gradient(135deg, #e49b00, #ef4c13);
}

.kinder-highlight strong,
.kinder-highlight small {
    display: block;
}

.kinder-highlight strong {
    margin-bottom: 4px;
    color: #222;
}

.kinder-highlight small {
    color: #777;
    line-height: 1.5;
}


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

.kinder-image {
    position: relative;
    height: 400px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,.14);
}

.kinder-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .6s ease;
}

.kinder-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 25px;
    opacity: 0;
    background: linear-gradient(
        transparent,
        rgba(0,0,0,.72)
    );
    transition: .4s ease;
}

.kinder-image-overlay span {
    color: #fff;
    font-size: 23px;
    font-weight: 700;
    transform: translateY(20px);
    transition: .4s ease;
}

.kinder-image:hover img {
    transform: scale(1.08);
}

.kinder-image:hover .kinder-image-overlay {
    opacity: 1;
}

.kinder-image:hover .kinder-image-overlay span {
    transform: translateY(0);
}


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

.kinder-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 75px;
}

.kinder-card {
    padding: 30px 22px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,.06);
    transition: .35s ease;
}

.kinder-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(0,0,0,.12);
}

.kinder-card-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    font-size: 25px;
    background: linear-gradient(135deg, #e69d00, #ed4812);
    transition: .3s ease;
}

.kinder-card:hover .kinder-card-icon {
    transform: rotate(6deg) scale(1.08);
}

.kinder-card h3 {
    margin: 0 0 12px;
    color: #222;
    font-size: 18px;
}

.kinder-card p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


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

.kinder-bottom {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 65px;
    padding: 35px 40px;
    border: 1px solid #f5dfbd;
    border-radius: 18px;
    background: linear-gradient(120deg, #fff7e6, #fff);
}

.kinder-bottom-icon {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #fff;
    font-size: 27px;
    background: linear-gradient(135deg, #e69d00, #ed4812);
}

.kinder-bottom span {
    color: #ed4d12;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.kinder-bottom h2 {
    margin: 8px 0 8px;
    color: #222;
    font-size: 28px;
}

.kinder-bottom p {
    margin: 0;
    color: #666;
    line-height: 1.8;
}


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

@media (max-width: 900px) {

    .kinder-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

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

@media (max-width: 600px) {

    .kinder-hero {
        min-height: 250px;
    }

    .kinder-content {
        padding: 50px 16px;
    }

    .kinder-text h2 {
        font-size: 30px;
    }

    .kinder-image {
        height: 280px;
    }

    .kinder-features {
        grid-template-columns: 1fr;
        margin-top: 50px;
    }

    .kinder-bottom {
        padding: 25px;
        align-items: flex-start;
    }

    .kinder-bottom h2 {
        font-size: 23px;
    }
}
/* ================= DIFFERENT ICON STYLES ================= */

.kinder-card-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    font-size: 25px;
    color: #fff;
    transition: .35s ease;
}

/* 1. Creative Activities */
.kinder-card:nth-child(1) .kinder-card-icon {
    background: linear-gradient(135deg, #7b2cbf, #e83e8c);
    box-shadow: 0 8px 18px rgba(123, 44, 191, .20);
}

/* 2. Play Based Learning */
.kinder-card:nth-child(2) .kinder-card-icon {
    background: linear-gradient(135deg, #1976d2, #00a6ff);
    box-shadow: 0 8px 18px rgba(25, 118, 210, .20);
}

/* 3. Social Development */
.kinder-card:nth-child(3) .kinder-card-icon {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    box-shadow: 0 8px 18px rgba(17, 153, 142, .20);
}

/* 4. Growing Confidence */
.kinder-card:nth-child(4) .kinder-card-icon {
    background: linear-gradient(135deg, #f39c12, #f1c40f);
    box-shadow: 0 8px 18px rgba(243, 156, 18, .20);
}


/* Hover */
.kinder-card:hover .kinder-card-icon {
    transform: translateY(-5px) scale(1.08);
}

/* Individual hover effect */
.kinder-card:nth-child(1):hover .kinder-card-icon {
    box-shadow: 0 12px 25px rgba(123, 44, 191, .35);
}

.kinder-card:nth-child(2):hover .kinder-card-icon {
    box-shadow: 0 12px 25px rgba(25, 118, 210, .35);
}

.kinder-card:nth-child(3):hover .kinder-card-icon {
    box-shadow: 0 12px 25px rgba(17, 153, 142, .35);
}

.kinder-card:nth-child(4):hover .kinder-card-icon {
    box-shadow: 0 12px 25px rgba(243, 156, 18, .35);
}
/* =====================================================
   MATHS LAB - ICON COLORS ONLY
   Layout / Size / Spacing unchanged
===================================================== */

/* Practical Learning - Blue */
.maths-lab-feature-card:nth-child(1) .maths-lab-feature-icon {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
}

/* Logical Thinking - Purple */
.maths-lab-feature-card:nth-child(2) .maths-lab-feature-icon {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

/* Concept Clarity - Green / Teal */
.maths-lab-feature-card:nth-child(3) .maths-lab-feature-icon {
    background: linear-gradient(135deg, #059669, #14b8a6);
}

/* Creative Exploration - Yellow / Orange */
.maths-lab-feature-card:nth-child(4) .maths-lab-feature-icon {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}
/* =====================================================
   SMART CLASS - INDIVIDUAL ICON COLORS
===================================================== */

/* 1. Interactive Teaching - Blue */
.smart-feature-card:nth-child(1) .smart-feature-icon {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: 0 8px 18px rgba(37, 99, 235, .25);
}

/* 2. Visual Learning - Purple */
.smart-feature-card:nth-child(2) .smart-feature-icon {
    background: linear-gradient(135deg, #a855f7, #7e22ce);
    box-shadow: 0 8px 18px rgba(126, 34, 206, .25);
}

/* 3. Active Participation - Green */
.smart-feature-card:nth-child(3) .smart-feature-icon {
    background: linear-gradient(135deg, #22c55e, #15803d);
    box-shadow: 0 8px 18px rgba(21, 128, 61, .25);
}

/* 4. Better Understanding - Orange */
.smart-feature-card:nth-child(4) .smart-feature-icon {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    box-shadow: 0 8px 18px rgba(234, 88, 12, .25);
}

/*swimming pool*/
/* =====================================================
   SWIMMING POOL PAGE
   Unique Classes - No CSS Overlap
===================================================== */

.swimming-page {
    background: #fff;
    font-family: "Poppins", Arial, sans-serif;
    color: #222;
    overflow: hidden;
}

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


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

.swimming-hero {
    min-height: 330px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        url("images/swimming_bg-img.png")
        center/cover no-repeat;
}

.swimming-hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -130px;
    top: -180px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.swimming-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(255,255,255,.14),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(255,255,255,.08),
            transparent 30%
        );
}

.swimming-hero-content {
    position: relative;
    z-index: 2;
    width: min(1120px, 92%);
    margin: auto;
    color: #fff;
}

.swimming-hero-content span {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
}

.swimming-hero-content h1 {
    margin: 0;
    font-size: clamp(48px, 7vw, 82px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: 2px;
}

.swimming-hero-content p {
    margin: 18px 0 0;
    font-size: 18px;
}


/* =====================================================
   INTRO
===================================================== */

.swimming-intro {
    padding: 85px 0;
    background: #fff;
}

.swimming-intro .swimming-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}

.swimming-intro-text {
    max-width: 540px;
}

.swimming-tag {
    display: inline-block;
    margin-bottom: 12px;
    color: #008fa3;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.swimming-intro-text h2 {
    margin: 0 0 20px;
    color: #222;
    font-size: 38px;
    line-height: 1.2;
}

.swimming-intro-text h2::after {
    content: "";
    display: block;
    width: 65px;
    height: 4px;
    margin-top: 14px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #00a8c6,
        #0077b6
    );
}

.swimming-intro-text p {
    margin: 0 0 15px;
    color: #666;
    font-size: 15px;
    line-height: 1.9;
}


/* =====================================================
   HIGHLIGHT
===================================================== */

.swimming-highlight {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    padding: 17px 20px;
    border-radius: 14px;
    background: #eefaff;
    border-left: 4px solid #009fc1;
}

.swimming-highlight-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #fff;
    font-size: 20px;
    background: linear-gradient(
        135deg,
        #00a8c6,
        #006fa6
    );
}

.swimming-highlight strong {
    display: block;
    margin-bottom: 3px;
    color: #222;
    font-size: 15px;
}

.swimming-highlight small {
    color: #777;
    line-height: 1.5;
}


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

.swimming-image {
    position: relative;
    height: 390px;
    overflow: hidden;
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(0,0,0,.14);
}

.swimming-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .7s ease, filter .7s ease;
}

.swimming-image:hover img {
    transform: scale(1.08);
    filter: brightness(.72) saturate(1.15);
}

.swimming-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    opacity: 0;
    color: #fff;
    transition: .45s ease;
}

.swimming-image:hover .swimming-image-overlay {
    opacity: 1;
}

.swimming-image-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #008eaa;
    font-size: 22px;
    transform: translateY(20px);
    transition: .45s ease;
}

.swimming-image:hover .swimming-image-icon {
    transform: translateY(0);
}

.swimming-image-overlay span {
    font-size: 19px;
    font-weight: 700;
    transform: translateY(20px);
    transition: .5s ease .05s;
}

.swimming-image:hover .swimming-image-overlay span {
    transform: translateY(0);
}


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

.swimming-features {
    padding: 85px 0 95px;
    background: #f7fafc;
}

.swimming-heading {
    max-width: 680px;
    margin: 0 auto 45px;
    text-align: center;
}

.swimming-heading > span {
    color: #008fa8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
}

.swimming-heading h2 {
    margin: 10px 0 12px;
    color: #222;
    font-size: 36px;
}

.swimming-heading p {
    margin: 0;
    color: #777;
    font-size: 15px;
    line-height: 1.7;
}


/* GRID */

.swimming-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}


/* CARD */

.swimming-feature-card {
    position: relative;
    min-height: 275px;
    padding: 32px 22px;
    text-align: center;
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,.04);
    transition: .35s ease;
}

.swimming-feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    transform: scaleX(0);
    transform-origin: left;
    transition: .4s ease;
}

.swimming-feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 40px rgba(0,0,0,.11);
}

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


/* ICON */

.swimming-feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: #fff;
    font-size: 25px;
    transition: .4s ease;
}

.swimming-feature-card:hover .swimming-feature-icon {
    transform: rotate(-5deg) scale(1.08);
}


/* INDIVIDUAL COLORS */

.swimming-blue {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 8px 18px rgba(220,38,38,.22);
}

.swimming-cyan {
    background: linear-gradient(135deg, #06b6d4, #0284c7);
    box-shadow: 0 8px 18px rgba(2,132,199,.22);
}

.swimming-green {
    background: linear-gradient(135deg, #22c55e, #15803d);
    box-shadow: 0 8px 18px rgba(21,128,61,.22);
}

.swimming-orange {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    box-shadow: 0 8px 18px rgba(234,88,12,.22);
}


/* TOP LINES */

.swimming-feature-card:nth-child(1)::before {
    background: #ef4444;
}

.swimming-feature-card:nth-child(2)::before {
    background: #06b6d4;
}

.swimming-feature-card:nth-child(3)::before {
    background: #22c55e;
}

.swimming-feature-card:nth-child(4)::before {
    background: #f59e0b;
}


.swimming-feature-card h3 {
    margin: 0 0 12px;
    color: #222;
    font-size: 18px;
}

.swimming-feature-card p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.8;
}


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

.swimming-bottom {
    padding: 60px 20px;
    background: linear-gradient(
    110deg,
    #071f49,
    #063b78,
    #07539a,
    #062e63
);
}

.swimming-bottom-content {
    width: min(1000px, 92%);
    margin: auto;
    display: flex;
    align-items: center;
    gap: 25px;
    color: #fff;
}

.swimming-bottom-icon {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255,255,255,.18);
    font-size: 28px;
}

.swimming-bottom-content span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.swimming-bottom-content h2 {
    margin: 5px 0 8px;
    font-size: 28px;
}

.swimming-bottom-content p {
    margin: 0;
    font-size: 14px;
    opacity: .9;
}


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

@media (max-width: 1000px) {

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

    .swimming-intro .swimming-container {
        gap: 40px;
    }
}


@media (max-width: 768px) {

    .swimming-hero {
        min-height: 270px;
    }

    .swimming-hero-content h1 {
        font-size: 48px;
    }

    .swimming-intro {
        padding: 60px 0;
    }

    .swimming-intro .swimming-container {
        grid-template-columns: 1fr;
    }

    .swimming-image {
        height: 330px;
    }
}


@media (max-width: 550px) {

    .swimming-feature-grid {
        grid-template-columns: 1fr;
    }

    .swimming-hero-content h1 {
        font-size: 40px;
    }

    .swimming-intro-text h2 {
        font-size: 30px;
    }

    .swimming-image {
        height: 280px;
    }

    .swimming-bottom-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =====================================================
   SCIENCE LAB PAGE
   Unique classes only - NO CSS overlap
===================================================== */

.science-lab-page {
    background: #fff;
    overflow: hidden;
}


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

.science-lab-hero {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        url("images/science_lab_bg-img.png")
        center/cover no-repeat;
   
}

.science-lab-hero-content {
    color: #fff;
    padding: 50px 20px;
}

.science-lab-hero-content span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.science-lab-hero-content h1 {
    margin: 0;
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 800;
    letter-spacing: 2px;
}

.science-lab-hero-content p {
    margin: 12px 0 0;
    font-size: 18px;
}


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

.science-lab-content {
    padding: 75px 20px;
    background: #fff;
}

.science-lab-container {
    max-width: 1180px;
    margin: auto;
}


/* =====================================================
   INTRO
===================================================== */

.science-lab-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}

.science-lab-tag {
    color: #ed4d12;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.science-lab-text h2 {
    margin: 12px 0 20px;
    font-size: 38px;
    line-height: 1.15;
    color: #222;
}

.science-lab-text p {
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}


/* =====================================================
   HIGHLIGHT
===================================================== */

.science-lab-highlight {
    margin-top: 25px;
    padding: 18px;
    display: flex;
    gap: 15px;
    align-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff7e6, #fff);
    border-left: 4px solid #f15a00;
}

.science-lab-highlight i {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
    background: linear-gradient(135deg, #ffb300, #ff6f00);
}

.science-lab-highlight strong,
.science-lab-highlight small {
    display: block;
}

.science-lab-highlight strong {
    color: #222;
    margin-bottom: 4px;
}

.science-lab-highlight small {
    color: #777;
    line-height: 1.5;
}


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

.science-lab-image {
    position: relative;
    height: 390px;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .14);
}

.science-lab-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .6s ease;
}

.science-lab-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 25px;
    opacity: 0;
    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, .75)
    );
    transition: .4s ease;
}

.science-lab-image-overlay span {
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    transform: translateY(20px);
    transition: .4s ease;
}

.science-lab-image:hover img {
    transform: scale(1.08);
}

.science-lab-image:hover .science-lab-image-overlay {
    opacity: 1;
}

.science-lab-image:hover .science-lab-image-overlay span {
    transform: translateY(0);
}


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

.science-lab-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 75px;
}

.science-lab-feature-card {
    padding: 30px 22px;
    text-align: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .06);
    transition: transform .35s ease,
                box-shadow .35s ease,
                border-color .35s ease;
}

.science-lab-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .12);
}


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

.science-lab-feature-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;

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

    border-radius: 16px;

    color: #fff;
    font-size: 25px;

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

.science-lab-feature-card:hover .science-lab-feature-icon {
    transform: scale(1.08) rotate(-2deg);
}


/* =====================================================
   DIFFERENT ICON COLOURS
===================================================== */

/* 1 - Flask */
.science-lab-feature-card:nth-child(1)
.science-lab-feature-icon {
    background: linear-gradient(
        135deg,
        #ffb300,
        #ff6f00
    );
}


/* 2 - Microscope */
.science-lab-feature-card:nth-child(2)
.science-lab-feature-icon {
    background: linear-gradient(
        135deg,
        #00a8ff,
        #0066ff
    );
}


/* 3 - Lightbulb */
.science-lab-feature-card:nth-child(3)
.science-lab-feature-icon {
    background: linear-gradient(
        135deg,
        #9b59b6,
        #6c2bd9
    );
}


/* 4 - Search */
.science-lab-feature-card:nth-child(4)
.science-lab-feature-icon {
    background: linear-gradient(
        135deg,
        #00b894,
        #008f72
    );
}


/* =====================================================
   INDIVIDUAL ICON HOVER
===================================================== */

.science-lab-feature-card:nth-child(1):hover
.science-lab-feature-icon {
    box-shadow: 0 12px 28px rgba(255, 111, 0, .30);
}

.science-lab-feature-card:nth-child(2):hover
.science-lab-feature-icon {
    box-shadow: 0 12px 28px rgba(0, 102, 255, .28);
}

.science-lab-feature-card:nth-child(3):hover
.science-lab-feature-icon {
    box-shadow: 0 12px 28px rgba(108, 43, 217, .28);
}

.science-lab-feature-card:nth-child(4):hover
.science-lab-feature-icon {
    box-shadow: 0 12px 28px rgba(0, 143, 114, .28);
}


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

.science-lab-feature-card h3 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #222;
}

.science-lab-feature-card p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


/* =====================================================
   BOTTOM SECTION
===================================================== */

.science-lab-bottom {
    margin-top: 65px;
    padding: 35px 40px;

    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 40px;
    align-items: center;

    border-radius: 18px;

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

    border: 1px solid #f5dfbd;
}

.science-lab-bottom span {
    color: #ed4d12;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.science-lab-bottom h2 {
    margin: 8px 0 0;
    color: #222;
    font-size: 28px;
}

.science-lab-bottom p {
    margin: 0;
    color: #666;
    line-height: 1.8;
}


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

@media (max-width: 900px) {

    .science-lab-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .science-lab-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .science-lab-bottom {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .science-lab-hero {
        min-height: 240px;
    }

    .science-lab-content {
        padding: 50px 16px;
    }

    .science-lab-text h2 {
        font-size: 30px;
    }

    .science-lab-image {
        height: 280px;
    }

    .science-lab-features {
        grid-template-columns: 1fr;
        margin-top: 50px;
    }

    .science-lab-bottom {
        padding: 25px;
    }
}
/*language lab section start here */

/* =====================================================
   LANGUAGE LAB PAGE
   Unique classes - no CSS overlap
===================================================== */

.language-lab-page {
    background: #fff;
    overflow: hidden;
}


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

.language-lab-hero {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;

   background: url("images/languages_bg-img.png") center/cover no-repeat;
}

.language-lab-hero-content {
    color: #fff;
    padding: 50px 20px;
}

.language-lab-hero-content span {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.language-lab-hero-content h1 {
    margin: 0;
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 800;
    letter-spacing: 2px;
}

.language-lab-hero-content p {
    margin: 12px 0 0;
    font-size: 18px;
}


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

.language-lab-content {
    padding: 75px 20px;
    background: #fff;
}

.language-lab-container {
    max-width: 1180px;
    margin: auto;
}


/* ================= INTRO ================= */

.language-lab-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}

.language-lab-tag {
    color: #ed4d12;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.language-lab-text h2 {
    margin: 12px 0 20px;
    font-size: 38px;
    line-height: 1.15;
    color: #222;
}

.language-lab-text p {
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}


/* ================= HIGHLIGHT ================= */

.language-lab-highlight {
    margin-top: 25px;
    padding: 18px;

    display: flex;
    gap: 15px;
    align-items: center;

    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #fff7e6,
        #fff
    );

    border-left: 4px solid #f15a00;
}

.language-lab-highlight i {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

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

    border-radius: 12px;

    color: #fff;
    font-size: 21px;

    background: linear-gradient(
        135deg,
        #e49b00,
        #ef4c13
    );
}

.language-lab-highlight strong,
.language-lab-highlight small {
    display: block;
}

.language-lab-highlight strong {
    color: #222;
    margin-bottom: 4px;
}

.language-lab-highlight small {
    color: #777;
    line-height: 1.5;
}


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

.language-lab-image {
    position: relative;
    height: 390px;
    overflow: hidden;

    border-radius: 18px;

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

.language-lab-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.language-lab-image-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 25px;

    opacity: 0;

    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, .75)
    );

    transition: .4s ease;
}

.language-lab-image-overlay span {
    color: #fff;
    font-size: 22px;
    font-weight: 700;

    transform: translateY(20px);

    transition: .4s ease;
}

.language-lab-image:hover img {
    transform: scale(1.08);
}

.language-lab-image:hover .language-lab-image-overlay {
    opacity: 1;
}

.language-lab-image:hover .language-lab-image-overlay span {
    transform: translateY(0);
}


/* ================= FEATURE CARDS ================= */

.language-lab-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;

    margin-top: 75px;
}

.language-lab-feature-card {
    padding: 30px 22px;

    text-align: center;

    background: #fff;

    border: 1px solid #eee;
    border-radius: 18px;

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

    transition: .35s ease;
}

.language-lab-feature-card:hover {
    transform: translateY(-8px);

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


/* ================= ICONS ================= */

.language-lab-feature-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 18px;

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

    border-radius: 16px;

    color: #fff;
    font-size: 25px;

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

    transition: .35s ease;
}


/* Headphones / Globe */
.language-icon-orange {
    background: linear-gradient(
        135deg,
        #e99a00,
        #f45112
    );
}


/* Microphone */
.language-icon-red {
    background: linear-gradient(
        135deg,
        #ef5b12,
        #e52316
    );
}


/* Communication */
.language-icon-gold {
    background: linear-gradient(
        135deg,
        #d99500,
        #ef6810
    );
}

.language-lab-feature-card:hover
.language-lab-feature-icon {
    transform: scale(1.08) rotate(2deg);
}


.language-lab-feature-card h3 {
    margin: 0 0 12px;

    font-size: 18px;
    color: #222;
}

.language-lab-feature-card p {
    margin: 0;

    color: #777;

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


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

.language-lab-bottom {
    margin-top: 65px;
    padding: 35px 40px;

    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 40px;
    align-items: center;

    border-radius: 18px;

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

    border: 1px solid #f5dfbd;
}

.language-lab-bottom span {
    color: #ed4d12;

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

    letter-spacing: 2px;
}

.language-lab-bottom h2 {
    margin: 8px 0 0;

    color: #222;
    font-size: 28px;
}

.language-lab-bottom p {
    margin: 0;

    color: #666;
    line-height: 1.8;
}


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

@media (max-width: 900px) {

    .language-lab-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .language-lab-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .language-lab-bottom {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .language-lab-hero {
        min-height: 240px;
    }

    .language-lab-content {
        padding: 50px 16px;
    }

    .language-lab-text h2 {
        font-size: 30px;
    }

    .language-lab-image {
        height: 280px;
    }

    .language-lab-features {
        grid-template-columns: 1fr;
        margin-top: 50px;
    }

    .language-lab-bottom {
        padding: 25px;
    }
}

/*library section start here*/

/* =====================================================
   LIBRARY PAGE
   Unique classes only - no CSS overlap
===================================================== */

.library-page {
    background: #fff;
    overflow: hidden;
}


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

.library-hero {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

   background: url("images/library_bg-img.png") center/cover no-repeat;

    position: relative;
}

.library-hero-content {
    color: #fff;
    padding: 50px 20px;
}

.library-hero-tag {
    display: block;
    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.library-hero-content h1 {
    margin: 0;

    font-size: clamp(45px, 6vw, 78px);
    line-height: 1;
    font-weight: 800;
    letter-spacing: 2px;
}

.library-hero-content p {
    margin: 18px 0 0;

    font-size: 17px;
    opacity: .95;
}


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

.library-content {
    padding: 75px 20px;
    background: #fff;
}

.library-container {
    max-width: 1180px;
    margin: auto;
}


/* =====================================================
   INTRO
===================================================== */

.library-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}

.library-section-tag {
    color: #ed4d12;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.library-intro-text h2 {
    margin: 12px 0 20px;

    color: #222;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 700;
}

.library-intro-text p {
    margin: 0 0 15px;

    color: #666;
    font-size: 16px;
    line-height: 1.8;
}


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

.library-image {
    height: 370px;

    position: relative;
    overflow: hidden;

    border-radius: 18px;

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

.library-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.library-image-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 25px;

    opacity: 0;

    background: linear-gradient(
        transparent,
        rgba(0,0,0,.78)
    );

    transition: .4s ease;
}

.library-image-overlay span {
    color: #fff;

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

    transform: translateY(20px);

    transition: .4s ease;
}

.library-image-overlay i {
    margin-right: 8px;
}

.library-image:hover img {
    transform: scale(1.08);
}

.library-image:hover .library-image-overlay {
    opacity: 1;
}

.library-image:hover .library-image-overlay span {
    transform: translateY(0);
}


/* =====================================================
   FEATURE CARDS
===================================================== */

.library-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;

    margin-top: 75px;
}

.library-feature-card {
    min-height: 265px;

    padding: 30px 22px;

    position: relative;
    overflow: hidden;

    text-align: center;

    background: #fff;

    border: 1px solid #e9e9e9;
    border-radius: 18px;

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

    transition: all .35s ease;
}

.library-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(0,0,0,.12);
}


/* =====================================================
   TOP HOVER LINE
===================================================== */

.library-feature-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: linear-gradient(
        90deg,
        #e69b00,
        #ed3d12
    );

    transition: width .35s ease;
}

.library-feature-card:hover::before {
    width: 100%;
}


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

.library-feature-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 18px;

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

    border-radius: 15px;

    color: #fff;
    font-size: 25px;

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

    transition: all .35s ease;
}


/* =====================================================
   ICON COLORS - ACCORDING TO SUBJECT / MEANING
===================================================== */

/* 1. Wide Collection - Book */
.library-feature-card:nth-child(1)
.library-feature-icon {
    background: linear-gradient(
        135deg,
        #f6b000,
        #ed6500
    );

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


/* 2. Reading Habit - Open Book */
.library-feature-card:nth-child(2)
.library-feature-icon {
    background: linear-gradient(
        135deg,
        #f28c00,
        #e83e16
    );

    box-shadow:
        0 10px 22px rgba(232,62,22,.25);
}


/* 3. Knowledge Building - Bulb */
.library-feature-card:nth-child(3)
.library-feature-icon {
    background: linear-gradient(
        135deg,
        #ffc107,
        #f57c00
    );

    box-shadow:
        0 10px 22px rgba(245,124,0,.25);
}


/* 4. Discover & Learn - Search */
.library-feature-card:nth-child(4)
.library-feature-icon {
    background: linear-gradient(
        135deg,
        #1597d3,
        #006fc9
    );

    box-shadow:
        0 10px 22px rgba(0,111,201,.22);
}


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

.library-feature-card:hover
.library-feature-icon {
    transform: translateY(-4px) scale(1.06);
}


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

.library-feature-card h3 {
    margin: 0 0 12px;

    color: #171717;

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

    line-height: 1.3;
}

.library-feature-card p {
    margin: 0;

    color: #777;

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


/* =====================================================
   BOTTOM SECTION
===================================================== */

.library-bottom {
    margin-top: 65px;

    padding: 32px 38px;

    display: flex;
    align-items: center;

    gap: 22px;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #fff8e8,
        #fff
    );

    border: 1px solid #f3dfbf;
}

.library-bottom-icon {
    width: 60px;
    height: 60px;

    flex-shrink: 0;

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

    border-radius: 15px;

    color: #fff;
    font-size: 24px;

    background: linear-gradient(
        135deg,
        #e69b00,
        #ed4812
    );

    box-shadow:
        0 10px 20px rgba(239,75,0,.20);
}

.library-bottom-text span {
    color: #ed4d12;

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

    letter-spacing: 2px;
}

.library-bottom-text h2 {
    margin: 7px 0 6px;

    color: #222;

    font-size: 25px;
}

.library-bottom-text p {
    margin: 0;

    color: #666;

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


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

@media (max-width: 1000px) {

    .library-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

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


@media (max-width: 600px) {

    .library-hero {
        min-height: 240px;
    }

    .library-content {
        padding: 50px 16px;
    }

    .library-intro-text h2 {
        font-size: 30px;
    }

    .library-image {
        height: 280px;
    }

    .library-features {
        grid-template-columns: 1fr;
        gap: 18px;

        margin-top: 50px;
    }

    .library-feature-card {
        min-height: auto;
        padding: 28px 20px;
    }

    .library-bottom {
        padding: 25px;
        align-items: flex-start;
    }

    .library-bottom-text h2 {
        font-size: 21px;
    }
}

/* computer lab*/

/* =====================================================
   COMPUTER LAB PAGE
   Unique classes only - no CSS overlap
===================================================== */

.computer-lab-page {
    background: #fff;
    overflow: hidden;
}


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

.computer-lab-hero {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

   background: url("images/computer_lab_bg-img.png") center/cover no-repeat;

    position: relative;
}

.computer-lab-hero-content {
    color: #fff;
    padding: 50px 20px;
}

.computer-lab-hero-content span {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 12px;
}

.computer-lab-hero-content h1 {
    margin: 0;
    font-size: clamp(42px, 6vw, 76px);
    font-weight: 800;
    letter-spacing: 2px;
}

.computer-lab-hero-content p {
    margin: 12px 0 0;
    font-size: 18px;
}


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

.computer-lab-section {
    padding: 75px 20px;
    background: #fff;
}

.computer-lab-container {
    max-width: 1180px;
    margin: auto;
}


/* ================= INTRO ================= */

.computer-lab-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}

.computer-lab-tag {
    color: #0284c7;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.computer-lab-text h2 {
    margin: 12px 0 20px;
    font-size: 38px;
    line-height: 1.15;
    color: #172033;
}

.computer-lab-text p {
    color: #64748b;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}


/* ================= HIGHLIGHT ================= */

.computer-lab-highlight {
    margin-top: 25px;
    padding: 18px;

    display: flex;
    gap: 15px;
    align-items: center;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #eff6ff,
        #ecfeff
    );

    border-left: 4px solid #0284c7;
}

.computer-lab-highlight i {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

    border-radius: 12px;

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

    color: #fff;
    font-size: 21px;

    background: linear-gradient(
        135deg,
        #0369a1,
        #06b6d4
    );
}

.computer-lab-highlight strong,
.computer-lab-highlight small {
    display: block;
}

.computer-lab-highlight strong {
    color: #172033;
    margin-bottom: 4px;
}

.computer-lab-highlight small {
    color: #64748b;
    line-height: 1.5;
}


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

.computer-lab-image {
    position: relative;
    height: 390px;

    overflow: hidden;
    border-radius: 18px;

    box-shadow: 0 15px 40px rgba(15, 23, 42, .15);
}

.computer-lab-image img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.computer-lab-image-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 25px;

    opacity: 0;

    background: linear-gradient(
        transparent,
        rgba(3, 105, 161, .85)
    );

    transition: .4s ease;
}

.computer-lab-image-overlay span {
    color: #fff;
    font-size: 22px;
    font-weight: 700;

    transform: translateY(20px);
    transition: .4s ease;
}

.computer-lab-image:hover img {
    transform: scale(1.08);
}

.computer-lab-image:hover .computer-lab-image-overlay {
    opacity: 1;
}

.computer-lab-image:hover .computer-lab-image-overlay span {
    transform: translateY(0);
}


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

.computer-lab-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 22px;
    margin-top: 75px;
}

.computer-lab-feature-card {
    position: relative;

    padding: 30px 22px;
    text-align: center;

    background: #fff;

    border: 1px solid #e5e7eb;
    border-radius: 18px;

    box-shadow: 0 8px 25px rgba(15, 23, 42, .06);

    overflow: hidden;

    transition: .35s ease;
}

.computer-lab-feature-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;
}

.computer-lab-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(15, 23, 42, .13);
}


/* ================= DIFFERENT CARD COLOURS ================= */

.computer-card-blue::before {
    background: #2563eb;
}

.computer-card-cyan::before {
    background: #0891b2;
}

.computer-card-purple::before {
    background: #7c3aed;
}

.computer-card-indigo::before {
    background: #4f46e5;
}


/* ================= ICONS ================= */

.computer-lab-feature-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 18px;

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

    border-radius: 16px;

    color: #fff;
    font-size: 25px;

    transition: .35s ease;
}


/* Individual icon colours */

.computer-card-blue .computer-lab-feature-icon {
    background: linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );
}

.computer-card-cyan .computer-lab-feature-icon {
    background: linear-gradient(
        135deg,
        #0891b2,
        #06b6d4
    );
}

.computer-card-purple .computer-lab-feature-icon {
    background: linear-gradient(
        135deg,
        #7c3aed,
        #a855f7
    );
}

.computer-card-indigo .computer-lab-feature-icon {
    background: linear-gradient(
        135deg,
        #4f46e5,
        #6366f1
    );
}

.computer-lab-feature-card:hover
.computer-lab-feature-icon {
    transform: translateY(-4px) scale(1.05);
}

.computer-lab-feature-card h3 {
    margin: 0 0 12px;

    font-size: 18px;
    color: #172033;
}

.computer-lab-feature-card p {
    margin: 0;

    color: #718096;
    font-size: 14px;
    line-height: 1.7;
}


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

.computer-lab-bottom {
    margin-top: 65px;

    padding: 35px 40px;

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

    gap: 40px;
    align-items: center;

    border-radius: 18px;

    background: linear-gradient(
        120deg,
        #eff6ff,
        #ecfeff
    );

    border: 1px solid #dbeafe;
}

.computer-lab-bottom span {
    color: #0284c7;

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

    letter-spacing: 2px;
}

.computer-lab-bottom h2 {
    margin: 8px 0 0;

    color: #172033;
    font-size: 28px;
}

.computer-lab-bottom p {
    margin: 0;

    color: #64748b;
    line-height: 1.8;
}


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

@media (max-width: 900px) {

    .computer-lab-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .computer-lab-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .computer-lab-bottom {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .computer-lab-hero {
        min-height: 240px;
    }

    .computer-lab-section {
        padding: 50px 16px;
    }

    .computer-lab-text h2 {
        font-size: 30px;
    }

    .computer-lab-image {
        height: 280px;
    }

    .computer-lab-features {
        grid-template-columns: 1fr;
        margin-top: 50px;
    }

    .computer-lab-bottom {
        padding: 25px;
    }
}


/* =====================================================
   GREEN HAVEN CAMPUS
   Unique classes - no CSS overlap
===================================================== */

.green-haven-page {
    background: #fff;
    overflow: hidden;
}


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

.green-haven-hero {
    min-height: 310px;

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

    text-align: center;

   background: url("images/green_heaven_bg-img.png") center/cover no-repeat;
}

.green-haven-hero-content {
    color: #fff;
    padding: 55px 20px;
}

.green-haven-hero-content span {
    display: block;

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

    letter-spacing: 3px;

    margin-bottom: 14px;
}

.green-haven-hero-content h1 {
    margin: 0;

    font-size: clamp(40px, 6vw, 76px);

    font-weight: 800;

    letter-spacing: 2px;
}

.green-haven-hero-content p {
    margin: 14px 0 0;

    font-size: 18px;
}


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

.green-haven-section {
    padding: 75px 20px;
    background: #fff;
}

.green-haven-container {
    max-width: 1180px;
    margin: auto;
}


/* ================= INTRO ================= */

.green-haven-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 65px;

    align-items: center;
}

.green-haven-tag {
    color: #15803d;

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

    letter-spacing: 2px;
}

.green-haven-text h2 {
    margin: 12px 0 20px;

    font-size: 38px;

    line-height: 1.15;

    color: #183b24;
}

.green-haven-text p {
    color: #64748b;

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 15px;
}


/* ================= HIGHLIGHT ================= */

.green-haven-highlight {
    margin-top: 25px;

    padding: 18px;

    display: flex;

    gap: 15px;

    align-items: center;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #f0fdf4,
        #f7fee7
    );

    border-left: 4px solid #16a34a;
}

.green-haven-highlight-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

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

    border-radius: 12px;

    color: #fff;

    font-size: 21px;

    background: linear-gradient(
        135deg,
        #15803d,
        #65a30d
    );
}

.green-haven-highlight strong,
.green-haven-highlight small {
    display: block;
}

.green-haven-highlight strong {
    color: #183b24;

    margin-bottom: 4px;
}

.green-haven-highlight small {
    color: #64748b;

    line-height: 1.5;
}


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

.green-haven-image {
    position: relative;

    height: 390px;

    overflow: hidden;

    border-radius: 20px;

    box-shadow:
        0 18px 45px rgba(22, 101, 52, .18);
}

.green-haven-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.green-haven-image-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 28px;

    opacity: 0;

    background: linear-gradient(
        transparent,
        rgba(20, 83, 45, .9)
    );

    transition: .4s ease;
}

.green-haven-image-overlay div {
    transform: translateY(25px);

    transition: .4s ease;
}

.green-haven-image-overlay span {
    display: block;

    color: #bbf7d0;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 5px;
}

.green-haven-image-overlay strong {
    color: #fff;

    font-size: 22px;
}

.green-haven-image:hover img {
    transform: scale(1.08);
}

.green-haven-image:hover .green-haven-image-overlay {
    opacity: 1;
}

.green-haven-image:hover .green-haven-image-overlay div {
    transform: translateY(0);
}


/* ================= FEATURE CARDS ================= */

.green-haven-features {
    display: grid;

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

    gap: 22px;

    margin-top: 75px;
}

.green-haven-card {
    position: relative;

    padding: 30px 22px;

    text-align: center;

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .06);

    overflow: hidden;

    transition: .35s ease;
}

.green-haven-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;
}

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

    box-shadow:
        0 18px 35px rgba(15, 23, 42, .12);
}


/* ================= DIFFERENT CARD COLOURS ================= */

.green-card-forest::before {
    background: #15803d;
}

.green-card-leaf::before {
    background: #65a30d;
}

.green-card-flower::before {
    background: #db2777;
}

.green-card-earth::before {
    background: #a16207;
}


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

.green-haven-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 18px;

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

    border-radius: 16px;

    color: #fff;

    font-size: 25px;

    transition: .35s ease;
}

.green-card-forest .green-haven-icon {
    background: linear-gradient(
        135deg,
        #166534,
        #22c55e
    );
}

.green-card-leaf .green-haven-icon {
    background: linear-gradient(
        135deg,
        #4d7c0f,
        #84cc16
    );
}

.green-card-flower .green-haven-icon {
    background: linear-gradient(
        135deg,
        #be185d,
        #ec4899
    );
}

.green-card-earth .green-haven-icon {
    background: linear-gradient(
        135deg,
        #92400e,
        #d97706
    );
}

.green-haven-card:hover .green-haven-icon {
    transform: translateY(-4px) scale(1.05);
}

.green-haven-card h3 {
    margin: 0 0 12px;

    font-size: 18px;

    color: #183b24;
}

.green-haven-card p {
    margin: 0;

    color: #718096;

    font-size: 14px;

    line-height: 1.7;
}


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

.green-haven-bottom {
    margin-top: 65px;

    padding: 35px 40px;

    display: grid;

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

    gap: 40px;

    align-items: center;

    border-radius: 18px;

    background: linear-gradient(
        120deg,
        #f0fdf4,
        #f7fee7
    );

    border: 1px solid #dcfce7;
}

.green-haven-bottom span {
    color: #15803d;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}

.green-haven-bottom h2 {
    margin: 8px 0 0;

    color: #183b24;

    font-size: 28px;
}

.green-haven-bottom p {
    margin: 0;

    color: #64748b;

    line-height: 1.8;
}


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

@media (max-width: 900px) {

    .green-haven-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .green-haven-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .green-haven-bottom {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .green-haven-hero {
        min-height: 250px;
    }

    .green-haven-section {
        padding: 50px 16px;
    }

    .green-haven-text h2 {
        font-size: 30px;
    }

    .green-haven-image {
        height: 280px;
    }

    .green-haven-features {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .green-haven-bottom {
        padding: 25px;
    }
}

/* =====================================================
   SCHOOL PLAYGROUND PAGE
   Unique classes - prevents CSS overlap
===================================================== */

.school-playground-page {
    background: #fff;
    overflow: hidden;
}


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

.school-playground-hero {
    min-height: 310px;

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

    text-align: center;

    background:
        url("images/play_ground_bg-img.png")
        center/cover no-repeat;
}

.school-playground-hero-content {
    color: #fff;
    padding: 55px 20px;
}

.school-playground-hero-content span {
    display: block;

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

    letter-spacing: 3px;

    margin-bottom: 14px;
}

.school-playground-hero-content h1 {
    margin: 0;

    font-size: clamp(42px, 6vw, 76px);

    font-weight: 800;

    letter-spacing: 2px;
}

.school-playground-hero-content p {
    margin: 14px 0 0;

    font-size: 18px;
}


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

.school-playground-section {
    padding: 75px 20px;
    background: #fff;
}

.school-playground-container {
    max-width: 1180px;
    margin: auto;
}


/* ================= INTRO ================= */

.school-playground-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 65px;

    align-items: center;
}

.school-playground-tag {
    color: #15803d;

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

    letter-spacing: 2px;
}

.school-playground-text h2 {
    margin: 12px 0 20px;

    font-size: 38px;

    line-height: 1.15;

    color: #172033;
}

.school-playground-text p {
    color: #64748b;

    font-size: 16px;

    line-height: 1.8;

    margin-bottom: 15px;
}


/* ================= HIGHLIGHT ================= */

.school-playground-highlight {
    margin-top: 25px;

    padding: 18px;

    display: flex;

    gap: 15px;

    align-items: center;

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #f0fdf4,
        #eff6ff
    );

    border-left: 4px solid #16a34a;
}

.school-playground-highlight-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

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

    border-radius: 12px;

    color: #fff;

    font-size: 21px;

    background: linear-gradient(
        135deg,
        #16a34a,
        #0284c7
    );
}

.school-playground-highlight strong,
.school-playground-highlight small {
    display: block;
}

.school-playground-highlight strong {
    color: #172033;

    margin-bottom: 4px;
}

.school-playground-highlight small {
    color: #64748b;

    line-height: 1.5;
}


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

.school-playground-image {
    position: relative;

    height: 390px;

    overflow: hidden;

    border-radius: 20px;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, .16);
}

.school-playground-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.school-playground-image-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 28px;

    opacity: 0;

    background: linear-gradient(
        transparent,
        rgba(22, 101, 52, .9)
    );

    transition: .4s ease;
}

.school-playground-image-overlay div {
    transform: translateY(25px);

    transition: .4s ease;
}

.school-playground-image-overlay span {
    display: block;

    color: #bbf7d0;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 5px;
}

.school-playground-image-overlay strong {
    color: #fff;

    font-size: 22px;
}

.school-playground-image:hover img {
    transform: scale(1.08);
}

.school-playground-image:hover .school-playground-image-overlay {
    opacity: 1;
}

.school-playground-image:hover
.school-playground-image-overlay div {
    transform: translateY(0);
}


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

.school-playground-features {
    display: grid;

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

    gap: 22px;

    margin-top: 75px;
}

.school-playground-card {
    position: relative;

    padding: 30px 22px;

    text-align: center;

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .06);

    overflow: hidden;

    transition: .35s ease;
}

.school-playground-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;
}

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

    box-shadow:
        0 18px 35px rgba(15, 23, 42, .13);
}


/* ================= CARD TOP COLOURS ================= */

.playground-card-green::before {
    background: #16a34a;
}

.playground-card-blue::before {
    background: #2563eb;
}

.playground-card-orange::before {
    background: #f97316;
}

.playground-card-purple::before {
    background: #7c3aed;
}


/* ================= ICONS ================= */

.school-playground-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 18px;

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

    border-radius: 16px;

    color: #fff;

    font-size: 25px;

    transition: .35s ease;
}


/* Each icon has its own colour */

.playground-card-green .school-playground-icon {
    background: linear-gradient(
        135deg,
        #15803d,
        #22c55e
    );
}

.playground-card-blue .school-playground-icon {
    background: linear-gradient(
        135deg,
        #1d4ed8,
        #3b82f6
    );
}

.playground-card-orange .school-playground-icon {
    background: linear-gradient(
        135deg,
        #ea580c,
        #fb923c
    );
}

.playground-card-purple .school-playground-icon {
    background: linear-gradient(
        135deg,
        #6d28d9,
        #a855f7
    );
}

.school-playground-card:hover
.school-playground-icon {
    transform: translateY(-4px) scale(1.05);
}

.school-playground-card h3 {
    margin: 0 0 12px;

    font-size: 18px;

    color: #172033;
}

.school-playground-card p {
    margin: 0;

    color: #718096;

    font-size: 14px;

    line-height: 1.7;
}


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

.school-playground-bottom {
    margin-top: 65px;

    padding: 35px 40px;

    display: grid;

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

    gap: 40px;

    align-items: center;

    border-radius: 18px;

    background: linear-gradient(
        120deg,
        #f0fdf4,
        #eff6ff
    );

    border: 1px solid #dcfce7;
}

.school-playground-bottom span {
    color: #15803d;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}

.school-playground-bottom h2 {
    margin: 8px 0 0;

    color: #172033;

    font-size: 28px;
}

.school-playground-bottom p {
    margin: 0;

    color: #64748b;

    line-height: 1.8;
}


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

@media (max-width: 900px) {

    .school-playground-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .school-playground-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .school-playground-bottom {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 600px) {

    .school-playground-hero {
        min-height: 250px;
    }

    .school-playground-section {
        padding: 50px 16px;
    }

    .school-playground-text h2 {
        font-size: 30px;
    }

    .school-playground-image {
        height: 280px;
    }

    .school-playground-features {
        grid-template-columns: 1fr;
        margin-top: 50px;
    }

    .school-playground-bottom {
        padding: 25px;
    }
}
/* =====================================================
   LITTLE EXPLORERS PARK
   Unique classes - No CSS overlap
===================================================== */

.explorer-park-page {
    background: #fff;
    overflow: hidden;
}


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

.explorer-park-hero {
    min-height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
   background: url("images/little_park_bg-img.png") center/cover no-repeat;
}

.explorer-park-hero-content {
    color: #fff;
    padding: 55px 20px;
}

.explorer-park-hero-content span {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
}

.explorer-park-hero-content h1 {
    margin: 0;
    font-size: clamp(38px, 6vw, 76px);
    font-weight: 800;
    letter-spacing: 1px;
}

.explorer-park-hero-content p {
    margin: 14px 0 0;
    font-size: 18px;
    font-weight: 500;
}


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

.explorer-park-section {
    padding: 75px 20px;
    background: #fff;
}

.explorer-park-container {
    max-width: 1180px;
    margin: auto;
}


/* ================= INTRO ================= */

.explorer-park-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
}

.explorer-park-tag {
    display: inline-block;
    color: #ed4d12;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.explorer-park-content h2 {
    margin: 12px 0 20px;
    color: #222;
    font-size: 42px;
    line-height: 1.15;
}

.explorer-park-content p {
    margin: 0 0 15px;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
}


/* ================= HIGHLIGHT ================= */

.explorer-park-highlight {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    padding: 18px;
    border-left: 4px solid #f15a00;
    border-radius: 12px;
    background: linear-gradient(
        135deg,
        #fff7e6,
        #fff
    );
}

.explorer-park-highlight i {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    font-size: 21px;
    background: linear-gradient(
        135deg,
        #e49b00,
        #ef4c13
    );
}

.explorer-park-highlight strong,
.explorer-park-highlight small {
    display: block;
}

.explorer-park-highlight strong {
    margin-bottom: 4px;
    color: #222;
}

.explorer-park-highlight small {
    color: #777;
    line-height: 1.5;
}


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

.explorer-park-image {
    position: relative;
    height: 390px;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .14);
}

.explorer-park-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .6s ease;
}

.explorer-park-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 25px;
    opacity: 0;
    background: linear-gradient(
        transparent,
        rgba(0, 0, 0, .78)
    );
    transition: .4s ease;
}

.explorer-park-image-overlay span {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    transform: translateY(20px);
    transition: .4s ease;
}

.explorer-park-image-overlay i {
    margin-right: 7px;
}

.explorer-park-image:hover img {
    transform: scale(1.08);
}

.explorer-park-image:hover .explorer-park-image-overlay {
    opacity: 1;
}

.explorer-park-image:hover .explorer-park-image-overlay span {
    transform: translateY(0);
}


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

.explorer-park-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 75px;
}

.explorer-park-card {
    padding: 30px 22px;
    text-align: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .06);
    transition: .35s ease;
}

.explorer-park-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .12);
}

.explorer-park-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    font-size: 25px;
    background: linear-gradient(
        135deg,
        #e69d00,
        #ed4812
    );
}

.explorer-park-card h3 {
    margin: 0 0 12px;
    color: #222;
    font-size: 18px;
}

.explorer-park-card p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


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

.explorer-park-bottom {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: center;
    margin-top: 65px;
    padding: 32px 38px;
    border: 1px solid #f5dfbd;
    border-radius: 18px;
    background: linear-gradient(
        120deg,
        #fff7e6,
        #fff
    );
}

.explorer-park-bottom-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #fff;
    font-size: 26px;
    background: linear-gradient(
        135deg,
        #e49b00,
        #ef4c13
    );
}

.explorer-park-bottom span {
    color: #ed4d12;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.explorer-park-bottom h2 {
    margin: 8px 0;
    color: #222;
    font-size: 28px;
}

.explorer-park-bottom p {
    margin: 0;
    color: #666;
    line-height: 1.7;
}


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

@media (max-width: 900px) {

    .explorer-park-intro {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .explorer-park-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .explorer-park-hero {
        min-height: 240px;
    }

    .explorer-park-section {
        padding: 50px 16px;
    }

    .explorer-park-content h2 {
        font-size: 31px;
    }

    .explorer-park-image {
        height: 280px;
    }

    .explorer-park-features {
        grid-template-columns: 1fr;
        margin-top: 50px;
    }

    .explorer-park-bottom {
        grid-template-columns: 1fr;
        padding: 25px;
        text-align: center;
    }

    .explorer-park-bottom-icon {
        margin: auto;
    }

    .explorer-park-bottom h2 {
        font-size: 23px;
    }
}

/*grand section start here*/
/* =====================================================
   GRAND AUDITORIUM PAGE
   Unique classes only - prevents CSS overlap
===================================================== */

.grand-auditorium-page {
    background: #fff;
    overflow: hidden;
}


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

.grand-auditorium-hero {
    min-height: 310px;

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

    text-align: center;

  background: url("images/grand_audotorium-img.png") center/cover no-repeat;
}

.grand-auditorium-hero-content {
    color: #fff;
    padding: 55px 20px;
}

.grand-auditorium-hero-content span {
    display: block;

    margin-bottom: 14px;

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

    letter-spacing: 3px;
}

.grand-auditorium-hero-content h1 {
    margin: 0;

    font-size: clamp(40px, 6vw, 76px);

    line-height: 1;

    font-weight: 800;

    letter-spacing: 2px;
}

.grand-auditorium-hero-content p {
    margin: 16px 0 0;

    font-size: 18px;
}


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

.grand-auditorium-section {
    padding: 75px 20px;

    background: #fff;
}

.grand-auditorium-container {
    max-width: 1180px;

    margin: auto;
}


/* ================= INTRO ================= */

.grand-auditorium-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 65px;

    align-items: center;
}

.grand-auditorium-tag {
    color: #b45309;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;
}

.grand-auditorium-text h2 {
    margin: 12px 0 20px;

    color: #262626;

    font-size: 40px;

    line-height: 1.15;
}

.grand-auditorium-text p {
    margin: 0 0 15px;

    color: #666;

    font-size: 16px;

    line-height: 1.8;
}


/* ================= HIGHLIGHT ================= */

.grand-auditorium-highlight {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 25px;

    padding: 18px;

    border-left: 4px solid #d97706;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        #fff7ed,
        #fffbeb
    );
}

.grand-auditorium-highlight-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 12px;

    color: #fff;

    font-size: 21px;

    background: linear-gradient(
        135deg,
        #b45309,
        #dc2626
    );
}

.grand-auditorium-highlight strong,
.grand-auditorium-highlight small {
    display: block;
}

.grand-auditorium-highlight strong {
    margin-bottom: 4px;

    color: #292524;
}

.grand-auditorium-highlight small {
    color: #78716c;

    line-height: 1.5;
}


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

.grand-auditorium-image {
    position: relative;

    height: 390px;

    overflow: hidden;

    border-radius: 20px;

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

.grand-auditorium-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.grand-auditorium-image-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 28px;

    opacity: 0;

    background: linear-gradient(
        transparent,
        rgba(69, 10, 10, .88)
    );

    transition: .4s ease;
}

.grand-auditorium-image-overlay div {
    transform: translateY(25px);

    transition: .4s ease;
}

.grand-auditorium-image-overlay span {
    display: block;

    margin-bottom: 5px;

    color: #fed7aa;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}

.grand-auditorium-image-overlay strong {
    color: #fff;

    font-size: 22px;
}

.grand-auditorium-image:hover img {
    transform: scale(1.08);
}

.grand-auditorium-image:hover
.grand-auditorium-image-overlay {
    opacity: 1;
}

.grand-auditorium-image:hover
.grand-auditorium-image-overlay div {
    transform: translateY(0);
}


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

.grand-auditorium-features {
    display: grid;

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

    gap: 22px;

    margin-top: 75px;
}

.grand-auditorium-card {
    position: relative;

    padding: 30px 22px;

    text-align: center;

    background: #fff;

    border: 1px solid #eee;

    border-radius: 18px;

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

    overflow: hidden;

    transition: .35s ease;
}

.grand-auditorium-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;
}

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

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


/* ================= CARD TOP COLOURS ================= */

.auditorium-card-gold::before {
    background: #d97706;
}

.auditorium-card-red::before {
    background: #dc2626;
}

.auditorium-card-blue::before {
    background: #2563eb;
}

.auditorium-card-purple::before {
    background: #7c3aed;
}


/* ================= ICONS ================= */

.grand-auditorium-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 18px;

    display: flex;

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

    border-radius: 16px;

    color: #fff;

    font-size: 25px;

    transition: .35s ease;
}

.auditorium-card-gold
.grand-auditorium-icon {
    background: linear-gradient(
        135deg,
        #b45309,
        #f59e0b
    );
}

.auditorium-card-red
.grand-auditorium-icon {
    background: linear-gradient(
        135deg,
        #b91c1c,
        #ef4444
    );
}

.auditorium-card-blue
.grand-auditorium-icon {
    background: linear-gradient(
        135deg,
        #1d4ed8,
        #3b82f6
    );
}

.auditorium-card-purple
.grand-auditorium-icon {
    background: linear-gradient(
        135deg,
        #6d28d9,
        #a855f7
    );
}

.grand-auditorium-card:hover
.grand-auditorium-icon {
    transform: translateY(-4px) scale(1.05);
}

.grand-auditorium-card h3 {
    margin: 0 0 12px;

    color: #292524;

    font-size: 18px;
}

.grand-auditorium-card p {
    margin: 0;

    color: #78716c;

    font-size: 14px;

    line-height: 1.7;
}


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

.grand-auditorium-bottom {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 22px;

    align-items: center;

    margin-top: 65px;

    padding: 32px 38px;

    border: 1px solid #fed7aa;

    border-radius: 18px;

    background: linear-gradient(
        120deg,
        #fff7ed,
        #fffbeb
    );
}

.grand-auditorium-bottom-icon {
    width: 64px;
    height: 64px;

    display: flex;

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

    border-radius: 16px;

    color: #fff;

    font-size: 25px;

    background: linear-gradient(
        135deg,
        #b45309,
        #dc2626
    );
}

.grand-auditorium-bottom span {
    color: #b45309;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}

.grand-auditorium-bottom h2 {
    margin: 8px 0;

    color: #292524;

    font-size: 28px;
}

.grand-auditorium-bottom p {
    margin: 0;

    color: #666;

    line-height: 1.8;
}


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

@media (max-width: 900px) {

    .grand-auditorium-intro {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .grand-auditorium-features {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .grand-auditorium-hero {
        min-height: 250px;
    }

    .grand-auditorium-section {
        padding: 50px 16px;
    }

    .grand-auditorium-text h2 {
        font-size: 31px;
    }

    .grand-auditorium-image {
        height: 280px;
    }

    .grand-auditorium-features {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .grand-auditorium-bottom {
        grid-template-columns: 1fr;

        padding: 25px;

        text-align: center;
    }

    .grand-auditorium-bottom-icon {
        margin: auto;
    }

    .grand-auditorium-bottom h2 {
        font-size: 23px;
    }
}


/* =====================================================
   MATHEMATICS ENRICHMENT CENTRE
   Unique classes only - prevents CSS overlap
===================================================== */

.math-enrichment-page {
    background: #fff;
    overflow: hidden;
}


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

.math-enrichment-hero {
    min-height: 310px;

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

    text-align: center;

   background: url("images/maths_centre_bg-img.png") center/cover no-repeat;
}

.math-enrichment-hero-content {
    color: #fff;
    padding: 55px 20px;
}

.math-enrichment-hero-content span {
    display: block;

    margin-bottom: 14px;

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

    letter-spacing: 3px;
}

.math-enrichment-hero-content h1 {
    margin: 0;

    font-size: clamp(38px, 5.5vw, 70px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: 1px;
}

.math-enrichment-hero-content p {
    margin: 16px 0 0;

    font-size: 18px;
}


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

.math-enrichment-section {
    padding: 75px 20px;

    background: #fff;
}

.math-enrichment-container {
    max-width: 1180px;

    margin: auto;
}


/* ================= INTRO ================= */

.math-enrichment-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 65px;

    align-items: center;
}

.math-enrichment-tag {
    color: #2563eb;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;
}

.math-enrichment-text h2 {
    margin: 12px 0 20px;

    color: #172033;

    font-size: 40px;

    line-height: 1.15;
}

.math-enrichment-text p {
    margin: 0 0 15px;

    color: #64748b;

    font-size: 16px;

    line-height: 1.8;
}


/* ================= HIGHLIGHT ================= */

.math-enrichment-highlight {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 25px;

    padding: 18px;

    border-left: 4px solid #2563eb;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        #eff6ff,
        #fffbeb
    );
}

.math-enrichment-highlight-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 12px;

    color: #fff;

    font-size: 21px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #d97706
    );
}

.math-enrichment-highlight strong,
.math-enrichment-highlight small {
    display: block;
}

.math-enrichment-highlight strong {
    margin-bottom: 4px;

    color: #172033;
}

.math-enrichment-highlight small {
    color: #64748b;

    line-height: 1.5;
}


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

.math-enrichment-image {
    position: relative;

    height: 390px;

    overflow: hidden;

    border-radius: 20px;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, .15);
}

.math-enrichment-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.math-enrichment-image-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 28px;

    opacity: 0;

    background: linear-gradient(
        transparent,
        rgba(23, 37, 84, .9)
    );

    transition: .4s ease;
}

.math-enrichment-image-overlay div {
    transform: translateY(25px);

    transition: .4s ease;
}

.math-enrichment-image-overlay span {
    display: block;

    margin-bottom: 5px;

    color: #bfdbfe;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}

.math-enrichment-image-overlay strong {
    color: #fff;

    font-size: 22px;
}

.math-enrichment-image:hover img {
    transform: scale(1.08);
}

.math-enrichment-image:hover
.math-enrichment-image-overlay {
    opacity: 1;
}

.math-enrichment-image:hover
.math-enrichment-image-overlay div {
    transform: translateY(0);
}


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

.math-enrichment-features {
    display: grid;

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

    gap: 22px;

    margin-top: 75px;
}

.math-enrichment-card {
    position: relative;

    padding: 30px 22px;

    text-align: center;

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .06);

    overflow: hidden;

    transition: .35s ease;
}

.math-enrichment-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;
}

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

    box-shadow:
        0 18px 35px rgba(15, 23, 42, .12);
}


/* CARD COLOURS */

.math-card-blue::before {
    background: #2563eb;
}

.math-card-purple::before {
    background: #7c3aed;
}

.math-card-gold::before {
    background: #d97706;
}

.math-card-green::before {
    background: #16a34a;
}


/* ================= ICONS ================= */

.math-enrichment-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 18px;

    display: flex;

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

    border-radius: 16px;

    color: #fff;

    font-size: 25px;

    transition: .35s ease;
}

.math-card-blue .math-enrichment-icon {
    background: linear-gradient(
        135deg,
        #1d4ed8,
        #3b82f6
    );
}

.math-card-purple .math-enrichment-icon {
    background: linear-gradient(
        135deg,
        #6d28d9,
        #a855f7
    );
}

.math-card-gold .math-enrichment-icon {
    background: linear-gradient(
        135deg,
        #b45309,
        #f59e0b
    );
}

.math-card-green .math-enrichment-icon {
    background: linear-gradient(
        135deg,
        #15803d,
        #22c55e
    );
}

.math-enrichment-card:hover
.math-enrichment-icon {
    transform: translateY(-4px) scale(1.05);
}

.math-enrichment-card h3 {
    margin: 0 0 12px;

    color: #172033;

    font-size: 18px;
}

.math-enrichment-card p {
    margin: 0;

    color: #718096;

    font-size: 14px;

    line-height: 1.7;
}


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

.math-enrichment-bottom {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 22px;

    align-items: center;

    margin-top: 65px;

    padding: 32px 38px;

    border: 1px solid #dbeafe;

    border-radius: 18px;

    background: linear-gradient(
        120deg,
        #eff6ff,
        #fffbeb
    );
}

.math-enrichment-bottom-icon {
    width: 64px;
    height: 64px;

    display: flex;

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

    border-radius: 16px;

    color: #fff;

    font-size: 26px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #d97706
    );
}

.math-enrichment-bottom span {
    color: #2563eb;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}

.math-enrichment-bottom h2 {
    margin: 8px 0;

    color: #172033;

    font-size: 28px;
}

.math-enrichment-bottom p {
    margin: 0;

    color: #64748b;

    line-height: 1.8;
}


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

@media (max-width: 900px) {

    .math-enrichment-intro {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .math-enrichment-features {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .math-enrichment-hero {
        min-height: 250px;
    }

    .math-enrichment-section {
        padding: 50px 16px;
    }

    .math-enrichment-text h2 {
        font-size: 31px;
    }

    .math-enrichment-image {
        height: 280px;
    }

    .math-enrichment-features {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .math-enrichment-bottom {
        grid-template-columns: 1fr;

        padding: 25px;

        text-align: center;
    }

    .math-enrichment-bottom-icon {
        margin: auto;
    }

    .math-enrichment-bottom h2 {
        font-size: 23px;
    }
}

/*art*/
/* =====================================================
   MARTIAL ARTS & SELF DEFENCE
   Unique classes only - prevents CSS overlap
===================================================== */

.martial-defence-page {
    background: #fff;
    overflow: hidden;
}


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

.martial-defence-hero {
    min-height: 310px;

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

    text-align: center;

   background: url("images/martial_art_bg-img.png") center/cover no-repeat;
}

.martial-defence-hero-content {
    color: #fff;
    padding: 55px 20px;
}

.martial-defence-hero-content span {
    display: block;

    margin-bottom: 14px;

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

    letter-spacing: 3px;
}

.martial-defence-hero-content h1 {
    margin: 0;

    font-size: clamp(36px, 5.5vw, 70px);

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: 1px;
}

.martial-defence-hero-content p {
    margin: 16px 0 0;

    font-size: 18px;
}


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

.martial-defence-section {
    padding: 75px 20px;

    background: #fff;
}

.martial-defence-container {
    max-width: 1180px;

    margin: auto;
}


/* ================= INTRO ================= */

.martial-defence-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 65px;

    align-items: center;
}

.martial-defence-tag {
    color: #b91c1c;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;
}

.martial-defence-text h2 {
    margin: 12px 0 20px;

    color: #1f2937;

    font-size: 40px;

    line-height: 1.15;
}

.martial-defence-text p {
    margin: 0 0 15px;

    color: #64748b;

    font-size: 16px;

    line-height: 1.8;
}


/* ================= HIGHLIGHT ================= */

.martial-defence-highlight {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 25px;

    padding: 18px;

    border-left: 4px solid #dc2626;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        #fef2f2,
        #f8fafc
    );
}

.martial-defence-highlight-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 12px;

    color: #fff;

    font-size: 21px;

    background: linear-gradient(
        135deg,
        #991b1b,
        #dc2626
    );
}

.martial-defence-highlight strong,
.martial-defence-highlight small {
    display: block;
}

.martial-defence-highlight strong {
    margin-bottom: 4px;

    color: #1f2937;
}

.martial-defence-highlight small {
    color: #64748b;

    line-height: 1.5;
}


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

.martial-defence-image {
    position: relative;

    height: 390px;

    overflow: hidden;

    border-radius: 20px;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, .15);
}

.martial-defence-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.martial-defence-image-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 28px;

    opacity: 0;

    background: linear-gradient(
        transparent,
        rgba(17, 24, 39, .9)
    );

    transition: .4s ease;
}

.martial-defence-image-overlay div {
    transform: translateY(25px);

    transition: .4s ease;
}

.martial-defence-image-overlay span {
    display: block;

    margin-bottom: 5px;

    color: #fecaca;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}

.martial-defence-image-overlay strong {
    color: #fff;

    font-size: 22px;
}

.martial-defence-image:hover img {
    transform: scale(1.08);
}

.martial-defence-image:hover
.martial-defence-image-overlay {
    opacity: 1;
}

.martial-defence-image:hover
.martial-defence-image-overlay div {
    transform: translateY(0);
}


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

.martial-defence-features {
    display: grid;

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

    gap: 22px;

    margin-top: 75px;
}

.martial-defence-card {
    position: relative;

    padding: 30px 22px;

    text-align: center;

    background: #fff;

    border: 1px solid #e5e7eb;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .06);

    overflow: hidden;

    transition: .35s ease;
}

.martial-defence-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;
}

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

    box-shadow:
        0 18px 35px rgba(15, 23, 42, .12);
}


/* CARD TOP COLOURS */

.martial-card-red::before {
    background: #dc2626;
}

.martial-card-blue::before {
    background: #2563eb;
}

.martial-card-gold::before {
    background: #d97706;
}

.martial-card-green::before {
    background: #16a34a;
}


/* ================= ICONS ================= */

.martial-defence-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 18px;

    display: flex;

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

    border-radius: 16px;

    color: #fff;

    font-size: 25px;

    transition: .35s ease;
}

.martial-card-red .martial-defence-icon {
    background: linear-gradient(
        135deg,
        #991b1b,
        #ef4444
    );
}

.martial-card-blue .martial-defence-icon {
    background: linear-gradient(
        135deg,
        #1d4ed8,
        #3b82f6
    );
}

.martial-card-gold .martial-defence-icon {
    background: linear-gradient(
        135deg,
        #b45309,
        #f59e0b
    );
}

.martial-card-green .martial-defence-icon {
    background: linear-gradient(
        135deg,
        #15803d,
        #22c55e
    );
}

.martial-defence-card:hover
.martial-defence-icon {
    transform: translateY(-4px) scale(1.05);
}

.martial-defence-card h3 {
    margin: 0 0 12px;

    color: #1f2937;

    font-size: 18px;
}

.martial-defence-card p {
    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;
}


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

.martial-defence-bottom {
    display: grid;

    grid-template-columns: auto 1fr;

    gap: 22px;

    align-items: center;

    margin-top: 65px;

    padding: 32px 38px;

    border: 1px solid #fecaca;

    border-radius: 18px;

    background: linear-gradient(
        120deg,
        #fef2f2,
        #fff7ed
    );
}

.martial-defence-bottom-icon {
    width: 64px;
    height: 64px;

    display: flex;

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

    border-radius: 16px;

    color: #fff;

    font-size: 26px;

    background: linear-gradient(
        135deg,
        #991b1b,
        #dc2626
    );
}

.martial-defence-bottom span {
    color: #b91c1c;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;
}

.martial-defence-bottom h2 {
    margin: 8px 0;

    color: #1f2937;

    font-size: 28px;
}

.martial-defence-bottom p {
    margin: 0;

    color: #64748b;

    line-height: 1.8;
}


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

@media (max-width: 900px) {

    .martial-defence-intro {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .martial-defence-features {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .martial-defence-hero {
        min-height: 250px;
    }

    .martial-defence-section {
        padding: 50px 16px;
    }

    .martial-defence-text h2 {
        font-size: 31px;
    }

    .martial-defence-image {
        height: 280px;
    }

    .martial-defence-features {
        grid-template-columns: 1fr;

        margin-top: 50px;
    }

    .martial-defence-bottom {
        grid-template-columns: 1fr;

        padding: 25px;

        text-align: center;
    }

    .martial-defence-bottom-icon {
        margin: auto;
    }

    .martial-defence-bottom h2 {
        font-size: 23px;
    }
}

/* =====================================================
   PARENTS' EXPERIENCE PAGE
   UNIQUE CLASSES ONLY
===================================================== */

.parents-exp-page {
    background: #fff;
    overflow: hidden;
}


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

.parents-exp-hero {
    min-height: 330px;

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

    text-align: center;

   background: url("images/parents_exp_bg-img.png") center/cover no-repeat;
}

.parents-exp-hero-content {
    max-width: 850px;

    padding: 60px 20px;

    color: #fff;
}

.parents-exp-hero-content span {
    display: block;

    margin-bottom: 14px;

    color: #fde68a;

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

    letter-spacing: 3px;
}

.parents-exp-hero-content h1 {
    margin: 0;

    font-size: clamp(42px, 6vw, 72px);

    line-height: 1.05;

    font-weight: 800;
}

.parents-exp-hero-content p {
    max-width: 680px;

    margin: 18px auto 0;

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

    font-size: 17px;

    line-height: 1.7;
}


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

.parents-exp-container {
    width: 100%;

    max-width: 1180px;

    margin: auto;

    padding: 0 20px;
}


/* ================= INTRO ================= */

.parents-exp-intro {
    padding: 85px 0;

    background: #fff;
}

.parents-exp-intro-grid {
    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 70px;

    align-items: center;
}

.parents-exp-tag {
    color: #e11d48;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;
}

.parents-exp-intro-content h2 {
    margin: 12px 0 20px;

    color: #172033;

    font-size: 42px;

    line-height: 1.15;
}

.parents-exp-intro-content h2 strong {
    display: block;

    color: #e11d48;
}

.parents-exp-intro-content p {
    margin: 0 0 15px;

    color: #64748b;

    font-size: 16px;

    line-height: 1.85;
}


/* MINI POINTS */

.parents-exp-mini-points {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 25px;
}

.parents-exp-mini-points div {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 13px;

    border-radius: 8px;

    color: #334155;

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

    background: #f8fafc;

    border: 1px solid #e2e8f0;
}

.parents-exp-mini-points i {
    color: #e11d48;
}


/* QUOTE BOX */

.parents-exp-quote-box {
    position: relative;

    padding: 45px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #eff6ff,
            #fff1f2
        );

    border: 1px solid #dbeafe;

    box-shadow:
        0 18px 45px rgba(15,23,42,.08);
}

.parents-exp-quote-icon {
    width: 58px;
    height: 58px;

    display: flex;

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

    margin-bottom: 22px;

    border-radius: 15px;

    color: #fff;

    font-size: 22px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #e11d48
    );
}

.parents-exp-quote-box p {
    margin: 0 0 18px;

    color: #1e293b;

    font-size: 23px;

    line-height: 1.65;

    font-weight: 600;
}

.parents-exp-quote-box > span {
    color: #64748b;

    font-size: 13px;

    font-weight: 700;
}


/* ================= TESTIMONIALS ================= */

.parents-exp-testimonials {
    padding: 85px 0;

    background: #f8fafc;
}

.parents-exp-heading {
    max-width: 650px;

    margin: 0 auto 45px;

    text-align: center;
}

.parents-exp-heading h2 {
    margin: 10px 0 10px;

    color: #172033;

    font-size: 40px;
}

.parents-exp-heading p {
    margin: 0;

    color: #64748b;

    line-height: 1.7;
}


/* CARDS */

.parents-exp-cards {
    display: grid;

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

    gap: 22px;
}

.parents-exp-card {
    position: relative;

    padding: 28px;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 8px 25px rgba(15,23,42,.05);

    transition: .35s ease;
}

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

    box-shadow:
        0 18px 38px rgba(15,23,42,.11);

    border-color: #fecdd3;
}


/* CARD TOP */

.parents-exp-card-top {
    display: grid;

    grid-template-columns: auto 1fr auto;

    gap: 13px;

    align-items: center;
}

.parents-exp-avatar {
    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 50%;

    color: #fff;

    background: linear-gradient(
        135deg,
        #2563eb,
        #e11d48
    );
}

.parents-exp-card-top h3 {
    margin: 0 0 3px;

    color: #172033;

    font-size: 15px;
}

.parents-exp-card-top span {
    color: #94a3b8;

    font-size: 11px;
}

.parents-exp-stars {
    color: #f59e0b;

    font-size: 12px;

    letter-spacing: 1px;
}


/* QUOTE */

.parents-exp-card-quote {
    margin-top: 22px;

    color: #e11d48;

    font-size: 17px;
}

.parents-exp-card p {
    margin: 8px 0 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.8;
}


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

.parents-exp-feedback {
    padding: 75px 20px;

    background:
        linear-gradient(
            120deg,
            #172554,
            #1e40af,
            #9f1239
        );
}

.parents-exp-feedback-inner {
    max-width: 1140px;

    margin: auto;

    display: grid;

    grid-template-columns: auto 1fr auto;

    gap: 22px;

    align-items: center;
}

.parents-exp-feedback-icon {
    width: 65px;
    height: 65px;

    display: flex;

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

    border-radius: 16px;

    color: #172033;

    font-size: 25px;

    background: #fde68a;
}

.parents-exp-feedback-inner span {
    color: #fde68a;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}

.parents-exp-feedback-inner h2 {
    margin: 7px 0 8px;

    color: #fff;

    font-size: 30px;
}

.parents-exp-feedback-inner p {
    margin: 0;

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

    line-height: 1.7;
}

.parents-exp-feedback-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 22px;

    border-radius: 8px;

    color: #172033;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    white-space: nowrap;

    background: #fde68a;

    transition: .3s ease;
}

.parents-exp-feedback-btn:hover {
    color: #172033;

    transform: translateY(-3px);

    background: #fef3c7;
}


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

@media (max-width: 900px) {

    .parents-exp-intro-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .parents-exp-cards {
        grid-template-columns: 1fr;
    }

    .parents-exp-feedback-inner {
        grid-template-columns: auto 1fr;
    }

    .parents-exp-feedback-btn {
        grid-column: 2;
        width: fit-content;
    }
}


@media (max-width: 600px) {

    .parents-exp-hero {
        min-height: 280px;
    }

    .parents-exp-hero-content {
        padding: 50px 18px;
    }

    .parents-exp-hero-content h1 {
        font-size: 40px;
    }

    .parents-exp-intro {
        padding: 60px 0;
    }

    .parents-exp-intro-content h2 {
        font-size: 32px;
    }

    .parents-exp-quote-box {
        padding: 30px;
    }

    .parents-exp-quote-box p {
        font-size: 19px;
    }

    .parents-exp-testimonials {
        padding: 60px 0;
    }

    .parents-exp-heading h2 {
        font-size: 31px;
    }

    .parents-exp-card {
        padding: 23px;
    }

    .parents-exp-card-top {
        grid-template-columns: auto 1fr;
    }

    .parents-exp-stars {
        grid-column: 2;
    }

    .parents-exp-feedback {
        padding: 55px 20px;
    }

    .parents-exp-feedback-inner {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .parents-exp-feedback-icon {
        margin: auto;
    }

    .parents-exp-feedback-btn {
        grid-column: auto;

        width: 100%;

        justify-content: center;
    }
}

/*student exp*/
/* =====================================================
   STUDENT EXPERIENCE PAGE
   UNIQUE CLASSES ONLY
===================================================== */

.student-exp-page {
    background: #fff;
    overflow: hidden;
}


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

.student-exp-hero {
    min-height: 330px;

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

    text-align: center;

   background: url("images/student_exp_bg-img.png") center/cover no-repeat;
}

.student-exp-hero-content {
    max-width: 850px;
    padding: 60px 20px;
    color: #fff;
}

.student-exp-hero-content span {
    display: block;
    margin-bottom: 14px;

    color: #a7f3d0;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
}

.student-exp-hero-content h1 {
    margin: 0;

    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.05;
    font-weight: 800;
}

.student-exp-hero-content p {
    max-width: 680px;
    margin: 18px auto 0;

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

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


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

.student-exp-container {
    width: 100%;
    max-width: 1180px;

    margin: auto;
    padding: 0 20px;
}


/* ================= INTRO ================= */

.student-exp-intro {
    padding: 85px 0;
    background: #fff;
}

.student-exp-intro-grid {
    display: grid;

    grid-template-columns: .95fr 1.05fr;

    gap: 70px;

    align-items: center;
}


/* IMAGE */

.student-exp-image {
    position: relative;

    height: 450px;

    overflow: hidden;

    border-radius: 22px;

    box-shadow: 0 20px 50px rgba(15,23,42,.15);
}

.student-exp-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.student-exp-image:hover img {
    transform: scale(1.07);
}

.student-exp-image-overlay {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 25px;

    color: #fff;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.8)
        );
}

.student-exp-image-overlay strong {
    display: block;

    font-size: 27px;
}

.student-exp-image-overlay span {
    font-size: 12px;
}


/* CONTENT */

.student-exp-tag {
    color: #047857;

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

    letter-spacing: 2.5px;
}

.student-exp-content h2 {
    margin: 12px 0 20px;

    color: #172033;

    font-size: 42px;
    line-height: 1.15;
}

.student-exp-content h2 strong {
    display: block;
    color: #4b449d;
}

.student-exp-content p {
    margin: 0 0 15px;

    color: #64748b;

    font-size: 16px;
    line-height: 1.85;
}

.student-exp-link {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    margin-top: 12px;

    color: #065f46;

    text-decoration: none;

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

    transition: .3s ease;
}

.student-exp-link:hover {
    color: #e11d48;
    gap: 15px;
}


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

.student-exp-features {
    padding: 85px 0;
    background: #f8fafc;
}

.student-exp-heading {
    max-width: 680px;

    margin: 0 auto 45px;

    text-align: center;
}

.student-exp-heading h2 {
    margin: 10px 0;

    color: #172033;

    font-size: 39px;
}

.student-exp-heading p {
    margin: 0;

    color: #64748b;

    line-height: 1.7;
}


/* GRID */

.student-exp-feature-grid {
    display: grid;

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

    gap: 20px;
}

.student-exp-feature-card {
    padding: 30px 22px;

    text-align: center;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    background: #fff;

    box-shadow: 0 8px 25px rgba(15,23,42,.05);

    transition: .35s ease;
}

.student-exp-feature-card:hover {
    transform: translateY(-8px);

    border-color: #a7f3d0;

    box-shadow: 0 18px 38px rgba(15,23,42,.11);
}

.student-exp-feature-icon {
    width: 62px;
    height: 62px;

    display: flex;

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

    margin: 0 auto 18px;

    border-radius: 16px;

    color: #fff;

    font-size: 23px;

    background:
        linear-gradient(
            135deg,
            #5672c1,
            #333e77
        );
}

.student-exp-feature-card h3 {
    margin: 0 0 10px;

    color: #172033;

    font-size: 17px;
}

.student-exp-feature-card p {
    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.7;
}


/* ================= MOMENTS ================= */

.student-exp-moments {
    padding: 90px 0;
    background: #fff;
}

.student-exp-moments-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}

.student-exp-moments-grid h2 {
    margin: 12px 0 18px;

    color: #172033;

    font-size: 40px;
    line-height: 1.15;
}

.student-exp-moments-grid h2 strong {
    display: block;
    color: #047857;
}

.student-exp-moments-grid > div:first-child p {
    margin: 0;

    color: #64748b;

    font-size: 16px;
    line-height: 1.85;
}


/* MOMENT LIST */

.student-exp-moment-list {
    display: flex;

    flex-direction: column;

    gap: 14px;
}

.student-exp-moment-item {
    display: grid;

    grid-template-columns: 48px 1fr;

    gap: 17px;

    align-items: center;

    padding: 19px;

    border-radius: 14px;

    border: 1px solid #e2e8f0;

    background: #f8fafc;

    transition: .3s ease;
}

.student-exp-moment-item:hover {
    transform: translateX(6px);

    background: #ecfdf5;

    border-color: #a7f3d0;
}

.student-exp-moment-item span {
    width: 44px;
    height: 44px;

    display: flex;

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

    border-radius: 12px;

    color: #047857;

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

.student-exp-moment-item h3 {
    margin: 0 0 4px;

    color: #172033;

    font-size: 15px;
}

.student-exp-moment-item p {
    margin: 0;

    color: #64748b;

    font-size: 12px;
}


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

.student-exp-cta {
    padding: 70px 20px;

    background: url("images/student_exp_cta-bg-img.png")
     center/cover no-repeat;
}

.student-exp-cta-inner {
    max-width: 1140px;

    margin: auto;

    display: grid;

    grid-template-columns: auto 1fr auto;

    gap: 22px;

    align-items: center;
}

.student-exp-cta-icon {
    width: 65px;
    height: 65px;

    display: flex;

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

    border-radius: 16px;

    color: #294077;

    font-size: 25px;
}

.student-exp-cta-inner span {
    color: #a7f3d0;

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

    letter-spacing: 2px;
}

.student-exp-cta-inner h2 {
    margin: 7px 0 8px;

    color: #fff;

    font-size: 30px;
}

.student-exp-cta-inner p {
    margin: 0;

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

    line-height: 1.7;
}

.student-exp-cta-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 22px;

    border-radius: 8px;

    color: #064e3b;

    text-decoration: none;

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

    white-space: nowrap;

    background: #a7bef3;

    transition: .3s ease;
}

.student-exp-cta-btn:hover {
    color: #064e3b;

    transform: translateY(-3px);

    background: #d1fae5;
}


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

@media (max-width: 950px) {

    .student-exp-intro-grid,
    .student-exp-moments-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .student-exp-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .student-exp-cta-inner {
        grid-template-columns: auto 1fr;
    }

    .student-exp-cta-btn {
        grid-column: 2;

        width: fit-content;
    }
}


@media (max-width: 600px) {

    .student-exp-hero {
        min-height: 280px;
    }

    .student-exp-hero-content h1 {
        font-size: 40px;
    }

    .student-exp-intro {
        padding: 60px 0;
    }

    .student-exp-image {
        height: 320px;
    }

    .student-exp-content h2 {
        font-size: 32px;
    }

    .student-exp-features {
        padding: 60px 0;
    }

    .student-exp-heading h2 {
        font-size: 30px;
    }

    .student-exp-feature-grid {
        grid-template-columns: 1fr;
    }

    .student-exp-moments {
        padding: 60px 0;
    }

    .student-exp-moments-grid h2 {
        font-size: 32px;
    }

    .student-exp-cta-inner {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .student-exp-cta-icon {
        margin: auto;
    }

    .student-exp-cta-btn {
        grid-column: auto;

        width: 100%;

        justify-content: center;
    }
}

/*feedbacl*/
/* =====================================================
   SCHOOL FEEDBACK PAGE
   UNIQUE CLASSES ONLY
===================================================== */

.school-feedback-page {
    background: #fff;
    overflow: hidden;
}


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

.school-feedback-hero {
    min-height: 330px;

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

    text-align: center;

    background:
        linear-gradient(
            120deg,
            #172554,
            #1d4ed8,
            #7c3aed
        );
}

.school-feedback-hero-content {
    max-width: 800px;
    padding: 60px 20px;

    color: #fff;
}

.school-feedback-hero-content span {
    display: block;

    margin-bottom: 14px;

    color: #fde68a;

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

    letter-spacing: 3px;
}

.school-feedback-hero-content h1 {
    margin: 0;

    font-size: clamp(42px, 6vw, 70px);

    line-height: 1.05;
    font-weight: 800;
}

.school-feedback-hero-content p {
    max-width: 650px;

    margin: 18px auto 0;

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

    font-size: 17px;

    line-height: 1.7;
}


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

.school-feedback-container {
    width: 100%;
    max-width: 1180px;

    margin: auto;

    padding: 0 20px;
}


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

.school-feedback-section {
    padding: 85px 0;

    background: #f8fafc;
}

.school-feedback-grid {
    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 65px;

    align-items: start;
}


/* ================= INFO ================= */

.school-feedback-tag {
    color: #7c3aed;

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

    letter-spacing: 2.5px;
}

.school-feedback-info h2 {
    margin: 12px 0 20px;

    color: #172033;

    font-size: 42px;

    line-height: 1.15;
}

.school-feedback-info h2 strong {
    display: block;

    color: #7c3aed;
}

.school-feedback-info > p {
    margin: 0;

    color: #64748b;

    font-size: 16px;

    line-height: 1.85;
}


/* POINTS */

.school-feedback-points {
    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 28px;
}

.school-feedback-points div {
    display: flex;

    align-items: center;

    gap: 13px;

    color: #334155;

    font-size: 14px;
    font-weight: 600;
}

.school-feedback-points i {
    width: 38px;
    height: 38px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 10px;

    color: #7c3aed;

    background: #ede9fe;
}


/* NOTE */

.school-feedback-note {
    display: flex;

    gap: 15px;

    margin-top: 35px;

    padding: 20px;

    border-radius: 14px;

    background: #fff;

    border: 1px solid #e2e8f0;
}

.school-feedback-note > i {
    color: #2563eb;

    font-size: 22px;
}

.school-feedback-note strong {
    color: #172033;

    font-size: 14px;
}

.school-feedback-note p {
    margin: 5px 0 0;

    color: #64748b;

    font-size: 12px;

    line-height: 1.6;
}


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

.school-feedback-form-card {
    padding: 35px;

    border-radius: 22px;

    background: #fff;

    border: 1px solid #e2e8f0;

    box-shadow:
        0 18px 45px rgba(15,23,42,.09);
}

.school-feedback-form-heading {
    margin-bottom: 27px;

    padding-bottom: 18px;

    border-bottom: 1px solid #e5e7eb;
}

.school-feedback-form-heading h3 {
    margin: 0 0 5px;

    color: #172033;

    font-size: 25px;
}

.school-feedback-form-heading p {
    margin: 0;

    color: #94a3b8;

    font-size: 13px;
}


/* FIELD */

.school-feedback-field {
    margin-bottom: 20px;
}

.school-feedback-field > label {
    display: block;

    margin-bottom: 8px;

    color: #334155;

    font-size: 13px;

    font-weight: 700;
}


/* INPUT */

.school-feedback-input,
.school-feedback-textarea {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding: 12px 14px;

    border: 1px solid #dbe2ea;

    border-radius: 10px;

    background: #fff;

    transition: .3s ease;
}

.school-feedback-input:focus-within,
.school-feedback-textarea:focus-within {
    border-color: #8b5cf6;

    box-shadow:
        0 0 0 3px rgba(139,92,246,.10);
}

.school-feedback-input i,
.school-feedback-textarea i {
    padding-top: 3px;

    color: #94a3b8;

    font-size: 14px;
}

.school-feedback-input input,
.school-feedback-input select,
.school-feedback-textarea textarea {
    width: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    color: #334155;

    font-family: inherit;

    font-size: 14px;

    background: transparent;
}

.school-feedback-input select {
    cursor: pointer;
}

.school-feedback-textarea textarea {
    resize: vertical;

    line-height: 1.6;
}


/* ================= RATING ================= */

.school-feedback-rating {
    display: flex;
    align-items: center;
    gap: 7px;
    direction: ltr;
}

.school-feedback-rating input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.school-feedback-rating label {
    display: inline-block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    color: #cbd5e1;
    font-size: 30px;
    line-height: 1;

    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}

/* Hover */
.school-feedback-rating label:hover {
    color: #f59e0b;
    transform: scale(1.08);
}

/* Selected star */
.school-feedback-rating input:checked + label {
    color: #f59e0b;
    transform: scale(1.08);
}

/* Previous stars also stay selected */
.school-feedback-rating label:has(~ input:checked) {
    color: #f59e0b;
}


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

.school-feedback-submit {
    width: 100%;

    display: flex;

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

    gap: 10px;

    padding: 15px;

    border: 0;

    border-radius: 10px;

    color: #fff;

    cursor: pointer;

    font-family: inherit;

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

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

    transition: .3s ease;
}

.school-feedback-submit:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(79,70,229,.25);
}


/* SUCCESS */

.school-feedback-success {
    display: none;

    margin: 15px 0 0;

    padding: 12px;

    border-radius: 8px;

    text-align: center;

    color: #047857;

    font-size: 13px;

    background: #ecfdf5;
}

.school-feedback-success.show {
    display: block;
}


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

@media (max-width: 900px) {

    .school-feedback-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}


@media (max-width: 600px) {

    .school-feedback-hero {
        min-height: 280px;
    }

    .school-feedback-hero-content h1 {
        font-size: 40px;
    }

    .school-feedback-section {
        padding: 60px 0;
    }

    .school-feedback-info h2 {
        font-size: 32px;
    }

    .school-feedback-form-card {
        padding: 23px 18px;

        border-radius: 16px;
    }

}

/*gallery section start here*/

/* =====================================================
   SCHOOL GALLERY PAGE
   Unique Classes Only
   Image: 100% Width + Auto Height
===================================================== */

.school-gallery-page {
    background: #fff;
    overflow: hidden;
}


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

.school-gallery-hero {
    min-height: 300px;
    position: relative;

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

    text-align: center;

   background: url("images/gallery_bg-img.png") center/cover no-repeat;
}

.school-gallery-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(255,255,255,.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(255,255,255,.10),
            transparent 30%
        );
}

.school-gallery-hero-content {
    position: relative;
    z-index: 2;

    color: #fff;
    padding: 55px 20px;
}

.school-gallery-hero-content span {
    display: block;

    margin-bottom: 12px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;
}

.school-gallery-hero-content h1 {
    margin: 0;

    font-size: clamp(44px, 7vw, 78px);
    line-height: 1;

    font-weight: 900;
    letter-spacing: 2px;
}

.school-gallery-hero-content p {
    margin: 18px 0 0;

    font-size: 17px;
    opacity: .95;
}


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

.school-gallery-section {
    padding: 80px 20px;
    background: #fff;
}

.school-gallery-container {
    width: 100%;
    max-width: 1200px;
    margin: auto;
}


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

.school-gallery-heading {
    max-width: 700px;
    margin: 0 auto 42px;

    text-align: center;
}

.school-gallery-heading > span {
    display: block;

    margin-bottom: 10px;

    color: #ef5513;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.school-gallery-heading h2 {
    margin: 0;

    color: #202020;

    font-size: 38px;
    line-height: 1.2;
}

.school-gallery-heading h2 strong {
    color: #ef5513;
}

.school-gallery-heading p {
    margin: 15px auto 0;

    max-width: 620px;

    color: #777;

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


/* ================= FILTER ================= */

.school-gallery-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 38px;
}

.school-gallery-filter {
    border: 1px solid #eee;

    padding: 11px 22px;

    border-radius: 30px;

    background: #fff;

    color: #555;

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

    cursor: pointer;

    transition: .3s ease;
}

.school-gallery-filter:hover,
.school-gallery-filter.active {
    border-color: #5862a7;

    background: linear-gradient(
        135deg,
        #626593,
        #25246d
    );

    color: #fff;

    box-shadow:
        0 8px 20px rgba(115 118 153 / 20%);
}


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

.school-gallery-grid {
    display: grid;

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

    gap: 20px;

    align-items: start;
}


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

.school-gallery-item {
    position: relative;

    width: 100%;
    height: auto;

    overflow: hidden;

    border-radius: 17px;

    background: #f4f4f4;

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

    cursor: pointer;

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


/* IMAGE */

.school-gallery-item img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: initial;

    transition:
        transform .6s ease;
}


/* IMAGE HOVER */

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

.school-gallery-item:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 35px rgba(0,0,0,.14);
}


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

.school-gallery-overlay {
    position: absolute;
    inset: 0;

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

    padding: 22px;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.05) 65%
    );

    opacity: 0;

    transition: opacity .35s ease;
}

.school-gallery-item:hover .school-gallery-overlay {
    opacity: 1;
}


/* OVERLAY TEXT */

.school-gallery-overlay span {
    display: block;

    margin-bottom: 5px;

    color: #ffb000;

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

    letter-spacing: 2px;
    text-transform: uppercase;
}

.school-gallery-overlay h3 {
    margin: 0;

    color: #fff;

    font-size: 17px;
}


/* VIEW BUTTON */

.school-gallery-view {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    border: 0;
    border-radius: 50%;

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

    color: #ed5012;

    cursor: pointer;

    font-size: 15px;

    transform: translateY(12px);

    transition: .35s ease;
}

.school-gallery-item:hover .school-gallery-view {
    transform: translateY(0);
}

.school-gallery-view:hover {
    background: #ed5012;
    color: #fff;
}


/* ================= FILTER HIDDEN ================= */

.school-gallery-item.gallery-hidden {
    display: none;
}


/* ================= BOTTOM NOTICE ================= */

.school-gallery-bottom {
    display: grid;

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

    align-items: center;

    gap: 22px;

    margin-top: 55px;

    padding: 28px 32px;

    border: 1px solid #f1dfc8;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #fff8eb,
        #fff
    );
}

.school-gallery-bottom-icon {
    width: 58px;
    height: 58px;

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

    border-radius: 15px;

    background: linear-gradient(
        135deg,
        #171433,
        #3b4c8b
    );

    color: #fff;

    font-size: 23px;
}

.school-gallery-bottom span {
    color: #ed5413;

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

    letter-spacing: 2px;
}

.school-gallery-bottom h3 {
    margin: 5px 0 0;

    color: #222;

    font-size: 21px;
}

.school-gallery-bottom p {
    margin: 0;

    color: #777;

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


/* =====================================================
   LIGHTBOX
===================================================== */

.school-gallery-lightbox {
    position: fixed;
    inset: 0;

    z-index: 99999;

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

    padding: 30px;

    background: rgba(10,10,10,.94);
}

.school-gallery-lightbox.open {
    display: flex;
}

.school-gallery-lightbox-content {
    position: relative;

    width: auto;
    max-width: 1000px;
    max-height: 90vh;

    text-align: center;
}

.school-gallery-lightbox-content img {
    display: block;

    width: auto;
    max-width: 100%;

    height: auto;
    max-height: 72vh;

    margin: auto;

    border-radius: 12px;

    object-fit: contain;

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


/* LIGHTBOX INFO */

.school-gallery-lightbox-info {
    padding-top: 15px;
}

.school-gallery-lightbox-info span {
    color: #ffac00;

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

    letter-spacing: 2px;
}

.school-gallery-lightbox-info h3 {
    margin: 5px 0;

    color: #fff;

    font-size: 20px;
}

.school-gallery-lightbox-info small {
    color: #aaa;
}


/* LIGHTBOX BUTTONS */

.school-gallery-close,
.school-gallery-prev,
.school-gallery-next {
    position: absolute;

    z-index: 3;

    border: 0;

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

    border-radius: 50%;

    cursor: pointer;

    transition: .3s ease;
}

.school-gallery-close {
    top: 25px;
    right: 30px;

    width: 48px;
    height: 48px;

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

    color: #fff;

    font-size: 20px;
}

.school-gallery-prev,
.school-gallery-next {
    top: 50%;

    width: 52px;
    height: 52px;

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

    color: #fff;

    font-size: 18px;

    transform: translateY(-50%);
}

.school-gallery-prev {
    left: 25px;
}

.school-gallery-next {
    right: 25px;
}

.school-gallery-close:hover,
.school-gallery-prev:hover,
.school-gallery-next:hover {
    background: #ed5012;
}


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

@media (max-width: 950px) {

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

    .school-gallery-bottom {
        grid-template-columns: auto 1fr;
    }

    .school-gallery-bottom p {
        grid-column: 1 / -1;
    }

}


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

@media (max-width: 600px) {

    .school-gallery-hero {
        min-height: 240px;
    }

    .school-gallery-hero-content h1 {
        font-size: 40px;
    }

    .school-gallery-section {
        padding: 55px 15px;
    }

    .school-gallery-heading h2 {
        font-size: 29px;
    }

    .school-gallery-filters {
        gap: 7px;
    }

    .school-gallery-filter {
        padding: 9px 15px;

        font-size: 13px;
    }

    .school-gallery-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .school-gallery-item {
        width: 100%;
        height: auto;
    }

    .school-gallery-item img {
        width: 100%;
        height: auto;
    }

    /* Mobile par overlay visible */
    .school-gallery-overlay {
        opacity: 1;
    }

    .school-gallery-bottom {
        grid-template-columns: 1fr;

        text-align: center;

        padding: 25px 20px;
    }

    .school-gallery-bottom-icon {
        margin: auto;
    }

    .school-gallery-bottom p {
        grid-column: auto;
    }

    /* Lightbox */

    .school-gallery-lightbox {
        padding: 15px;
    }

    .school-gallery-lightbox-content img {
        width: 100%;
        height: auto;
        max-height: 70vh;
    }

    .school-gallery-prev {
        left: 10px;
    }

    .school-gallery-next {
        right: 10px;
    }

    .school-gallery-close {
        top: 15px;
        right: 15px;
    }

}

/*contact*/
/* =====================================================
   SCHOOL CONTACT PAGE
   UNIQUE CLASSES ONLY
===================================================== */

.school-contact-page {
    background: #fff;
    overflow: hidden;
}


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

.school-contact-hero {
    min-height: 320px;

    position: relative;

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

    text-align: center;

   background: url("images/contact_bg-img.png")
    center/cover no-repeat;
}

.school-contact-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(255,255,255,.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(255,255,255,.10),
            transparent 35%
        );
}

.school-contact-hero-content {
    position: relative;
    z-index: 2;

    max-width: 750px;

    padding: 60px 20px;

    color: #fff;
}

.school-contact-hero-content span {
    display: block;

    margin-bottom: 13px;

    color: #fde68a;

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

    letter-spacing: 4px;
}

.school-contact-hero-content h1 {
    margin: 0;

    font-size: clamp(45px, 7vw, 72px);

    line-height: 1;

    font-weight: 900;
}

.school-contact-hero-content p {
    margin: 18px 0 0;

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

    font-size: 17px;

    line-height: 1.7;
}


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

.school-contact-section {
    padding: 80px 20px;

    background: #f8fafc;
}

.school-contact-container {
    max-width: 1200px;

    margin: auto;
}


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

.school-contact-heading {
    max-width: 700px;

    margin: 0 auto 45px;

    text-align: center;
}

.school-contact-heading > span {
    display: block;

    margin-bottom: 10px;

    color: #7c3aed;

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

    letter-spacing: 3px;
}

.school-contact-heading h2 {
    margin: 0;

    color: #172033;

    font-size: 40px;

    line-height: 1.2;
}

.school-contact-heading h2 strong {
    color: #7c3aed;
}

.school-contact-heading p {
    max-width: 650px;

    margin: 15px auto 0;

    color: #64748b;

    font-size: 15px;

    line-height: 1.8;
}


/* ================= CONTACT CARDS ================= */

.school-contact-cards {
    display: grid;

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

    gap: 18px;

    margin-bottom: 60px;
}

.school-contact-card {
    display: flex;

    gap: 14px;

    padding: 24px 20px;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    background: #fff;

    transition: .35s ease;
}

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

    box-shadow:
        0 15px 35px rgba(15,23,42,.10);
}

.school-contact-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

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

    border-radius: 12px;

    color: #7c3aed;

    background: #ede9fe;

    font-size: 18px;
}

.school-contact-card span {
    color: #94a3b8;

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

    letter-spacing: 1.5px;
}

.school-contact-card h3 {
    margin: 4px 0 8px;

    color: #172033;

    font-size: 17px;
}

.school-contact-card p {
    margin: 0;

    color: #64748b;

    font-size: 12px;

    line-height: 1.7;
}

.school-contact-card a {
    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 9px;

    color: #7c3aed;

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

    text-decoration: none;
}

.school-contact-card a:hover {
    color: #2563eb;
}


/* ================= MAIN AREA ================= */

.school-contact-main {
    display: grid;

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

    gap: 60px;

    align-items: start;
}


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

.school-contact-message {
    padding-top: 20px;
}

.school-contact-tag {
    color: #7c3aed;

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

    letter-spacing: 2.5px;
}

.school-contact-message h2 {
    margin: 12px 0 18px;

    color: #172033;

    font-size: 39px;

    line-height: 1.15;
}

.school-contact-message h2 strong {
    display: block;

    color: #7c3aed;
}

.school-contact-message > p {
    margin: 0;

    color: #64748b;

    font-size: 15px;

    line-height: 1.85;
}


/* HIGHLIGHTS */

.school-contact-highlights {
    display: flex;

    flex-direction: column;

    gap: 13px;

    margin-top: 27px;
}

.school-contact-highlights div {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #334155;

    font-size: 13px;
    font-weight: 600;
}

.school-contact-highlights i {
    color: #7c3aed;
}


/* EMERGENCY */

.school-contact-emergency {
    display: flex;

    gap: 14px;

    margin-top: 30px;

    padding: 19px;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    background: #fff;
}

.school-contact-emergency > i {
    color: #2563eb;

    font-size: 23px;
}

.school-contact-emergency strong {
    color: #172033;

    font-size: 13px;
}

.school-contact-emergency p {
    margin: 5px 0 0;

    color: #64748b;

    font-size: 12px;

    line-height: 1.6;
}


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

.school-contact-form-card {
    padding: 35px;

    border: 1px solid #e2e8f0;

    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 18px 45px rgba(15,23,42,.09);
}

.school-contact-form-title {
    margin-bottom: 25px;

    padding-bottom: 18px;

    border-bottom: 1px solid #e5e7eb;
}

.school-contact-form-title h3 {
    margin: 0 0 5px;

    color: #172033;

    font-size: 24px;
}

.school-contact-form-title p {
    margin: 0;

    color: #94a3b8;

    font-size: 13px;
}


/* FIELD */

.school-contact-field {
    margin-bottom: 18px;
}

.school-contact-field > label {
    display: block;

    margin-bottom: 7px;

    color: #334155;

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


/* INPUT */

.school-contact-input,
.school-contact-textarea {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding: 12px 14px;

    border: 1px solid #dbe2ea;

    border-radius: 10px;

    background: #fff;

    transition: .3s ease;
}

.school-contact-input:focus-within,
.school-contact-textarea:focus-within {
    border-color: #8b5cf6;

    box-shadow:
        0 0 0 3px rgba(139,92,246,.10);
}

.school-contact-input i,
.school-contact-textarea i {
    padding-top: 3px;

    color: #94a3b8;

    font-size: 14px;
}

.school-contact-input input,
.school-contact-input select,
.school-contact-textarea textarea {
    width: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    color: #334155;

    background: transparent;

    font-family: inherit;

    font-size: 14px;
}

.school-contact-input select {
    cursor: pointer;
}

.school-contact-textarea textarea {
    resize: vertical;

    line-height: 1.6;
}


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

.school-contact-submit {
    width: 100%;

    display: flex;

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

    gap: 10px;

    padding: 15px;

    border: 0;

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

    cursor: pointer;

    font-family: inherit;

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

    transition: .3s ease;
}

.school-contact-submit:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(79,70,229,.25);
}


/* SUCCESS */

.school-contact-success {
    display: none;

    margin: 14px 0 0;

    padding: 11px;

    border-radius: 8px;

    text-align: center;

    color: #047857;

    background: #ecfdf5;

    font-size: 13px;
}

.school-contact-success.show {
    display: block;
}


/* ================= MAP ================= */

.school-contact-map {
    min-height: 280px;

    display: flex;

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

    margin-top: 60px;

    border-radius: 20px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #e0e7ff,
            #ede9fe
        );

    border: 1px solid #ddd6fe;
}

.school-contact-map-content {
    max-width: 500px;

    padding: 45px 25px;

    text-align: center;
}

.school-contact-map-content > i {
    width: 60px;
    height: 60px;

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

    margin: 0 auto 15px;

    border-radius: 50%;

    color: #fff;

    background: linear-gradient(
        135deg,
        #7c3aed,
        #2563eb
    );

    font-size: 24px;
}

.school-contact-map-content h3 {
    margin: 0 0 8px;

    color: #172033;

    font-size: 25px;
}

.school-contact-map-content p {
    margin: 0 0 18px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;
}

.school-contact-map-content a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 11px 18px;

    border-radius: 8px;

    color: #fff;

    background: #172554;

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

    text-decoration: none;

    transition: .3s ease;
}

.school-contact-map-content a:hover {
    transform: translateY(-2px);

    background: #7c3aed;
}


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

@media (max-width: 1000px) {

    .school-contact-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .school-contact-main {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}


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

@media (max-width: 600px) {

    .school-contact-hero {
        min-height: 250px;
    }

    .school-contact-hero-content h1 {
        font-size: 42px;
    }

    .school-contact-section {
        padding: 55px 15px;
    }

    .school-contact-heading h2 {
        font-size: 31px;
    }

    .school-contact-cards {
        grid-template-columns: 1fr;

        gap: 13px;

        margin-bottom: 45px;
    }

    .school-contact-message h2 {
        font-size: 31px;
    }

    .school-contact-form-card {
        padding: 23px 18px;

        border-radius: 16px;
    }

    .school-contact-map {
        margin-top: 45px;

        min-height: 250px;
    }

}

/*faq*/
/* =====================================================
   SCHOOL FAQ PAGE
   UNIQUE CLASSES ONLY
===================================================== */

.school-faq-page {
    background: #fff;
    overflow: hidden;
}


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

.school-faq-hero {
    min-height: 310px;

    position: relative;

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

    text-align: center;

   background: url("images/faq_bg-img.png") center/cover no-repeat;
}

.school-faq-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(255,255,255,.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(255,255,255,.10),
            transparent 35%
        );
}

.school-faq-hero-content {
    position: relative;
    z-index: 2;

    max-width: 850px;

    padding: 60px 20px;

    color: #fff;
}

.school-faq-hero-content span {
    display: block;

    margin-bottom: 14px;

    color: #fde68a;

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

    letter-spacing: 4px;
}

.school-faq-hero-content h1 {
    margin: 0;

    font-size: clamp(40px, 6vw, 65px);

    line-height: 1.08;

    font-weight: 900;
}

.school-faq-hero-content p {
    margin: 18px 0 0;

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

    font-size: 16px;

    line-height: 1.7;
}


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

.school-faq-section {
    padding: 80px 20px;

    background: #f8fafc;
}

.school-faq-container {
    max-width: 1150px;

    margin: auto;
}


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

.school-faq-heading {
    max-width: 700px;

    margin: 0 auto 50px;

    text-align: center;
}

.school-faq-heading > span {
    display: block;

    margin-bottom: 10px;

    color: #7c3aed;

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

    letter-spacing: 3px;
}

.school-faq-heading h2 {
    margin: 0;

    color: #172033;

    font-size: 39px;

    line-height: 1.2;
}

.school-faq-heading h2 strong {
    color: #7c3aed;
}

.school-faq-heading p {
    max-width: 640px;

    margin: 15px auto 0;

    color: #64748b;

    font-size: 15px;

    line-height: 1.8;
}


/* ================= LAYOUT ================= */

.school-faq-layout {
    display: grid;

    grid-template-columns: .75fr 1.25fr;

    gap: 55px;

    align-items: start;
}


/* ================= INTRO ================= */

.school-faq-intro {
    position: sticky;

    top: 30px;

    padding: 34px;

    border: 1px solid #ddd6fe;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f5f3ff,
            #fff
        );

    box-shadow:
        0 12px 35px rgba(79,70,229,.08);
}

.school-faq-intro-icon {
    width: 62px;
    height: 62px;

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

    margin-bottom: 24px;

    border-radius: 16px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

    font-size: 26px;

    box-shadow:
        0 10px 25px rgba(124,58,237,.22);
}

.school-faq-tag {
    color: #7c3aed;

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

    letter-spacing: 2px;
}

.school-faq-intro h3 {
    margin: 10px 0 14px;

    color: #172033;

    font-size: 31px;

    line-height: 1.15;
}

.school-faq-intro h3 strong {
    display: block;

    color: #2563eb;
}

.school-faq-intro > p {
    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.8;
}


/* HELP BOX */

.school-faq-help {
    display: flex;

    gap: 12px;

    margin-top: 27px;

    padding: 16px;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    background: #fff;
}

.school-faq-help > i {
    color: #7c3aed;

    font-size: 21px;
}

.school-faq-help strong {
    display: block;

    margin-bottom: 3px;

    color: #172033;

    font-size: 12px;
}

.school-faq-help span {
    display: block;

    color: #64748b;

    font-size: 11px;

    line-height: 1.5;
}


/* CONTACT BUTTON */

.school-faq-contact-btn {
    display: flex;

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

    gap: 9px;

    margin-top: 22px;

    padding: 13px 18px;

    border-radius: 9px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

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

    text-decoration: none;

    transition: .3s ease;
}

.school-faq-contact-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(79,70,229,.22);
}


/* ================= FAQ LIST ================= */

.school-faq-list {
    display: flex;

    flex-direction: column;

    gap: 12px;
}

.school-faq-item {
    overflow: hidden;

    border: 1px solid #e2e8f0;

    border-radius: 13px;

    background: #fff;

    transition: .3s ease;
}

.school-faq-item:hover {
    border-color: #c4b5fd;

    box-shadow:
        0 8px 25px rgba(15,23,42,.06);
}


/* QUESTION */

.school-faq-question {
    width: 100%;

    display: flex;

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

    gap: 20px;

    padding: 20px 22px;

    border: 0;

    outline: 0;

    color: #172033;

    background: transparent;

    text-align: left;

    cursor: pointer;

    font-family: inherit;

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

.school-faq-question i {
    width: 30px;
    height: 30px;

    flex-shrink: 0;

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

    border-radius: 50%;

    color: #7c3aed;

    background: #f3f0ff;

    font-size: 11px;

    transition: .35s ease;
}


/* ANSWER */

.school-faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .35s ease;
}

.school-faq-answer p {
    min-height: 0;

    overflow: hidden;

    margin: 0;

    padding: 0 22px;

    color: #64748b;

    font-size: 13px;

    line-height: 1.8;

    transition:
        padding .35s ease;
}


/* ACTIVE */

.school-faq-item.active {
    border-color: #c4b5fd;

    box-shadow:
        0 8px 25px rgba(124,58,237,.08);
}

.school-faq-item.active
.school-faq-answer {
    grid-template-rows: 1fr;
}

.school-faq-item.active
.school-faq-answer p {
    padding:
        0 22px 21px;
}

.school-faq-item.active
.school-faq-question i {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

    transform: rotate(45deg);
}


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

.school-faq-bottom {
    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 20px;

    margin-top: 55px;

    padding: 26px 30px;

    border: 1px solid #ddd6fe;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #f5f3ff,
            #fff
        );
}

.school-faq-bottom-icon {
    width: 54px;
    height: 54px;

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

    border-radius: 14px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #2563eb
        );

    font-size: 21px;
}

.school-faq-bottom span {
    color: #7c3aed;

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

    letter-spacing: 2px;
}

.school-faq-bottom h3 {
    margin: 5px 0 0;

    color: #172033;

    font-size: 19px;
}

.school-faq-bottom > a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 12px 18px;

    border-radius: 9px;

    color: #fff;

    background: #172554;

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

    text-decoration: none;

    transition: .3s ease;
}

.school-faq-bottom > a:hover {
    background: #7c3aed;

    transform: translateY(-2px);
}


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

@media (max-width: 900px) {

    .school-faq-layout {
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .school-faq-intro {
        position: static;
    }

}


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

@media (max-width: 600px) {

    .school-faq-hero {
        min-height: 250px;
    }

    .school-faq-hero-content h1 {
        font-size: 39px;
    }

    .school-faq-section {
        padding: 55px 15px;
    }

    .school-faq-heading h2 {
        font-size: 30px;
    }

    .school-faq-intro {
        padding: 25px;
    }

    .school-faq-intro h3 {
        font-size: 28px;
    }

    .school-faq-question {
        padding: 17px;

        font-size: 13px;
    }

    .school-faq-question i {
        width: 27px;
        height: 27px;
    }

    .school-faq-item.active
    .school-faq-answer p {
        padding:
            0 17px 18px;
    }

    .school-faq-bottom {
        grid-template-columns: 1fr;

        text-align: center;

        padding: 25px 20px;
    }

    .school-faq-bottom-icon {
        margin: auto;
    }

    .school-faq-bottom > a {
        justify-content: center;
    }

}
/*query*/

/* =====================================================
   SCHOOL QUERY PAGE
   UNIQUE CLASSES ONLY
===================================================== */

.school-query-page {
    background: #fff;
    overflow: hidden;
}


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

.school-query-hero {
    position: relative;

    min-height: 330px;

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

    text-align: center;

   background: url("images/query_bg-img.png") center/cover no-repeat;
}

.school-query-hero::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;

    top: -170px;
    left: -80px;

    border-radius: 50%;

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

.school-query-hero::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;

    right: -100px;
    bottom: -210px;

    border-radius: 50%;

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

.school-query-hero-content {
    position: relative;
    z-index: 2;

    max-width: 750px;

    padding: 55px 20px;

    color: #fff;
}

.school-query-hero-icon {
    width: 62px;
    height: 62px;

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

    margin: 0 auto 18px;

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

    border-radius: 16px;

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

    font-size: 24px;
}

.school-query-hero-content span {
    display: block;

    margin-bottom: 12px;

    color: #a7f3d0;

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

    letter-spacing: 4px;
}

.school-query-hero-content h1 {
    margin: 0;

    font-size: clamp(43px, 6vw, 70px);

    line-height: 1.05;

    font-weight: 900;
}

.school-query-hero-content p {
    max-width: 620px;

    margin: 17px auto 0;

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

    font-size: 16px;

    line-height: 1.7;
}


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

.school-query-section {
    padding: 80px 20px;

    background: #f8fafc;
}

.school-query-container {
    max-width: 1150px;

    margin: auto;
}


/* ================= LAYOUT ================= */

.school-query-layout {
    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 60px;

    align-items: start;
}


/* ================= INFO ================= */

.school-query-info {
    padding-top: 20px;
}

.school-query-label {
    color: #059669;

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

    letter-spacing: 3px;
}

.school-query-info h2 {
    margin: 12px 0 18px;

    color: #172033;

    font-size: 39px;

    line-height: 1.15;
}

.school-query-info h2 strong {
    display: block;

    color: #677ccf;
}

.school-query-info p {
    margin: 0;

    color: #64748b;

    font-size: 15px;

    line-height: 1.85;
}


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

.school-query-points {
    display: flex;

    flex-direction: column;

    gap: 18px;

    margin-top: 30px;
}

.school-query-points > div {
    display: flex;

    align-items: center;

    gap: 14px;
}

.school-query-point-icon {
    width: 46px;
    height: 46px;

    flex-shrink: 0;

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

    border-radius: 12px;

    color: #6e769f;

    background: #d3d3e5;
}

.school-query-points h4 {
    margin: 0 0 3px;

    color: #172033;

    font-size: 14px;
}

.school-query-points p {
    margin: 0;

    color: #64748b;

    font-size: 12px;

    line-height: 1.5;
}


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

.school-query-note {
    display: flex;

    gap: 12px;

    margin-top: 30px;

    padding: 15px;

    border-left: 3px solid #059669;

    border-radius: 8px;

    background: #ecfdf5;
}

.school-query-note i {
    padding-top: 2px;

    color: #059669;
}

.school-query-note p {
    margin: 0;

    color: #475569;

    font-size: 12px;

    line-height: 1.6;
}


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

.school-query-form-card {
    padding: 34px;

    border: 1px solid #e2e8f0;

    border-radius: 22px;

    background: #fff;

    box-shadow:
        0 18px 45px rgba(15,23,42,.09);
}


/* FORM HEADING */

.school-query-form-heading {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 27px;

    padding-bottom: 20px;

    border-bottom: 1px solid #e5e7eb;
}

.school-query-form-icon {
    width: 50px;
    height: 50px;

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

    border-radius: 13px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
           #436bb3,
           #39457f
        );

    font-size: 18px;
}

.school-query-form-heading h3 {
    margin: 0 0 4px;

    color: #172033;

    font-size: 22px;
}

.school-query-form-heading p {
    margin: 0;

    color: #94a3b8;

    font-size: 12px;
}


/* ================= ROW ================= */

.school-query-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}


/* ================= FIELD ================= */

.school-query-field {
    margin-bottom: 18px;
}

.school-query-field > label {
    display: block;

    margin-bottom: 7px;

    color: #334155;

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


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

.school-query-input,
.school-query-textarea {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    padding: 12px 14px;

    border: 1px solid #dbe2ea;

    border-radius: 10px;

    background: #fff;

    transition: .3s ease;
}

.school-query-input:focus-within,
.school-query-textarea:focus-within {
    border-color: #10b981;

    box-shadow:
        0 0 0 3px rgba(16,185,129,.10);
}

.school-query-input i,
.school-query-textarea i {
    padding-top: 3px;

    color: #94a3b8;

    font-size: 13px;
}

.school-query-input input,
.school-query-input select,
.school-query-textarea textarea {
    width: 100%;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #334155;

    font-family: inherit;

    font-size: 13px;
}

.school-query-input select {
    cursor: pointer;
}

.school-query-textarea textarea {
    resize: vertical;

    line-height: 1.6;
}


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

.school-query-submit {
    width: 100%;

    display: flex;

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

    gap: 9px;

    padding: 15px;

    border: 0;

    border-radius: 10px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
           #5863ad,
            #6873bd
        );

    cursor: pointer;

    font-family: inherit;

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

    transition: .3s ease;
}

.school-query-submit:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(5,150,105,.22);
}


/* ================= SUCCESS ================= */

.school-query-success {
    display: none;

    margin-top: 13px;

    padding: 11px;

    border-radius: 8px;

    text-align: center;

    color: #047857;

    background: #ecfdf5;

    font-size: 12px;
}

.school-query-success.show {
    display: block;
}


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

.school-query-bottom {
    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 20px;

    margin-top: 55px;

    padding: 27px 30px;

    border: 1px solid #a7f3d0;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5,
            #fff
        );
}

.school-query-bottom-icon {
    width: 54px;
    height: 54px;

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

    border-radius: 14px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #3c4f93,
            #6572ad
        );

    font-size: 20px;
}

.school-query-bottom span {
    color: #059669;

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

    letter-spacing: 2px;
}

.school-query-bottom h3 {
    margin: 5px 0 0;

    color: #172033;

    font-size: 18px;
}

.school-query-bottom a {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 12px 19px;

    border-radius: 9px;

    color: #fff;

    background: #2c3d6b;

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

    text-decoration: none;

    transition: .3s ease;
}

.school-query-bottom a:hover {
    background: #059669;

    transform: translateY(-2px);
}


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

@media (max-width: 900px) {

    .school-query-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

}


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

@media (max-width: 600px) {

    .school-query-hero {
        min-height: 270px;
    }

    .school-query-hero-content h1 {
        font-size: 42px;
    }

    .school-query-section {
        padding: 55px 15px;
    }

    .school-query-info h2 {
        font-size: 31px;
    }

    .school-query-form-card {
        padding: 23px 18px;

        border-radius: 16px;
    }

    .school-query-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .school-query-bottom {
        grid-template-columns: 1fr;

        text-align: center;

        padding: 25px 20px;
    }

    .school-query-bottom-icon {
        margin: auto;
    }

    .school-query-bottom a {
        justify-content: center;
    }
}

/*notice section start here */

/* =====================================================
   NOTICE PAGE
   Unique Classes - No CSS Conflict
===================================================== */

.school-notice-page {
    background: #fff;
    overflow: hidden;
}


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

.notice-page-header {
    position: relative;
    text-align: center;
    padding: 55px 20px 50px;
    background:
        url("images/notice_bg-img.png")
        center/cover no-repeat;
}

.notice-page-header span {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    opacity: .9;
}

.notice-page-header h1 {
    margin: 0;
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 800;
    letter-spacing: 1px;
}

.notice-page-header p {
    margin: 10px 0 0;
    font-size: 16px;
    opacity: .9;
}


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

.notice-board-section {
    padding: 65px 20px;
    background: #f8f9fb;
}

.notice-board-container {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* PANEL */

.notice-panel {
    position: relative;
    min-height: 330px;
    padding: 25px;

    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(0,0,0,.06);

    overflow: hidden;

    transition: .35s ease;
}

.notice-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 70px;
    height: 4px;

    background: linear-gradient(
        90deg,
        #e49b00,
        #f15a00
    );

    border-radius: 0 0 5px 0;
}

.notice-panel:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(0,0,0,.11);
}


/* TITLE */

.notice-panel-title {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 25px;
    padding-bottom: 15px;

    border-bottom: 1px solid #eee;
}

.notice-panel-title i {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border-radius: 12px;

    color: #fff;
    font-size: 18px;

    background: linear-gradient(
        135deg,
        #e49b00,
        #3a4a78
    );
}

.notice-panel-title h2 {
    margin: 0;

    font-size: 20px;
    color: #222;
}


/* LIST */

.notice-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.notice-list a {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: #555;
    text-decoration: none;

    font-size: 14px;
    line-height: 1.55;

    transition: .25s ease;
}

.notice-list a i {
    color: #ef5a12;
    margin-top: 4px;
}

.notice-list a:hover {
    color: #ed4d12;
    transform: translateX(4px);
}


/* EMPTY EVENT */

.notice-empty {
    text-align: center;
    padding: 15px 10px;
}

.notice-empty > i {
    font-size: 42px;
    color: #ef5a12;
    margin-bottom: 15px;
}

.notice-empty h3 {
    margin: 0 0 8px;
    color: #222;
    font-size: 19px;
}

.notice-empty p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


/* VIEW BUTTON */

.notice-view-btn {
    position: absolute;
    bottom: 23px;
    left: 25px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #ed4d12;
    text-decoration: none;

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

    transition: .25s ease;
}

.notice-view-btn:hover {
    gap: 13px;
    color: #d8430c;
}


/* ================= SERVICES ================= */

.notice-services {
    padding: 65px 20px;

    background:
        radial-gradient(
            circle at top right,
            rgba(241,90,0,.08),
            transparent 35%
        ),
        #fff;
}

.notice-services-container {
    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}


/* SERVICE CARD */

.notice-service-card {
    position: relative;

    padding: 38px 28px;

    text-align: center;

    text-decoration: none;

    border-radius: 20px;

    background: linear-gradient(
        135deg,
        #fff7e7,
        #ffffff
    );

    border: 1px solid #f0dfc5;

    box-shadow: 0 10px 28px rgba(0,0,0,.06);

    transition: .35s ease;
}

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

    box-shadow:
        0 20px 40px rgba(0,0,0,.12);

    border-color: #f0a04a;
}


/* ICON */

.service-icon {
    width: 72px;
    height: 72px;

    margin: 0 auto 20px;

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

    border-radius: 18px;

    color: #fff;
    font-size: 28px;

    background: linear-gradient(
        135deg,
        #a99261,
        #121839
    );

    box-shadow:
        0 10px 20px rgba(237,72,18,.22);

    transition: .35s ease;
}

.notice-service-card:hover .service-icon {
    transform: rotate(-4deg) scale(1.06);
}


/* SERVICE TEXT */

.notice-service-card h3 {
    margin: 0 0 10px;

    font-size: 21px;
    color: #222;
}

.notice-service-card p {
    margin: 0 auto 20px;

    max-width: 290px;

    color: #777;

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


/* SERVICE BUTTON */

.notice-service-card span {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 17px;

    border-radius: 8px;

    background: #222;
    color: #fff;

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

    transition: .3s ease;
}

.notice-service-card:hover span {
    background: linear-gradient(
        90deg,
        #e49b00,
        #ed4812
    );

    gap: 12px;
}


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

@media (max-width: 950px) {

    .notice-board-container {
        grid-template-columns: 1fr 1fr;
    }

    .notice-panel:last-child {
        grid-column: span 2;
    }

    .notice-services-container {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 600px) {

    .notice-page-header {
        padding: 45px 15px;
    }

    .notice-board-section,
    .notice-services {
        padding: 45px 15px;
    }

    .notice-board-container {
        grid-template-columns: 1fr;
    }

    .notice-panel:last-child {
        grid-column: auto;
    }

    .notice-services-container {
        grid-template-columns: 1fr;
    }

    .notice-panel {
        min-height: 320px;
    }

}

/*student login start here */
/* =========================================================
   TOPTOPS SCHOOL - STUDENT LOGIN PAGE
   Unique CSS - Navbar & Footer Not Included
========================================================= */

.student-login-main {
    background: #f8fafc;
    overflow: hidden;
    color: #222;
}


/* ================= LOGIN SECTION ================= */

.student-login-section {
    padding: 80px 20px;
}

.student-login-wrapper {
    max-width: 1180px;
    margin: auto;

    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;

    align-items: center;
}


/* ================= LEFT INFO ================= */

.student-login-info {
    padding: 10px 0;
}

.student-login-tag {
    display: inline-block;
    color: #ed4d12;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 14px;
}

.student-login-info h2 {
    margin: 0 0 20px;
    color: #202020;
    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.15;
    font-weight: 700;
}

.student-login-info h2 strong {
    color: #514fa7;
}

.student-login-info > p {
    max-width: 570px;
    margin: 0 0 32px;
    color: #6b7280;
    font-size: 16px;
    line-height: 1.8;
}


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

.student-login-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.student-login-feature {
    display: flex;
    align-items: center;
    gap: 16px;

    padding: 17px 18px;

    background: #fff;
    border: 1px solid #eeeeee;
    border-radius: 14px;

    box-shadow: 0 7px 22px rgba(0,0,0,.05);

    transition: .3s ease;
}

.student-login-feature:hover {
    transform: translateX(7px);
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
}

.student-feature-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;

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

    border-radius: 13px;

    color: #fff;
    font-size: 20px;

    background: linear-gradient(
        135deg,
        #35396f,
        #7e71c1
    );
}

.student-login-feature h3 {
    margin: 0 0 5px;
    color: #222;
    font-size: 16px;
}

.student-login-feature p {
    margin: 0;
    color: #777;
    font-size: 13px;
    line-height: 1.5;
}


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

.student-login-card {
    position: relative;

    padding: 42px 40px;

    background: #fff;

    border: 1px solid #eeeeee;
    border-radius: 22px;

    box-shadow:
        0 18px 50px rgba(0,0,0,.10);

    overflow: hidden;
}

.student-login-card::before {
    content: "";
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        #4956af,
        #3f3e91,
        #5e65bb
    );
}

.student-login-card-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 18px;

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

    border-radius: 18px;

    color: #fff;
    font-size: 27px;

    background: linear-gradient(
        135deg,
        #656fb9,
       #4846ed
    );

    box-shadow: 0 10px 25px rgba(237,76,18,.25);
}

.student-login-card h2 {
    margin: 0;
    text-align: center;

    color: #222;
    font-size: 28px;
}

.student-login-card-subtitle {
    margin: 8px 0 30px;

    text-align: center;

    color: #888;
    font-size: 14px;
}


/* ================= INPUTS ================= */

.student-login-input-group {
    margin-bottom: 20px;
}

.student-login-input-group label {
    display: block;

    margin-bottom: 8px;

    color: #333;
    font-size: 14px;
    font-weight: 600;
}

.student-login-input-box {
    position: relative;

    display: flex;
    align-items: center;

    height: 52px;

    border: 1px solid #e2e2e2;
    border-radius: 11px;

    background: #fff;

    transition: .25s ease;
}

.student-login-input-box:focus-within {
    border-color: #ed5a16;

    box-shadow:
        0 0 0 3px rgba(237,90,22,.10);
}

.student-login-input-box  i {
    width: 48px;

    text-align: center;

    color: #654dab;
    font-size: 16px;
}

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

    padding: 0 12px 0 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #222;
    font-size: 14px;
}

.student-login-input-box input::placeholder {
    color: #aaa;
}


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

.student-password-toggle {
    width: 45px;
    height: 100%;

    border: 0;
    background: transparent;

    color: #888;

    cursor: pointer;

    font-size: 15px;
}

.student-password-toggle:hover {
    color: #ed4d12;
}


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

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

    margin: 5px 0 24px;

    font-size: 13px;
}

.student-remember {
    display: flex;
    align-items: center;
    gap: 7px;

    color: #666;
    cursor: pointer;
}

.student-remember input {
    accent-color: #ed4d12;
}

.student-login-options  a {
    color: #ed4d12;
    text-decoration: none;
    font-weight: 600;
}

.student-login-options a:hover {
    text-decoration: underline;
}


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

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

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

    border: 0;
    border-radius: 11px;

    color: #fff;

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

    cursor: pointer;

    background: linear-gradient(
        135deg,
        #464889,
        #3e3683,
       #56499b
    );

    box-shadow:
        0 10px 25px rgba(237,76,18,.25);

    transition: .3s ease;
}

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

    box-shadow:
        0 15px 30px rgba(237,76,18,.32);
}

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

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


/* ================= HELP ================= */

.student-login-help {
    margin-top: 25px;
    padding: 14px 15px;

    display: flex;
    align-items: center;
    gap: 10px;

    border-radius: 10px;

    background: #fff7e8;
    border: 1px solid #f7dfb0;

    color: #777;

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

.student-login-help > i {
    flex-shrink: 0;
    color: #ed5a16;
    font-size: 17px;
}

.student-login-help a {
    color: #8f7f81;
    font-weight: 700;
    text-decoration: none;
}

.student-login-help a:hover {
    text-decoration: underline;
}


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

@media (max-width: 900px) {

    .student-login-wrapper {
        grid-template-columns: 1fr;
        gap: 45px;
        max-width: 700px;
    }

    .student-login-info {
        text-align: center;
    }

    .student-login-info > p {
        margin-left: auto;
        margin-right: auto;
    }

    .student-login-feature {
        text-align: left;
    }
}


@media (max-width: 600px) {

   

    .student-login-section {
        padding: 50px 16px;
    }

    .student-login-info h2 {
        font-size: 34px;
    }

    .student-login-card {
        padding: 35px 22px;
        border-radius: 18px;
    }

    .student-login-feature {
        padding: 14px;
    }

    .student-feature-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .student-login-options {
        font-size: 12px;
    }
}


@media (max-width: 380px) {

    .student-login-card {
        padding: 30px 17px;
    }

    .student-login-feature {
        align-items: flex-start;
    }

    .student-login-feature h3 {
        font-size: 14px;
    }

    .student-login-feature p {
        font-size: 12px;
    }
}

/*admin login section start here */



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

.toptops-admin-login-section {
    padding: 80px 20px;
}

.toptops-admin-login-wrapper {
    max-width: 1180px;
    margin: auto;

    display: grid;

    grid-template-columns: 1.05fr .95fr;

    gap: 70px;

    align-items: center;
}


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

.toptops-admin-login-info {
    padding: 10px 0;
}

.toptops-admin-login-tag {
    display: inline-block;

    margin-bottom: 14px;

    color: #ed4d12;

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

    letter-spacing: 2px;
}

.toptops-admin-login-info h2 {
    margin: 0 0 20px;

    color: #222;

    font-size: clamp(34px, 4vw, 50px);
    line-height: 1.15;
}

.toptops-admin-login-info h2 strong {
    color:#674d8f;
}

.toptops-admin-login-info > p {
    max-width: 570px;

    margin: 0 0 32px;

    color: #6b7280;

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


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

.toptops-admin-features {
    display: flex;
    flex-direction: column;

    gap: 17px;
}

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

    gap: 16px;

    padding: 16px 18px;

    background: #fff;

    border: 1px solid #eeeeee;

    border-radius: 14px;

    box-shadow: 0 7px 22px rgba(0,0,0,.05);

    transition: .3s ease;
}

.toptops-admin-feature:hover {
    transform: translateX(7px);

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

.toptops-admin-feature-icon {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

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

    border-radius: 13px;

    color: #fff;

    font-size: 19px;

    background: linear-gradient(
        135deg,
        #3d331f,
        #332983
    );
}

.toptops-admin-feature h3 {
    margin: 0 0 4px;

    color: #222;

    font-size: 16px;
}

.toptops-admin-feature p {
    margin: 0;

    color: #777;

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


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

.toptops-admin-login-card {
    position: relative;

    padding: 42px 40px;

    background: #fff;

    border: 1px solid #eeeeee;

    border-radius: 22px;

    box-shadow:
        0 18px 50px rgba(0,0,0,.10);

    overflow: hidden;
}

.toptops-admin-login-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        #586ccb,
        #484277,
        #6891c5
    );
}


/* CARD ICON */

.toptops-admin-login-card-icon {
    width: 68px;
    height: 68px;

    margin: 0 auto 18px;

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

    border-radius: 18px;

    color: #fff;

    font-size: 27px;

    background: linear-gradient(
        135deg,
        #636db1,
        #374ad1
    );

    box-shadow:
        0 10px 25px rgba(237,76,18,.24);
}

.toptops-admin-login-card h2 {
    margin: 0;

    text-align: center;

    color: #222;

    font-size: 28px;
}

.toptops-admin-login-subtitle {
    margin: 8px 0 30px;

    text-align: center;

    color: #888;

    font-size: 14px;
}


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

.toptops-admin-input-group {
    margin-bottom: 20px;
}

.toptops-admin-input-group label {
    display: block;

    margin-bottom: 8px;

    color: #333;

    font-size: 14px;
    font-weight: 600;
}

.toptops-admin-input-box {
    position: relative;

    height: 52px;

    display: flex;
    align-items: center;

    border: 1px solid #e2e2e2;

    border-radius: 11px;

    background: #fff;

    transition: .25s ease;
}

.toptops-admin-input-box:focus-within {
    border-color: #ed5a16;

    box-shadow:
        0 0 0 3px rgba(237,90,22,.10);
}

.toptops-admin-input-box i {
    width: 48px;

    text-align: center;

    color: #201e83;

    font-size: 16px;
}

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

    padding: 0 12px 0 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #222;

    font-size: 14px;
}

.toptops-admin-input-box input::placeholder {
    color: #aaa;
}


/* ================= PASSWORD BUTTON ================= */

.toptops-admin-password-toggle {
    width: 45px;
    height: 100%;

    flex-shrink: 0;

    border: 0;

    background: transparent;

    color: #888;

    cursor: pointer;

    font-size: 15px;
}

.toptops-admin-password-toggle:hover {
    color: #ed4d12;
}


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

.toptops-admin-login-options {
    display: flex;

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

    margin: 5px 0 24px;

    font-size: 13px;
}

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

    gap: 7px;

    color: #666;

    cursor: pointer;
}

.toptops-admin-remember input {
    accent-color: #ed4d12;
}

.toptops-admin-login-options a {
    color: #ed4d12;

    text-decoration: none;

    font-weight: 600;
}

.toptops-admin-login-options a:hover {
    text-decoration: underline;
}


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

.toptops-admin-login-btn {
    width: 100%;
    height: 54px;

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

    gap: 11px;

    border: 0;

    border-radius: 11px;

    color: #fff;

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

    cursor: pointer;

    background: linear-gradient(
        135deg,
        #283471,
        #7f2a5d,
        #45359b
    );

    box-shadow:
        0 10px 25px rgba(237,76,18,.24);

    transition: .3s ease;
}

.toptops-admin-login-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 15px 30px rgba(237,76,18,.32);
}

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

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


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

.toptops-admin-security-note {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-top: 22px;
    padding: 13px 14px;

    border-radius: 10px;

    background: #fff8e9;

    border: 1px solid #f4dfb5;

    color: #777;

    font-size: 11px;

    line-height: 1.5;
}

.toptops-admin-security-note i {
    flex-shrink: 0;

    color: #d89400;
}


/* ================= HELP ================= */

.toptops-admin-login-help {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 18px;
    padding-top: 17px;

    border-top: 1px solid #eee;

    color: #888;

    font-size: 12px;

    text-align: center;
}

.toptops-admin-login-help > i {
    color: #ed5a16;
}

.toptops-admin-login-help a {
    color: #ed4d12;

    font-weight: 700;

    text-decoration: none;
}

.toptops-admin-login-help a:hover {
    text-decoration: underline;
}


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

@media (max-width: 900px) {

    .toptops-admin-login-wrapper {
        grid-template-columns: 1fr;

        max-width: 700px;

        gap: 45px;
    }

    .toptops-admin-login-info {
        text-align: center;
    }

    .toptops-admin-login-info > p {
        margin-left: auto;
        margin-right: auto;
    }

    .toptops-admin-feature {
        text-align: left;
    }
}


@media (max-width: 600px) {

    .toptops-admin-login-section {
        padding: 50px 16px;
    }

    .toptops-admin-login-info h2 {
        font-size: 34px;
    }

    .toptops-admin-login-card {
        padding: 35px 22px;

        border-radius: 18px;
    }

    .toptops-admin-feature {
        padding: 14px;
    }

    .toptops-admin-feature-icon {
        width: 45px;
        height: 45px;
    }

    .toptops-admin-login-options {
        font-size: 12px;
    }
}

/* admission form start here */
/* =========================================================
   TOPTOPS SCHOOL
   ADMISSION FORM - FINAL CSS
   Unique Classes Only
========================================================= */

.toptops-admission-page {
    background: #f7f8fb;
    overflow: hidden;
}


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

.toptops-admission-hero {
    min-height: 285px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
url("images/admission_bg-img.png")
center/cover no-repeat;
    position: relative;
    overflow: hidden;
}

.toptops-admission-hero::before,
.toptops-admission-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
}

.toptops-admission-hero::before {
    width: 260px;
    height: 260px;
    left: -80px;
    top: -100px;
}

.toptops-admission-hero::after {
    width: 320px;
    height: 320px;
    right: -110px;
    bottom: -170px;
}

.toptops-admission-hero-content {
    position: relative;
    z-index: 2;
    padding: 45px 20px;
    color: #fff;
}

.toptops-admission-hero-content span {
    display: block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.toptops-admission-hero-content h1 {
    margin: 0;
    font-size: clamp(40px, 6vw, 68px);
    line-height: 1.1;
    font-weight: 800;
}

.toptops-admission-hero-content p {
    max-width: 650px;
    margin: 14px auto 0;
    font-size: 16px;
    line-height: 1.7;
    opacity: .95;
}


/* =========================================================
   MAIN AREA
========================================================= */

.toptops-admission-area {
    padding: 70px 20px;
}

.toptops-admission-wrapper {
    max-width: 1050px;
    margin: 0 auto;
}


/* =========================================================
   INTRO
========================================================= */

.toptops-admission-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 35px;
}

.toptops-admission-intro  div:first-child span {
    display: block;
    margin-bottom: 8px;
    color: #09214f;
    font-size: 13px;
    font-weight: 1000;
    letter-spacing: 2px;
}

.toptops-admission-intro h2 {
    margin: 0 0 8px;
    color: #222;
    font-size: 34px;
    font-weight: 800;
}

.toptops-admission-intro p {
    margin: 0;
    color: #777;
    font-size: 14px;
    line-height: 1.7;
}


/* SESSION BADGE */

.toptops-admission-badge {
    min-width: 145px;
    padding: 17px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 8px 25px rgba(0,0,0,.07);
}

.toptops-admission-badge i {
    margin-bottom: 7px;
    color: #313569;
    font-size: 25px;
}

.toptops-admission-badge strong {
    color: #222;
    font-size: 18px;
}

.toptops-admission-badge small {
    margin-top: 3px;
    color: #888;
    font-size: 11px;
}


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

.toptops-admission-box {
    margin-bottom: 22px;
    padding: 28px;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 17px;
    box-shadow: 0 8px 28px rgba(0,0,0,.055);
}


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

.toptops-admission-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 25px;
    padding-bottom: 17px;
    border-bottom: 1px solid #eeeeee;
}

.toptops-admission-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;

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

    border-radius: 13px;

    color: #fff;
    font-size: 19px;

    background: linear-gradient(
        135deg,
        #394777,
        #6b65c3
    );

    box-shadow: 0 7px 18px rgba(237,76,18,.17);
}

.toptops-admission-title small {
    display: block;
    margin-bottom: 3px;
    color: #ed5a16;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.toptops-admission-title h3 {
    margin: 0;
    color: #222;
    font-size: 19px;
    font-weight: 750;
}


/* =========================================================
   FIELDS GRID
========================================================= */

.toptops-admission-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 19px 22px;
}

.toptops-admission-field {
    min-width: 0;
}

.toptops-admission-full {
    grid-column: 1 / -1;
}


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

.toptops-admission-field label {
    display: block;
    margin-bottom: 7px;
    color: #333;
    font-size: 13px;
    font-weight: 650;
}

.toptops-admission-field label b {
    color: #383c73;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

.toptops-admission-field input,
.toptops-admission-field select,
.toptops-admission-field textarea {
    width: 100%;
    box-sizing: border-box;

    border: 1px solid #dedede;
    border-radius: 9px;

    outline: none;

    background: #fff;
    color: #333;

    font-family: inherit;
    font-size: 13px;

    transition: .25s ease;
}

.toptops-admission-field input,
.toptops-admission-field select {
    height: 48px;
    padding: 0 13px;
}

.toptops-admission-field textarea {
    min-height: 95px;
    padding: 12px 13px;
    resize: vertical;
}

.toptops-admission-field input::placeholder,
.toptops-admission-field textarea::placeholder {
    color: #a4a4a4;
}


/* FOCUS */

.toptops-admission-field input:focus,
.toptops-admission-field select:focus,
.toptops-admission-field textarea:focus {
    border-color: #424091;
    box-shadow: 0 0 0 3px rgba(237,90,22,.09);
}


/* FILE INPUT */

.toptops-admission-field input[type="file"] {
    padding: 13px;
    cursor: pointer;
    background: #fafafa;
}


/* =========================================================
   DECLARATION
========================================================= */

.toptops-admission-declaration {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin: 25px 0;

    padding: 17px 19px;

    border: 1px solid #f0dfc3;
    border-radius: 12px;

    background: #fffaf1;

    color: #666;
    font-size: 13px;
    line-height: 1.6;
}

.toptops-admission-declaration input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: #242975;
    cursor: pointer;
}

.toptops-admission-declaration label {
    cursor: pointer;
}


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

.toptops-admission-submit-area {
    display: flex;
    justify-content: center;
}

.toptops-admission-submit {
    min-width: 230px;
    min-height: 51px;

    padding: 0 25px;

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

    border: 0;
    border-radius: 10px;

    color: #fff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    background: linear-gradient(
        135deg,
        #484f9d,
        #0e0e29,
        #242c63
    );

    box-shadow: 0 9px 22px rgba(52 18 237 / 22%);

    transition: .3s ease;
}

.toptops-admission-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(237,76,18,.30);
}

.toptops-admission-submit i {
    transition: .3s ease;
}

.toptops-admission-submit:hover i {
    transform: translateX(4px);
}


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

.toptops-admission-note {
    margin: 17px 0 0;

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

    gap: 6px;

    color: #888;
    font-size: 12px;

    text-align: center;
}

.toptops-admission-note i {
    color: #050b1c;
}


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

@media (max-width: 750px) {

    .toptops-admission-area {
        padding: 55px 16px;
    }

    .toptops-admission-intro {
        align-items: flex-start;
    }

    .toptops-admission-fields {
        grid-template-columns: 1fr;
    }

    .toptops-admission-full {
        grid-column: auto;
    }

    .toptops-admission-badge {
        min-width: 115px;
    }
}


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

@media (max-width: 550px) {

    .toptops-admission-hero {
        min-height: 240px;
    }

    .toptops-admission-hero-content {
        padding: 38px 15px;
    }

    .toptops-admission-hero-content span {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .toptops-admission-hero-content h1 {
        font-size: 39px;
    }

    .toptops-admission-hero-content p {
        font-size: 13px;
    }


    .toptops-admission-intro {
        flex-direction: column;
        gap: 20px;
    }

    .toptops-admission-intro h2 {
        font-size: 29px;
    }

    .toptops-admission-badge {
        width: 100%;
        box-sizing: border-box;
    }


    .toptops-admission-box {
        padding: 21px 16px;
        border-radius: 14px;
    }

    .toptops-admission-title {
        gap: 10px;
        margin-bottom: 21px;
    }

    .toptops-admission-icon {
        width: 43px;
        height: 43px;
        font-size: 17px;
    }

    .toptops-admission-title h3 {
        font-size: 17px;
    }


    .toptops-admission-declaration {
        padding: 14px;
        font-size: 12px;
    }

    .toptops-admission-submit {
        width: 100%;
        min-width: 0;
    }

    .toptops-admission-note {
        align-items: flex-start;
        line-height: 1.5;
    }
}

/* top bar responsive*/


/* =========================================================
   TOP BAR MOBILE - FORCE FIX
========================================================= */

@media only screen and (max-width: 600px) {

    /* MAIN BAR */
    .top-bar {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }


    /* INNER CONTAINER */
    .top-bar .top-bar-inner {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 5px !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;

        gap: 5px !important;

        box-sizing: border-box !important;
    }


    /* =========================
       FIRST ROW
    ========================= */

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

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

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

        flex-wrap: nowrap !important;

        gap: 6px !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
    }


    /* =========================
       SECOND ROW
    ========================= */

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

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

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

        flex-wrap: nowrap !important;

        gap: 9px !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
        overflow: hidden !important;
    }


    /* TEXT */
    .top-bar .top-left a,
    .top-bar .top-left span,
    .top-bar .top-right a,
    .top-bar .top-right span {

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

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 9px !important;
        line-height: 12px !important;

        white-space: nowrap !important;
    }


    /* ICONS */
    .top-bar .top-left i,
    .top-bar .top-right i {

        display: inline-block !important;

        width: auto !important;

        margin: 0 3px 0 0 !important;

        font-size: 8px !important;
    }


    /* DIVIDER */
    .top-bar .top-divider {

        display: inline-block !important;

        width: 1px !important;
        min-width: 1px !important;
        height: 11px !important;

        margin: 0 1px !important;
        padding: 0 !important;

        background: rgba(255,255,255,.4) !important;

        flex-shrink: 0 !important;
    }
}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media only screen and (max-width: 400px) {

    .top-bar {
        padding: 5px 0 !important;
    }

    .top-bar .top-bar-inner {
        padding: 0 3px !important;
        gap: 4px !important;
    }

    .top-bar .top-left {
        gap: 4px !important;
    }

    .top-bar .top-right {
        gap: 7px !important;
    }

    .top-bar .top-left a,
    .top-bar .top-left span,
    .top-bar .top-right a,
    .top-bar .top-right span {
        font-size: 8px !important;
        line-height: 11px !important;
    }

    .top-bar .top-left i,
    .top-bar .top-right i {
        font-size: 7px !important;
        margin-right: 2px !important;
    }

    .top-bar .top-divider {
        height: 9px !important;
    }
}


/* ===============================
   SECOND ROW - EXTRA BOLD
================================ */

@media only screen and (max-width: 600px) {

    .top-bar .top-right a {
        font-weight: 800 !important;
        font-size: 9.5px !important;
        letter-spacing: .15px;
    }

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

}

@media only screen and (max-width: 400px) {

    .top-bar .top-right a {
        font-weight: 800 !important;
        font-size: 8.5px !important;
        letter-spacing: .1px;
    }

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

}



/* registration section start here*/
/* =========================================================
   TOPTOPS SCHOOL
   REGISTRATION PAGE
========================================================= */

.toptops-registration-main {
    background: #f7f9fc;
    overflow: hidden;
}


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

.toptops-registration-hero {
    min-height: 270px;

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

    text-align: center;

    background: linear-gradient(
        110deg,
        #061b3d,
        #07366d,
        #064b8e,
        #052957
    );

    position: relative;
    overflow: hidden;
}

.toptops-registration-hero::before {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    left: -120px;
    top: -150px;

    border-radius: 50%;

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

.toptops-registration-hero-content {
    position: relative;
    z-index: 2;

    padding: 45px 20px;

    color: #fff;
}

.toptops-registration-hero-content span {
    display: block;

    margin-bottom: 10px;

    color: #f4c342;

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

    letter-spacing: 3px;
}

.toptops-registration-hero-content h1 {
    margin: 0;

    font-size: clamp(38px, 6vw, 62px);

    font-weight: 800;
}

.toptops-registration-hero-content p {
    max-width: 620px;

    margin: 12px auto 0;

    font-size: 15px;
    line-height: 1.7;

    opacity: .9;
}


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

.toptops-registration-section {
    padding: 65px 20px;
}

.toptops-registration-container {
    max-width: 900px;
    margin: auto;
}


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

.toptops-registration-heading {
    text-align: center;
    margin-bottom: 35px;
}

.toptops-registration-heading span {
    color: #0a4b86;

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

    letter-spacing: 2px;
}

.toptops-registration-heading h2 {
    margin: 8px 0;

    color: #172033;

    font-size: 34px;
    font-weight: 800;
}

.toptops-registration-heading p {
    max-width: 580px;

    margin: auto;

    color: #777;

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


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

.toptops-registration-card {
    margin-bottom: 22px;

    padding: 27px;

    background: #fff;

    border: 1px solid #e7ebf0;

    border-radius: 16px;

    box-shadow: 0 8px 25px rgba(9,39,72,.06);
}


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

.toptops-registration-card-title {
    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 24px;

    padding-bottom: 16px;

    border-bottom: 1px solid #edf0f4;
}

.toptops-registration-icon {
    width: 45px;
    height: 45px;

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

    flex-shrink: 0;

    border-radius: 12px;

    color: #fff;

    font-size: 18px;

    background: linear-gradient(
        135deg,
        #0b4f8a,
        #176fb5
    );
}

.toptops-registration-card-title small {
    display: block;

    color: #d39b16;

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

    letter-spacing: 1px;
}

.toptops-registration-card-title h3 {
    margin: 3px 0 0;

    color: #202938;

    font-size: 18px;
}


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

.toptops-registration-grid {
    display: grid;

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

    gap: 19px 22px;
}


/* =========================================================
   FIELD
========================================================= */

.toptops-registration-field {
    width: 100%;
}

.toptops-registration-field label {
    display: block;

    margin-bottom: 7px;

    color: #333;

    font-size: 13px;
    font-weight: 650;
}

.toptops-registration-field label b {
    color: #e05220;
}


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

.toptops-registration-field input,
.toptops-registration-field select,
.toptops-registration-field textarea {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #dce2e8;

    border-radius: 8px;

    outline: none;

    background: #fff;

    color: #333;

    font-family: inherit;

    font-size: 13px;

    transition: .25s ease;
}

.toptops-registration-field input,
.toptops-registration-field select {

    height: 46px;

    padding: 0 12px;
}

.toptops-registration-field textarea {

    padding: 12px;

    resize: vertical;

    min-height: 90px;
}

.toptops-registration-field input::placeholder,
.toptops-registration-field textarea::placeholder {
    color: #a2a9b1;
}


/* FOCUS */

.toptops-registration-field input:focus,
.toptops-registration-field select:focus,
.toptops-registration-field textarea:focus {

    border-color: #176fb5;

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


/* =========================================================
   DECLARATION
========================================================= */

.toptops-registration-declaration {

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

    gap: 9px;

    margin: 24px 0;

    padding: 15px 17px;

    background: #eef6fc;

    border: 1px solid #d6e7f5;

    border-radius: 10px;

    color: #5f6874;

    font-size: 12px;

    line-height: 1.6;
}

.toptops-registration-declaration input {

    width: 16px;
    height: 16px;

    flex-shrink: 0;

    margin-top: 2px;

    accent-color: #0b568f;
}

.toptops-registration-declaration label {
    cursor: pointer;
}


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

.toptops-registration-submit {
    display: flex;

    justify-content: center;
}

.toptops-registration-submit button {

    min-width: 220px;

    height: 49px;

    padding: 0 24px;

    display: inline-flex;

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

    gap: 9px;

    border: 0;

    border-radius: 9px;

    color: #fff;

    background: linear-gradient(
        110deg,
        #07366d,
        #07539a
    );

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(7,61,112,.20);

    transition: .3s ease;
}

.toptops-registration-submit button:hover {

    transform: translateY(-3px);

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


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

@media (max-width: 700px) {

    .toptops-registration-section {
        padding: 50px 16px;
    }

    .toptops-registration-grid {
        grid-template-columns: 1fr;
    }

}


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

@media (max-width: 500px) {

    .toptops-registration-hero {
        min-height: 235px;
    }

    .toptops-registration-hero-content {
        padding: 35px 15px;
    }

    .toptops-registration-hero-content h1 {
        font-size: 38px;
    }

    .toptops-registration-hero-content p {
        font-size: 13px;
    }

    .toptops-registration-heading h2 {
        font-size: 28px;
    }

    .toptops-registration-card {
        padding: 21px 16px;
        border-radius: 13px;
    }

    .toptops-registration-card-title h3 {
        font-size: 16px;
    }

    .toptops-registration-submit button {
        width: 100%;
    }

}