/* Mobile Responsive Styles */

@media (max-width: 768px) {
    
    /* =========================================
       Global Typography & Spacing
       ========================================= */
    body {
        font-size: 14px;
        line-height: 1.6;
        overflow-x: hidden; /* Prevent horizontal scroll */
    }

    h1, .display-1, .text-display-1 {
        font-size: 30px !important;
        line-height: 1.2 !important;
        word-wrap: break-word; /* Prevent long words breaking layout */
    }

    h2, .display-2, .text-display-2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    h3, .display-3, .text-display-3 {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    h4, .text-heading-4 {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    h5, .text-heading-5 {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }

    h6, .text-heading-6 {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    .text-body-lead-large {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .text-body-lead {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    /* Normalize large spacings */
    .section-box, .section-spacing, .section-padding {
        padding: 40px 0 !important;
    }

    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }
    
    .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
    
    .col-*, [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Utility classes override */
    .mt-100, .mt-90, .mt-80, .mt-70, .mt-60 { margin-top: 30px !important; }
    .pt-100, .pt-90, .pt-80, .pt-70, .pt-60 { padding-top: 30px !important; }
    .mb-100, .mb-90, .mb-80, .mb-70, .mb-60 { margin-bottom: 30px !important; }
    .pb-100, .pb-90, .pb-80, .pb-70, .pb-60 { padding-bottom: 30px !important; }

    /* =========================================
       Header & Navigation
       ========================================= */
    .header .main-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
    }

    .header-logo img {
        max-height: 35px; /* Smaller logo on mobile */
        width: auto;
    }

    .burger-icon {
        top: auto;
        position: relative;
        float: right;
        margin-top: 0;
    }
    
    .header-right {
        display: none !important; /* Hide header right elements on mobile mostly, except burger */
    }
    .header .header-right.d-block {
         display: block !important;
         position: absolute;
         top: 15px;
         right: 15px;
    }
    
    /* Ensure mobile menu wrapper is visible when active */
    .mobile-header-wrapper-style {
        width: 280px; /* Standard mobile drawer width */
    }

    /* =========================================
       Hero Banners & Sliders
       ========================================= */
    .banner-hero {
        padding: 40px 0 !important;
        text-align: center;
        background-size: cover !important;
        background-position: center !important;
    }

    .banner-hero .block-banner {
        padding-right: 0 !important;
    }

    .banner-hero .banner-imgs {
        margin-top: 30px;
        text-align: center;
        display: block;
    }

    .banner-hero .banner-imgs img {
        max-width: 100%;
        height: auto;
    }
    
    .swiper-button-next, .swiper-button-prev {
        display: none !important; /* Hide slider arrows on mobile */
    }

    /* =========================================
       Content Blocks & Shortcodes
       ========================================= */
    /* Boxes */
    .box-optimized {
        padding: 20px !important;
    }

    .box-newsletter {
        padding: 30px 20px !important;
        border-radius: 15px !important;
    }
    
    .box-newsletter .block-chart {
        display: none !important;
    }
    
    /* Flex containers that should stack */
    .d-flex:not(.mobile-header-top) {
        flex-wrap: wrap;
    }
    
    /* Trusted / Partners Lists */
    .list-partners {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .list-partners li {
        width: 50% !important; /* 2 columns for partners */
        margin-bottom: 20px;
        padding: 10px;
    }
    
    /* Feature Lists */
    .list-icons, .list-steps {
        padding: 0;
    }
    
    .list-icons li, .list-steps li {
        width: 100% !important;
        padding-right: 0 !important;
        margin-bottom: 20px;
    }

    /* Pricing */
    .block-pricing-3 {
        padding: 15px !important;
    }
    
    .block-pricing-3 .block-pricing-left {
        padding: 20px !important;
        margin-bottom: 20px;
    }

    /* =========================================
       Footer
       ========================================= */
    .footer {
        padding-top: 40px !important;
    }

    .footer .footer-bottom {
        text-align: center;
    }

    .footer .footer-bottom .col-md-8, 
    .footer .footer-bottom .col-md-4 {
        text-align: center !important;
        margin-bottom: 15px;
    }

    .footer-social {
        justify-content: center;
        display: flex;
    }

    /* Mobile App Card (Footer specific) */
    .card.border-0.shadow-sm {
        margin: 0 0 30px 0; /* Remove side margins, ensure bottom spacing */
    }

    /* =========================================
       Forms & Buttons
       ========================================= */
    input[type="text"], 
    input[type="email"], 
    input[type="password"], 
    select, 
    textarea {
        font-size: 16px !important; /* Prevent zoom on iOS */
        height: 45px !important;
    }

    .btn {
        padding: 12px 20px !important;
        font-size: 16px !important;
        width: 100%; /* Full width buttons on mobile usually better */
        margin-bottom: 10px;
        display: block;
    }
    
    /* Exceptions for small buttons */
    .btn-sm, .btn-play-video {
        width: auto !important;
        display: inline-block;
    }

    /* =========================================
       Images & Media
       ========================================= */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    iframe {
        max-width: 100% !important;
    }
}