/* ===================================================================================
* Theme Name: Eduka Child
* Template: eduka
* Description: AL FAISAL SCHOOL SYSTEM (AFSS) - Sky Blue (#03A9F4) & Gold (#F59E0B)
* Version: 40.0.0
====================================================================================== */

:root {
    --theme-color: #03A9F4 !important;
    --theme-color2: #F59E0B !important;
    --color-dark: #004B94 !important;
    --footer-bg: #0A2540 !important;
    --footer-bg2: #051626 !important;
    --theme-color-light: #E1F5FE !important;
}

/* =========================================
   1. GLOBAL CONTAINER & GRID (Desktop 1520px Edge-to-Edge)
   ========================================= */
.container,
.navbar .container,
.header-top .container,
.hero-section .container,
.about-area .container,
.course-area .container,
.video-area .container,
.choose-area .container,
.gallery-area .container,
.event-area .container,
.testimonial-area .container,
.blog-area .container,
.footer .container,
.notice-board .container,
.admissions-hub-wrapper .container,
.scholarships-page-wrapper .container,
.academics-page-wrapper .container,
.contact-area .container,
.our-school-wrapper .container,
.timeline-area .container,
.testimonials-page-wrapper .container,
.alumni-page-wrapper .container,
.facilities-page-wrapper .container,
.school-life-page-wrapper .container,
.faq-page-wrapper .container,
.activities-page-wrapper .container,
.clubs-page-wrapper .container,
.athletics-page-wrapper .container,
.health-page-wrapper .container,
.gallery-page-wrapper .container,
.legal-policy-wrapper .container,
.page-area .container,
.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-section.elementor-section-boxed > .elementor-container-wrap,
.elementor-section > .elementor-container,
.elementor-container {
    max-width: 1520px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.elementor-section.elementor-section-full_width {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.elementor-section.elementor-section-full_width > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

.elementor-section.elementor-section-full_width > .elementor-container > .elementor-column > .elementor-widget-wrap {
    padding: 0 !important;
    margin: 0 !important;
}

/* Page Wrappers */
.academics-page-wrapper,
.scholarships-page-wrapper,
.admissions-hub-wrapper,
.our-school-wrapper,
.contact-area,
.timeline-area,
.notice-board,
.testimonials-page-wrapper,
.alumni-page-wrapper,
.facilities-page-wrapper,
.school-life-page-wrapper,
.faq-page-wrapper,
.activities-page-wrapper,
.clubs-page-wrapper,
.athletics-page-wrapper,
.health-page-wrapper,
.gallery-page-wrapper,
.page-area {
    width: 100% !important;
    display: block !important;
}

/* =========================================
   2. HEADER & NAVBAR (#03A9F4 Sky Blue Accents, 76px Crest Logo, Gold Button)
   ========================================= */
.header-top {
    background: #004B94 !important;
}

.header-top-contact ul li a {
    color: rgba(255, 255, 255, 0.92) !important;
}

.header-top-contact ul li a:hover {
    color: #F59E0B !important;
}

.header-top-social a {
    color: rgba(255, 255, 255, 0.92) !important;
}

.header-top-social a:hover {
    color: #F59E0B !important;
}

@media (min-width: 992px) {
    .navbar .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        max-width: 1520px !important;
    }

    .navbar-brand,
    .header-logo {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    .navbar-brand img,
    .header-logo img {
        height: 76px !important;
        max-height: 76px !important;
        width: auto !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        object-fit: contain !important;
    }

    .navbar-collapse {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
        margin: 0 20px !important;
    }

    .navbar .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto !important;
        gap: 4px !important;
    }

    .navbar .nav-item .nav-link {
        margin-right: 10px !important;
        padding: 28px 10px !important;
        font-size: 15.5px !important;
        font-weight: 700 !important;
        color: #004B94 !important;
        white-space: nowrap !important;
        transition: color 0.25s ease !important;
    }

    .navbar .nav-item .nav-link:hover,
    .navbar .nav-item.active .nav-link {
        color: #03A9F4 !important;
    }

    /* Dropdown Sub-menus in Single Line */
    .navbar .nav-item .dropdown-menu {
        min-width: 260px !important;
        width: auto !important;
        padding: 10px 0 !important;
        border-top: 4px solid #F59E0B !important;
        border-radius: 0 0 12px 12px !important;
        background: #004B94 !important;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important;
    }

    .navbar .nav-item .dropdown-menu li {
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .navbar .nav-item .dropdown-menu li:last-child {
        border-bottom: none !important;
    }

    .navbar .nav-item .dropdown-menu li a {
        color: rgba(255, 255, 255, 0.95) !important;
        padding: 10px 20px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        display: block !important;
        transition: all 0.25s ease !important;
    }

    .navbar .nav-item .dropdown-menu li a:hover {
        color: #F59E0B !important;
        padding-left: 24px !important;
        background: rgba(245, 158, 11, 0.15) !important;
    }

    .nav-right {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        flex-shrink: 0 !important;
        margin-left: 0 !important;
    }

    .nav-right-btn .theme-btn {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.6px !important;
        text-transform: uppercase !important;
        padding: 10px 22px !important;
        border-radius: 50px 50px 50px 0 !important;
        background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
        color: #ffffff !important;
        border: 2px solid #F59E0B !important;
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        height: auto !important;
        transition: all 0.3s ease !important;
    }

    .nav-right-btn .theme-btn:hover {
        background: linear-gradient(135deg, #03A9F4 0%, #0284C7 100%) !important;
        border-color: #03A9F4 !important;
        color: #ffffff !important;
        transform: translateY(-2px) !important;
    }
}

/* =========================================
   3. BUTTON STYLES (Signature Asymmetric Bubble Curve)
   ========================================= */
.theme-btn,
.btn-success,
.hero-btn .theme-btn {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 13px 30px !important;
    border-radius: 50px 50px 50px 0 !important;
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
    color: #ffffff !important;
    border: 2px solid #F59E0B !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.35s ease !important;
}

.theme-btn:hover,
.btn-success:hover,
.hero-btn .theme-btn:hover {
    background: linear-gradient(135deg, #03A9F4 0%, #0284C7 100%) !important;
    border-color: #03A9F4 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(3, 169, 244, 0.35) !important;
}

.theme-btn.theme-btn2,
.hero-btn .theme-btn2 {
    background: #ffffff !important;
    color: #004B94 !important;
    border: 2px solid #ffffff !important;
    border-radius: 50px 50px 50px 0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12) !important;
}

.theme-btn.theme-btn2:hover,
.hero-btn .theme-btn2:hover {
    background: #F59E0B !important;
    border-color: #F59E0B !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* =========================================
   4. SECTION SPACING & SURFACES (Full-Width Edge-to-Edge CTA)
   ========================================= */
.py-120 {
    padding-top: 85px !important;
    padding-bottom: 85px !important;
}

.about-area {
    padding-top: 85px !important;
    padding-bottom: 85px !important;
    position: relative !important;
}

.course-area {
    padding-top: 85px !important;
    padding-bottom: 85px !important;
    background: #E1F5FE !important;
}

.course-area .site-heading {
    margin-bottom: 40px !important;
}

.video-area {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
    background: #ffffff !important;
}

/* Deep Navy Background for Why Choose Us */
.choose-area {
    padding-top: 85px !important;
    padding-bottom: 85px !important;
    background: #0A2540 !important;
}

.choose-area .site-title-tagline {
    color: #F59E0B !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    padding-bottom: 4px !important;
    border-bottom: 2px solid #F59E0B !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

.choose-area .site-title {
    font-size: 40px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    margin-bottom: 16px !important;
}

.choose-area .site-title span {
    color: #F59E0B !important;
}

.choose-area p.about-text,
.choose-area .site-heading p,
.choose-area p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.gallery-area {
    padding-top: 85px !important;
    padding-bottom: 85px !important;
    background: #E1F5FE !important;
}

/* Full-Width Admissions CTA Section (Spans 100% Screen Edge-to-Edge) */
.cta-area {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
}

.event-area {
    padding-top: 85px !important;
    padding-bottom: 85px !important;
}

.event-area .site-heading {
    margin-bottom: 35px !important;
}

.testimonial-area {
    padding-top: 85px !important;
    padding-bottom: 85px !important;
    background: #172B4D !important;
}

/* Generous Top Padding on Blog Area */
.blog-area {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
    position: relative !important;
}

.blog-area .site-heading {
    margin-bottom: 40px !important;
}

/* =========================================
   5. ACADEMIC COURSES CARDS (Desktop Symmetrical Spacing)
   ========================================= */
.course-area .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -18px !important;
    margin-right: -18px !important;
}

.course-area .row > [class*="col-"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
    margin-bottom: 36px !important;
    display: flex !important;
}

.course-item {
    width: 100% !important;
    height: 100% !important;
    min-height: 450px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-radius: 32px 32px 32px 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.course-item:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 35px rgba(3, 169, 244, 0.2) !important;
}

.course-img {
    height: 240px !important;
    width: 100% !important;
    border-radius: 32px 32px 32px 0 !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.course-img img {
    height: 240px !important;
    width: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.course-item:hover .course-img img {
    transform: scale(1.06) !important;
}

.course-tag {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 2 !important;
    background: rgba(0, 75, 148, 0.9) !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    backdrop-filter: blur(4px) !important;
}

.course-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 22px 24px 22px 24px !important;
}

.course-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    color: #64748B !important;
    font-weight: 600 !important;
}

.course-meta-left {
    color: #64748B !important;
}

.course-rating i {
    color: #F59E0B !important;
    font-size: 13px !important;
}

.course-title,
.course-item h4 a.course-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #004B94 !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
    transition: color 0.25s ease !important;
}

.course-title:hover,
.course-item h4 a.course-title:hover {
    color: #03A9F4 !important;
}

.course-text,
p.el-rep-des {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #64748B !important;
    margin-bottom: 20px !important;
}

.course-bottom {
    margin-top: auto !important;
    padding-top: 16px !important;
    border-top: 1px solid #F1F5F9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.course-bottom-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    font-size: 13px !important;
    color: #64748B !important;
    font-weight: 600 !important;
}

.course-bottom-left span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.course-price {
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
    color: #ffffff !important;
    padding: 7px 16px !important;
    border-radius: 50px !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3) !important;
}

/* =========================================
   6. TESTIMONIAL SLIDER & CARDS (Strictly Fixed Symmetrical Height)
   ========================================= */
.testimonial-slider .owl-stage {
    display: flex !important;
    align-items: stretch !important;
}

.testimonial-slider .owl-item {
    display: flex !important;
    flex: 1 0 auto !important;
    height: 100% !important;
}

.testimonial-item {
    width: 100% !important;
    height: 100% !important;
    min-height: 295px !important;
    max-height: 295px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-radius: 35px 35px 35px 0 !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12) !important;
    padding: 24px 22px 18px 22px !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.testimonial-item::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 4px !important;
    background: linear-gradient(90deg, #F59E0B 0%, #03A9F4 100%) !important;
}

.testimonial-rate {
    margin-bottom: 8px !important;
}

.testimonial-rate i.fas.fa-star {
    color: #F59E0B !important;
    font-size: 13px !important;
    margin-right: 2px !important;
}

.testimonial-quote {
    flex: 1 !important;
    display: flex !align-items: flex-start !important;
    margin-bottom: 10px !important;
}

.testimonial-quote p,
.testimonial-item p.el-rep-content {
    min-height: 86px !important;
    max-height: 86px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    font-style: italic !important;
    margin-bottom: 0 !important;
}

.testimonial-content {
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid #F1F5F9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.testimonial-author-img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid #F59E0B !important;
    background: #E1F5FE !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.testimonial-author-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.testimonial-author-info {
    flex: 1 !important;
    overflow: hidden !important;
}

.testimonial-author-info h4.el-rep-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #004B94 !important;
    margin-bottom: 1px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.testimonial-author-info p.el-rep-desig {
    font-size: 12px !important;
    color: #F59E0B !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.testimonial-quote-icon {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background: #F59E0B !important;
    color: #ffffff !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 0 35px 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3) !important;
}

.testimonial-quote-icon i {
    color: #ffffff !important;
}

/* =========================================
   7. ABOUT US (Large Scale, Full Height Symmetrical Alignment)
   ========================================= */
.about-left {
    margin-right: 15px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.about-img {
    position: relative !important;
    width: 100% !important;
}

.about-img .img-1 {
    border-radius: 90px 90px 0 90px !important;
    width: 100% !important;
    height: 440px !important;
    object-fit: cover !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12) !important;
}

.about-img .img-2 {
    border-radius: 50% !important;
    border: 4px dashed #F59E0B !important;
    padding: 8px !important;
    width: 270px !important;
    height: 270px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto 20px auto !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12) !important;
}

.about-img .img-3 {
    border-radius: 0 90px 90px 90px !important;
    width: 100% !important;
    height: 290px !important;
    object-fit: cover !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12) !important;
}

.about-experience {
    display: flex !important;
    align-items: center !important;
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
    padding: 18px 24px !important;
    color: #ffffff !important;
    border-radius: 50px 50px 50px 0 !important;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.3) !important;
    margin-top: 22px !important;
}

.about-experience-icon {
    width: 65px !important;
    height: 65px !important;
    line-height: 65px !important;
    text-align: center !important;
    background: #ffffff !important;
    color: #03A9F4 !important;
    border-radius: 50% !important;
    font-size: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.about-experience .text-start {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    padding-left: 14px !important;
}

.about-right {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.about-right .site-title-tagline {
    color: #F59E0B !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    padding-bottom: 4px !important;
    border-bottom: 2px solid #F59E0B !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

.about-right .site-title {
    font-size: 42px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: #004B94 !important;
    margin-bottom: 16px !important;
}

.about-right .site-title span {
    color: #03A9F4 !important;
}

.about-right .about-text {
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
    margin-bottom: 24px !important;
}

.about-content {
    margin-top: 20px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.about-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 20px !important;
}

.about-item-icon {
    width: 60px !important;
    height: 60px !important;
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.about-item-icon i,
.about-item-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.about-item-content h5 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #004B94 !important;
    margin-bottom: 4px !important;
}

.about-item-content p {
    font-size: 13.5px !important;
    color: #64748B !important;
    line-height: 1.45 !important;
    margin-bottom: 0 !important;
}

.about-quote {
    position: relative !important;
    color: #004B94 !important;
    padding: 24px 22px 28px 22px !important;
    background: #E1F5FE !important;
    border-radius: 20px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.about-quote p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #004B94 !important;
    font-style: italic !important;
    margin-bottom: 0 !important;
}

.about-quote i {
    position: absolute !important;
    font-size: 55px !important;
    color: #03A9F4 !important;
    opacity: 0.2 !important;
    right: 16px !important;
    bottom: 8px !important;
}

.about-bottom {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
    margin-top: 26px !important;
}

.about-phone {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.about-phone .icon {
    width: 52px !important;
    height: 52px !important;
    line-height: 52px !important;
    text-align: center !important;
    background: #03A9F4 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.about-phone .number span {
    font-size: 13px !important;
    color: #64748B !important;
    display: block !important;
    font-weight: 500 !important;
}

.about-phone .number h6 a {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #03A9F4 !important;
}

/* =========================================
   8. WHY CHOOSE US (4 Boxes with Gold Bubble & White Art)
   ========================================= */
.choose-item {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #ffffff !important;
    border-radius: 50px 50px 50px 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    padding: 14px 20px 14px 0 !important;
    height: 100% !important;
    min-height: 100px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    transition: transform 0.3s ease !important;
}

.choose-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.2) !important;
}

.choose-item-icon {
    width: 76px !important;
    height: 76px !important;
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
    border-radius: 50px 50px 50px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 28px !important;
    color: #ffffff !important;
    margin-left: -10px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 6px 15px rgba(245, 158, 11, 0.4) !important;
}

.choose-item-icon i,
.choose-item-icon svg,
.choose-item-icon span {
    color: #ffffff !important;
    fill: #ffffff !important;
    font-size: 28px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.choose-item-info {
    flex: 1 !important;
}

.choose-item-info h4 {
    color: #0F172A !important;
    font-size: 16.5px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.choose-item-info p {
    color: #64748B !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

.choose-img {
    height: 100% !important;
    min-height: 520px !important;
    display: flex !important;
    position: relative !important;
    border-radius: 50px 50px 50px 0 !important;
    overflow: hidden !important;
    border: 4px solid #F59E0B !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
    margin-left: 0 !important;
}

.choose-img::before {
    display: none !important;
    content: none !important;
}

.choose-img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 520px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
}

/* =========================================
   9. EVENT CARDS (Symmetrical Height, 2-line Title, 3-line Text, Fixed Meta)
   ========================================= */
.event-item {
    height: 100% !important;
    min-height: 530px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-radius: 35px 35px 35px 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.event-item:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 35px rgba(3, 169, 244, 0.2) !important;
}

.event-img {
    height: 215px !important;
    border-radius: 35px 35px 35px 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

.event-img img {
    height: 215px !important;
    width: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.event-item:hover .event-img img {
    transform: scale(1.06) !important;
}

.event-location {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 2 !important;
    background: rgba(0, 75, 148, 0.9) !important;
    color: #ffffff !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    backdrop-filter: blur(4px) !important;
}

.event-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 22px !important;
}

.event-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
    color: #64748B !important;
    font-weight: 600 !important;
}

.event-title {
    min-height: 52px !important;
    max-height: 52px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 18.5px !important;
    font-weight: 700 !important;
    color: #004B94 !important;
    margin-bottom: 10px !important;
    line-height: 1.35 !important;
}

.event-title a {
    color: #004B94 !important;
    transition: color 0.25s ease !important;
}

.event-title a:hover {
    color: #03A9F4 !important;
}

.event-info p.el-rep-des {
    min-height: 68px !important;
    max-height: 68px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: #64748B !important;
    margin-bottom: 16px !important;
}

.event-btn {
    margin-top: auto !important;
}

/* =========================================
   10. NOTICE BOARD ITEMS (Title Top, Meta Bottom-Right, Truncated 4 lines)
   ========================================= */
.notice-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.notice-item {
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 24px 28px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06) !important;
    border-left: 6px solid #03A9F4 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-height: 125px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-left-color 0.3s ease !important;
}

.notice-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 30px rgba(3, 169, 244, 0.15) !important;
    border-left-color: #F59E0B !important;
}

.notice-item h4 {
    margin-bottom: 12px !important;
}

.notice-item h4 a.notice-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #004B94 !important;
    line-height: 1.4 !important;
    display: block !important;
    transition: color 0.25s ease !important;
}

.notice-item h4 a.notice-title:hover {
    color: #03A9F4 !important;
}

.notice-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid #F1F5F9 !important;
    font-size: 13.5px !important;
    color: #64748B !important;
}

.notice-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.notice-meta span:last-child {
    margin-left: auto !important;
    background: #E1F5FE !important;
    color: #03A9F4 !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* =========================================
   11. BLOG CARDS (4 Boxes Compact Symmetrical Layout)
   ========================================= */
.blog-area .row.g-4 {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
}

.blog-area .row.g-4 > [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 24px !important;
    display: flex !important;
}

.blog-item {
    width: 100% !important;
    height: 100% !important;
    min-height: 485px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border-radius: 28px 28px 28px 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.blog-item:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 35px rgba(3, 169, 244, 0.2) !important;
}

.blog-item-img {
    height: 175px !important;
    width: 100% !important;
    border-radius: 28px 28px 28px 0 !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.blog-item-img img {
    height: 175px !important;
    width: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.blog-item:hover .blog-item-img img {
    transform: scale(1.06) !important;
}

.blog-date {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
    color: #ffffff !important;
    padding: 4px 12px !important;
    border-radius: 50px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3) !important;
}

.blog-item-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 16px 16px 18px 16px !important;
}

.blog-item-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
    font-size: 12px !important;
    color: #64748B !important;
    font-weight: 600 !important;
}

.blog-item-meta ul {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    list-style: none !important;
}

.blog-item-meta ul li a {
    color: #64748B !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.blog-item-meta ul li a i {
    color: #03A9F4 !important;
}

.blog-title,
.blog-item .blog-title {
    min-height: 66px !important;
    max-height: 66px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #004B94 !important;
    margin-bottom: 8px !important;
}

.blog-title a,
.blog-item .blog-title a {
    color: #004B94 !important;
    transition: color 0.25s ease !important;
}

.blog-title a:hover,
.blog-item .blog-title a:hover {
    color: #03A9F4 !important;
}

.blog-item-info p,
.blog-item-info p.el-rep-des {
    min-height: 56px !important;
    max-height: 56px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 12.5px !important;
    line-height: 1.48 !important;
    color: #64748B !important;
    margin-bottom: 14px !important;
}

.blog-btn,
.blog-item .theme-btn.el-rep-btn {
    margin-top: auto !important;
    width: 100% !important;
    padding: 9px 16px !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 50px 50px 50px 0 !important;
    background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3) !important;
    transition: all 0.3s ease !important;
}

.blog-btn:hover,
.blog-item .theme-btn.el-rep-btn:hover {
    background: linear-gradient(135deg, #03A9F4 0%, #0284C7 100%) !important;
    border-color: #03A9F4 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* =========================================
   12. FOOTER & FOOTER LOGO (Strictly ONE Single Solid Gold Arrow)
   ========================================= */
.footer {
    background: #0A2540 !important;
}

.footer-bottom {
    background: #051626 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.footer-logo img {
    height: 100px !important;
    max-height: 100px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin-bottom: 15px !important;
}

.footer-list ul {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}

.footer-list li {
    list-style: none !important;
    list-style-type: none !important;
    margin-bottom: 10px !important;
    padding-left: 0 !important;
}

.footer-list li a i,
.footer-links li a i {
    display: none !important;
}

.footer-list li a {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.25s ease !important;
}

.footer-list li a::before {
    content: "\f0da" !important;
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    color: #F59E0B !important;
    margin-right: 8px !important;
    transition: all 0.25s ease !important;
}

.footer-list li a:hover {
    color: #F59E0B !important;
    padding-left: 6px !important;
}

.footer-bottom-policy-links {
    margin: 0 !important;
    padding: 0 !important;
}

.footer-bottom-policy-links li a {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
}

.footer-bottom-policy-links li a:hover {
    color: #F59E0B !important;
    text-decoration: underline !important;
}

/* ===================================================================================
   13. HIGH-CONTRAST LEGAL & PRIVACY POLICY STYLING
   =================================================================================== */
.legal-policy-wrapper {
    background: #ffffff !important;
    border-radius: 35px 35px 35px 0 !important;
    box-shadow: 0 15px 45px rgba(0, 75, 148, 0.08) !important;
    padding: 50px 45px !important;
    margin-top: 10px !important;
    margin-bottom: 50px !important;
    border: 1px solid #E2E8F0 !important;
}

.legal-policy-header {
    margin-bottom: 40px !important;
    padding-bottom: 30px !important;
    border-bottom: 2px solid #F1F5F9 !important;
    position: relative !important;
}

.legal-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: #E1F5FE !important;
    color: #03A9F4 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 6px 16px !important;
    border-radius: 50px !important;
    border: 1px solid rgba(3, 169, 244, 0.3) !important;
    margin-bottom: 16px !important;
}

.legal-title {
    font-size: 36px !important;
    font-weight: 800 !important;
    color: #004B94 !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
}

.legal-subtitle {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin-bottom: 18px !important;
}

.legal-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    font-size: 13.5px !important;
    color: #64748B !important;
    font-weight: 600 !important;
}

.legal-toc-box {
    background: #F8FAFC !important;
    border-radius: 20px !important;
    padding: 26px 30px !important;
    border-left: 5px solid #03A9F4 !important;
}

.legal-toc-list li {
    margin-bottom: 10px !important;
}

.legal-toc-list li a {
    color: #004B94 !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

.legal-toc-list li a:hover {
    color: #03A9F4 !important;
    padding-left: 6px !important;
}

.legal-section-block {
    position: relative !important;
    padding: 35px 0 30px 0 !important;
    border-bottom: 1px solid #F1F5F9 !important;
}

.legal-section-block:last-child {
    border-bottom: none !important;
}

.legal-section-number {
    font-size: 36px !important;
    font-weight: 900 !important;
    color: #03A9F4 !important;
    opacity: 0.22 !important;
    position: absolute !important;
    top: 25px !important;
    right: 15px !important;
    line-height: 1 !important;
}

.legal-section-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #004B94 !important;
    margin-bottom: 16px !important;
    padding-right: 50px !important;
}

.legal-section-block p {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #334155 !important;
    margin-bottom: 16px !important;
}

.legal-section-block ul,
.legal-section-block ol {
    margin-bottom: 20px !important;
    padding-left: 24px !important;
}

.legal-section-block li {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #334155 !important;
    margin-bottom: 10px !important;
}

.legal-callout-box {
    display: flex !important;
    align-items: flex-start !important;
    padding: 20px 24px !important;
    border-radius: 16px !important;
    margin: 20px 0 !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
}

.legal-callout-box.info {
    background: #E1F5FE !important;
    border-left: 5px solid #03A9F4 !important;
    color: #003B75 !important;
}

.legal-callout-box.warning {
    background: #FFFBEB !important;
    border-left: 5px solid #F59E0B !important;
    color: #78350F !important;
}

/* HIGH-CONTRAST LEGAL CONTACT CARD */
.legal-contact-card {
    background: linear-gradient(135deg, #004B94 0%, #03A9F4 100%) !important;
    border-radius: 24px !important;
    padding: 32px 34px !important;
    margin-top: 26px !important;
    box-shadow: 0 12px 35px rgba(3, 169, 244, 0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.legal-contact-card h5,
.legal-section-block .legal-contact-card h5,
.legal-contact-card h5 i {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}

.legal-contact-card p,
.legal-section-block .legal-contact-card p,
.legal-contact-card .text-white-50 {
    color: #F0F7FF !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 6px !important;
}

.legal-contact-card p:last-child {
    margin-bottom: 0 !important;
}

.legal-contact-card code,
.legal-section-block .legal-contact-card code {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.25) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.legal-contact-card i.text-warning,
.legal-contact-card .text-warning {
    color: #FBBF24 !important;
}

/* ===================================================================================
   14. INSTANT 0MS MOBILE OVERLAY & RESPONSIVE SUITE (max-width: 991px)
   =================================================================================== */
@media (max-width: 991px) {
    /* Header Area & Container Flow */
    .header {
        position: relative !important;
        z-index: 99999 !important;
    }
    
    .main-navigation {
        background: #ffffff !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        position: relative !important;
        z-index: 99999 !important;
    }
    
    .navbar {
        position: relative !important;
        padding: 10px 0 !important;
        background: #ffffff !important;
    }
    
    .navbar .container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        position: relative !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Logo in Mobile Navbar */
    .navbar-brand,
    .header-logo {
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .navbar-brand img,
    .header-logo img {
        height: 52px !important;
        max-height: 52px !important;
        width: auto !important;
        object-fit: contain !important;
    }
    
    /* Mobile Menu Right (Toggler only) */
    .mobile-menu-right {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
    }
    
    .mobile-menu-right .search-btn {
        display: none !important;
    }
    
    .navbar-toggler {
        background: #E1F5FE !important;
        border: 2px solid #03A9F4 !important;
        border-radius: 12px !important;
        padding: 8px 12px !important;
        color: #03A9F4 !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        outline: none !important;
        box-shadow: 0 4px 10px rgba(3, 169, 244, 0.2) !important;
    }
    
    .navbar-toggler .navbar-toggler-mobile-icon,
    .navbar-toggler i {
        color: #03A9F4 !important;
        font-size: 20px !important;
        display: block !important;
    }
    
    /* INSTANT 0MS FLOATING OVERLAY */
    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 75px) !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        border-radius: 0 0 24px 24px !important;
        box-shadow: 0 25px 60px rgba(0, 30, 80, 0.25) !important;
        padding: 16px 20px 24px 20px !important;
        margin: 0 !important;
        border-top: 2px solid #E1F5FE !important;
        z-index: 999999 !important;
        transition: opacity 0.12s ease-out, transform 0.12s ease-out !important;
    }

    .navbar-collapse:not(.show) {
        display: none !important;
        opacity: 0 !important;
        transform: translateY(-6px) !important;
    }

    .navbar-collapse.show {
        display: block !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .navbar-collapse.collapsing {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        opacity: 0 !important;
        transform: translateY(-6px) !important;
        transition: opacity 0.12s ease-out, transform 0.12s ease-out !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border-radius: 0 0 24px 24px !important;
        box-shadow: 0 25px 60px rgba(0, 30, 80, 0.25) !important;
        padding: 16px 20px 24px 20px !important;
        margin: 0 !important;
        border-top: 2px solid #E1F5FE !important;
        z-index: 999999 !important;
    }
    
    .navbar .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    
    .navbar .nav-item {
        width: 100% !important;
        border-bottom: 1px solid #F1F5F9 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .navbar .nav-item:last-child {
        border-bottom: none !important;
    }
    
    .navbar .nav-item .nav-link {
        padding: 14px 0 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #004B94 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 0 !important;
        text-align: left !important;
    }
    
    .navbar .nav-item .nav-link:hover,
    .navbar .nav-item.active .nav-link {
        color: #03A9F4 !important;
    }
    
    /* Sub-menus in Mobile Accordion */
    .navbar .nav-item .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        background: #F8FAFC !important;
        border: none !important;
        border-left: 4px solid #F59E0B !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        margin: 4px 0 14px 0 !important;
        padding: 8px 0 !important;
    }
    
    .navbar .nav-item .dropdown-menu li {
        width: 100% !important;
        border-bottom: 1px solid rgba(0, 75, 148, 0.06) !important;
    }
    
    .navbar .nav-item .dropdown-menu li:last-child {
        border-bottom: none !important;
    }
    
    .navbar .nav-item .dropdown-menu li a {
        color: #004B94 !important;
        padding: 10px 18px !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        display: block !important;
        white-space: normal !important;
    }
    
    .navbar .nav-item .dropdown-menu li a:hover {
        color: #F59E0B !important;
        background: rgba(245, 158, 11, 0.1) !important;
        padding-left: 22px !important;
    }
    
    /* Mobile Apply Now Button inside Menu */
    .navbar-collapse .nav-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin-top: 18px !important;
        padding-top: 16px !important;
        border-top: 1px dashed #E2E8F0 !important;
    }
    
    .navbar-collapse .nav-right .search-btn {
        display: none !important;
    }
    
    .navbar-collapse .nav-right-btn {
        width: 100% !important;
        margin: 0 !important;
    }
    
    .navbar-collapse .nav-right-btn .theme-btn {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 50px !important;
    }

    /* Section Spacing on Tablets */
    .py-120,
    .about-area,
    .course-area,
    .choose-area,
    .gallery-area,
    .event-area,
    .testimonial-area,
    .blog-area {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }
    
    /* Legal Wrapper on Tablet & Mobile */
    .legal-policy-wrapper {
        padding: 30px 20px !important;
        border-radius: 24px 24px 24px 0 !important;
    }
    .legal-title {
        font-size: 26px !important;
    }
    .legal-subtitle {
        font-size: 15px !important;
    }
    .legal-meta {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .legal-section-title {
        font-size: 19px !important;
        padding-right: 0 !important;
    }
    .legal-section-number {
        position: static !important;
        font-size: 24px !important;
        margin-bottom: 6px !important;
    }
    
    /* About Us Stacking */
    .about-left {
        margin-right: 0 !important;
        margin-bottom: 40px !important;
    }
    .about-img .img-1 {
        height: 320px !important;
        border-radius: 50px 50px 0 50px !important;
    }
    .about-img .img-2 {
        width: 200px !important;
        height: 200px !important;
        margin: 0 auto 15px auto !important;
    }
    .about-img .img-3 {
        height: 220px !important;
        border-radius: 0 50px 50px 50px !important;
    }
    .about-right .site-title {
        font-size: 32px !important;
    }
    
    /* Academic Courses 100% Width */
    .course-area .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 24px !important;
    }
    .course-item {
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Why Choose Us Stacking */
    .choose-img {
        min-height: 320px !important;
        height: 320px !important;
        margin-top: 30px !important;
    }
    .choose-img img {
        min-height: 320px !important;
        height: 320px !important;
        border-radius: 40px !important;
    }
    
    /* Blog Grid on Tablet */
    .blog-area .row.g-4 > [class*="col-"] {
        width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        margin-bottom: 24px !important;
    }
    .blog-item {
        min-height: 460px !important;
    }
}

/* ----------------------------------------------------
   MOBILE PHONES (max-width: 767px)
   ---------------------------------------------------- */
@media (max-width: 767px) {
    /* Hero Slider on Mobile */
    .hero-section,
    .hero-slider,
    .tw-slider {
        min-height: 420px !important;
    }
    .hero-slider .site-title,
    .hero-slider h1 {
        font-size: 26px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }
    .hero-slider p {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }
    .hero-slider .hero-btn {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .hero-slider .hero-btn .theme-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 20px !important;
        font-size: 13px !important;
    }
    
    /* Global Headings on Mobile */
    .site-heading {
        margin-bottom: 30px !important;
        text-align: center !important;
    }
    .site-title,
    .about-right .site-title,
    .choose-area .site-title {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }
    .site-title-tagline {
        font-size: 12.5px !important;
    }
    
    /* About Us on Mobile */
    .about-img .img-1 {
        height: 240px !important;
    }
    .about-img .img-2 {
        width: 160px !important;
        height: 160px !important;
    }
    .about-img .img-3 {
        height: 180px !important;
    }
    .about-experience {
        padding: 12px 16px !important;
        border-radius: 30px !important;
    }
    .about-experience-icon {
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
    }
    .about-experience .text-start {
        font-size: 14px !important;
    }
    .about-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }
    .about-bottom .theme-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Why Choose Us on Mobile */
    .choose-item {
        border-radius: 30px 30px 30px 0 !important;
        padding: 10px 14px 10px 0 !important;
        min-height: auto !important;
        margin-bottom: 14px !important;
    }
    .choose-item-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 20px !important;
        margin-left: -6px !important;
    }
    .choose-item-info h4 {
        font-size: 15px !important;
    }
    .choose-item-info p {
        font-size: 12px !important;
    }
    
    /* Academic Courses on Mobile */
    .course-img,
    .course-img img {
        height: 190px !important;
    }
    .course-content {
        padding: 16px !important;
    }
    .course-title,
    .course-item h4 a.course-title {
        font-size: 17.5px !important;
    }
    .course-text {
        font-size: 13px !important;
        margin-bottom: 14px !important;
    }
    .course-bottom {
        padding-top: 12px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    /* Testimonials Cards on Mobile */
    .testimonial-item {
        min-height: auto !important;
        max-height: none !important;
        height: auto !important;
        padding: 20px 16px 16px 16px !important;
        border-radius: 24px 24px 24px 0 !important;
    }
    .testimonial-quote p,
    .testimonial-item p.el-rep-content {
        min-height: auto !important;
        max-height: none !important;
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }
    
    /* Blog Grid on Mobile (1 Box per Row) */
    .blog-area .row.g-4 > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 20px !important;
    }
    .blog-item {
        min-height: auto !important;
        height: auto !important;
    }
    .blog-item-img,
    .blog-item-img img {
        height: 180px !important;
    }
    .blog-title,
    .blog-item .blog-title {
        min-height: auto !important;
        max-height: none !important;
        font-size: 16px !important;
    }
    .blog-item-info p,
    .blog-item-info p.el-rep-des {
        min-height: auto !important;
        max-height: none !important;
        font-size: 13px !important;
    }

    /* Inner Page Elements & Tables */
    .table-responsive,
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    table th,
    table td {
        padding: 10px 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    
    .admissions-hub-wrapper,
    .scholarships-page-wrapper,
    .academics-page-wrapper,
    .facilities-page-wrapper,
    .school-life-page-wrapper,
    .faq-page-wrapper,
    .activities-page-wrapper,
    .clubs-page-wrapper,
    .athletics-page-wrapper,
    .health-page-wrapper,
    .gallery-page-wrapper {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }
    
    /* Notice Board Items on Mobile */
    .notice-item {
        padding: 18px 20px !important;
        border-radius: 18px !important;
    }
    .notice-item h4 a.notice-title {
        font-size: 16px !important;
    }
    .notice-meta {
        font-size: 12px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    .notice-meta span:last-child {
        margin-left: 0 !important;
    }

    /* Footer Stacking on Mobile */
    .footer {
        padding-top: 50px !important;
        padding-bottom: 20px !important;
    }
    .footer .row > [class*="col-"] {
        width: 100% !important;
        margin-bottom: 30px !important;
    }
    .footer-logo img {
        height: 75px !important;
    }
    .footer-bottom {
        text-align: center !important;
        padding: 15px 0 !important;
    }
    .footer-bottom .copyright-text {
        margin-bottom: 10px !important;
    }
}