@extends('landing.layout.main_index')
@section('title', 'Muftaax – Fast & Reliable Rides & Food Delivery Near You')
@section('custom-style')
    <style>
        /* Large Screen Layout Fixes */
        @media (min-width: 992px) {
            .free_app_section {
                padding: 80px 0 !important;
            }
            
            .free_text {
                padding-right: 60px !important;
            }
            
            .section_title h2 {
                font-size: 42px !important;
                line-height: 1.2 !important;
                margin-bottom: 25px !important;
            }
            
            .section_title p {
                font-size: 18px !important;
                line-height: 1.7 !important;
                margin-bottom: 35px !important;
                padding-right: 20px !important;
            }
            
            .app_btn {
                display: flex !important;
                gap: 20px !important;
                justify-content: flex-start !important;
                align-items: center !important;
            }
            
            .app_btn li {
                flex-shrink: 0 !important;
            }
            
            .app_btn li img {
                height: 60px !important;
                width: auto !important;
            }
            
            .free_img {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                padding-left: 40px !important;
            }
            
            .free_img .mobile_mockup {
                max-width: 400px !important;
                height: auto !important;
            }
        }
        
        /* Extra Large Screens */
        @media (min-width: 1200px) {
            .free_text {
                padding-right: 80px !important;
            }
            
            .section_title h2 {
                font-size: 48px !important;
            }
            
            .section_title p {
                font-size: 20px !important;
                padding-right: 40px !important;
            }
            
            .free_img {
                padding-left: 60px !important;
            }
            
            .free_img .mobile_mockup {
                max-width: 450px !important;
            }
        }

        /* Mobile Responsiveness Fixes */
        @media (max-width: 768px) {
            .free_app_section {
                padding: 40px 0 !important;
            }
            
            .free_app_inner {
                padding: 0 15px;
            }
            
            .free_text {
                text-align: center;
                margin-bottom: 30px;
            }
            
            .section_title h2 {
                font-size: 24px !important;
                line-height: 1.3 !important;
                margin-bottom: 15px;
            }
            
            .section_title p {
                font-size: 14px !important;
                line-height: 1.6 !important;
                margin-bottom: 25px;
                padding: 0 10px;
            }
            
            .app_btn {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                gap: 15px !important;
                margin: 0 !important;
                padding: 0 !important;
                list-style: none !important;
            }
            
            .app_btn li {
                width: 100% !important;
                max-width: 200px !important;
                margin: 0 !important;
            }
            
            .app_btn li a {
                display: block !important;
                width: 100% !important;
            }
            
            .app_btn li img {
                width: 100% !important;
                height: auto !important;
                max-height: 60px !important;
                object-fit: contain !important;
            }
            
            .free_img {
                text-align: center !important;
                margin-top: 20px;
                position: relative !important;
                height: auto !important;
            }
            
            .free_img img {
                max-width: 100% !important;
                height: auto !important;
                margin: 0 auto 15px !important;
                display: block !important;
            }
            
            .free_img .mobile_mockup {
                position: relative !important;
                top: 0 !important;
                left: 0 !important;
                transform: none !important;
                margin-top: -20px !important;
            }
        }
        
        @media (max-width: 576px) {
            .free_app_section {
                padding: 30px 0 !important;
            }
            
            .section_title h2 {
                font-size: 22px !important;
            }
            
            .section_title p {
                font-size: 13px !important;
                padding: 0 5px;
            }
            
            .app_btn {
                gap: 12px !important;
            }
            
            .app_btn li {
                max-width: 180px !important;
            }
            
            .app_btn li img {
                max-height: 55px !important;
            }
            
            .free_img img {
                max-width: 90% !important;
            }
        }
        
        @media (max-width: 480px) {
            .container {
                padding: 0 15px !important;
            }
            
            .section_title h2 {
                font-size: 20px !important;
                padding: 0 10px;
            }
            
            .section_title p {
                font-size: 12px !important;
            }
            
            .app_btn li {
                max-width: 160px !important;
            }
            
            .app_btn li img {
                max-height: 50px !important;
            }
        }
        
        /* Tablet Adjustments */
        @media (min-width: 769px) and (max-width: 991px) {
            .section_title h2 {
                font-size: 28px !important;
            }
            
            .section_title p {
                font-size: 15px !important;
            }
            
            .free_img img {
                max-width: 85% !important;
            }
        }
        
        /* Better button hover effects for all devices */
        .app_btn li a {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: inline-block;
        }
        
        .app_btn li a:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* Ensure images maintain aspect ratio */
        .free_img img {
            object-fit: contain;
        }
        
        /* Additional spacing improvements */
        @media (max-width: 768px) {
            .row {
                margin: 0 !important;
            }
            
            .col-md-6 {
                padding: 0 15px !important;
            }
        }
    </style>
@endsection
@section('content')
    <div class="mt-5">
        <!-- Download-Free-App-section-Start  -->
        <section class="row_am free_app_section mt-5" id="getstarted">
            <!-- container start -->
            <div class="container">
                <div class="free_app_inner" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100">
                    <!-- row start -->
                    <div class="row">
                        <!-- content -->
                        <div class="col-md-6">
                            <div class="free_text">
                                <div class="section_title">
                                    <h2>Let's download free from apple and play store</h2>
                                    <p>Instant free download from apple and play store orem Ipsum is simply dummy text of
                                        the
                                        printing.
                                        and typese tting indus orem Ipsum has beenthe standard</p>
                                </div>
                                <ul class="app_btn">
                                    <li>
                                        <a href="https://apps.apple.com/pk/app/muftaax/id6738700273">
                                            <img src="{{ asset('home-assets/images/appstore_blue.png') }}" alt="Download on App Store">
                                        </a>
                                    </li>
                                    <li>
                                        <a
                                            href="https://play.google.com/store/apps/details?id=com.muftaax.fooddelivery.ridebooking.user&pli=1">
                                            <img src="{{ asset('home-assets/images/googleplay_blue.png') }}" alt="Get it on Google Play">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- images -->
                        <div class="col-md-6">
                            <div class="free_img">
                                <img class="mobile_mockup" src="{{ asset('home-assets/new-images/screen02.png') }}"
                                    alt="Muftaax Mobile App">
                            </div>
                        </div>
                    </div>
                    <!-- row end -->
                </div>
            </div>
            <!-- container end -->
        </section>
    </div>
@endsection
@section('custom-script')
    <script></script>
@endsection