/* =============================================
   RESPONSIVE CSS - All breakpoints
   ============================================= */

/* ---- Extra Small (max 575px) ---- */
@media (max-width: 575px) {

    /* Navbar */
    .nav-logo { width: 160px; }
    .navbar-collapse {
        background: #fff;
        padding: 15px;
        border-top: 1px solid #ddd;
    }

    /* Hero Banner */
    .rootDiv { min-height: auto; background-attachment: scroll; }
    .rootDiv-sado { min-height: auto; }
    .rootDiv-sado-p { padding: 1.5rem 1rem; }
    .pt-1rem { padding-top: 0.25rem !important; }
    .pt-3rem { padding-top: 0 !important; }
    .banner-title { font-size: 18px !important; }
    .banner-sub-title { font-size: 14px !important; padding-bottom: 4px !important; }
    .banner-text { font-size: 12px !important; }
    .banner-typing { min-height: 2rem; }
    #serviceNameLoad { font-size: 13px !important; }

    /* Sections */
    .pt-5rem { padding-top: 2rem !important; }
    .pt-4rem { padding-top: 1.5rem !important; }
    .section-title { font-size: 20px !important; }
    .section-subtitle { font-size: 14px !important; }
    .overview-text { font-size: 14px !important; margin: 0 !important; padding: 0 !important; }

    /* Images in sections - show on mobile, full width */
    .sectionImgDiv { display: block !important; }
    .section-img { width: 100% !important; max-height: 250px !important; object-fit: cover; border-radius: 4px; }

    /* Contact */
    .help-line-title { margin-top: 15px !important; font-size: 22px !important; }
    .contact-form { margin-top: 20px !important; }
    .parallax { min-height: auto; background-attachment: scroll; }
    .parallax-sado { padding: 1rem 0 2rem; }

    /* Contact page map */
    .contact-form iframe { width: 100% !important; height: 250px !important; }

    /* Footer */
    .jumbotron { padding: 1.5rem 1rem; }

    /* Project cards */
    .col-md-3 { flex: 0 0 100%; max-width: 100%; }

    /* Course cards */
    .col-md-4 { flex: 0 0 100%; max-width: 100%; }

    /* Notice */

    /* Typography */
    .font35 { font-size: 22px !important; }
    h1 { font-size: 1.4rem !important; }
    h2 { font-size: 1.2rem !important; }
    h4 { font-size: 1rem !important; }
}

/* ---- Small (576px - 767px) ---- */
@media (min-width: 576px) and (max-width: 767px) {

    .nav-logo { width: 180px; }
    .navbar-collapse {
        background: #fff;
        padding: 15px;
        border-top: 1px solid #ddd;
    }

    .rootDiv-sado-p { padding: 2rem 1.5rem; }
    .banner-title { font-size: 22px !important; }
    .banner-sub-title { font-size: 15px !important; }
    .banner-text { font-size: 13px !important; }
    #serviceNameLoad { font-size: 14px !important; }
    .pt-3rem { padding-top: 0.25rem !important; }
    .pt-1rem { padding-top: 0.5rem !important; }
    .rootDiv { background-attachment: scroll; min-height: auto; }
    .rootDiv-sado { min-height: auto; }
    .banner-typing { min-height: 2rem; }
    #serviceNameLoad { font-size: 14px !important; }

    .pt-5rem { padding-top: 2.5rem !important; }
    .section-title { font-size: 22px !important; }
    .overview-text { font-size: 15px !important; }

    .sectionImgDiv { display: block !important; }
    .section-img { width: 100% !important; max-height: 280px !important; object-fit: cover; border-radius: 4px; }

    .parallax { background-attachment: scroll; }
    .parallax-sado { padding: 1rem 0 2rem; }

    .contact-form iframe { width: 100% !important; height: 300px !important; }
}

/* ---- Medium (768px - 991px) ---- */
@media (min-width: 768px) and (max-width: 991px) {

    .nav-logo { width: 200px; }

    .banner-title { font-size: 26px !important; }
    .banner-sub-title { font-size: 17px !important; }
    .rootDiv-sado-p { padding: 3rem 1.5rem; }

    .section-title { font-size: 24px !important; }
    .overview-text { font-size: 16px !important; }

    .sectionImgDiv img { max-height: 250px !important; }
    .section-img { max-height: 280px !important; }

    .help-line-title { margin-top: 30px !important; font-size: 26px !important; }
    .contact-form { margin-top: 40px !important; }
    .parallax { background-attachment: scroll; }

    .contact-form iframe { width: 100% !important; height: 350px !important; }

    /* Footer columns */
    .jumbotron .col-md-3 { flex: 0 0 50%; max-width: 50%; margin-bottom: 1rem; }
}

/* ---- Large (992px - 1199px) ---- */
@media (min-width: 992px) and (max-width: 1199px) {

    .nav-logo { width: 220px; }
    .banner-title { font-size: 30px !important; }
    .sectionImgDiv img { max-height: 300px !important; }
    .help-line-title { font-size: 28px !important; }
}

/* ---- Contact page specific ---- */
@media (max-width: 767px) {
    .contact-form.col-md-6,
    .contact-form.col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 15px;
    }

    .contact-form iframe {
        width: 100% !important;
        height: 280px !important;
    }

    textarea#msg {
        width: 100% !important;
    }
}

/* ---- Project page cards ---- */
@media (max-width: 767px) {
    .col-md-3.p-1 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .col-md-3.p-1 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ---- Course cards ---- */
@media (max-width: 575px) {
    .col-md-4.p-1 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .col-md-4.p-1 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ---- Prevent horizontal scroll ---- */
body, html {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    padding-top: 70px;
}

@media (max-width: 991px) {
    body { padding-top: 70px; }
    .nav-logo { width: 140px; height: 50px; }
    .navbar { height: 70px !important; }
}

/* ---- Images always fluid ---- */
img {
    max-width: 100%;
    height: auto;
}

/* ---- Textarea full width on mobile ---- */
@media (max-width: 767px) {
    textarea {
        width: 100% !important;
    }
}