﻿/* ============================================================
   MOBILE RESPONSIVE FIXES FOR WHITE GLOVE APPLIANCE SERVICE
   ============================================================ */
/* Ensure mobile overrides always win */
* {
    box-sizing: border-box;
}

@media (max-width: 768px) {

    /* ------------------------------
       GLOBAL TYPOGRAPHY & SPACING
       ------------------------------ */
    body {
        font-size: 15px;
        line-height: 26px;
    }

    h1 {
        font-size: 26px !important;
        line-height: 32px !important;
    }

    h2 {
        font-size: 22px !important;
    }

    .section_padding {
        padding: 60px 0 !important;
    }

    .hero-section-title {
        margin-bottom: 30px !important;
    }

    /* ------------------------------
       HEADER / NAVIGATION
       ------------------------------ */
    /*.main_menu_area nav.navbar.navbar-default {
        flex-direction: column !important;
        padding: 0 !important;
    }

    .logo_flex {
        width: 100% !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .navbar_flex {
        width: 100% !important;
    }

    .social_icon_flex {
        width: 100% !important;
        margin-top: 20px;
    }

    .header-social-right {
        flex-direction: column !important;
        text-align: center !important;
    }

        .header-social-right ul {
            text-align: center !important;
            margin-bottom: 10px;
        }

        .header-social-right span.contact_us {
            margin-left: 0 !important;
            display: block;
            text-align: center;
        }*/

    /* ------------------------------
       HEADER SLIDER
       ------------------------------ */
    .header_slide_text h1 {
        font-size: 22px !important;
        padding: 0 !important;
        color: black !important;
    }

    .header_slide_text p {
        font-size: 12px !important;
    }

    .header_slider_bg {
        padding: 100px 0 !important;
    }

    /* ------------------------------
       ABOUT SECTION (CRITICAL FIX)
       ------------------------------ */

    /* Remove background image overlay on mobile */
    .about_area:before {
        display: none !important;
    }

    /* Stack the two columns */
    .about_flex {
        flex-direction: column !important;
        position: relative !important;
        color:blue;
    }

    .about_details {
        width: 100% !important;
        padding: 20px 10px !important;
       
    }

    /* Remove absolute positioning from support box */
    .about_support {
        width: 100% !important;
        position: relative !important;
        right: auto !important;
        top: auto !important;
        margin-top: 20px !important;
    }

        .about_support img {
            width: 100% !important;
            position: relative !important;
        }

    .about_support_flex {
        position: relative !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        margin-top: 10px;
    }

    /* ------------------------------
       SERVICES SLIDER
       ------------------------------ */
    .slider_service_box {
        width: 100% !important;
        margin-bottom: 20px;
    }

    /* ------------------------------
       GALLERY
       ------------------------------ */
    .hv2_gallery_area {
        flex-direction: column !important;
    }

    .hv2_gallery_box {
        width: 100% !important;
        height: auto !important;
        border-right: none !important;
        border-bottom: 20px solid #fff !important;
    }

    /* ------------------------------
       TESTIMONIALS
       ------------------------------ */
    .testimonial_image ul {
        display: flex !important;
        justify-content: center !important;
    }

    /* ------------------------------
       CONTACT FORM
       ------------------------------ */
    .input_half_width {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }

    .contact_img {
        width: 100% !important;
        margin-bottom: 20px;
    }

    /* ------------------------------
       FOOTER
       ------------------------------ */
    .footer_section .col-md-3 {
        width: 100% !important;
        margin-bottom: 30px;
        text-align: center;
    }

    .copyright_left,
    .copyright_right {
        text-align: center !important;
    }

        .copyright_right ul.menu {
            text-align: center !important;
            padding-left: 0 !important;
        }
}
/* Highest priority for mobile overrides */
@media (max-width: 768px) {
    :root {
        --mobile: 1;
    }
}
