/* ==========================================================
   AZAL GLOBAL ICSE SCHOOL — MODERN UI SYSTEM
   UI-only enhancement layer. Existing content/functionality
   is intentionally preserved.
   ========================================================== */

:root {
    --azal-navy-950: #071425;
    --azal-navy-900: #0b1f3a;
    --azal-navy-800: #12345a;
    --azal-blue-700: #1d4ed8;
    --azal-blue-600: #2563eb;
    --azal-blue-500: #3b82f6;
    --azal-sky-100: #eaf4ff;
    --azal-gold-500: #f2b84b;
    --azal-gold-400: #f6ca70;
    --azal-ink: #142033;
    --azal-muted: #64748b;
    --azal-line: #e5eaf2;
    --azal-soft: #f6f8fc;
    --azal-white: #ffffff;
    --azal-success: #159669;
    --azal-danger: #df3f4f;
    --azal-radius-sm: 12px;
    --azal-radius-md: 18px;
    --azal-radius-lg: 26px;
    --azal-shadow-sm: 0 8px 24px rgba(10, 31, 58, .07);
    --azal-shadow-md: 0 18px 46px rgba(10, 31, 58, .11);
    --azal-shadow-lg: 0 28px 70px rgba(10, 31, 58, .16);
    --azal-transition: 220ms cubic-bezier(.2, .7, .2, 1);
}

html {
    scroll-behavior: smooth;
    background: var(--azal-white);
}

body {
    margin: 0;
    overflow-x: hidden;
    color: var(--azal-ink);
    background:
        radial-gradient(circle at 7% 16%, rgba(59, 130, 246, .055), transparent 24rem),
        radial-gradient(circle at 93% 38%, rgba(242, 184, 75, .05), transparent 20rem),
        var(--azal-white);
    font-family: "Inria Sans", "Raleway", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    color: #fff;
    background: var(--azal-blue-600);
}

img {
    max-width: 100%;
}

a {
    transition: color var(--azal-transition), background-color var(--azal-transition), transform var(--azal-transition), box-shadow var(--azal-transition), border-color var(--azal-transition);
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4 {
    color: var(--azal-navy-900);
    font-family: "Raleway", "Inria Sans", system-ui, sans-serif !important;
    font-weight: 760;
    letter-spacing: -.025em;
}

p,
li,
td,
th,
input,
textarea,
select,
button {
    font-family: "Inria Sans", system-ui, sans-serif;
}

p {
    color: #4c5c70;
}

/* ---------- Shared helpers ---------- */
.text-primary {
    color: var(--azal-blue-600) !important;
}

.bg-primary {
    background-color: var(--azal-blue-600) !important;
}

.border-primary {
    border-color: rgba(37, 99, 235, .26) !important;
}

.btn {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    border-width: 1px;
    transition: transform var(--azal-transition), box-shadow var(--azal-transition), background var(--azal-transition), color var(--azal-transition) !important;
}

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

.btn-primary,
.readMoreBtn,
.alumniBtn,
.alumini-submit,
.thankYouButton {
    color: #fff !important;
    border: 1px solid transparent !important;
    background: linear-gradient(135deg, var(--azal-blue-700), var(--azal-blue-500)) !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .22) !important;
}

.btn-primary:hover,
.readMoreBtn:hover,
.alumniBtn:hover,
.alumini-submit:hover,
.thankYouButton:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #173fb4, #2f73ee) !important;
    box-shadow: 0 14px 30px rgba(37, 99, 235, .28) !important;
}

.form-control,
.form-select,
.alumini-input {
    min-height: 50px;
    color: var(--azal-ink) !important;
    background-color: #fff !important;
    border: 1px solid #dce3ed !important;
    border-radius: 13px !important;
    box-shadow: none !important;
    transition: border-color var(--azal-transition), box-shadow var(--azal-transition) !important;
}

textarea.form-control,
textarea.alumini-input {
    min-height: 120px;
}

.form-control:focus,
.form-select:focus,
.alumini-input:focus {
    border-color: rgba(37, 99, 235, .68) !important;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .1) !important;
}

/* ---------- Loader ---------- */
#spinner {
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(12px);
}

#spinner .spinner-border {
    color: var(--azal-blue-600) !important;
    border-width: .22em;
    filter: drop-shadow(0 6px 14px rgba(37, 99, 235, .16));
}

/* ---------- Utility/news bars ---------- */
.azalIcseSchoolLatestNews {
    position: relative;
    z-index: 1002;
    padding: 7px 0 !important;
    color: #fff !important;
    background: linear-gradient(90deg, var(--azal-navy-950), var(--azal-navy-800)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.azalIcseSchoolLatestNews .container {
    min-height: 29px;
    gap: 22px;
}

.azalIcseSchoolNews {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.azalIcseSchoolNews p {
    margin: 0 !important;
    padding: 5px 11px;
    color: var(--azal-navy-950) !important;
    background: var(--azal-gold-500);
    border-radius: 999px;
    font-size: .72rem !important;
    font-weight: 800 !important;
    letter-spacing: .095em;
    line-height: 1;
}

.azalIcseSchoolLATESTNEWSsection {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.azalIcseSchoolNewsMarquee {
    color: rgba(255, 255, 255, .9) !important;
    font-size: .88rem !important;
    font-weight: 500 !important;
}

.azalIcseSchoolNewsMarquee a {
    color: #fff !important;
    font-weight: 700;
}

.azalIcseSchoolNewsMarquee .text-danger,
.azalIcseSchoolNewsMarquee .text-success,
.azalIcseSchoolNewsMarquee .text-primary {
    color: var(--azal-gold-400) !important;
}

.azalIcseSchoolFollowUs {
    position: relative;
    z-index: 1001;
    padding: 7px 0 !important;
    background: #fff !important;
    border-bottom: 1px solid var(--azal-line);
}

.azalIcseSchoolFollowUs .container {
    min-height: 30px;
}

.azalIcseSchoolEmail,
.azalIcseSchoolEmail a,
.azalIcseSchoolFollowUs span {
    color: #41536a !important;
    font-size: .9rem !important;
}

.azalIcseSchoolEnquiry {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #41536a;
    font-size: .86rem;
    font-weight: 700;
}

.azalIcseSchoolEnquiry i {
    color: #25d366;
    font-size: 1rem;
}

.azalIcseSchoolEnquiry a {
    color: #41536a;
    text-decoration: none;
}

.azalIcseSchoolEnquiry a:hover {
    color: #159c50;
}

.azalIcseSchoolEmail i {
    color: var(--azal-blue-600) !important;
}

.azalIcseSchoolSocial {
    display: flex;
    align-items: center;
}

.azalIcseSchoolFollowUs .azalIcseSchoolSocial a {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: 6px !important;
    color: #42516a !important;
    background: #f3f6fa;
    border: 1px solid #e6ebf2;
    border-radius: 50%;
    font-size: .79rem !important;
}

.azalIcseSchoolFollowUs .azalIcseSchoolSocial a:hover {
    color: #fff !important;
    background: var(--azal-blue-600);
    border-color: var(--azal-blue-600);
    transform: translateY(-2px);
}

/* ---------- Brand/logo strip ---------- */
.azalIcseSchoolContainer {
    position: relative;
    z-index: 1000;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    background: rgba(255, 255, 255, .98) !important;
    border-bottom: 1px solid rgba(11, 31, 58, .07);
    box-shadow: 0 7px 22px rgba(11, 31, 58, .04);
}

.azalIcseSchool {
    min-height: 78px;
    gap: 24px;
}

.azalIcseSchool-logo {
    flex: 0 0 auto;
}

.azalSchoolName {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 58px;
    padding-left: 22px;
    border-left: 1px solid rgba(22, 71, 125, .22);
    color: var(--azal-navy-900);
    font-family: "Raleway", "Inria Sans", sans-serif;
    line-height: 1;
    white-space: nowrap;
}

.azalSchoolName strong {
    color: #16477d;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.azalSchoolName>span {
    margin-top: 3px;
    padding-left: 2px;
    color: #16477d;
    font-family: "Inria Sans", sans-serif;
    font-size: clamp(.78rem, 1.2vw, 1rem);
    font-weight: 500;
    letter-spacing: .16em;
}

.azalSchoolName small {
    margin-top: 6px;
    padding-left: 3px;
    color: #718197;
    font-family: "Inria Sans", sans-serif;
    font-size: clamp(.43rem, .65vw, .56rem);
    font-weight: 600;
    letter-spacing: .08em;
}

@media (max-width: 575.98px) {
    .azalSchoolName {
        min-height: 48px;
        padding-left: 14px;
    }
}

.azalIcseSchoolLogo {
    max-height: 74px !important;
    width: auto;
    filter: drop-shadow(0 4px 8px rgba(10, 31, 58, .07));
}

.azalIcseSchoolContent {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 720px;
    padding: 9px 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin-top: 35px;
}

.azalIcseSchoolMarquee {
    margin: 0 !important;
    color: #45566c !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
}

.azalIcseSchoolMarquee a {
    color: var(--azal-navy-900) !important;
    font-weight: 700;
}

.azalIcseSchoolMarquee .text-danger,
.azalIcseSchoolMarquee .text-success,
.azalIcseSchoolMarquee .text-primary {
    color: var(--azal-blue-600) !important;
}

/* ---------- Main navigation ---------- */
.navbar-light {
    min-height: 72px;
    padding: 0 4.2vw !important;
    background: linear-gradient(105deg, rgba(7, 20, 37, .98), rgba(18, 52, 90, .97)) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 12px 30px rgba(5, 18, 34, .12);
    backdrop-filter: blur(16px);
}

.navbar-light .navbar-nav {
    gap: 4px;
}

.navbar-light .navbar-nav .nav-link,
.sticky-top.navbar-light .navbar-nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 0 15px !important;
    color: rgba(255, 255, 255, .87) !important;
    font-family: "Raleway", "Inria Sans", system-ui, sans-serif !important;
    font-size: .94rem !important;
    font-weight: 650 !important;
    letter-spacing: .005em;
    border-radius: 10px;
    z-index: 1;
}

.navbar-light .navbar-nav .nav-link::before,
.sticky-top.navbar-light .navbar-nav .nav-link::before {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 11px !important;
    width: auto !important;
    height: 2px !important;
    margin: 0 !important;
    opacity: 0;
    background: var(--azal-gold-500) !important;
    border-radius: 999px;
    transform: scaleX(.45);
    transition: opacity var(--azal-transition), transform var(--azal-transition) !important;
    z-index: -1;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link[aria-current="page"] {
    color: #fff !important;
    background: rgba(255, 255, 255, .055);
}

.navbar-light .navbar-nav .nav-link:hover::before,
.navbar-light .navbar-nav .nav-link.active::before,
.navbar-light .navbar-nav .nav-link[aria-current="page"]::before {
    opacity: 1;
    transform: scaleX(1);
}

.navbar-light.sticky-top {
    background: rgba(255, 255, 255, .97) !important;
    border-bottom: 1px solid rgba(11, 31, 58, .08) !important;
    box-shadow: 0 12px 38px rgba(11, 31, 58, .11) !important;
    backdrop-filter: blur(18px);
}

.navbar-light.sticky-top .navbar-nav .nav-link {
    min-height: 64px;
    color: #243750 !important;
}

.navbar-light.sticky-top .navbar-nav .nav-link:hover,
.navbar-light.sticky-top .navbar-nav .nav-link.active,
.navbar-light.sticky-top .navbar-nav .nav-link[aria-current="page"] {
    color: var(--azal-blue-700) !important;
    background: rgba(37, 99, 235, .055);
}

.navbar .dropdown-menu {
    min-width: 245px;
    padding: 9px !important;
    background: rgba(255, 255, 255, .985) !important;
    border: 1px solid rgba(11, 31, 58, .08) !important;
    border-radius: 16px !important;
    box-shadow: var(--azal-shadow-md) !important;
    overflow: hidden;
}

.navbar .dropdown-item {
    margin: 2px 0;
    padding: 11px 13px;
    color: #33465f !important;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.35;
    border-radius: 10px;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item.active {
    color: var(--azal-blue-700) !important;
    background: var(--azal-sky-100) !important;
    transform: translateX(2px);
}

.navbar-toggler {
    width: 45px;
    height: 42px;
    display: inline-grid !important;
    place-items: center;
    padding: 0 !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

/* ---------- Floating socials ---------- */
.social-sidebar {
    right: 16px !important;
    gap: 7px !important;
    z-index: 1030 !important;
}

.sdlcreativegroups {
    width: 40px !important;
    height: 40px !important;
    font-size: 17px !important;
    border: 2px solid rgba(255, 255, 255, .92);
    box-shadow: 0 8px 22px rgba(9, 30, 55, .16) !important;
}

.sdlcreativegroups:hover {
    transform: translateX(-4px) scale(1.06) !important;
    box-shadow: 0 12px 28px rgba(9, 30, 55, .24) !important;
}

/* ---------- Homepage hero ---------- */
.home_banner_area {
    position: relative;
    background: var(--azal-navy-950);
    overflow: hidden;
}

.home_banner_area::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 18, 34, .28), transparent 35%, transparent 68%, rgba(5, 18, 34, .18)),
        linear-gradient(0deg, rgba(5, 18, 34, .28), transparent 36%);
    z-index: 1;
}

.home_banner_area .carousel-inner,
.home_banner_area .carousel-item {
    background: var(--azal-navy-950);
}

.home_banner_area .carousel-item img {
    width: 100%;
    height: clamp(430px, 56vw, 690px);
    object-fit: cover;
    object-position: center;
    filter: saturate(.96) contrast(1.03);
}

.home_banner_area .carousel-control-prev,
.home_banner_area .carousel-control-next {
    top: 50%;
    bottom: auto;
    width: 48px;
    height: 48px;
    margin: 0 22px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    transform: translateY(-50%);
    z-index: 3;
}

.home_banner_area .carousel-control-prev:hover,
.home_banner_area .carousel-control-next:hover {
    background: rgba(255, 255, 255, .25);
}

.home_banner_area .carousel-indicators {
    z-index: 3;
    margin-bottom: 22px;
}

.home_banner_area .carousel-indicators li {
    width: 24px;
    height: 4px;
    margin: 0 4px;
    border: 0;
    border-radius: 999px;
    opacity: .55;
    background: rgba(255, 255, 255, .88);
}

.home_banner_area .carousel-indicators li.active {
    width: 44px;
    opacity: 1;
    background: var(--azal-gold-500);
}

/* ---------- Homepage news ticker ---------- */
.marqueeTopNav {
    padding: 12px 0 !important;
    background: #fff !important;
    border-bottom: 1px solid var(--azal-line);
    box-shadow: 0 8px 24px rgba(11, 31, 58, .035);
}

.marqueeTopNav .scroll-box {
    border-radius: 14px;
    background: linear-gradient(90deg, #f6f9fd, #fbfcfe);
    border: 1px solid #e7edf5;
}

.marqueeTopNav .scroll-content {
    min-height: 44px;
    gap: 12px;
}

.marqueeTopNav .scroll-item {
    color: #40516a !important;
    font-weight: 600;
    text-decoration: none;
}

.marqueeTopNav .scroll-item:hover {
    color: var(--azal-blue-700) !important;
}

.marqueeTopNav .scroll-divider {
    color: #c7d0dd;
}

.threeDHeading {
    margin: 72px auto 27px !important;
    color: var(--azal-navy-900) !important;
    font-size: clamp(1.85rem, 3vw, 2.55rem) !important;
    font-weight: 780 !important;
    text-align: center;
    text-shadow: none !important;
    letter-spacing: -.035em !important;
}

.threeDHeading::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, var(--azal-blue-600), var(--azal-gold-500));
    border-radius: 999px;
}

/* ---------- Owl cards / event slider ---------- */
.owl-carousel {
    padding: 0 clamp(16px, 4vw, 54px);
}

.owl-carousel .item {
    margin: 8px !important;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e9edf4;
    border-radius: 18px;
    box-shadow: var(--azal-shadow-sm);
    transition: transform var(--azal-transition), box-shadow var(--azal-transition);
}

.owl-carousel .item:hover {
    transform: translateY(-5px);
    box-shadow: var(--azal-shadow-md);
}

.owl-carousel .item img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(.2, .7, .2, 1);
}

.owl-carousel .item:hover img {
    transform: scale(1.035);
}

.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    width: 42px !important;
    height: 42px !important;
    display: inline-grid !important;
    place-items: center;
    color: var(--azal-navy-900) !important;
    background: #fff !important;
    border: 1px solid var(--azal-line) !important;
    border-radius: 50% !important;
    box-shadow: var(--azal-shadow-sm);
}

.owl-carousel .owl-nav button:hover {
    color: #fff !important;
    background: var(--azal-blue-600) !important;
    border-color: var(--azal-blue-600) !important;
}

/* ---------- Homepage feature sections ---------- */
.aboutUsSection,
.ourTeachersSection,
.teacherQualitiesSection {
    padding: 82px 22px !important;
    background: transparent !important;
}

.ourTeachersSection {
    background: linear-gradient(180deg, #f7f9fc, #fff) !important;
}

.teacherQualitiesSection {
    background: linear-gradient(180deg, #fff, #f5f8fc) !important;
}

.aboutUsContainer,
.ourTeachersContainer,
.qualitiesContainer {
    max-width: 1180px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #e7ecf3 !important;
    border-radius: var(--azal-radius-lg) !important;
    box-shadow: var(--azal-shadow-md) !important;
}

.aboutUsImage,
.teachersImage,
.qualitiesImage {
    position: relative;
    min-height: 420px !important;
    overflow: hidden;
}

.aboutUsImage::after,
.teachersImage::after,
.qualitiesImage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(18, 52, 90, .03), rgba(37, 99, 235, .12));
}

.aboutUsImage img,
.teachersImage img,
.qualitiesImage img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    border: 0 !important;
    transition: transform 650ms cubic-bezier(.2, .7, .2, 1);
}

.aboutUsContainer:hover .aboutUsImage img,
.ourTeachersContainer:hover .teachersImage img,
.qualitiesContainer:hover .qualitiesImage img {
    transform: scale(1.025);
}

.aboutUsContent,
.teachersText,
.qualitiesContent {
    padding: clamp(34px, 5vw, 62px) !important;
    background: #fff !important;
}

.aboutUsContent h5,
.teachersText h5,
.qualitiesContent h5 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px !important;
    color: var(--azal-blue-700) !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
}

.aboutUsContent h5::before,
.teachersText h5::before,
.qualitiesContent h5::before {
    content: "";
    width: 24px;
    height: 3px;
    background: var(--azal-gold-500);
    border-radius: 99px;
}

.aboutUsContent h2,
.teachersText h2,
.qualitiesContent h2 {
    margin-bottom: 21px !important;
    color: var(--azal-navy-900) !important;
    font-size: clamp(1.8rem, 3vw, 2.55rem) !important;
    line-height: 1.2;
}

.aboutUsContent p,
.teachersText p,
.qualitiesContent p,
.aboutUsContent li,
.teachersText li,
.qualitiesContent li {
    color: #53647a !important;
    font-size: 1rem !important;
    line-height: 1.72 !important;
}

.aboutUsContent ul,
.teachersText ul,
.qualitiesContent ul,
.vmList,
.library-rules,
.sdlcreative-list {
    padding-left: 0 !important;
    list-style: none !important;
}

.aboutUsContent li,
.teachersText li,
.qualitiesContent li,
.vmList li {
    position: relative;
    padding-left: 27px !important;
    margin-bottom: 10px !important;
}

.aboutUsContent li::before,
.teachersText li::before,
.qualitiesContent li::before,
.vmList li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: .04em;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    color: var(--azal-blue-700);
    background: var(--azal-sky-100);
    border-radius: 50%;
    font-size: .68rem;
    font-weight: 900;
}

.readMoreBtn {
    margin-top: 19px !important;
    padding: 11px 24px !important;
    border-radius: 999px !important;
}

.tabButtons {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 23px !important;
}

.tabBtn {
    margin: 0 !important;
    padding: 10px 18px !important;
    color: #4c5e75 !important;
    background: #f3f6fa !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
}

.tabBtn.active,
.tabBtn:hover {
    color: #fff !important;
    background: var(--azal-blue-600) !important;
    border-color: var(--azal-blue-600) !important;
    box-shadow: 0 8px 20px rgba(37, 99, 235, .18);
}

/* ---------- Inner-page hero / breadcrumbs ---------- */
.breadcrumbsSection {
    position: relative;
    max-width: 1180px !important;
    margin-top: 116px !important;
    margin-bottom: 26px !important;
    padding: clamp(48px, 6vw, 76px) 26px !important;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 15%, rgba(242, 184, 75, .22), transparent 13rem),
        radial-gradient(circle at 14% 118%, rgba(59, 130, 246, .32), transparent 18rem),
        linear-gradient(120deg, var(--azal-navy-950), var(--azal-navy-800) 58%, #17477a) !important;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 28px !important;
    box-shadow: var(--azal-shadow-lg);
}

.breadcrumbsSection::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    top: -120px;
    right: 9%;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 32px rgba(255, 255, 255, .025), 0 0 0 68px rgba(255, 255, 255, .018);
}

.breadcrumbsHeading {
    position: relative;
    z-index: 1;
    margin-bottom: 15px !important;
    color: #fff !important;
    font-size: clamp(2rem, 4.5vw, 3.35rem) !important;
    line-height: 1.12;
    letter-spacing: -.04em;
}

.custom-breadcrumb {
    position: relative;
    z-index: 1;
}

.custom-breadcrumb .breadcrumb-item,
.custom-breadcrumb .breadcrumb-item a,
.custom-breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, .76) !important;
    font-size: .9rem;
    font-weight: 600 !important;
}

.custom-breadcrumb .breadcrumb-item a:hover {
    color: var(--azal-gold-400) !important;
}

.custom-breadcrumb .breadcrumb-item.active {
    color: #fff !important;
}

.custom-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, .4) !important;
}

/* ---------- Generic content sections/cards ---------- */
.about,
.contact,
.service,
.gallery,
.sports,
.sample-page,
.activities,
.visionMissionSection {
    color: var(--azal-ink);
}

.about>.container,
.contact>.container,
.service>.container,
.gallery>.container,
.sports>.container,
.activities>.container,
.sample-page>.container {
    max-width: 1180px;
}

.about .row,
.contact .row,
.service .row,
.sports .row {
    --bs-gutter-x: 1.8rem;
}

.about img:not(.azalIcseSchoolLogo),
.sports img,
.sample-page img,
.activities img {
    border-radius: 20px;
    box-shadow: var(--azal-shadow-sm);
}

.section-title,
.section-about-title,
.section-sports-title,
.section-transportation-title {
    color: var(--azal-blue-700) !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
}

.section-title::before,
.section-title::after {
    border-color: var(--azal-gold-500) !important;
}

.about h1,
.about h2,
.service h1,
.service h2,
.contact h1,
.contact h2,
.gallery h1,
.gallery h2,
.sports h1,
.sports h2,
.activities h1,
.activities h2 {
    color: var(--azal-navy-900) !important;
}

.about p,
.service p,
.contact p,
.gallery p,
.sports p,
.activities p,
.sample-page p,
.rulesPageContent,
.library-rules li,
.sdlcreative-content,
.sdlcreative-continuation {
    color: #526278 !important;
}

/* ---------- Vision / Mission ---------- */
.visionMissionSection {
    padding: 68px 20px 92px !important;
    background: transparent !important;
}

.vmContainer {
    max-width: 1180px !important;
    gap: 22px !important;
}

.vmBox {
    position: relative;
    padding: clamp(30px, 4vw, 44px) !important;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid var(--azal-line) !important;
    border-radius: 22px !important;
    box-shadow: var(--azal-shadow-sm) !important;
}

.vmBox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--azal-blue-600), var(--azal-gold-500));
}

.vmBox:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--azal-shadow-md) !important;
}

.vmHeading {
    color: var(--azal-navy-900) !important;
    font-size: 1.55rem !important;
}

.vmHeading::after {
    background: var(--azal-blue-600) !important;
}

.vmText,
.vmList li {
    color: #53647a !important;
}

/* ---------- Principal / Correspondent desk ---------- */
.sdlcreative-desk-container {
    position: relative;
    overflow: hidden;
    max-width: 1120px !important;
    padding: clamp(30px, 4vw, 52px) !important;
    background:
        radial-gradient(circle at 92% 8%, rgba(242, 184, 75, .18), transparent 15rem),
        linear-gradient(130deg, #06172d, #123f73 72%, #1b527f) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 24px !important;
    box-shadow: 0 26px 60px rgba(7, 20, 37, .24), inset 0 1px 0 rgba(255, 255, 255, .1) !important;
}

.sdlcreative-desk-container::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--azal-gold-500), var(--azal-gold-400), transparent 72%);
    content: "";
}

.sdlcreative-text {
    position: relative;
    max-width: 980px;
}

.sdlcreative-principal-image,
.sdlcreative-desk-container img {
    border: 3px solid rgba(255, 255, 255, .88) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .24);
}

.sdlcreative-header {
    max-width: 720px;
    margin-bottom: 24px !important;
    padding-bottom: 16px;
    color: #fff !important;
    border-bottom: 1px solid rgba(242, 184, 75, .42);
    font-size: clamp(1.7rem, 3vw, 2.25rem) !important;
    letter-spacing: -.02em;
}

.sdlcreative-content,
.sdlcreative-desk-container .sdlcreative-list li {
    color: rgba(255, 255, 255, .82) !important;
}

body.ui-modern .sdlcreative-desk-container .sdlcreative-header {
    color: #fff !important;
}

body.ui-modern .sdlcreative-desk-container .sdlcreative-content {
    max-width: 940px;
    color: #fff !important;
    font-size: 1.02rem;
    line-height: 1.85;
}

body.ui-modern .sdlcreative-desk-container .sdlcreative-signature {
    margin-top: 26px;
    color: #fff !important;
    font-family: "Raleway", "Inria Sans", sans-serif;
    font-weight: 800;
    letter-spacing: .04em;
}

body.ui-modern .sdlcreative-desk-container h1,
body.ui-modern .sdlcreative-desk-container p,
body.ui-modern .sdlcreative-desk-container li {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
}

.sdlcreative-list li {
    padding: 10px 12px !important;
    border: 1px solid transparent;
}

.sdlcreative-desk-container .sdlcreative-list li:hover {
    background: rgba(255, 255, 255, .07) !important;
    border-color: rgba(255, 255, 255, .09);
}

.sdlcreative-desk-container .sdlcreative-list li i {
    color: var(--azal-gold-400) !important;
}

.sdlcreative-continuation {
    position: relative;
    overflow: hidden;
    max-width: 1120px !important;
    margin: 24px auto 0 !important;
    padding: clamp(26px, 4vw, 42px) !important;
    background: linear-gradient(135deg, #ffffff, #f5faff) !important;
    border: 1px solid #dbe8f3 !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 42px rgba(8, 46, 93, .09), inset 0 1px 0 #fff !important;
}

.sdlcreative-continuation::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, var(--azal-gold-500), var(--azal-blue-600));
    content: "";
}

body.ui-modern .sdlcreative-continuation p {
    margin-bottom: 26px;
    color: #526f8d !important;
    font-size: 1rem;
    line-height: 1.85;
}

body.ui-modern .sdlcreative-continuation .sdlcreative-list {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
}

body.ui-modern .sdlcreative-continuation .sdlcreative-list li {
    position: relative;
    margin: 0;
    padding: 16px 18px 16px 32px !important;
    color: #3f607f !important;
    border: 0;
    border-bottom: 1px solid #e6eef5;
    line-height: 1.55;
}

body.ui-modern .sdlcreative-continuation .sdlcreative-list li::before {
    position: absolute;
    top: 24px;
    left: 8px;
    width: 8px;
    height: 8px;
    background: var(--azal-gold-500);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(242, 184, 75, .16);
    content: "";
}

body.ui-modern .sdlcreative-continuation .sdlcreative-list li:last-child {
    border-bottom: 0;
}

body.ui-modern .admission-process-card {
    position: relative;
    overflow: hidden;
    max-width: 980px !important;
    margin: 12px auto 0 !important;
    padding: clamp(28px, 4vw, 48px) !important;
    background: linear-gradient(135deg, #ffffff, #f4f9fe) !important;
    border: 1px solid #d9e7f3 !important;
    border-radius: 22px !important;
    box-shadow: 0 22px 52px rgba(8, 46, 93, .1), inset 0 1px 0 #fff !important;
}

body.ui-modern .admission-process-card::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, var(--azal-gold-500), var(--azal-blue-600));
    content: "";
}

body.ui-modern .admission-process-card h2,
body.ui-modern .admission-process-card h3 {
    color: var(--azal-navy-900) !important;
    font-family: "Raleway", "Inria Sans", sans-serif;
    font-weight: 800;
}

body.ui-modern .admission-process-card h2 {
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid #dfeaf3;
    font-size: clamp(1.55rem, 3vw, 2rem) !important;
}

body.ui-modern .admission-process-card h3 {
    margin-top: 30px;
    margin-bottom: 14px;
    font-size: 1.25rem !important;
}

body.ui-modern .admission-process-card p,
body.ui-modern .admission-process-card li {
    color: #526f8d !important;
    font-size: 1rem;
    line-height: 1.75;
}

body.ui-modern .admission-process-card p {
    margin: 0 0 18px !important;
}

body.ui-modern .admission-process-card ol,
body.ui-modern .admission-process-card ul {
    margin: 0 0 24px !important;
    padding-left: 28px;
}

body.ui-modern .admission-process-card ol li,
body.ui-modern .admission-process-card ul li {
    margin-bottom: 12px !important;
    padding-left: 5px;
}

body.ui-modern .admission-process-card ul {
    list-style: none;
    padding-left: 10px;
}

body.ui-modern .admission-process-card ul li {
    position: relative;
    padding-left: 22px;
}

body.ui-modern .admission-process-card ul li::before {
    position: absolute;
    top: .72em;
    left: 0;
    width: 7px;
    height: 7px;
    background: var(--azal-gold-500);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(242, 184, 75, .16);
    content: "";
}

body.ui-modern .admission-process-card strong {
    color: #b45309 !important;
}

/* ---------- Facilities / service cards ---------- */
.service .service-content-inner {
    min-height: 100%;
    padding: 28px !important;
    background: #fff !important;
    border: 1px solid var(--azal-line) !important;
    border-radius: 20px !important;
    box-shadow: var(--azal-shadow-sm) !important;
    transition: transform var(--azal-transition), box-shadow var(--azal-transition), border-color var(--azal-transition) !important;
}

.service .service-content-inner:hover {
    transform: translateY(-6px) !important;
    background: #fff !important;
    border-color: rgba(37, 99, 235, .28) !important;
    box-shadow: var(--azal-shadow-md) !important;
}

.service .service-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    color: var(--azal-blue-700) !important;
    background: var(--azal-sky-100);
    border-radius: 18px;
}

.service .service-icon i,
.service .service-content-inner:hover .service-icon i {
    color: var(--azal-blue-700) !important;
}

.service .service-content h5,
.service .service-content-inner:hover .service-content h5 {
    color: var(--azal-navy-900) !important;
}

.service .service-content p,
.service .service-content-inner:hover .service-content p {
    color: #5a6a7d !important;
}

/* ---------- Lists / rules ---------- */
.library-rules,
.rulesPageContent ul,
.list-unstyled,
.award-list {
    padding-left: 0 !important;
    list-style: none !important;
}

.library-rules li,
.rulesPageContent li,
.list-unstyled li,
.award-list li {
    position: relative;
    margin-bottom: 10px !important;
    padding: 12px 14px 12px 44px !important;
    color: #53647a !important;
    background: #fff;
    border: 1px solid #e7ecf3;
    border-radius: 13px;
}

.library-rules li i,
.list-unstyled li i {
    left: 14px !important;
    color: var(--azal-blue-600) !important;
}

.rulesPageContent li::before,
.award-list li::before {
    content: "✓";
    position: absolute;
    left: 15px;
    top: 12px;
    color: var(--azal-blue-700);
    font-weight: 900;
}

/* ---------- Gallery / video ---------- */
.gallery .nav-pills,
.tab-class .nav-pills,
.tabs {
    gap: 8px;
    padding: 7px;
    background: #f5f7fb;
    border: 1px solid #e6ebf2;
    border-radius: 16px;
}

.gallery .nav-pills .nav-link,
.tab-class .nav-pills .nav-link,
.tab-button {
    color: #4d5e73 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    font-weight: 700 !important;
}

.gallery .nav-pills .nav-link.active,
.gallery .nav-pills .nav-link:hover,
.tab-class .nav-pills .nav-link.active,
.tab-class .nav-pills .nav-link:hover,
.tab-button.active,
.tab-button:hover {
    color: #fff !important;
    background: var(--azal-blue-600) !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .18);
}

.gallery-item {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--azal-line);
    border-radius: 17px !important;
    box-shadow: var(--azal-shadow-sm);
}

.gallery-item img {
    border-radius: 17px !important;
    transition: transform 500ms cubic-bezier(.2, .7, .2, 1), filter var(--azal-transition);
}

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

.gallery-content {
    border-radius: 17px !important;
    background: linear-gradient(0deg, rgba(7, 20, 37, .82), rgba(7, 20, 37, .08) 72%) !important;
}

.gallery-plus-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .17);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    backdrop-filter: blur(8px);
}

/* ---------- Contact ---------- */
.contact-info-section,
.contactPage {
    background: transparent !important;
}

.contactPageAddress,
.contactPageMobile,
.contactPageEmail {
    min-height: 220px;
    padding: 28px 22px;
    background: #fff;
    border: 1px solid var(--azal-line);
    border-radius: 20px;
    box-shadow: var(--azal-shadow-sm);
    transition: transform var(--azal-transition), box-shadow var(--azal-transition), border-color var(--azal-transition);
}

.contactPageAddress:hover,
.contactPageMobile:hover,
.contactPageEmail:hover {
    transform: translateY(-5px);
    border-color: rgba(37, 99, 235, .25);
    box-shadow: var(--azal-shadow-md);
}

.contactPageIcon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    color: var(--azal-blue-700) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--azal-sky-100) !important;
    border-radius: 18px;
    font-size: 1.65rem !important;
}

.contactPageIcon:hover {
    color: var(--azal-blue-700) !important;
    -webkit-text-fill-color: currentColor !important;
    background: var(--azal-sky-100) !important;
    transform: translateY(-2px) !important;
}

.contactPageHeader {
    color: var(--azal-navy-900) !important;
    font-weight: 750;
}

.contactPageText {
    color: #5a6a7d !important;
}

.contact iframe {
    width: 100%;
    min-height: 420px;
    border: 0 !important;
    border-radius: 20px;
    box-shadow: var(--azal-shadow-sm);
}

/* ---------- Forms / alumni ---------- */
.alumni-form,
form.alumni-form {
    padding: clamp(24px, 4vw, 40px) !important;
    background: #fff;
    border: 1px solid var(--azal-line);
    border-radius: 22px;
    box-shadow: var(--azal-shadow-sm);
}

.alumini-label {
    color: #32465f !important;
    font-weight: 700 !important;
}

.alumini-submit,
.alumniBtn {
    min-height: 48px;
    padding: 10px 24px !important;
    border-radius: 999px !important;
}

/* ---------- Tables ---------- */
.table,
.busroute,
.teaching-staff-table {
    width: 100%;
    overflow: hidden;
    color: #3d5068 !important;
    background: #fff !important;
    border: 1px solid var(--azal-line) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 16px !important;
    box-shadow: var(--azal-shadow-sm);
}

.table th,
.busroute th,
.teaching-staff-table th {
    padding: 14px 16px !important;
    color: #fff !important;
    background: var(--azal-navy-900) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    font-size: .85rem;
    font-weight: 750;
    letter-spacing: .02em;
}

.table td,
.busroute td,
.teaching-staff-table td {
    padding: 13px 16px !important;
    color: #526278 !important;
    background: #fff !important;
    border-color: #edf0f5 !important;
    vertical-align: middle;
}

.table tbody tr:nth-child(even) td,
.busroute tbody tr:nth-child(even) td,
.teaching-staff-table tbody tr:nth-child(even) td {
    background: #f8fafd !important;
}

.table tbody tr:hover td,
.busroute tbody tr:hover td,
.teaching-staff-table tbody tr:hover td {
    color: var(--azal-ink) !important;
    background: #eef5ff !important;
}

/* ---------- Counters ---------- */
.counter-box,
.experience,
.students,
.teachers,
.awards,
.passed-out {
    min-height: 190px !important;
    color: var(--azal-ink) !important;
    background: #fff !important;
    border: 1px solid var(--azal-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--azal-shadow-sm) !important;
}

.counter-box:hover,
.experience:hover,
.students:hover,
.teachers:hover,
.awards:hover,
.passed-out:hover {
    color: var(--azal-ink) !important;
    background: #fff !important;
    border-color: rgba(37, 99, 235, .25) !important;
    transform: translateY(-5px) !important;
    box-shadow: var(--azal-shadow-md) !important;
}

.counter-box i,
.counter-box:hover i,
.experience:hover i,
.students:hover i,
.teachers:hover i,
.awards:hover i,
.passed-out:hover i {
    color: var(--azal-blue-600) !important;
}

.counter-box h1 {
    color: var(--azal-navy-900) !important;
}

/* ---------- Footer ---------- */
body.ui-modern .site-footer {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(180deg, #0d2339 0%, #0a2d3d 28%, #0a2735 100%);
}

body.ui-modern .footer-top-wrap {
    position: relative;
    padding: 118px 0 30px;
    background: linear-gradient(180deg, #0a2a38 0%, #0d3240 50%, #0d3647 100%);
}

body.ui-modern .footer-top-wrap::before {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    top: -98px;
    height: 180px;
    background: #eef2f4;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

body.ui-modern .footer-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.75fr 1fr 1fr 1.15fr;
    gap: 36px 28px;
    align-items: start;
    width: min(100% - 32px, 1280px);
    margin: 0 auto;
}

body.ui-modern .brand-column,
body.ui-modern .footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

body.ui-modern .brand-column {
    padding-top: 12px;
}

body.ui-modern .school-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

body.ui-modern .footer-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    padding: 6px;
    background: rgba(255, 255, 255, .08);
    border-radius: 50%;
    box-shadow: 0 10px 18px rgba(0, 0, 0, .12);
}

body.ui-modern .brand-name {
    display: flex;
    flex-direction: column;
    color: #f4f7fa;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.1;
}

body.ui-modern .brand-name span {
    display: block;
}

body.ui-modern .brand-tagline {
    margin: 0 0 14px;
    color: #f8fbff;
    font-size: 1rem;
    font-weight: 600;
}

body.ui-modern .brand-text {
    max-width: 430px;
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: .96rem;
    line-height: 1.7;
}

body.ui-modern .social-links {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

body.ui-modern .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 10px 18px rgba(0, 0, 0, .18);
}

body.ui-modern .social-fb { background: #1877f2; }
body.ui-modern .social-ig { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af, #515bd4); }
body.ui-modern .social-yt { background: #f00; }
body.ui-modern .social-in { background: #0a66c2; }

body.ui-modern .footer-column {
    padding-top: 14px;
}

body.ui-modern .column-title {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    margin-bottom: 16px;
    color: #f6d770;
}

body.ui-modern .mini-icon,
body.ui-modern .contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

body.ui-modern .mini-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, .12);
}

body.ui-modern .mini-green { background: linear-gradient(135deg, #2dd4bf, #0f766e); }
body.ui-modern .mini-purple { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
body.ui-modern .mini-gold { color: #143b2a; background: linear-gradient(135deg, #f9d75f, #d4a023); }

body.ui-modern .column-title h3 {
    margin: 0;
    color: #f4f8fc !important;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

body.ui-modern .footer-list {
    display: grid;
    width: 100%;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.ui-modern .footer-list a {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    gap: 10px;
    color: #eaf2f7 !important;
    font-size: 1rem;
    text-decoration: none;
}

body.ui-modern .footer-list a span {
    color: #7cead6;
    font-size: 1.35rem;
    line-height: 1;
}

body.ui-modern .contact-list {
    display: grid;
    width: 100%;
    gap: 18px;
}

body.ui-modern .contact-row {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
    color: #edf4fb;
    font-size: .95rem;
    line-height: 1.5;
}

body.ui-modern .contact-icon {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #7fe0bd, #0e8f72);
    border-radius: 50%;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .12);
}

body.ui-modern .contact-row a {
    color: #f5fbff !important;
    text-decoration: none;
}

body.ui-modern .footer-bottom {
    position: relative;
    padding: 18px 0 14px;
    background: linear-gradient(180deg, #0c6c4f 0%, #0d6a4d 30%, #0a5f46 100%);
    border-top: 3px solid #f4d35e;
}

body.ui-modern .footer-bottom-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(100% - 32px, 1280px);
    gap: 18px;
    margin: 0 auto;
    color: #f8fcff;
    font-size: .9rem;
}

body.ui-modern .copyright-text {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body.ui-modern .copy-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
}

body.ui-modern .designer-text {
    color: rgba(255, 255, 255, .86);
    white-space: nowrap;
}

body.ui-modern .designer-text span {
    color: #f7d968;
    font-weight: 800;
}

body.ui-modern .site-footer .column-title h3 {
    color: #ffffff !important;
}

.copyRightsSection {
    position: relative;
    margin-top: 42px;
    padding: 24px 0 !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 86% -30%, rgba(59, 130, 246, .22), transparent 17rem),
        linear-gradient(110deg, var(--azal-navy-950), var(--azal-navy-900)) !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    box-shadow: none !important;
}

.copyright-item {
    color: rgba(255, 255, 255, .72) !important;
    font-size: .9rem;
    text-align: center !important;
}

.copyRightsSection a,
.copyRightsSection i {
    color: #fff !important;
}

.copyRightsSection a {
    font-weight: 700;
    text-decoration: none !important;
}

.copyRightsSection a:hover {
    color: var(--azal-gold-400) !important;
    letter-spacing: 0 !important;
    transform: none !important;
    text-decoration: none !important;
}

.company-name {
    color: var(--azal-gold-400) !important;
    letter-spacing: .035em;
}

/* ---------- Back to top ---------- */
.back-to-top {
    right: 20px !important;
    bottom: 20px !important;
    width: 44px !important;
    height: 44px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--azal-blue-700), var(--azal-blue-500)) !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    box-shadow: 0 11px 28px rgba(37, 99, 235, .28) !important;
}

.back-to-top:hover {
    color: #fff !important;
    transform: translateY(-3px);
}

/* ---------- Thank-you page ---------- */
body.thankYouPage {
    min-height: 100vh;
    padding: 24px;
    background:
        radial-gradient(circle at 16% 10%, rgba(59, 130, 246, .32), transparent 24rem),
        radial-gradient(circle at 87% 86%, rgba(242, 184, 75, .2), transparent 24rem),
        linear-gradient(135deg, var(--azal-navy-950), #12345a) !important;
}

.thankYouContainer {
    width: min(680px, 100%);
    padding: clamp(32px, 6vw, 60px) !important;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(255, 255, 255, .4) !important;
    border-radius: 28px !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .25) !important;
}

.thankYouContainer:hover {
    transform: translateY(-3px) !important;
}

.tick-icon {
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    margin: 0 auto 22px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #159669, #38b985);
    border-radius: 50%;
    font-size: 44px !important;
    box-shadow: 0 14px 32px rgba(21, 150, 105, .22);
}

.thankYouTitle {
    color: var(--azal-navy-900) !important;
    text-shadow: none !important;
}

.thankYouMessage,
.quote {
    color: #5b6b7e !important;
    text-shadow: none !important;
}

/* ---------- Calendar/test page ---------- */
body.ui-page-test {
    min-height: 100vh;
    padding: clamp(16px, 4vw, 40px) !important;
    color: var(--azal-ink);
    background: #f4f7fb !important;
}

.ui-page-test h1,
.ui-page-test h2,
.ui-page-test h3 {
    color: var(--azal-navy-900) !important;
}

.ui-page-test .calendar,
.ui-page-test .main-wrapper,
.ui-page-test .calendar-wrapper,
.ui-page-test .news-box,
.ui-page-test .content-wrapper {
    border-color: var(--azal-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--azal-shadow-sm) !important;
}

.ui-page-test .day,
.ui-page-test .calendar-cells .col {
    border-color: #e5eaf1 !important;
    border-radius: 9px;
}

.ui-page-test .day:hover,
.ui-page-test .calendar-cells .col:hover,
.ui-page-test .blue.lighten-3 {
    color: var(--azal-blue-700) !important;
    background: var(--azal-sky-100) !important;
}

/* ---------- Scroll reveal enhancement ---------- */
.ui-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms cubic-bezier(.2, .7, .2, 1), transform 620ms cubic-bezier(.2, .7, .2, 1);
}

.ui-reveal.ui-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .ui-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {

    .azalIcseSchoolLatestNews .container,
    .azalIcseSchoolFollowUs .container {
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }

    .azalIcseSchool {
        min-height: 68px;
    }

    .azalIcseSchoolLogo {
        max-height: 62px !important;
    }

    .azalIcseSchoolContent {
        max-width: 62%;
    }

    .navbar-light,
    .navbar-light.sticky-top {
        position: relative !important;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        min-height: 64px;
        padding: 10px 18px !important;
        background: linear-gradient(105deg, var(--azal-navy-950), var(--azal-navy-800)) !important;
    }

    .navbar-light .navbar-toggler {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .navbar-light .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        margin-top: 10px !important;
        padding: 9px !important;
        background: rgba(255, 255, 255, .055);
        border: 1px solid rgba(255, 255, 255, .1) !important;
        border-radius: 15px;
    }

    .navbar-light .navbar-nav {
        width: 100%;
        gap: 2px;
    }

    .navbar-light .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar-light .navbar-nav .nav-link,
    .navbar-light.sticky-top .navbar-nav .nav-link {
        min-height: 44px;
        padding: 9px 12px !important;
        color: rgba(255, 255, 255, .88) !important;
        border-radius: 10px;
    }

    .navbar-light .navbar-nav .nav-link::before,
    .navbar-light.sticky-top .navbar-nav .nav-link::before {
        display: none !important;
    }

    .navbar .dropdown-menu {
        position: static !important;
        width: 100%;
        margin: 2px 0 6px 10px !important;
        background: rgba(255, 255, 255, .97) !important;
    }

    .breadcrumbsSection {
        width: calc(100% - 32px) !important;
        margin-top: 24px !important;
        border-radius: 22px !important;
    }

    .home_banner_area .carousel-item img {
        height: clamp(340px, 62vw, 520px);
    }

    .aboutUsSection,
    .ourTeachersSection,
    .teacherQualitiesSection {
        padding: 58px 16px !important;
    }

    .aboutUsContainer,
    .ourTeachersContainer,
    .qualitiesContainer {
        border-radius: 22px !important;
    }

    .aboutUsImage,
    .teachersImage,
    .qualitiesImage,
    .aboutUsImage img,
    .teachersImage img,
    .qualitiesImage img {
        min-height: 330px !important;
    }
}

@media (max-width: 767.98px) {
    body {
        font-size: 15px;
    }

    .azalIcseSchoolLatestNews {
        padding: 6px 0 !important;
    }

    .azalIcseSchoolLatestNews .container {
        flex-direction: row !important;
        gap: 10px;
    }

    .azalIcseSchoolNews p {
        font-size: .64rem !important;
        letter-spacing: .06em;
    }

    .azalIcseSchoolNewsMarquee {
        font-size: .78rem !important;
    }

    .azalIcseSchoolFollowUs {
        display: none;
    }

    .azalIcseSchoolContainer {
        padding: 9px 0 !important;
    }

    .azalIcseSchool {
        padding-left: 16px;
        padding-right: 16px;
    }

    .azalIcseSchoolLogo {
        max-height: 54px !important;
    }

    .azalIcseSchoolContent {
        max-width: 66%;
        padding: 7px 10px;
    }

    .azalIcseSchoolMarquee {
        font-size: .76rem !important;
    }

    .social-sidebar {
        top: auto !important;
        right: 12px !important;
        bottom: 74px;
        gap: 5px !important;
        transform: none !important;
    }

    .sdlcreativegroups {
        width: 35px !important;
        height: 35px !important;
        font-size: 14px !important;
    }

    .home_banner_area .carousel-item img {
        height: 330px;
    }

    .home_banner_area .carousel-control-prev,
    .home_banner_area .carousel-control-next {
        width: 38px;
        height: 38px;
        margin: 0 10px;
    }

    .threeDHeading {
        margin-top: 52px !important;
        padding: 0 18px;
    }

    .owl-carousel {
        padding: 0 10px;
    }

    .aboutUsSection,
    .ourTeachersSection,
    .teacherQualitiesSection {
        padding: 44px 14px !important;
    }

    .aboutUsContainer,
    .qualitiesContainer {
        flex-direction: column !important;
    }

    .ourTeachersContainer {
        flex-direction: column-reverse !important;
    }

    .aboutUsContent,
    .teachersText,
    .qualitiesContent {
        padding: 28px 23px !important;
    }

    .aboutUsImage,
    .teachersImage,
    .qualitiesImage,
    .aboutUsImage img,
    .teachersImage img,
    .qualitiesImage img {
        min-height: 270px !important;
    }

    .breadcrumbsSection {
        width: calc(100% - 24px) !important;
        padding: 42px 18px !important;
        border-radius: 19px !important;
    }

    .breadcrumbsHeading {
        font-size: clamp(1.85rem, 10vw, 2.5rem) !important;
    }

    .custom-breadcrumb {
        flex-wrap: wrap;
        row-gap: 5px;
    }

    .vmContainer {
        flex-direction: column;
    }

    .vmBox {
        flex-basis: 100% !important;
    }

    .sdlcreative-desk-container {
        margin-left: 14px;
        margin-right: 14px;
        padding: 28px 22px !important;
        border-radius: 22px !important;
    }

    .gallery .nav-pills,
    .tab-class .nav-pills,
    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }

    .gallery .nav-pills .nav-link,
    .tab-class .nav-pills .nav-link,
    .tab-button {
        white-space: nowrap;
    }

    .table,
    .busroute,
    .teaching-staff-table {
        font-size: .84rem;
    }

    .table th,
    .table td,
    .busroute th,
    .busroute td,
    .teaching-staff-table th,
    .teaching-staff-table td {
        padding: 10px 11px !important;
    }

    .contactPageAddress,
    .contactPageMobile,
    .contactPageEmail {
        min-height: 0;
        padding: 23px 18px;
    }

    .copyRightsSection {
        margin-top: 28px;
        padding: 20px 12px !important;
    }

    .copyright-item {
        font-size: .8rem;
        line-height: 1.7;
    }
}

@media (max-width: 420px) {
    .azalIcseSchoolContent {
        display: none;
    }

    .azalIcseSchool {
        justify-content: center !important;
    }

    .home_banner_area .carousel-item img {
        height: 285px;
    }

    .social-sidebar .twitter,
    .social-sidebar .facebook {
        display: none;
    }

    .aboutUsContent h2,
    .teachersText h2,
    .qualitiesContent h2 {
        font-size: 1.7rem !important;
    }

    .breadcrumbsHeading {
        font-size: 1.9rem !important;
    }

    .back-to-top {
        right: 14px !important;
        bottom: 16px !important;
    }
}

.ui-table-wrap {
    width: 100%;
    margin: 18px 0;
    border-radius: 16px;
}

.ui-table-wrap>table {
    margin-bottom: 0 !important;
}

/* ======================================================================
   REFERENCE-INSPIRED UI REFRESH — 2026-09
   Visual-only layer. Keeps all original copy, links and functionality.
   ====================================================================== */

:root {
    --azal-navy-950: #061c38;
    --azal-navy-900: #082e5d;
    --azal-navy-800: #0b3d78;
    --azal-blue-700: #0f559e;
    --azal-blue-600: #1267b8;
    --azal-blue-500: #2787d7;
    --azal-sky-100: #eaf6ff;
    --azal-gold-500: #f7b500;
    --azal-gold-400: #ffc72c;
    --azal-ink: #17365d;
    --azal-muted: #61758f;
    --azal-line: #dfebf5;
    --azal-soft: #f7fbff;
    --azal-shadow-sm: 0 10px 28px rgba(8, 46, 93, .08);
    --azal-shadow-md: 0 20px 50px rgba(8, 46, 93, .12);
    --azal-shadow-lg: 0 30px 80px rgba(8, 46, 93, .16);
}

body.ui-modern {
    color: var(--azal-ink);
    background:
        radial-gradient(circle at 0 26%, rgba(39, 135, 215, .055), transparent 22rem),
        radial-gradient(circle at 100% 62%, rgba(247, 181, 0, .05), transparent 19rem),
        #fff;
}

body.ui-modern h1,
body.ui-modern h2,
body.ui-modern h3,
body.ui-modern h4,
body.ui-modern h5,
body.ui-modern h6 {
    color: var(--azal-navy-900);
}

/* --- Reference top utility bar --- */
body.ui-modern .azalIcseSchoolLatestNews {
    display: none !important;
}

body.ui-modern .azalIcseSchoolFollowUs {
    min-height: 42px;
    padding: 5px 0 !important;
    color: #fff !important;
    background: linear-gradient(90deg, #071f3d 0%, #0a315d 56%, #071f3d 100%) !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.ui-modern .azalIcseSchoolFollowUs .container {
    min-height: 32px;
    max-width: 1220px;
}

body.ui-modern .azalIcseSchoolEmail,
body.ui-modern .azalIcseSchoolEmail a,
body.ui-modern .azalIcseSchoolFollowUs span {
    color: rgba(255, 255, 255, .93) !important;
    font-size: .82rem !important;
    font-weight: 650 !important;
}

body.ui-modern .azalIcseSchoolEnquiry,
body.ui-modern .azalIcseSchoolEnquiry a {
    color: rgba(255, 255, 255, .93) !important;
    font-size: .78rem !important;
    font-weight: 650 !important;
}

body.ui-modern .azalIcseSchoolEnquiry i {
    color: #25d366 !important;
}

body.ui-modern .azalIcseSchoolEmail i {
    color: var(--azal-gold-400) !important;
}

body.ui-modern .azalIcseSchoolFollowUs .azalIcseSchoolSocial a {
    width: 27px;
    height: 27px;
    margin-right: 4px !important;
    color: #fff !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 50%;
    font-size: .72rem !important;
}

body.ui-modern .azalIcseSchoolFollowUs .azalIcseSchoolSocial a:hover {
    color: #082e5d !important;
    background: var(--azal-gold-400) !important;
    border-color: var(--azal-gold-400) !important;
}

/* --- Combined brand + navigation shell (assembled in modern-ui.js) --- */
body.ui-modern .azalIcseSchoolContainer {
    position: relative;
    z-index: 1040;
    padding: 0 !important;
    background: rgba(255, 255, 255, .985) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(8, 46, 93, .08) !important;
    box-shadow: 0 10px 32px rgba(8, 46, 93, .06) !important;
    transition: box-shadow .25s ease, background-color .25s ease;
}

body.ui-modern .azalIcseSchoolContainer.ui-header-sticky {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 14px 38px rgba(8, 46, 93, .12) !important;
    backdrop-filter: blur(16px);
}

body.ui-modern .azalIcseSchool {
    max-width: 1220px;
    min-height: 94px;
    padding: 0 18px;
    gap: 18px;
}

body.ui-modern .azalIcseSchool-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 208px;
}

body.ui-modern .azalIcseSchoolLogo {
    max-width: 210px !important;
    max-height: 70px !important;
    object-fit: contain;
    filter: none !important;
}

body.ui-modern .azalIcseSchool .ui-main-nav,
body.ui-modern .azalIcseSchool .navbar-light,
body.ui-modern .azalIcseSchool .navbar-light.sticky-top {
    position: relative !important;
    top: auto !important;
    z-index: 3;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 94px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

body.ui-modern .azalIcseSchool .navbar-collapse {
    height: 100%;
}

body.ui-modern .azalIcseSchool .navbar-nav {
    gap: 3px;
    margin-left: auto !important;
}

body.ui-modern .azalIcseSchool .navbar-light .navbar-nav .nav-link,
body.ui-modern .azalIcseSchool .navbar-light.sticky-top .navbar-nav .nav-link {
    min-height: 94px !important;
    padding: 0 11px !important;
    color: #17365d !important;
    background: transparent !important;
    font-size: .91rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    border-radius: 0 !important;
}

body.ui-modern .azalIcseSchool .navbar-light .navbar-nav .nav-link::before,
body.ui-modern .azalIcseSchool .navbar-light.sticky-top .navbar-nav .nav-link::before {
    left: 12px !important;
    right: 12px !important;
    bottom: 23px !important;
    height: 3px !important;
    background: var(--azal-gold-500) !important;
}

body.ui-modern .azalIcseSchool .navbar-light .navbar-nav .nav-link:hover,
body.ui-modern .azalIcseSchool .navbar-light .navbar-nav .nav-link.active,
body.ui-modern .azalIcseSchool .navbar-light .navbar-nav .nav-link[aria-current="page"] {
    color: var(--azal-navy-900) !important;
    background: transparent !important;
}

body.ui-modern .azalIcseSchoolContent {
    flex: 0 0 238px;
    max-width: 238px;
    padding: 0 !important;
    overflow: hidden;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none;
}

body.ui-modern .azalIcseSchoolMarquee {
    min-height: 43px;
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 14px;
    color: #082e5d !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
}

body.ui-modern .azalIcseSchoolMarquee a,
body.ui-modern .azalIcseSchoolMarquee .text-danger,
body.ui-modern .azalIcseSchoolMarquee .text-success,
body.ui-modern .azalIcseSchoolMarquee .text-primary {
    color: #082e5d !important;
}

body.ui-modern .navbar .dropdown-menu {
    padding: 9px !important;
    border: 1px solid #e1ebf4 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px rgba(8, 46, 93, .16) !important;
}

body.ui-modern .navbar .dropdown-item {
    padding: 10px 13px !important;
    color: #35516f !important;
    border-radius: 10px !important;
}

body.ui-modern .navbar .dropdown-item:hover,
body.ui-modern .navbar .dropdown-item:focus,
body.ui-modern .navbar .dropdown-item.active {
    color: var(--azal-navy-900) !important;
    background: #eef8ff !important;
}

/* --- Homepage hero: large editorial image panel --- */
body.ui-page-index .home_banner_area {
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: #e9f5ff !important;
    border-radius: 0 0 76px 76px;
}

body.ui-page-index .home_banner_area::before {
    content: "";
    position: absolute;
    left: -9vw;
    bottom: -130px;
    width: 37vw;
    height: 230px;
    z-index: 2;
    pointer-events: none;
    background: #fff;
    border-radius: 50% 50% 0 0;
    transform: rotate(10deg);
    opacity: .97;
}

body.ui-page-index .home_banner_area::after {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(5, 35, 70, .2), transparent 38%, transparent 72%, rgba(4, 30, 60, .10)),
        linear-gradient(0deg, rgba(5, 35, 70, .10), transparent 35%) !important;
}

body.ui-page-index .home_banner_area .carousel-item img {
    height: clamp(430px, 52vw, 665px);
    object-fit: cover;
    object-position: center;
    filter: saturate(1.03) contrast(1.02);
}

body.ui-page-index .home_banner_area .carousel-control-prev,
body.ui-page-index .home_banner_area .carousel-control-next {
    width: 46px;
    height: 46px;
    background: rgba(8, 46, 93, .62);
    border: 1px solid rgba(255, 255, 255, .46);
    box-shadow: 0 8px 24px rgba(6, 28, 56, .20);
}

body.ui-page-index .home_banner_area .carousel-indicators {
    margin-bottom: 25px;
}

body.ui-page-index .home_banner_area .carousel-indicators li {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
}

body.ui-page-index .home_banner_area .carousel-indicators li.active {
    width: 27px;
    border-radius: 999px;
    background: var(--azal-gold-500);
}

/* --- Floating announcement ribbon, inspired by reference feature strip --- */
body.ui-page-index .marqueeTopNav {
    position: relative;
    z-index: 5;
    max-width: 1120px;
    margin: -24px auto 0 !important;
    padding: 0 18px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.ui-page-index .marqueeTopNav .scroll-box {
    overflow: hidden;
    padding: 5px 18px;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid #e4edf6 !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 48px rgba(8, 46, 93, .13);
}

body.ui-page-index .marqueeTopNav .scroll-content {
    min-height: 60px;
    justify-content: center;
    gap: 16px;
}

body.ui-page-index .marqueeTopNav .scroll-item {
    color: #244b76 !important;
    font-size: .89rem !important;
    font-weight: 700 !important;
}

body.ui-page-index .marqueeTopNav .scroll-divider {
    color: #c5d6e6;
}

/* --- Section headings and event cards --- */
body.ui-page-index .threeDHeading {
    margin: 66px auto 22px !important;
    color: var(--azal-navy-900) !important;
    font-size: clamp(1.85rem, 3.2vw, 2.55rem) !important;
    letter-spacing: -.035em !important;
}

body.ui-page-index .threeDHeading::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    margin: 0 auto 11px;
    background: var(--azal-gold-500);
    border-radius: 50%;
    box-shadow: 13px 0 0 rgba(247, 181, 0, .38), -13px 0 0 rgba(18, 103, 184, .22);
}

body.ui-page-index .threeDHeading::after {
    width: 64px;
    height: 3px;
    margin-top: 12px;
    background: var(--azal-gold-500);
}

body.ui-page-index .owl-carousel {
    max-width: 1240px;
    margin: 0 auto 18px;
    padding: 0 28px;
}

body.ui-page-index .owl-carousel .item {
    margin: 9px !important;
    border: 0 !important;
    border-radius: 19px !important;
    box-shadow: 0 12px 30px rgba(8, 46, 93, .11) !important;
}

body.ui-page-index .owl-carousel .item img {
    aspect-ratio: 1.37 / 1;
}

/* --- Homepage split sections: reference-like clean editorial layout --- */
body.ui-page-index .aboutUsSection,
body.ui-page-index .ourTeachersSection,
body.ui-page-index .teacherQualitiesSection {
    position: relative;
    padding: 74px 22px !important;
    overflow: hidden;
}

body.ui-page-index .aboutUsSection {
    background: #fff !important;
}

body.ui-page-index .ourTeachersSection {
    background:
        radial-gradient(circle at 4% 95%, rgba(39, 135, 215, .08), transparent 18rem),
        linear-gradient(180deg, #f6fbff 0%, #fff 100%) !important;
}

body.ui-page-index .teacherQualitiesSection {
    background:
        radial-gradient(circle at 98% 20%, rgba(247, 181, 0, .08), transparent 16rem),
        linear-gradient(180deg, #fff 0%, #f7fbff 100%) !important;
}

body.ui-page-index .aboutUsSection::before,
body.ui-page-index .ourTeachersSection::before,
body.ui-page-index .teacherQualitiesSection::before {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    pointer-events: none;
    opacity: .3;
    background-image: radial-gradient(circle, #1b75bb 1.4px, transparent 1.7px);
    background-size: 11px 11px;
}

body.ui-page-index .aboutUsSection::before {
    left: 4px;
    top: 24px;
}

body.ui-page-index .ourTeachersSection::before {
    right: 3px;
    bottom: 25px;
}

body.ui-page-index .teacherQualitiesSection::before {
    right: 3px;
    top: 30px;
}

body.ui-page-index .aboutUsContainer,
body.ui-page-index .ourTeachersContainer,
body.ui-page-index .qualitiesContainer {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
    align-items: center;
    gap: clamp(36px, 6vw, 72px);
    max-width: 1180px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.ui-page-index .ourTeachersContainer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
}

body.ui-page-index .aboutUsImage,
body.ui-page-index .teachersImage,
body.ui-page-index .qualitiesImage {
    min-height: 390px !important;
    overflow: visible !important;
    border-radius: 20px !important;
}

body.ui-page-index .aboutUsImage::before,
body.ui-page-index .teachersImage::before,
body.ui-page-index .qualitiesImage::before {
    content: "";
    position: absolute;
    width: 88%;
    height: 88%;
    z-index: -1;
    background: var(--azal-gold-500);
    border-radius: 20px;
    opacity: .9;
}

body.ui-page-index .aboutUsImage::before {
    left: -14px;
    top: -14px;
}

body.ui-page-index .teachersImage::before {
    right: -14px;
    bottom: -14px;
}

body.ui-page-index .qualitiesImage::before {
    left: -14px;
    bottom: -14px;
}

body.ui-page-index .aboutUsImage::after,
body.ui-page-index .teachersImage::after,
body.ui-page-index .qualitiesImage::after {
    border-radius: 20px;
    background: linear-gradient(180deg, transparent 70%, rgba(5, 36, 72, .18)) !important;
}

body.ui-page-index .aboutUsImage img,
body.ui-page-index .teachersImage img,
body.ui-page-index .qualitiesImage img {
    min-height: 390px;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(8, 46, 93, .14);
}

body.ui-page-index .aboutUsContent,
body.ui-page-index .teachersText,
body.ui-page-index .qualitiesContent {
    padding: 14px 0 !important;
    background: transparent !important;
}

body.ui-page-index .aboutUsContent h5,
body.ui-page-index .teachersText h5,
body.ui-page-index .qualitiesContent h5 {
    color: var(--azal-blue-700) !important;
    font-size: .78rem !important;
    letter-spacing: .07em !important;
}

body.ui-page-index .aboutUsContent h5::before,
body.ui-page-index .teachersText h5::before,
body.ui-page-index .qualitiesContent h5::before {
    width: 10px;
    height: 10px;
    background: var(--azal-gold-500);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--azal-gold-500);
}

body.ui-page-index .aboutUsContent h2,
body.ui-page-index .teachersText h2,
body.ui-page-index .qualitiesContent h2 {
    max-width: 650px;
    margin-bottom: 16px !important;
    color: var(--azal-navy-900) !important;
    font-size: clamp(1.9rem, 3.2vw, 2.65rem) !important;
    line-height: 1.13 !important;
}

body.ui-page-index .aboutUsContent p,
body.ui-page-index .teachersText p,
body.ui-page-index .qualitiesContent p,
body.ui-page-index .aboutUsContent li,
body.ui-page-index .teachersText li,
body.ui-page-index .qualitiesContent li {
    color: #58708a !important;
}

body.ui-page-index .readMoreBtn,
body.ui-page-index .tabBtn.active {
    background: linear-gradient(135deg, #0c3c76, #0b5aaa) !important;
    box-shadow: 0 10px 22px rgba(11, 90, 170, .18) !important;
}

body.ui-page-index .tabBtn:not(.active) {
    color: #244c76 !important;
    background: #fff !important;
    border-color: #bdd5e9 !important;
}

/* --- Inner-page title banner, light & premium like the reference --- */
body.ui-modern:not(.ui-page-index) .breadcrumbsSection {
    max-width: 1180px !important;
    margin-top: 34px !important;
    margin-bottom: 30px !important;
    padding: clamp(44px, 6vw, 70px) 28px !important;
    color: var(--azal-navy-900) !important;
    background:
        radial-gradient(circle at 87% 18%, rgba(247, 181, 0, .19), transparent 10rem),
        radial-gradient(circle at 9% 100%, rgba(39, 135, 215, .17), transparent 16rem),
        linear-gradient(120deg, #eff8ff 0%, #ffffff 54%, #f7fbff 100%) !important;
    border: 1px solid #deebf5 !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 55px rgba(8, 46, 93, .09) !important;
}

body.ui-modern:not(.ui-page-index) .breadcrumbsSection::before {
    top: -126px;
    right: 8%;
    border-color: rgba(18, 103, 184, .12);
    box-shadow: 0 0 0 32px rgba(18, 103, 184, .035), 0 0 0 68px rgba(18, 103, 184, .025);
}

body.ui-modern:not(.ui-page-index) .breadcrumbsSection::after {
    content: "";
    position: absolute;
    left: 25px;
    bottom: 20px;
    width: 82px;
    height: 34px;
    opacity: .26;
    background-image: radial-gradient(circle, #1267b8 1.2px, transparent 1.6px);
    background-size: 9px 9px;
}

body.ui-modern:not(.ui-page-index) .breadcrumbsHeading {
    color: var(--azal-navy-900) !important;
    font-size: clamp(2rem, 4vw, 3.15rem) !important;
}

body.ui-modern:not(.ui-page-index) .custom-breadcrumb .breadcrumb-item,
body.ui-modern:not(.ui-page-index) .custom-breadcrumb .breadcrumb-item a,
body.ui-modern:not(.ui-page-index) .custom-breadcrumb .breadcrumb-item.active {
    color: #5e7791 !important;
}

body.ui-modern:not(.ui-page-index) .custom-breadcrumb .breadcrumb-item.active,
body.ui-modern:not(.ui-page-index) .custom-breadcrumb .breadcrumb-item a:hover {
    color: var(--azal-blue-700) !important;
}

body.ui-modern:not(.ui-page-index) .custom-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: #a2b5c8 !important;
}

/* --- Inner content: generous spacing, clean cards, navy/gold accents --- */
body.ui-modern:not(.ui-page-index) .about,
body.ui-modern:not(.ui-page-index) .contact,
body.ui-modern:not(.ui-page-index) .service,
body.ui-modern:not(.ui-page-index) .gallery,
body.ui-modern:not(.ui-page-index) .testimonial,
body.ui-modern:not(.ui-page-index) .blog {
    background: transparent !important;
}

body.ui-modern:not(.ui-page-index) .about>.container,
body.ui-modern:not(.ui-page-index) .contact>.container,
body.ui-modern:not(.ui-page-index) .service>.container {
    max-width: 1180px;
}

body.ui-modern:not(.ui-page-index) .about .row,
body.ui-modern:not(.ui-page-index) .contact .row {
    border-radius: 22px;
}

body.ui-modern:not(.ui-page-index) .section-about-title,
body.ui-modern:not(.ui-page-index) .section-title {
    color: var(--azal-blue-700) !important;
    font-weight: 800 !important;
    letter-spacing: .05em;
}

body.ui-modern:not(.ui-page-index) .section-about-title::before,
body.ui-modern:not(.ui-page-index) .section-title::before,
body.ui-modern:not(.ui-page-index) .section-title::after {
    border-color: var(--azal-gold-500) !important;
}

body.ui-modern:not(.ui-page-index) .about h1,
body.ui-modern:not(.ui-page-index) .about h2,
body.ui-modern:not(.ui-page-index) .contact h1,
body.ui-modern:not(.ui-page-index) .contact h2,
body.ui-modern:not(.ui-page-index) .service h1,
body.ui-modern:not(.ui-page-index) .service h2 {
    color: var(--azal-navy-900) !important;
}

body.ui-modern:not(.ui-page-index) .about p,
body.ui-modern:not(.ui-page-index) .about li,
body.ui-modern:not(.ui-page-index) .contact p,
body.ui-modern:not(.ui-page-index) .service p {
    color: #59718a !important;
}

body.ui-modern:not(.ui-page-index) .about .list-unstyled li,
body.ui-modern:not(.ui-page-index) .service-content-inner,
body.ui-modern:not(.ui-page-index) .vmBox,
body.ui-modern:not(.ui-page-index) .contactPageAddress,
body.ui-modern:not(.ui-page-index) .contactPageMobile,
body.ui-modern:not(.ui-page-index) .contactPageEmail {
    border-color: #e0ebf4 !important;
    box-shadow: 0 11px 30px rgba(8, 46, 93, .07) !important;
}

body.ui-modern:not(.ui-page-index) .service-content-inner:hover,
body.ui-modern:not(.ui-page-index) .vmBox:hover,
body.ui-modern:not(.ui-page-index) .contactPageAddress:hover,
body.ui-modern:not(.ui-page-index) .contactPageMobile:hover,
body.ui-modern:not(.ui-page-index) .contactPageEmail:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(8, 46, 93, .11) !important;
}

/* --- Buttons/forms normalized to reference palette --- */
body.ui-modern .btn-primary,
body.ui-modern .readMoreBtn,
body.ui-modern .alumniBtn,
body.ui-modern .alumini-submit,
body.ui-modern .thankYouButton {
    color: #fff !important;
    background: linear-gradient(135deg, #0b3b73, #0d5fae) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(13, 95, 174, .20) !important;
}

body.ui-modern .btn-primary:hover,
body.ui-modern .readMoreBtn:hover,
body.ui-modern .alumniBtn:hover,
body.ui-modern .alumini-submit:hover,
body.ui-modern .thankYouButton:hover {
    color: #082e5d !important;
    background: var(--azal-gold-400) !important;
    box-shadow: 0 12px 28px rgba(247, 181, 0, .22) !important;
}

body.ui-modern .form-control,
body.ui-modern .form-select,
body.ui-modern .alumini-input {
    border-color: #d9e6f0 !important;
    border-radius: 12px !important;
}

body.ui-modern .form-control:focus,
body.ui-modern .form-select:focus,
body.ui-modern .alumini-input:focus {
    border-color: rgba(18, 103, 184, .58) !important;
    box-shadow: 0 0 0 4px rgba(18, 103, 184, .09) !important;
}

/* --- Footer / back-to-top --- */
body.ui-modern .copyRightsSection {
    position: relative;
    margin-top: 28px;
    padding: 27px 0 !important;
    color: rgba(255, 255, 255, .82) !important;
    background:
        radial-gradient(circle at 12% 0, rgba(39, 135, 215, .18), transparent 18rem),
        linear-gradient(105deg, #061c38, #083566 65%, #072a51) !important;
    border-top: 4px solid var(--azal-gold-500) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body.ui-modern .copyRightsSection .container {
    max-width: 1180px;
}

body.ui-modern .copyRightsSection .copyright-item,
body.ui-modern .copyRightsSection .copyright-item a {
    color: rgba(255, 255, 255, .86) !important;
    font-size: .88rem !important;
}

body.ui-modern .copyRightsSection .company-name {
    color: var(--azal-gold-400) !important;
    font-weight: 800;
}

body.ui-modern .back-to-top {
    right: 24px !important;
    bottom: 24px !important;
    width: 46px !important;
    height: 46px !important;
    color: #fff !important;
    background: var(--azal-navy-800) !important;
    border: 2px solid #fff !important;
    box-shadow: 0 10px 28px rgba(8, 46, 93, .20) !important;
}

body.ui-modern .back-to-top:hover {
    color: var(--azal-navy-900) !important;
    background: var(--azal-gold-400) !important;
}

/* --- Floating social rail softened --- */
body.ui-modern .social-sidebar {
    right: 12px !important;
}

body.ui-modern .sdlcreativegroups {
    width: 38px !important;
    height: 38px !important;
    border: 2px solid #fff !important;
    box-shadow: 0 8px 22px rgba(8, 46, 93, .18) !important;
}

/* --- Responsive combined header and homepage sections --- */
@media (max-width: 1199.98px) {
    body.ui-modern .azalIcseSchool {
        gap: 10px;
    }

    body.ui-modern .azalIcseSchool-logo {
        min-width: 180px;
    }

    body.ui-modern .azalIcseSchoolLogo {
        max-width: 182px !important;
    }

    body.ui-modern .azalIcseSchool .navbar-light .navbar-nav .nav-link,
    body.ui-modern .azalIcseSchool .navbar-light.sticky-top .navbar-nav .nav-link {
        padding: 0 8px !important;
        font-size: .86rem !important;
    }

    body.ui-modern .azalIcseSchoolContent {
        flex-basis: 185px;
        max-width: 185px;
    }
}

@media (max-width: 991.98px) {
    body.ui-modern .azalIcseSchoolFollowUs {
        min-height: 38px;
    }

    body.ui-modern .azalIcseSchool {
        position: relative;
        min-height: 78px;
        padding: 0 14px;
        flex-wrap: wrap;
    }

    body.ui-modern .azalIcseSchool-logo {
        min-width: 0;
        flex: 1 1 auto;
    }

    body.ui-modern .azalIcseSchoolLogo {
        max-width: 180px !important;
        max-height: 61px !important;
    }

    body.ui-modern .azalIcseSchool .ui-main-nav,
    body.ui-modern .azalIcseSchool .navbar-light,
    body.ui-modern .azalIcseSchool .navbar-light.sticky-top {
        flex: 0 0 auto;
        min-height: auto !important;
        order: 3;
    }

    body.ui-modern .azalIcseSchool .navbar-toggler {
        width: 43px;
        height: 43px;
        color: var(--azal-navy-900) !important;
        background: #f2f8fd !important;
        border: 1px solid #d9e8f3 !important;
        border-radius: 11px !important;
    }

    body.ui-modern .azalIcseSchool .navbar-collapse {
        position: absolute;
        top: calc(100% + 1px);
        left: 12px;
        right: 12px;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        z-index: 1080;
        padding: 10px;
        background: rgba(255, 255, 255, .99);
        border: 1px solid #dde9f3;
        border-radius: 0 0 18px 18px;
        box-shadow: 0 20px 45px rgba(8, 46, 93, .16);
    }

    body.ui-modern .azalIcseSchool .navbar-nav {
        gap: 2px;
    }

    body.ui-modern .azalIcseSchool .navbar-light .navbar-nav .nav-link,
    body.ui-modern .azalIcseSchool .navbar-light.sticky-top .navbar-nav .nav-link {
        min-height: 46px !important;
        padding: 0 12px !important;
        border-radius: 9px !important;
    }

    body.ui-modern .azalIcseSchool .navbar-light .navbar-nav .nav-link::before,
    body.ui-modern .azalIcseSchool .navbar-light.sticky-top .navbar-nav .nav-link::before {
        left: 12px !important;
        right: auto !important;
        bottom: 7px !important;
        width: 28px !important;
    }

    body.ui-modern .azalIcseSchool .dropdown-menu {
        position: static !important;
        float: none !important;
        margin: 2px 0 8px 12px !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    body.ui-modern .azalIcseSchoolContent {
        display: none !important;
    }

    body.ui-page-index .home_banner_area {
        border-radius: 0 0 42px 42px;
    }

    body.ui-page-index .home_banner_area::before {
        display: none;
    }

    body.ui-page-index .home_banner_area .carousel-item img {
        height: clamp(360px, 58vw, 510px);
    }

    body.ui-page-index .marqueeTopNav {
        margin-top: -18px !important;
    }

    body.ui-page-index .aboutUsContainer,
    body.ui-page-index .ourTeachersContainer,
    body.ui-page-index .qualitiesContainer {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    body.ui-page-index .teachersText {
        order: 2;
    }

    body.ui-page-index .teachersImage {
        order: 1;
    }

    body.ui-page-index .aboutUsImage,
    body.ui-page-index .teachersImage,
    body.ui-page-index .qualitiesImage,
    body.ui-page-index .aboutUsImage img,
    body.ui-page-index .teachersImage img,
    body.ui-page-index .qualitiesImage img {
        min-height: 330px !important;
    }

    body.ui-modern:not(.ui-page-index) .breadcrumbsSection {
        margin-top: 24px !important;
    }
}

@media (max-width: 767.98px) {
    body.ui-modern .azalIcseSchoolFollowUs .container {
        justify-content: center !important;
    }

    body.ui-modern .azalIcseSchoolSocial {
        display: none !important;
    }

    body.ui-modern .azalIcseSchoolEmail,
    body.ui-modern .azalIcseSchoolEmail a {
        font-size: .78rem !important;
    }

    body.ui-modern .azalIcseSchool {
        min-height: 72px;
        padding: 0 12px;
    }

    body.ui-modern .azalIcseSchoolLogo {
        max-width: 164px !important;
        max-height: 56px !important;
    }

    body.ui-page-index .home_banner_area {
        border-radius: 0 0 28px 28px;
    }

    body.ui-page-index .home_banner_area .carousel-item img {
        height: 310px;
    }

    body.ui-page-index .home_banner_area .carousel-control-prev,
    body.ui-page-index .home_banner_area .carousel-control-next {
        display: none;
    }

    body.ui-page-index .marqueeTopNav {
        margin-top: -14px !important;
        padding: 0 12px !important;
    }

    body.ui-page-index .marqueeTopNav .scroll-box {
        padding: 4px 12px;
        border-radius: 14px !important;
    }

    body.ui-page-index .marqueeTopNav .scroll-content {
        min-height: 52px;
        justify-content: flex-start;
    }

    body.ui-page-index .threeDHeading {
        margin-top: 52px !important;
    }

    body.ui-page-index .owl-carousel {
        padding: 0 14px;
    }

    body.ui-page-index .aboutUsSection,
    body.ui-page-index .ourTeachersSection,
    body.ui-page-index .teacherQualitiesSection {
        padding: 54px 16px !important;
    }

    body.ui-page-index .aboutUsImage::before,
    body.ui-page-index .teachersImage::before,
    body.ui-page-index .qualitiesImage::before {
        width: 86%;
        height: 86%;
    }

    body.ui-page-index .aboutUsImage,
    body.ui-page-index .teachersImage,
    body.ui-page-index .qualitiesImage,
    body.ui-page-index .aboutUsImage img,
    body.ui-page-index .teachersImage img,
    body.ui-page-index .qualitiesImage img {
        min-height: 270px !important;
    }

    body.ui-page-index .aboutUsContent h2,
    body.ui-page-index .teachersText h2,
    body.ui-page-index .qualitiesContent h2 {
        font-size: 1.8rem !important;
    }

    body.ui-modern:not(.ui-page-index) .breadcrumbsSection {
        width: calc(100% - 24px) !important;
        margin: 18px 12px 24px !important;
        padding: 38px 18px !important;
        border-radius: 18px !important;
    }

    body.ui-modern:not(.ui-page-index) .breadcrumbsHeading {
        font-size: 2rem !important;
    }

    body.ui-modern .copyRightsSection .copyright-item {
        text-align: center;
        line-height: 1.8;
    }

    body.ui-modern .social-sidebar {
        display: none !important;
    }
}

@media (max-width: 420px) {
    body.ui-modern .azalIcseSchoolLogo {
        max-width: 146px !important;
    }

    body.ui-page-index .home_banner_area .carousel-item img {
        height: 270px;
    }

    body.ui-page-index .aboutUsSection,
    body.ui-page-index .ourTeachersSection,
    body.ui-page-index .teacherQualitiesSection {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }
}

/* ======================================================================
   RESPONSIVE FIXES — footer grid, footer bottom bar, gallery filter tabs,
   scrollable table wrapper.
   Appended last so these rules win over the base layout above.
   ====================================================================== */

/* ---------- 1. Footer grid ----------
   .footer-grid was locked to `grid-template-columns: 1.75fr 1fr 1fr 1.15fr`
   with no media query at any breakpoint. Because grid items default to
   `min-width: auto`, the tracks expanded to their min-content width (~758px)
   and `.site-footer { overflow: hidden }` clipped the result, so the
   "Campus Life" and "Contact Us" columns were invisible below ~1100px. */

.footer-grid>* {
    min-width: 0;
}

/* Let long, unbreakable strings (email, address) wrap instead of
   forcing the grid track wider than the viewport. */
.brand-text,
.brand-tagline,
.contact-row,
.contact-row span,
.contact-row a,
.footer-list a {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Tablet / small laptop: 2 columns, brand block spans the full row. */
@media (max-width: 1199.98px) {
    body.ui-modern .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 34px 28px;
        padding-inline: clamp(16px, 4vw, 28px);
    }

    body.ui-modern .footer-grid .brand-column {
        grid-column: 1 / -1;
    }
}

/* Phone: single column. */
@media (max-width: 575.98px) {
    body.ui-modern .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-inline: 18px;
    }

    body.ui-modern .footer-grid .brand-column {
        grid-column: auto;
        padding-top: 0;
    }

    body.ui-modern .brand-name {
        font-size: 1.3rem;
    }

    body.ui-modern .footer-logo {
        width: 58px;
        height: 58px;
    }
}

/* ---------- 2. Footer bottom bar ----------
   `.footer-bottom-inner` is a flex row with no `flex-wrap`, and
   `.designer-text` carried `white-space: nowrap`, so on narrow screens the
   copyright text was crushed to one word per line and collided with the
   credit text. */

@media (max-width: 767.98px) {
    .footer-bottom-inner {
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: 12px;
        padding-inline: 18px;
    }

    .copyright-text {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 6px;
    }

    .designer-text {
        white-space: normal;
        padding-left: 0;
    }

    .designer-text::before {
        display: none;
    }
}

/* ---------- 3. Gallery / staff-subjects filter tabs ----------
   Each gallery label carried an inline `width: 150px`, and the list is
   `d-inline-flex` (shrink-to-fit, no max-width) with no wrapping, so the
   strip measured ~1542px at every viewport. An earlier rule at line ~2081
   (`.gallery .nav-pills, .tab-class .nav-pills, .tabs { flex-wrap: nowrap
   !important; overflow-x: auto }`, inside `max-width: 767.98px`) meant to
   make these scrollable, but the strip's own width, not the viewport,
   decided the scroll range, and outside that breakpoint (768-991px) the
   strip had no wrapping or scrolling at all. `.tabs` also matched that
   rule, so staffs.html's plain `.tab-button` subject tabs had the same
   problem. `!important` needs `!important` to override, so the wrap
   below repeats it. */

@media (max-width: 991.98px) {

    .tab-class .nav-pills,
    .gallery .nav-pills,
    .tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center;
        max-width: 100%;
        gap: 10px;
        overflow-x: visible !important;
    }

    .tab-class .nav-pills .nav-item,
    .gallery .nav-pills .nav-item {
        margin: 0;
    }

    .tab-class .nav-pills .nav-item>a,
    .gallery .nav-pills .nav-item>a {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Neutralise the hard-coded inline width on the labels. */
    .tab-class .nav-pills .nav-item>a>span,
    .gallery .nav-pills .nav-item>a>span {
        width: auto !important;
        padding-inline: 16px;
        white-space: nowrap;
    }

    .tabs .tab-button {
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

@media (max-width: 575.98px) {

    .tab-class .nav-pills,
    .gallery .nav-pills,
    .tabs {
        gap: 8px;
        padding: 8px;
    }

    .tab-class .nav-pills .nav-item>a>span,
    .gallery .nav-pills .nav-item>a>span {
        padding-inline: 12px;
        font-size: 0.88rem;
    }

    .tabs .tab-button {
        padding: 8px 14px;
        font-size: 0.88rem;
    }
}

/* ---------- 4. Table wrapper ----------
   `.ui-table-wrap` is injected around every table by modern-ui.js as the
   responsive wrapper, but it had no overflow rule, so wide tables were
   clipped by `body { overflow-x: hidden }` instead of scrolling. */

.ui-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ui-table-wrap>table {
    min-width: 100%;
}

/* ---------- 5. Thank-you page ----------
   `body.thankYouPage` is a `display: flex` row that centers a single card.
   modern-ui.js injects the shared `.site-footer` into any page missing one,
   including this standalone page, so the footer became a second flex item
   next to `.thankYouContainer`. With no wrapping, the row split the ~272px
   content width between the two, crushing the thank-you card down to a
   ~120px column at every viewport, not just narrow ones. */
body.thankYouPage {
    flex-wrap: wrap;
    height: auto;
}

body.thankYouPage>.site-footer {
    flex: 1 1 100%;
    width: 100%;
    order: 2;
    margin-top: 32px;
}

/* ---------- 6. Correspondent / Principal message card ----------
   `.sdlcreative-text` carried `min-width: 280px`, a hard floor that
   exceeded the available column width once the card's own padding was
   subtracted at 320-360px viewports, pushing the heading, paragraph and
   list past the right edge. */
@media (max-width: 400px) {
    .sdlcreative-text {
        min-width: 0;
    }
}

/* ---------- 8. Shared header alignment ---------- */
@media (max-width: 991.98px) {
    .azalIcseSchoolContainer {
        position: relative;
        z-index: 1040;
    }

    .azalIcseSchool {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 10px;
        row-gap: 10px;
        min-height: 68px;
    }

    .azalIcseSchool-logo {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        gap: 10px !important;
    }

    .azalIcseSchoolContent {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: none;
        margin-top: 0;
        padding: 4px 0;
    }

    .ui-main-nav.navbar-light {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        width: auto;
        min-height: 43px;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none;
    }

    .ui-main-nav.navbar-light.nav-open {
        grid-column: 2;
        grid-row: 1;
        width: auto;
    }

    .ui-main-nav .navbar-toggler {
        position: relative;
        z-index: 2;
        margin-left: auto !important;
    }

    .ui-main-nav .navbar-collapse.show,
    .ui-main-nav .navbar-collapse.collapsing {
        display: block;
        flex-basis: 100%;
        width: 100%;
        margin-top: 10px !important;
        padding: 8px !important;
        background: #ffffff !important;
        border: 1px solid rgba(11, 31, 58, .1) !important;
        border-radius: 14px;
        box-shadow: 0 16px 34px rgba(11, 31, 58, .14);
    }

    .ui-main-nav.nav-open .navbar-collapse.show,
    .ui-main-nav.nav-open .navbar-collapse.collapsing,
    .ui-main-nav.nav-open .navbar-collapse {
        position: absolute;
        top: calc(100% + 10px);
        left: auto !important;
        right: 0;
        z-index: 1050;
        display: block !important;
        width: min(335px, calc(100vw - 30px)) !important;
        min-width: 0;
        margin-top: 0 !important;
    }

    .ui-main-nav .navbar-collapse.show .navbar-nav,
    .ui-main-nav .navbar-collapse.collapsing .navbar-nav {
        align-items: stretch;
    }

    .ui-main-nav .navbar-collapse.show .nav-link,
    .ui-main-nav .navbar-collapse.collapsing .nav-link {
        min-height: 44px;
        color: var(--azal-navy-800) !important;
    }

    .ui-main-nav .navbar-collapse.show .nav-link:hover,
    .ui-main-nav .navbar-collapse.show .nav-link.active,
    .ui-main-nav .navbar-collapse.collapsing .nav-link:hover,
    .ui-main-nav .navbar-collapse.collapsing .nav-link.active {
        color: var(--azal-blue-700) !important;
        background: var(--azal-sky-100) !important;
    }

    .ui-main-nav .dropdown-menu {
        margin-left: 0 !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }
}

@media (min-width: 992px) {
    .ui-main-nav {
        align-items: center;
    }

    .ui-main-nav .navbar-collapse {
        flex-grow: 0;
    }

    .ui-main-nav .navbar-nav {
        align-items: center;
    }
}

/* ---------- 7. Calendar grid (test.html) ----------
   `.calendar` used `grid-template-columns: repeat(7, 0fr)`, an `0fr`
   track (likely meant to be `1fr`) that sizes each column to its content
   rather than dividing the row evenly, so the 7 columns plus gaps ran a
   couple of pixels wider than the viewport at 320px. */
.calendar {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    max-width: 100%;
}

.day {
    padding: 10px 4px;
}