/* Mobile Optimization Fixes */

@media (max-width: 768px) {
    /* 1. General Layout Fixes */
    html, body {
        overflow-x: hidden !important;
        width: 100%;
        position: relative;
    }

    /* Prevent horizontal scroll from all general containers */
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 2. Header & Navigation */
    .fx-header-1-area {
        position: absolute !important;
        background: transparent !important;
        z-index: 999 !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .fx-header-1-top {
        display: none !important;
    }
    
    .fx-header-1-main {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px 15px !important;
    }
    
    .fx-header-1-main-logo {
        margin-right: auto !important;
    }
    
    .fx-header-1-main-logo img {
        max-width: 150px !important;
        height: auto !important;
    }
    
    /* Hide the action link completely except for the menu toggle */
    .fx-header-1-action-link {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
    }
    
    .fx-pr-btn-1, .fx-header-1-action-link .fx-pr-btn-1 {
        display: none !important; /* Hide "Get In Touch"/other heavy buttons in header for mobile to save space */
    }

    .fx-menu-btn-1 {
        display: grid !important;
        width: 50px !important;
        height: 50px !important;
        margin-left: 15px !important;
        position: relative !important;
        right: 0 !important;
        z-index: 99 !important;
        padding: 0 !important;
        background-color: #0b1c2c !important;
        align-content: center !important;
        justify-content: center !important;
        grid-template-columns: auto auto auto !important;
        grid-template-rows: auto !important;
        gap: 4px !important;
        border-radius: 8px !important; /* Adding slight radius for a better, modern look */
        border: none !important;
    }
    
    .fx-menu-btn-1 span {
        display: inline-block !important;
        width: 5px !important;
        height: 5px !important;
        background-color: #ffffff !important;
        border-radius: 50% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Fix header overlap issues */
    .fx-hero-1-area {
        margin-top: 0px !important;
    }

    /* 3. Typography & Titles Scaling */
    .fx-scn-title-1 {
        font-size: 26px !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }
    
    .fx-subtitle-1 {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    
    h1, h2, h3, h4, h5, h6, .fx-heading-1 {
        word-wrap: break-word !important;
    }
    
    .fx-hero-1-slider-item-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    /* 4. Hero Section */
    .fx-hero-1-slider-item-content {
        padding: 50px 15px !important;
        text-align: center !important;
    }
    .fx-hero-1-slider-item-btn {
        margin-top: 20px !important;
        display: inline-block;
    }
    .fx-hero-1-slider-item-btn .fx-pr-btn-1 {
        display: inline-flex !important; /* Bring back the main hero button */
    }

    /* 5. About Section */
    .fx-about-1-content {
        padding: 20px 0 !important;
    }
    
    .fx-about-1-area {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .fx-counter-1 {
        gap: 20px !important;
        flex-direction: column !important;
    }

    /* 6. Services Section */
    .fx-serve-1-slider-shpae, .fx-serve-1-slider-shpae svg {
        display: none !important; /* Hide explicitly too-wide SVG graphics */
    }
    
    .fx-services-1-area {
        overflow: hidden !important; 
    }

    /* Core fix for orange slider section being clipped */
    .fx-services-1-slider {
        padding: 40px 20px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 30px !important;
        overflow: visible !important; /* Change from hidden to visible so buttons aren't clipped */
    }

    .fx-services-1-slider-btn {
        right: 20px !important; /* Re-align the navigation buttons to fit the new padding */
        top: 20px !important;
    }

    .fx-services-1-wrap {
        gap: 30px !important;
    }

    .fx-services-1-content-btn {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: flex-start !important;
        margin-bottom: 30px !important;
    }

    .fx-services-1-content-btn .fx-pr-btn-1 {
        display: inline-flex !important; /* Unhide this specific button */
    }

    /* 7. Sliders (Swiper) globally */
    .swiper-container {
        width: 100% !important;
        overflow: hidden !important; 
    }
    
    .swiper-wrapper {
        box-sizing: border-box !important;
    }

    .swiper-slide {
        width: 100% !important; 
        box-sizing: border-box !important;
    }

    /* 8. Projects Section */
    .fx-project-1-area {
        padding-top: 60px !important;
        overflow: hidden !important;
    }
    .fx-project-1-item {
        margin: 0 10px !important;
    }

    /* 9. Testimonials */
    .fx-testimonial-1-area {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
        overflow: hidden !important;
    }

    .fx-testimonial-1-slider-main {
        overflow: hidden !important;
    }

    /* 10. Blog Section */
    .fx-blog-1-area {
        padding-top: 60px !important;
        overflow: hidden !important;
    }

    .fx-blog-1-item {
        margin-bottom: 30px !important;
        width: 100% !important;
    }
    
    .fx-blog-1-item-content {
        padding: 20px !important;
    }

    /* 11. Footer */
    .fx-footer-1-area {
        padding-top: 60px !important;
        padding-bottom: 80px !important; /* Add extra room at bottom so it's not squashed */
        overflow: hidden !important;
    }

    .fx-footer-1-widget {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 40px 0 !important;
    }

    .fx-footer-1-widget-single {
        width: 100% !important;
    }

    /* Force Quick Links and Our Services to sit perfectly side by side */
    .fx-footer-1-widget-single:nth-child(2),
    .fx-footer-1-widget-single:nth-child(3) {
        width: 48% !important; 
    }

    /* 12. Fix offcanvas/menu button padding */
    .fx-menu-btn-1 {
        position: relative !important;
        z-index: 99 !important;
    }

    /* Ensure images dont overflow */
    img {
        max-width: 40% !important;
        height: auto !important;
    }

    /* 13. Forms */
    input, textarea, select, .form-control {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 15px; /* Proper spacing between fields */
    }

    /* 14. Hide Mobile Search Bar in Menu */
    .txa-offcanvas-search,
    .txa-offcanvas-search.d-block,
    .txa-offcanvas-search-form {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* 15. Fix Offcanvas Menu Z-index Overlap */
    .txa-offcanvas-box {
        z-index: 9999 !important; /* Force offcanvas to be above the sticky header */
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important; /* Ensure it covers full height */
        padding: 40px 20px !important; /* Add padding so close button fits beautifully */
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .fx-hero-1-slider-item-title {
        font-size: 26px !important;
    }
    .fx-scn-title-1 {
        font-size: 22px !important;
    }
}