/* Extra homepage responsive rules from static index.php <style> (not in style.css). */

/* =======================================================
   Mobile (320px - 767px)
   ======================================================= */
@media (min-width: 320px) and (max-width: 767px) {
    /* Prevent Horizontal Scrolling */
    html, body {
        overflow-x: hidden;
        width: 100%;
    }
    p.text-muted.mb-0 {
    padding: 0px;
    }

    small.d-block.mb-2.fw-semibold.text-uppercase {
    text-align: center;
    }

    /* Proper spacing and padding */
    .section-pad,
    .storytelling-container,
    .stats-ribbon {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Headings Center Aligned */
    h1, h2, h3, h4, h5, h6,
    .section-heading,
    .slide-heading,
    .slide-tag {
        text-align: center !important;
    }
    .service-card h4 {
        text-align: left !important;
    }

    /* Section Content Center Aligned */
    .slide-inner,
    .about-section .reveal-left,
    .school-card-body,
    .service-card,
    .testimonial-card,
    .premium-glass-card,
    .hero-slide {
        text-align: justify !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Two-column layout becomes single-column */
    .row > .col-6,
    .row > .col-md-6,
    .row > .col-lg-6,
    .row > .col-lg-7,
    .row > .col-lg-5,
    .row > .col-4 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1.5rem !important;
    }

    /* Buttons: Stack, center aligned, proper width/spacing */
    .btn,
    .slide-ctas a,
    .school-card-body .btn,
    .about-section .btn {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 300px !important;
        margin-bottom: 15px !important;
    }

    .slide-ctas {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .slide-ctas .me-3 {
        /*margin-right: 0 !important;*/
    }

    /* Contact Form (Targeting standard form elements as per requirements) */
    form {
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    input,
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    button[type="submit"] {
        display: block !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 300px !important;
    }

    /* Navigation Mobile-Friendly */
    nav,
    .navbar-collapse {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .navbar-nav .nav-item {
        word-wrap: break-word !important;
    }

    /* Icons and Badges Positioning Adjustments */
    .about-badge,
    .highlight-counter-box {
        /*position: relative !important;*/
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-top: 20px !important;
        right: auto !important;
        /*left: auto !important;*/
        bottom: auto !important;
    }

    .premium-glass-card .d-flex {
        /*flex-direction: column !important;*/
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .badge-pill-custom {
        margin-bottom: 10px !important;
    }
    .contact__form-wrap {
    flex: 1;
    min-width: 380px;
    }
}

/* =======================================================
   Tablet (768px - 1024px)
   ======================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
    .section-pad,
    .storytelling-container {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .stats-ribbon .stat-item {
        margin-bottom: 20px !important;
    }

    /* Ensure complex grids scale down cleanly without breaking */
    .row > .col-4 {
        width: 50% !important;
        flex: 0 0 50% !important;
    }

    /* Form Alignment */
    form {
        width: 90% !important;
        margin: 0 auto !important;
    }

}

/* =======================================================
   Laptop (1025px - 1366px)
   ======================================================= */
@media (min-width: 1025px) and (max-width: 1366px) {
    .container {
        max-width: 960px !important;
    }

    .section-pad,
    .storytelling-container {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    .slide-content h1 {
        font-size: 3.5rem !important;
    }
}

/* =======================================================
   Large Screen (1367px+)
   ======================================================= */
@media (min-width: 1367px) {
    .container {
        max-width: 1200px !important;
    }

    .section-pad,
    .storytelling-container {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }

    .hero-slide {
        background-attachment: fixed !important;
    }

    .premium-glass-card {
        padding: 40px !important;
    }
}