.school-home-page {
    --school-hero-surface: color-mix(in srgb, var(--primary-color) 8%, #ffffff);
    --school-card-shadow: 0 24px 70px rgba(47, 43, 74, 0.12);
    --school-heading: var(--school-heading-color, #2f2b4a);
    --school-body: var(--text--secondary-color, #6d6a86);
    --school-border: color-mix(in srgb, var(--school-heading) 9%, transparent);
    --school-soft-surface: var(--school-section-background-color, #f7f6fc);
    --school-card-surface: var(--school-card-background-color, #ffffff);
    --school-accent-surface: var(--school-accent-background-color, #2f2b4a);
    --school-accent-text: var(--school-accent-text-color, #ffffff);
    --school-footer-surface: var(--school-footer-background-color, #2f2b4a);
    --school-footer-text: var(--school-footer-text-color, #e7e4f2);
    background: var(--primary-background-color, #ffffff) !important;
    color: var(--school-body);
}

.school-home-page .navbar {
    position: sticky !important;
    top: 0;
    z-index: 20;
    padding: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--school-navbar-text-color, #2f2b4a) 9%, transparent);
    background-color: var(--school-navbar-background-color, #ffffff) !important;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--school-navbar-text-color, #2f2b4a) 8%, transparent);
}

.school-home-page .navbar .navbarWrapper {
    height: 80px;
    margin-top: 0;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.school-home-page .schoolNavbar .navbarWrapper {
    gap: 18px;
}

.school-home-page .schoolNavbarBrand {
    display: inline-flex;
    min-width: 142px;
    flex: 0 0 auto;
    align-items: center;
}

.school-home-page .schoolNavbarBrand .companyLogo,
.school-home-page .schoolNavbarBrand .nav-logo {
    width: auto;
    max-width: 155px;
    height: 48px;
    object-fit: contain;
}

.school-home-page .desktopSchoolNav {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    justify-content: center;
}

.school-home-page .desktopSchoolNav .listItems {
    gap: 18px;
    justify-content: center;
}

.school-home-page .desktopSchoolNav .listItems > li > a,
.school-home-page .schoolNavbar .navbarTextButton {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--school-navbar-text-color, #2f2b4a);
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
}

.school-home-page .desktopSchoolNav .listItems > li > a:hover,
.school-home-page .schoolNavbar .navbarTextButton:hover {
    color: var(--primary-color);
}

.school-home-page .navbarActions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
}

.school-home-page .navbarLanguageButton {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    border: 1px solid var(--school-border);
    border-radius: 11px;
    background: var(--school-card-surface);
    color: var(--school-navbar-text-color, #2f2b4a);
    font-size: 13px;
    font-weight: 750;
}

.school-home-page .navbarLanguageButton i {
    color: var(--primary-color);
}

.school-home-page .navbarActions .commonBtn {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 9px 15px;
    border-radius: 11px;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.school-home-page .navbarAdmissionBtn {
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    background: color-mix(in srgb, var(--primary-color) 8%, #ffffff);
    color: var(--primary-color) !important;
    box-shadow: none;
}

.school-home-page .navbarAdmissionBtn:hover {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 13%, #ffffff);
}

.school-home-page .navbarLoginBtn {
    border: 1px solid var(--primary-color) !important;
    background: var(--primary-color) !important;
    color: #ffffff !important;
    box-shadow: 0 9px 22px color-mix(in srgb, var(--primary-color) 23%, transparent);
}

.school-home-page .navbarLoginBtn:hover {
    border-color: var(--primary-hover-color) !important;
    background: var(--primary-hover-color) !important;
}

.school-home-page .schoolNavbar .dropdown-menu {
    min-width: 205px;
    margin-top: 12px !important;
    padding: 8px;
    border: 1px solid var(--school-border);
    border-radius: 14px;
    background: var(--school-card-surface);
    box-shadow: 0 18px 45px rgba(47, 43, 74, 0.14);
}

.school-home-page .schoolNavbar .dropdown-menu hr {
    display: none;
}

.school-home-page .schoolNavbar .dropdown-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 42px;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--school-heading) !important;
    font-size: 13px;
    font-weight: 650;
}

.school-home-page .schoolNavbar .dropdown-item i {
    width: 18px;
    color: var(--primary-color);
    text-align: center;
}

.school-home-page .schoolNavbar .dropdown-item:hover {
    background: color-mix(in srgb, var(--primary-color) 7%, #ffffff);
    color: var(--primary-color) !important;
}

.school-home-page .navbarMenuToggle {
    display: none;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    place-items: center;
    border: 1px solid var(--school-border);
    border-radius: 12px;
    background: var(--school-card-surface);
    color: var(--school-navbar-text-color, #2f2b4a);
    font-size: 18px;
}

.school-home-page .schoolNavbar .offcanvas-header {
    min-height: 82px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--school-border);
}

.school-home-page .schoolNavbar .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 10px 22px 26px;
}

.school-home-page .mobileSchoolNav .listItems {
    display: flex !important;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
}

.school-home-page .mobileSchoolNav .listItems li {
    margin: 0;
    padding: 0 !important;
    border-bottom: 1px solid var(--school-border);
}

.school-home-page .mobileSchoolNav .listItems li a {
    display: flex;
    min-height: 52px;
    align-items: center;
    color: var(--school-navbar-text-color, #2f2b4a);
    font-size: 15px;
    font-weight: 750;
}

.school-home-page .mobileNavbarLanguage {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 24px;
    padding: 16px;
    border-radius: 14px;
    background: var(--school-soft-surface);
}

.school-home-page .mobileNavbarLanguage > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--school-heading);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.school-home-page .mobileNavbarLanguage > span i {
    color: var(--primary-color);
}

.school-home-page .mobileLanguageLinks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.school-home-page .mobileLanguageLinks a {
    padding: 7px 10px;
    border: 1px solid var(--school-border);
    border-radius: 9px;
    background: var(--school-card-surface);
    color: var(--school-body) !important;
    font-size: 12px;
    font-weight: 700;
}

.school-home-page .mobileNavbarActions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
}

.school-home-page .mobileNavbarActions .commonBtn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    text-decoration: none;
}

.school-home-page .navbar ul li a,
.school-home-page .navbar .dropdown-toggle {
    color: var(--school-navbar-text-color, #2f2b4a);
    font-weight: 700;
}

.school-home-page .navbar ul li a:hover,
.school-home-page .navbar .dropdown-toggle:hover {
    color: var(--primary-color);
}

.school-home-page .navbar .commonBtn,
.school-home-page .commonBtn {
    border-radius: 12px;
    font-weight: 700;
}

.school-home-page .main {
    overflow: hidden;
}

.school-home-page .schoolHero {
    position: relative;
    min-height: 760px;
    margin: -96px 0 0;
    overflow: hidden;
    padding: 154px 0 74px;
    background:
        radial-gradient(circle at 9% 16%, color-mix(in srgb, var(--secondary-color2) 24%, transparent) 0, transparent 25%),
        radial-gradient(circle at 92% 13%, color-mix(in srgb, var(--primary-color) 19%, transparent) 0, transparent 27%),
        linear-gradient(145deg, var(--primary-background-color, #f8fbff) 0%, var(--school-soft-surface) 100%);
}

.school-home-page .schoolHeroPattern {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--primary-color) 17%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--primary-color) 17%, transparent) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: linear-gradient(90deg, #000 0, transparent 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, transparent 55%, transparent 100%);
}

.school-home-page .schoolHeroOrb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(1px);
}

.school-home-page .schoolHeroOrbOne {
    top: 155px;
    right: 4%;
    width: 190px;
    height: 190px;
    background: color-mix(in srgb, var(--secondary-color2) 20%, transparent);
}

.school-home-page .schoolHeroOrbTwo {
    bottom: 26px;
    left: 3%;
    width: 110px;
    height: 110px;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.school-home-page .schoolHeroContainer {
    position: relative;
    z-index: 1;
}

.school-home-page .schoolHeroShell {
    position: relative;
    overflow: hidden;
    padding: 28px 28px 28px 52px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 38px;
    background: color-mix(in srgb, var(--school-card-surface) 80%, transparent);
    box-shadow: 0 30px 90px rgba(47, 43, 74, 0.12);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.school-home-page .schoolHeroShell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 52px;
    width: 92px;
    height: 4px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color2));
}

.school-home-page .schoolHeroCopyColumn {
    position: relative;
    z-index: 2;
    padding: 34px 48px 34px 0;
}

.school-home-page .schoolHeroMediaColumn {
    position: relative;
    z-index: 1;
}

.school-home-page .schoolHeroContent {
    display: flex;
    max-width: 610px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.school-home-page .schoolHeroEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 13px 7px 8px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 16%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 7%, var(--school-card-surface));
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.school-home-page .schoolHeroEyebrowIcon {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 12px;
}

.school-home-page .schoolHero h1 {
    max-width: 650px;
    margin: 0;
    color: var(--school-heading);
    font-size: clamp(44px, 4.6vw, 68px);
    font-weight: 850;
    line-height: 1.02;
    letter-spacing: -0.05em;
}

.school-home-page .schoolHeroLead {
    max-width: 560px;
    margin: 0;
    color: var(--school-body);
    font-size: 17px;
    font-weight: 550;
    line-height: 1.7;
}

.school-home-page .schoolHeroFeatures {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.school-home-page .schoolHeroFeatures span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid var(--school-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--school-card-surface) 72%, transparent);
    color: var(--school-body);
    font-size: 12px;
    font-weight: 750;
}

.school-home-page .schoolHeroFeatures i {
    color: var(--primary-color);
}

.school-home-page .schoolHeroActions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 2px;
}

.school-home-page .schoolHeroActions .commonBtn {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 13px 22px;
    border-radius: 13px;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.school-home-page .schoolHeroPrimary {
    background: var(--primary-color);
    box-shadow: 0 13px 28px color-mix(in srgb, var(--primary-color) 29%, transparent);
    color: #ffffff !important;
}

.school-home-page .schoolHeroPrimary:hover {
    background: var(--primary-hover-color);
    box-shadow: 0 17px 32px color-mix(in srgb, var(--primary-color) 34%, transparent);
    transform: translateY(-3px);
}

.school-home-page .schoolHeroSecondary {
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, #e5e2f2);
    background: var(--school-card-surface);
    color: var(--school-heading) !important;
}

.school-home-page .schoolHeroSecondary:hover {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 7%, #ffffff);
    color: var(--primary-color) !important;
}

.school-home-page .schoolHeroMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    padding-top: 2px;
}

.school-home-page .schoolHeroMeta span,
.school-home-page .schoolHeroMeta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--school-body) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.school-home-page .schoolHeroMeta i {
    color: var(--primary-color);
}

.school-home-page .schoolHeroVisual {
    position: relative;
    max-width: 610px;
    min-height: 565px;
    margin-inline: auto 0;
    padding: 0 0 0 18px;
}

.school-home-page .schoolHeroVisual::before {
    content: '';
    position: absolute;
    inset: 22px -28px -28px 56px;
    border-radius: 30px 0 30px 30px;
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.2) 0 5px, transparent 6px),
        linear-gradient(145deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 66%, #2f2b4a));
    box-shadow: 0 25px 55px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.school-home-page .schoolHeroImageCard {
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: 565px;
    border: 8px solid var(--school-card-surface);
    border-radius: 28px 6px 28px 28px;
    background: var(--school-card-surface);
    box-shadow: var(--school-card-shadow);
}

.school-home-page .schoolHeroImageCard .item,
.school-home-page .schoolHeroImageCard .item a {
    display: block;
}

.school-home-page .schoolHeroImageCard .swiperImage {
    display: block;
    width: 100%;
    height: 549px;
    object-fit: cover;
    object-position: 88% center;
}

.school-home-page .schoolHeroImageCard::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(transparent, rgba(35, 33, 57, 0.56));
}

.school-home-page .schoolHeroImageCard .owl-dots {
    position: absolute;
    z-index: 3;
    right: 18px;
    bottom: 18px;
}

.school-home-page .schoolHeroImageCard .owl-dot span {
    background: rgba(255, 255, 255, 0.62);
}

.school-home-page .schoolHeroImageCard .owl-dot.active span {
    width: 24px;
    background: #ffffff;
}

.school-home-page .schoolHeroImageCard .owl-nav {
    display: none;
}

.school-home-page .schoolHeroImageCaption {
    position: absolute;
    z-index: 2;
    bottom: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #ffffff;
    pointer-events: none;
}

.school-home-page .schoolHeroImageCaption > span:last-child,
.school-home-page .schoolHeroBadge > span:last-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.school-home-page .schoolHeroImageCaption small,
.school-home-page .schoolHeroBadge small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    opacity: 0.72;
    text-transform: uppercase;
}

.school-home-page .schoolHeroImageCaption strong,
.school-home-page .schoolHeroBadge strong {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.school-home-page .schoolHeroCaptionIcon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.school-home-page .schoolHeroBadge {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 240px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 15px;
    background: color-mix(in srgb, var(--school-card-surface) 94%, transparent);
    box-shadow: 0 14px 38px rgba(47, 43, 74, 0.16);
    color: var(--school-heading);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.school-home-page .schoolHeroBadgeTop {
    top: 32px;
    left: -24px;
}

.school-home-page .schoolHeroBadgeBottom {
    right: -10px;
    bottom: 30px;
}

.school-home-page .schoolHeroBadgeIcon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary-color) 12%, var(--school-card-surface));
    color: var(--primary-color);
}

.school-home-page .schoolHeroBadgeNumber {
    color: var(--primary-color);
    font-size: 26px;
    font-weight: 850;
    line-height: 1;
}

.school-home-page .main > section:not(.heroSection),
.school-home-page .main > .aboutUs,
.school-home-page .main > .ourTeachers,
.school-home-page .main > .ourPhotos {
    position: relative;
}

.school-home-page .programs .card,
.school-home-page .faqs .accordion-item,
.school-home-page .events .card {
    border: 1px solid rgba(47, 43, 74, 0.07);
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(47, 43, 74, 0.07);
}

.school-home-page .commonTag {
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 8%, var(--school-card-surface));
}

.school-home-page .commonTag::before {
    display: none;
}

.school-home-page footer {
    margin-top: 110px;
}

@media (max-width: 1199px) {
    .school-home-page .navbar .listItems,
    .school-home-page .navbar > .container > .navbarWrapper > .loginWrapper {
        display: none;
    }

    .school-home-page .navbar .hamburg {
        display: block;
    }

    .school-home-page .schoolHero {
        margin-top: -96px;
        padding-top: 164px;
    }

    .school-home-page .schoolHeroShell {
        padding: 24px 24px 24px 38px;
    }

    .school-home-page .schoolHeroCopyColumn {
        padding: 30px 34px 30px 0;
    }

    .school-home-page .schoolHeroVisual,
    .school-home-page .schoolHeroImageCard {
        min-height: 520px;
        height: 520px;
    }

    .school-home-page .schoolHeroImageCard .swiperImage {
        height: 504px;
    }
}

@media (max-width: 991px) {
    .school-home-page .schoolHero {
        min-height: auto;
        padding-bottom: 64px;
    }

    .school-home-page .schoolHeroShell {
        padding: 24px;
    }

    .school-home-page .schoolHeroShell::before {
        left: 50%;
        transform: translateX(-50%);
    }

    .school-home-page .schoolHeroCopyColumn {
        padding: 42px 28px 48px;
    }

    .school-home-page .schoolHeroContent {
        max-width: 760px;
        align-items: center;
        margin-inline: auto;
        text-align: center;
    }

    .school-home-page .schoolHeroMeta,
    .school-home-page .schoolHeroActions,
    .school-home-page .schoolHeroFeatures {
        justify-content: center;
    }

    .school-home-page .schoolHeroVisual {
        max-width: 720px;
        min-height: 540px;
        margin-inline: auto;
        padding: 0;
    }

    .school-home-page .schoolHeroImageCard {
        height: 540px;
    }

    .school-home-page .schoolHeroImageCard .swiperImage {
        height: 524px;
    }

    .school-home-page .schoolHeroVisual::before {
        inset: 26px -16px -20px 38px;
    }

    .school-home-page .schoolHeroBadgeTop {
        top: 28px;
        left: 16px;
    }

    .school-home-page .schoolHeroBadgeBottom {
        right: 16px;
        bottom: 28px;
    }

    .school-home-page .schoolHeroPattern {
        -webkit-mask-image: linear-gradient(#000 0, transparent 72%);
        mask-image: linear-gradient(#000 0, transparent 72%);
    }
}

@media (max-width: 767px) {
    .school-home-page .navbar {
        padding-top: 0;
    }

    .school-home-page .navbar .navbarWrapper {
        border: 0;
        border-radius: 0;
    }

    .school-home-page .schoolHero {
        margin-top: -74px;
        padding: 118px 0 48px;
    }

    .school-home-page .schoolHeroShell {
        padding: 13px;
        border-radius: 28px;
    }

    .school-home-page .schoolHeroCopyColumn {
        padding: 32px 16px 38px;
    }

    .school-home-page .schoolHero h1 {
        font-size: clamp(36px, 11vw, 52px);
    }

    .school-home-page .schoolHeroLead {
        font-size: 16px;
        line-height: 1.65;
    }

    .school-home-page .schoolHeroVisual {
        min-height: 420px;
        padding: 0;
    }

    .school-home-page .schoolHeroVisual::before {
        inset: 20px -8px -10px 24px;
    }

    .school-home-page .schoolHeroImageCard {
        height: 420px;
        border-width: 7px;
        border-radius: 22px 5px 22px 22px;
    }

    .school-home-page .schoolHeroImageCard .swiperImage {
        height: 406px;
    }

    .school-home-page .schoolHeroBadgeTop {
        top: 18px;
        right: auto;
        left: 14px;
    }

    .school-home-page .schoolHeroBadgeBottom {
        right: 14px;
        bottom: 20px;
        left: auto;
    }

    .school-home-page footer {
        margin-top: 65px;
    }
}

@media (max-width: 480px) {
    .school-home-page .schoolHeroEyebrow {
        font-size: 12px;
    }

    .school-home-page .schoolHeroFeatures {
        gap: 7px;
    }

    .school-home-page .schoolHeroFeatures span {
        padding: 7px 9px;
        font-size: 11px;
    }

    .school-home-page .schoolHeroActions {
        width: 100%;
    }

    .school-home-page .schoolHeroActions .commonBtn {
        width: 100%;
    }

    .school-home-page .schoolHeroVisual,
    .school-home-page .schoolHeroImageCard {
        min-height: 330px;
        height: 330px;
    }

    .school-home-page .schoolHeroImageCard .swiperImage {
        height: 316px;
    }

    .school-home-page .schoolHeroBadgeTop {
        display: none;
    }

    .school-home-page .schoolHeroBadgeBottom {
        right: 9px;
        bottom: 12px;
        padding: 10px 12px;
    }

    .school-home-page .schoolHeroImageCaption {
        bottom: 14px;
        left: 14px;
    }

    .school-home-page .schoolHeroImageCaption small,
    .school-home-page .schoolHeroBadge small {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .school-home-page *,
    .school-home-page *::before,
    .school-home-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Modern school homepage system */
.school-home-page {
    --school-heading: var(--school-heading-color, #2f2b4a);
    --school-body: var(--text--secondary-color, #6d6a86);
    --school-border: color-mix(in srgb, var(--school-heading) 9%, transparent);
    --school-soft-surface: var(--school-section-background-color, #f7f6fc);
    --school-card-surface: var(--school-card-background-color, #ffffff);
    --school-accent-surface: var(--school-accent-background-color, #2f2b4a);
    --school-accent-text: var(--school-accent-text-color, #ffffff);
    --school-footer-surface: var(--school-footer-background-color, #2f2b4a);
    --school-footer-text: var(--school-footer-text-color, #e7e4f2);
    --school-section-space: 112px;
}

.school-home-page :is(#programs, #admissions, #announcements, #school-statistics, #teachers, #faqs, #gallery, #about-school) {
    scroll-margin-top: 100px;
}

.school-home-page :is(a, button, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary-color) 34%, transparent);
    outline-offset: 3px;
}

.school-home-page .navbar .navbarWrapper {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.school-home-page .navbar .listItems {
    gap: 25px;
}

.school-home-page .navbar a[aria-current="page"] {
    color: var(--primary-color);
}

.school-home-page .navbar a[aria-current="page"]::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    margin: 4px auto 0;
    border-radius: 999px;
    background: var(--primary-color);
}

.school-home-page .offcanvas {
    width: min(88%, 380px) !important;
    border: 0;
    background: var(--school-navbar-background-color, #ffffff);
    color: var(--school-navbar-text-color, #2f2b4a);
}

.school-home-page .offcanvas .listItems > li {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--school-border);
}

.school-home-page .schoolPortalStrip {
    position: relative;
    z-index: 4;
    margin-top: -44px;
}

.school-home-page .schoolPortalGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--school-border);
    border-radius: 22px;
    background: var(--school-card-surface);
    box-shadow: 0 20px 60px rgba(47, 43, 74, 0.11);
}

.school-home-page .schoolPortalCard {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    min-height: 118px;
    padding: 24px;
    color: var(--school-heading) !important;
    text-decoration: none;
    transition: background-color 180ms ease, transform 180ms ease;
}

.school-home-page .schoolPortalCard + .schoolPortalCard {
    border-inline-start: 1px solid var(--school-border);
}

.school-home-page .schoolPortalCard:hover {
    z-index: 1;
    background: color-mix(in srgb, var(--primary-color) 5%, var(--school-card-surface));
    transform: translateY(-2px);
}

.school-home-page .schoolPortalIcon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 15px;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--school-card-surface));
    color: var(--primary-color);
    font-size: 21px;
}

.school-home-page .schoolPortalIconTeacher {
    background: color-mix(in srgb, var(--secondary-color2) 14%, var(--school-card-surface));
    color: color-mix(in srgb, var(--secondary-color2) 72%, #17352b);
}

.school-home-page .schoolPortalIconAdmission {
    background: #fff5e8;
    color: #d57916;
}

.school-home-page .schoolPortalContent {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.school-home-page .schoolPortalContent strong {
    font-size: 17px;
    font-weight: 800;
}

.school-home-page .schoolPortalContent small {
    color: var(--school-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.school-home-page .schoolPortalArrow {
    color: color-mix(in srgb, var(--school-body) 55%, transparent);
    font-size: 13px;
    transition: transform 180ms ease, color 180ms ease;
}

.school-home-page .schoolPortalCard:hover .schoolPortalArrow {
    color: var(--primary-color);
    transform: translateX(4px);
}

.school-home-page .commonMT {
    margin-top: 0;
    padding-block: var(--school-section-space);
}

.school-home-page .flex_column_center {
    max-width: 760px;
    gap: 14px;
    margin-inline: auto;
    padding: 0;
}

.school-home-page .commonTag,
.school-home-page .adminssionTag {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 13px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 7%, var(--school-card-surface));
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.school-home-page .commonTitle {
    margin: 0;
    color: var(--school-heading);
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -0.025em;
}

.school-home-page .commonDesc {
    margin: 0;
    color: var(--school-body);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.75;
}

.school-home-page .navigationBtns {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.school-home-page .slider-content .owl-stage {
    margin-inline: auto;
}

.school-home-page .navigationBtns .commonBtn {
    display: grid;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 1px solid var(--school-border);
    border-radius: 50%;
    background: var(--school-card-surface);
    color: var(--school-heading) !important;
    box-shadow: 0 8px 20px rgba(47, 43, 74, 0.08);
}

.school-home-page .navigationBtns .commonBtn:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #ffffff !important;
}

.school-home-page .sideImgs {
    display: none;
}

.school-home-page .commonWaveSect::before,
.school-home-page .commonWaveSect::after {
    display: none;
}

/* About */
.school-home-page .aboutUs {
    margin-top: 42px;
    padding-block: var(--school-section-space);
    background: var(--primary-background-color, #ffffff);
}

.school-home-page .aboutUs .aboutWrapper {
    align-items: center;
    gap: 52px 0;
}

.school-home-page .aboutUs .aboutImgWrapper {
    position: relative;
    padding: 0 30px 30px 0;
}

.school-home-page .aboutUs .aboutImgWrapper::after {
    content: '';
    position: absolute;
    z-index: 0;
    right: 0;
    bottom: 0;
    width: 62%;
    height: 68%;
    border-radius: 28px;
    background: color-mix(in srgb, var(--primary-color) 10%, #f6f5ff);
}

.school-home-page .aboutUs .aboutImgWrapper img {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1.12;
    border-radius: 28px;
    object-fit: cover;
    box-shadow: var(--school-card-shadow);
}

.school-home-page .aboutUs .aboutContentWrapper {
    max-width: 570px;
    gap: 18px;
    padding-inline-start: 35px;
}

/* Programs */
.school-home-page .programs:not(.ctcaSection) {
    background: var(--school-soft-surface);
}

.school-home-page .programs {
    padding-inline: 0;
}

.school-home-page .programs .programsCardWrapper {
    margin-top: 48px;
}

.school-home-page .programs .programsCardWrapper .card {
    height: auto;
    margin: 10px;
    overflow: hidden;
    border: 1px solid var(--school-border);
    border-radius: 20px;
    background: var(--school-card-surface);
    box-shadow: 0 12px 32px rgba(47, 43, 74, 0.07);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.school-home-page .programs .programsCardWrapper .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(47, 43, 74, 0.12);
}

.school-home-page .programs .programsCardWrapper .card .imgDiv {
    height: 235px;
    border: 0;
}

.school-home-page .programs .programsCardWrapper .card .imgDiv::before {
    display: none;
}

.school-home-page .programs .programsCardWrapper .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.school-home-page .programs .programsCardWrapper .card .cardDetails {
    position: static;
    min-height: 168px;
    gap: 10px;
    padding: 24px;
    background: var(--school-card-surface);
    text-align: start;
    align-items: flex-start;
}

.school-home-page .programs .programsCardWrapper .card .cardTitle {
    color: var(--school-heading);
    font-size: 20px;
    font-weight: 800;
}

.school-home-page .programs .programsCardWrapper .card .cardDesc {
    display: -webkit-box;
    height: auto;
    overflow: hidden;
    color: var(--school-body);
    font-size: 14px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Admissions */
.school-home-page .admissionOpenSect {
    background: var(--primary-background-color, #ffffff);
}

.school-home-page .admissionOpenSect > .container > .row {
    align-items: stretch;
    overflow: hidden;
    border-radius: 32px;
    background:
        radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--primary-color) 40%, transparent), transparent 36%),
        linear-gradient(135deg, var(--school-accent-surface) 0%, color-mix(in srgb, var(--school-accent-surface) 82%, var(--primary-color)) 100%);
    box-shadow: 0 26px 70px rgba(47, 43, 74, 0.18);
}

.school-home-page .admissionOpenSect .flex_column_center {
    max-width: none;
    align-items: flex-start;
    gap: 19px;
    padding: 66px 62px;
    text-align: start;
}

.school-home-page .admissionOpenSect .commonTitle,
.school-home-page .admissionOpenSect .commonDesc {
    color: var(--school-accent-text);
}

.school-home-page .admissionOpenSect .commonDesc {
    color: color-mix(in srgb, var(--school-accent-text) 76%, transparent);
}

.school-home-page .admissionOpenSect .adminssionTag {
    border-color: color-mix(in srgb, var(--school-accent-text) 18%, transparent);
    background: color-mix(in srgb, var(--school-accent-text) 10%, transparent);
    color: var(--school-accent-text);
}

.school-home-page .admissionOpenSect .commonBtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    background: var(--school-card-surface);
    color: var(--school-heading) !important;
    text-decoration: none;
}

.school-home-page .admissionOpenSect .commonBtn:hover {
    background: color-mix(in srgb, var(--primary-color) 12%, #ffffff);
    color: var(--primary-color) !important;
}

.school-home-page .admissionOpenSect .imgDiv {
    min-height: 520px;
    padding: 0;
}

.school-home-page .admissionOpenSect .imgDiv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Announcements */
.school-home-page .events {
    background: var(--school-soft-surface);
}

.school-home-page .events .mainRow {
    align-items: center;
}

.school-home-page .events > .container > .row > .imgDiv {
    padding-inline-end: 48px;
}

.school-home-page .events > .container > .row > .imgDiv img {
    width: 100%;
    max-height: 660px;
    border-radius: 28px;
    object-fit: cover;
    box-shadow: var(--school-card-shadow);
}

.school-home-page .events .upperDiv {
    align-items: flex-end;
    gap: 22px;
}

.school-home-page .events .flex_column_center {
    max-width: 100%;
    align-items: flex-start;
    text-align: start;
}

.school-home-page .events .eventsCardWrapper {
    margin-top: 32px;
}

.school-home-page .announcementCardWrapper {
    padding: 0 0 12px;
}

.school-home-page .events .eventsCardWrapper .card {
    min-height: 136px;
    gap: 18px;
    padding: 18px;
    border: 1px solid var(--school-border);
    border-radius: 18px;
    background: var(--school-card-surface);
    box-shadow: 0 10px 26px rgba(47, 43, 74, 0.06);
    cursor: pointer;
    transition: border-color 180ms ease, transform 180ms ease;
}

.school-home-page .events .eventsCardWrapper .card:hover {
    border-color: color-mix(in srgb, var(--primary-color) 34%, transparent);
    transform: translateY(-2px);
}

.school-home-page .events .eventsCardWrapper .eventDateWrapper {
    min-width: 76px;
    border: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary-color) 9%, var(--school-card-surface));
}

.school-home-page .events .eventsCardWrapper .eventDescWrapper .eventTitle {
    color: var(--school-heading);
    font-size: 17px;
    font-weight: 800;
}

.school-home-page .events .eventsCardWrapper .card .rightArr {
    color: var(--primary-color);
}

/* Statistics */
.school-home-page .ctcaSection {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 0, color-mix(in srgb, var(--primary-color) 45%, transparent), transparent 28%),
        var(--school-accent-surface);
}

.school-home-page .ctcaSection .commonTag {
    border-color: color-mix(in srgb, var(--school-accent-text) 18%, transparent);
    background: color-mix(in srgb, var(--school-accent-text) 9%, transparent);
    color: var(--school-accent-text);
}

.school-home-page .ctcaSection .commonTitle {
    color: var(--school-accent-text);
}

.school-home-page .ctcaSection .commonDesc {
    color: color-mix(in srgb, var(--school-accent-text) 70%, transparent);
}

.school-home-page .ctcaSection .ctcaCardsRow {
    gap: 0;
}

.school-home-page .ctcaSection .cardBg {
    height: 100%;
    margin: 10px 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--school-accent-text) 13%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--school-accent-text) 8%, transparent);
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.school-home-page .ctcaSection .card {
    gap: 14px;
    padding: 26px 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.school-home-page .ctcaSection .imgBg {
    width: 78px;
    height: 78px;
    padding: 12px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--school-accent-text) 12%, transparent);
}

.school-home-page .ctcaSection .imgBg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.school-home-page .ctcaSection .card .cardDetails {
    gap: 6px;
}

.school-home-page .ctcaSection .card .cardTitle {
    color: color-mix(in srgb, var(--school-accent-text) 68%, transparent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.school-home-page .ctcaSection .card .cardDesc {
    color: var(--school-accent-text);
    font-size: 38px;
    font-weight: 800;
}

/* Teachers */
.school-home-page .ourTeacher {
    background: var(--primary-background-color, #ffffff);
}

.school-home-page .ourTeacher .commonSlider {
    margin-top: 48px;
}

.school-home-page .ourTeacher .commonSlider .card {
    height: 100%;
    margin: 10px;
    overflow: hidden;
    border: 1px solid var(--school-border);
    border-radius: 20px;
    background: var(--school-card-surface);
    box-shadow: 0 12px 32px rgba(47, 43, 74, 0.07);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.school-home-page .ourTeacher .commonSlider .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(47, 43, 74, 0.12);
}

.school-home-page .ourTeacher .commonSlider .card > div:first-child {
    height: 285px;
    overflow: hidden;
    background: var(--school-soft-surface);
}

.school-home-page .ourTeacher .commonSlider .card img {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    object-fit: cover;
}

.school-home-page .ourTeacher .commonSlider .card .teacherDetails {
    align-items: flex-start;
    gap: 5px;
    padding: 21px 22px 24px;
    text-align: start;
}

.school-home-page .ourTeacher .commonSlider .card .teacherDetails .name {
    color: var(--school-heading);
    font-size: 18px;
    font-weight: 800;
}

.school-home-page .ourTeacher .commonSlider .card .teacherDetails .subject {
    color: var(--school-body);
    font-size: 14px;
}

/* FAQs */
.school-home-page .faqs {
    background: var(--school-soft-surface);
}

.school-home-page .faqs .lowerDiv {
    margin-top: 45px;
}

.school-home-page .faqs .accordion {
    max-width: 900px;
    margin-inline: auto;
}

.school-home-page .faqs .accordion-item {
    overflow: hidden;
    margin-bottom: 13px;
    border: 1px solid var(--school-border) !important;
    border-radius: 16px !important;
    background: var(--school-card-surface);
    box-shadow: 0 8px 24px rgba(47, 43, 74, 0.05);
}

.school-home-page .faqs .accordion-button {
    min-height: 76px;
    padding: 20px 24px;
    background: var(--school-card-surface);
    color: var(--school-heading);
    font-size: 16px;
    font-weight: 800;
}

.school-home-page .faqs .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--primary-color) 5%, var(--school-card-surface));
    color: var(--primary-color);
    box-shadow: none;
}

.school-home-page .faqs .accordion-body {
    padding: 0 24px 24px;
    color: var(--school-body);
    line-height: 1.75;
}

/* Gallery */
.school-home-page .ourGalleryPhotos {
    background: var(--primary-background-color, #ffffff);
}

.school-home-page .ourGalleryPhotos .galleryImgsContainer {
    margin-top: 48px;
    gap: 0;
}

.school-home-page .ourGalleryPhotos :is(.bigImg, .leftSmallImg1, .upperImg1, .upperImg2) {
    overflow: hidden;
    border-radius: 18px;
    background: var(--school-soft-surface);
    box-shadow: 0 12px 32px rgba(47, 43, 74, 0.07);
}

.school-home-page .ourGalleryPhotos .galleryImgsContainer img {
    transition: transform 300ms ease;
}

.school-home-page .ourGalleryPhotos :is(.bigImg, .leftSmallImg1, .upperImg1, .upperImg2):hover > img {
    transform: scale(1.035);
}

.school-home-page .ourGalleryPhotos .detailsCard {
    border-radius: 14px;
    background: color-mix(in srgb, var(--school-card-surface) 94%, transparent);
    box-shadow: 0 10px 30px rgba(47, 43, 74, 0.18);
}

/* Footer */
.school-home-page footer {
    margin-top: 0;
    padding-top: 0;
    background: var(--school-footer-surface);
    color: var(--school-footer-text);
}

.school-home-page footer > .container {
    padding-top: 0;
}

.school-home-page footer .infoContainer {
    margin: 0 0 64px;
    padding: 26px 30px;
    border: 1px solid color-mix(in srgb, var(--school-footer-text) 10%, transparent);
    border-radius: 0 0 22px 22px;
    background: color-mix(in srgb, var(--school-footer-text) 6%, transparent);
}

.school-home-page footer .infoDivWrapper {
    min-height: 72px;
    padding: 10px 18px;
}

.school-home-page footer .infoDivWrapper + .infoDivWrapper {
    border-inline-start: 1px solid color-mix(in srgb, var(--school-footer-text) 10%, transparent);
}

.school-home-page footer .iconDiv {
    border: 0;
}

.school-home-page footer .infoDivWrapper .iconWrapper {
    width: 44px;
    height: 44px;
    border: 0;
    background: color-mix(in srgb, var(--school-footer-text) 9%, transparent);
    color: var(--school-footer-text);
}

.school-home-page footer .infoDivWrapper .iconWrapper i,
.school-home-page footer .socialIcons span i {
    color: var(--school-footer-text) !important;
}

.school-home-page footer .infoDivWrapper .textDiv span:first-child {
    color: color-mix(in srgb, var(--school-footer-text) 56%, transparent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.school-home-page footer .infoDivWrapper .textDiv span:last-child,
.school-home-page footer .infoDivWrapper .textDiv a {
    color: var(--school-footer-text) !important;
    font-size: 14px;
}

.school-home-page footer .companyInfoWrapper,
.school-home-page footer .linksWrapper {
    gap: 15px;
    padding-bottom: 55px;
}

.school-home-page footer .companyInfoWrapper .companyLogo {
    width: auto;
    max-width: 170px;
    height: 58px;
    object-fit: contain;
}

.school-home-page footer .companyInfoWrapper > div:first-child {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding: 7px 11px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--school-card-surface) 94%, transparent);
}

.school-home-page footer .commonDesc {
    color: color-mix(in srgb, var(--school-footer-text) 62%, transparent);
    font-size: 14px;
    line-height: 1.7;
}

.school-home-page footer .linksWrapper .title {
    margin-bottom: 6px;
    color: var(--school-footer-text);
    font-size: 16px;
    font-weight: 800;
}

.school-home-page footer .linksWrapper > span:not(.title) a {
    color: color-mix(in srgb, var(--school-footer-text) 65%, transparent) !important;
    font-size: 14px;
}

.school-home-page footer .linksWrapper > span:not(.title) a:hover {
    color: var(--school-footer-text) !important;
}

.school-home-page footer .socialIcons span {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--school-footer-text) 10%, transparent);
    background: color-mix(in srgb, var(--school-footer-text) 6%, transparent);
}

.school-home-page footer .appContainer {
    gap: 10px;
}

.school-home-page footer .appWrapper {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--school-footer-text) 10%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--school-footer-text) 6%, transparent);
}

.school-home-page footer .appWrapper .appNameWrapper span:last-child {
    color: color-mix(in srgb, var(--school-footer-text) 72%, transparent);
}

.school-home-page footer .copyRightText {
    border-top: 1px solid color-mix(in srgb, var(--school-footer-text) 8%, transparent);
    background: color-mix(in srgb, var(--school-heading) 13%, transparent);
}

.school-home-page footer .copyRightText span,
.school-home-page footer .copyRightText p {
    color: var(--school-footer-text) !important;
}

@media (max-width: 1199px) {
    .school-home-page .desktopSchoolNav,
    .school-home-page .navbarActions {
        display: none;
    }

    .school-home-page .navbarMenuToggle {
        display: grid;
        margin-inline-start: auto;
    }
}

@media (min-width: 1200px) and (max-width: 1299px) {
    .school-home-page .navbarLanguageButton {
        width: 42px;
        justify-content: center;
        padding-inline: 0;
    }

    .school-home-page .navbarLanguageButton span {
        display: none;
    }

    .school-home-page .desktopSchoolNav .listItems {
        gap: 14px;
    }

    .school-home-page .desktopSchoolNav .listItems > li > a,
    .school-home-page .schoolNavbar .navbarTextButton {
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    .school-home-page {
        --school-section-space: 84px;
    }

    .school-home-page .schoolPortalGrid {
        grid-template-columns: 1fr;
    }

    .school-home-page .schoolPortalCard {
        min-height: 102px;
    }

    .school-home-page .schoolPortalCard + .schoolPortalCard {
        border-top: 1px solid var(--school-border);
        border-inline-start: 0;
    }

    .school-home-page .aboutUs .aboutContentWrapper {
        max-width: none;
        padding-inline-start: 0;
    }

    .school-home-page .events > .container > .row > .imgDiv {
        padding-inline-end: calc(var(--bs-gutter-x) * 0.5);
        margin-bottom: 48px;
    }

    .school-home-page .admissionOpenSect .flex_column_center {
        padding: 52px 42px;
    }

    .school-home-page .admissionOpenSect .imgDiv {
        min-height: 420px;
    }

    .school-home-page footer .infoDivWrapper + .infoDivWrapper {
        border-inline-start: 0;
    }
}

@media (max-width: 767px) {
    .school-home-page {
        --school-section-space: 66px;
    }

    .school-home-page .schoolPortalStrip {
        margin-top: -24px;
    }

    .school-home-page .schoolPortalGrid {
        border-radius: 18px;
    }

    .school-home-page .schoolPortalCard {
        min-height: 96px;
        gap: 12px;
        padding: 18px;
    }

    .school-home-page .schoolPortalIcon {
        width: 46px;
        height: 46px;
        border-radius: 13px;
        font-size: 18px;
    }

    .school-home-page .commonTitle {
        font-size: 31px;
    }

    .school-home-page .commonDesc {
        font-size: 16px;
    }

    .school-home-page .aboutUs {
        margin-top: 10px;
    }

    .school-home-page .aboutUs .aboutImgWrapper {
        padding: 0 16px 16px 0;
    }

    .school-home-page .admissionOpenSect > .container > .row {
        margin-inline: 0;
        border-radius: 22px;
    }

    .school-home-page .admissionOpenSect .flex_column_center {
        align-items: flex-start;
        padding: 38px 28px;
        text-align: start;
    }

    .school-home-page .admissionOpenSect .imgDiv {
        min-height: 320px;
    }

    .school-home-page .events .upperDiv {
        align-items: flex-start;
        flex-direction: column;
    }

    .school-home-page .events .upperDiv .navigationBtns {
        margin-top: 4px;
    }

    .school-home-page .ctcaSection .ctcaCardsRow > div {
        margin-bottom: 12px;
    }

    .school-home-page footer .infoContainer {
        margin-bottom: 48px;
        padding: 20px;
        border-radius: 0 0 18px 18px;
    }

    .school-home-page footer .infoDivWrapper {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .school-home-page footer .infoContainer .row > div:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 480px) {
    .school-home-page .schoolPortalContent small {
        display: none;
    }

    .school-home-page .schoolPortalCard {
        min-height: 80px;
    }

    .school-home-page .programs .programsCardWrapper .card .imgDiv,
    .school-home-page .ourTeacher .commonSlider .card > div:first-child {
        height: 250px;
    }

    .school-home-page footer .appContainer {
        flex-direction: column;
    }
}

/* Dashboard-controlled homepage builder */
.school-home-page .main {
    display: flex;
    flex-direction: column;
}

.school-home-page .heroSection,
.school-home-page .homeBuilderSection {
    width: 100%;
    flex: 0 0 auto;
}

.school-home-page .homeBuilderSection.schoolPortalStrip {
    margin-top: 0;
    padding-block: var(--school-section-space);
}

.school-home-page .homeBuilderSection.schoolPortalStrip.homeBuilderFirst {
    margin-top: -44px;
    padding-block: 0;
}

.school-home-page .homeBuilderSection.aboutUs {
    margin-top: 0;
}

/* Modern school footer */
.school-home-page .schoolFooter {
    position: relative;
    margin: 0;
    overflow: hidden;
    padding: 72px 0 0;
    background: var(--school-footer-surface);
    color: var(--school-footer-text);
    isolation: isolate;
}

.school-home-page .schoolFooterGlow {
    position: absolute;
    z-index: -1;
    display: block;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.school-home-page .schoolFooterGlowOne {
    top: -230px;
    right: -150px;
    width: 520px;
    height: 520px;
    background: color-mix(in srgb, var(--primary-color) 19%, transparent);
}

.school-home-page .schoolFooterGlowTwo {
    bottom: -260px;
    left: -180px;
    width: 460px;
    height: 460px;
    background: color-mix(in srgb, var(--secondary-color2) 11%, transparent);
}

.school-home-page .schoolFooterContainer {
    position: relative;
    z-index: 1;
}

.school-home-page .schoolFooterContactGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    overflow: hidden;
    margin-bottom: 68px;
    border: 1px solid color-mix(in srgb, var(--school-footer-text) 11%, transparent);
    border-radius: 22px;
    background: color-mix(in srgb, var(--school-footer-text) 5%, transparent);
    box-shadow: 0 22px 60px color-mix(in srgb, #000 16%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.school-home-page .schoolFooterContactCard {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 112px;
    padding: 24px 25px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    color: var(--school-footer-text) !important;
    text-decoration: none;
    transition: background-color 180ms ease;
}

.school-home-page .schoolFooterContactCard + .schoolFooterContactCard {
    border-inline-start: 1px solid color-mix(in srgb, var(--school-footer-text) 10%, transparent);
}

.school-home-page a.schoolFooterContactCard:hover {
    background: color-mix(in srgb, var(--school-footer-text) 7%, transparent);
}

.school-home-page .schoolFooterContactIcon {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--school-footer-text) 12%, transparent);
    border-radius: 15px;
    background: color-mix(in srgb, var(--primary-color) 72%, transparent);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--primary-color) 24%, transparent);
}

.school-home-page .schoolFooterContactCopy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.school-home-page .schoolFooterContactCopy small {
    color: color-mix(in srgb, var(--school-footer-text) 57%, transparent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.school-home-page .schoolFooterContactCopy strong {
    overflow: hidden;
    color: var(--school-footer-text);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.5;
    text-overflow: ellipsis;
}

.school-home-page .schoolFooterContactArrow {
    color: color-mix(in srgb, var(--school-footer-text) 42%, transparent);
    font-size: 12px;
    transition: color 180ms ease, transform 180ms ease;
}

.school-home-page a.schoolFooterContactCard:hover .schoolFooterContactArrow {
    color: var(--school-footer-text);
    transform: translate(2px, -2px);
}

.school-home-page .schoolFooterMain {
    display: grid;
    grid-template-columns: minmax(240px, 1.35fr) minmax(145px, .72fr) minmax(165px, .82fr) minmax(250px, 1.25fr);
    gap: 46px;
    padding-bottom: 70px;
}

.school-home-page .schoolFooterBrand {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}

.school-home-page .schoolFooterLogo {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    padding: 9px 13px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--school-card-surface) 94%, transparent);
}

.school-home-page .schoolFooterLogo img {
    display: block;
    width: auto;
    max-width: 175px;
    height: 54px;
    object-fit: contain;
}

.school-home-page .schoolFooterBrandCopy {
    display: flex;
    max-width: 360px;
    flex-direction: column;
    gap: 10px;
}

.school-home-page .schoolFooterBrandCopy h2 {
    margin: 0;
    color: var(--school-footer-text);
    font-size: 21px;
    font-weight: 850;
    line-height: 1.3;
}

.school-home-page .schoolFooterBrandCopy p,
.school-home-page .schoolFooterApps > p {
    margin: 0;
    color: color-mix(in srgb, var(--school-footer-text) 62%, transparent);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;
}

.school-home-page .schoolFooterSocial {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.school-home-page .schoolFooterSocial a {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--school-footer-text) 12%, transparent);
    border-radius: 11px;
    background: color-mix(in srgb, var(--school-footer-text) 6%, transparent);
    color: var(--school-footer-text) !important;
    text-decoration: none;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.school-home-page .schoolFooterSocial a:hover {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: #fff !important;
    transform: translateY(-3px);
}

.school-home-page .schoolFooterLinks,
.school-home-page .schoolFooterApps {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
}

.school-home-page .schoolFooterLinks h3,
.school-home-page .schoolFooterApps h3 {
    position: relative;
    margin: 0 0 10px;
    padding-bottom: 13px;
    color: var(--school-footer-text);
    font-size: 15px;
    font-weight: 850;
    letter-spacing: .015em;
}

.school-home-page .schoolFooterLinks h3::after,
.school-home-page .schoolFooterApps h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 32px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color2));
}

.school-home-page .schoolFooterLinks a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: color-mix(in srgb, var(--school-footer-text) 66%, transparent) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: color 180ms ease, transform 180ms ease;
}

.school-home-page .schoolFooterLinks a i {
    color: var(--primary-color);
    font-size: 10px;
}

.school-home-page .schoolFooterLinks a:hover {
    color: var(--school-footer-text) !important;
    transform: translateX(3px);
}

[dir='rtl'] .school-home-page .schoolFooterLinks a:hover {
    transform: translateX(-3px);
}

[dir='rtl'] .school-home-page .schoolFooterLinks a i {
    transform: rotate(180deg);
}

.school-home-page .schoolFooterAppGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.school-home-page .schoolFooterApp {
    display: grid;
    min-width: 0;
    min-height: 64px;
    padding: 10px 11px;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--school-footer-text) 11%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--school-footer-text) 5%, transparent);
    color: var(--school-footer-text) !important;
    text-decoration: none;
    transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.school-home-page .schoolFooterApp:hover {
    border-color: color-mix(in srgb, var(--primary-color) 75%, transparent);
    background: color-mix(in srgb, var(--school-footer-text) 8%, transparent);
    transform: translateY(-2px);
}

.school-home-page .schoolFooterApp img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.school-home-page .schoolFooterApp > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.school-home-page .schoolFooterApp small {
    overflow: hidden;
    color: color-mix(in srgb, var(--school-footer-text) 56%, transparent);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-home-page .schoolFooterApp strong {
    overflow: hidden;
    color: var(--school-footer-text);
    font-size: 12px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-home-page .schoolFooterBottom {
    position: relative;
    z-index: 1;
    border-top: 1px solid color-mix(in srgb, var(--school-footer-text) 9%, transparent);
    background: color-mix(in srgb, #000 12%, transparent);
}

.school-home-page .schoolFooterCopyright {
    display: flex;
    min-height: 78px;
    padding-block: 18px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.school-home-page .schoolFooterCopyright > span,
.school-home-page .schoolFooterCopyright > span :is(p, span, a) {
    margin: 0;
    color: color-mix(in srgb, var(--school-footer-text) 66%, transparent) !important;
    font-size: 13px;
    line-height: 1.6;
}

.school-home-page .schoolFooterCopyright > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 20px;
}

.school-home-page .schoolFooterCopyright > div a {
    color: color-mix(in srgb, var(--school-footer-text) 66%, transparent) !important;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}

.school-home-page .schoolFooterCopyright > div a:hover {
    color: var(--school-footer-text) !important;
}

/* RTL and long-copy hardening.
 * School-managed copy can be substantially wider in Kurdish than in English,
 * so every grid/flex child must be allowed to shrink and wrap safely. */
.school-home-page .schoolHeroShell .row > [class*='col-'],
.school-home-page .schoolHeroCopyColumn,
.school-home-page .schoolHeroMediaColumn,
.school-home-page .schoolHeroContent,
.school-home-page .schoolHeroContent > *,
.school-home-page .schoolPortalCard,
.school-home-page .schoolPortalContent,
.school-home-page .schoolFooterMain > *,
.school-home-page .schoolFooterContactCopy {
    min-width: 0;
}

.school-home-page .schoolHeroCopyColumn {
    padding-inline: clamp(28px, 3vw, 48px);
}

.school-home-page .schoolHeroContent {
    width: 100%;
}

.school-home-page .schoolHero h1,
.school-home-page .schoolHeroLead,
.school-home-page .schoolHeroEyebrow,
.school-home-page .schoolHeroMeta span,
.school-home-page .schoolHeroMeta a,
.school-home-page .schoolPortalContent strong,
.school-home-page .schoolPortalContent small,
.school-home-page .schoolFooterBrandCopy,
.school-home-page .schoolFooterLinks a,
.school-home-page .schoolFooterContactCopy small,
.school-home-page .schoolFooterContactCopy strong {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.school-home-page .schoolHeroFeatures {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.school-home-page .schoolHeroFeatures span {
    min-width: 0;
    justify-content: flex-start;
    line-height: 1.45;
    text-align: start;
    white-space: normal;
    overflow-wrap: anywhere;
}

.school-home-page .schoolHeroFeatures i,
.school-home-page .schoolPortalIcon,
.school-home-page .schoolPortalArrow,
.school-home-page .schoolFooterContactIcon,
.school-home-page .schoolFooterContactArrow {
    flex-shrink: 0;
}

.school-home-page .schoolFooterContactCopy strong,
.school-home-page .schoolFooterApp small,
.school-home-page .schoolFooterApp strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.school-home-page .schoolFooterContactCopy small,
.school-home-page .schoolFooterBrandCopy p,
.school-home-page .schoolFooterApps > p,
.school-home-page .schoolFooterLinks a,
.school-home-page .schoolFooterCopyright > span,
.school-home-page .schoolFooterCopyright > div a {
    color: color-mix(in srgb, var(--school-footer-text) 82%, transparent) !important;
}

[dir='rtl'] .school-home-page .schoolHeroContent,
[dir='rtl'] .school-home-page .schoolHeroMeta,
[dir='rtl'] .school-home-page .schoolPortalContent,
[dir='rtl'] .school-home-page .schoolFooterBrand,
[dir='rtl'] .school-home-page .schoolFooterLinks,
[dir='rtl'] .school-home-page .schoolFooterApps,
[dir='rtl'] .school-home-page .schoolFooterContactCopy {
    text-align: right;
}

[dir='rtl'] .school-home-page .schoolHeroEyebrow {
    letter-spacing: 0;
    text-transform: none;
}

@media (max-width: 1199px) {
    .school-home-page .schoolHeroFeatures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .school-home-page .schoolHeroFeatures {
        grid-template-columns: 1fr;
    }

    .school-home-page .schoolHeroCopyColumn {
        padding-inline: 14px;
    }

    .school-home-page .schoolPortalCard,
    .school-home-page .schoolFooterContactCard {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .school-home-page .schoolPortalArrow,
    .school-home-page .schoolFooterContactArrow {
        display: none;
    }
}

@media (max-width: 1199px) {
    .school-home-page .schoolFooterMain {
        grid-template-columns: 1.2fr .75fr .85fr;
    }

    .school-home-page .schoolFooterApps {
        grid-column: 1 / -1;
    }

    .school-home-page .schoolFooterAppGrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .school-home-page .schoolFooter {
        padding-top: 58px;
    }

    .school-home-page .schoolFooterContactGrid {
        grid-template-columns: 1fr;
        margin-bottom: 56px;
    }

    .school-home-page .schoolFooterContactCard + .schoolFooterContactCard {
        border-top: 1px solid color-mix(in srgb, var(--school-footer-text) 10%, transparent);
        border-inline-start: 0;
    }

    .school-home-page .schoolFooterMain {
        grid-template-columns: 1.15fr .8fr .9fr;
        gap: 38px 30px;
    }

    .school-home-page .schoolFooterAppGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .school-home-page .schoolFooterMain {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .school-home-page .schoolFooterBrand,
    .school-home-page .schoolFooterApps {
        grid-column: 1 / -1;
    }

    .school-home-page .schoolFooterCopyright {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding-block: 22px;
    }

    .school-home-page .schoolFooterCopyright > div {
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .school-home-page .schoolFooter {
        padding-top: 44px;
    }

    .school-home-page .schoolFooterContactCard {
        min-height: 98px;
        padding: 20px;
    }

    .school-home-page .schoolFooterContactIcon {
        width: 46px;
        height: 46px;
    }

    .school-home-page .schoolFooterMain {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-bottom: 52px;
    }

    .school-home-page .schoolFooterBrand,
    .school-home-page .schoolFooterApps {
        grid-column: auto;
    }

    .school-home-page .schoolFooterAppGrid {
        grid-template-columns: 1fr;
    }
}