@extends('front.layout.app')
@section('title', 'Road Side Assistance | Vehicle Towing | Roadside Mechanic | Big Bear Recovery')
@section('meta')
    <meta name="title" content="Road Side Assistance | Vehicle Towing | Roadside Mechanic | Big Bear Recovery">
    <meta name="description" content="Big Bear Recovery Offers Fast Roadside Assistance, Reliable Vehicle Towing, And Expert Roadside Mechanic Services. Count On Us For Prompt, Professional Help When You Need It Most.">
@endsection
@section('content')

<div class="preloader">
    <figure>
        <img src="{{ asset('front/assets/images/logo-black.png') }}" alt="img" class="img-fluid">
    </figure>
    <div class="line"></div>
    <div class="counter">
        <span>0</span><span>%</span>
    </div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>

<section class="mainbanner">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <div class="mainbanner__wrap">
                <!-- <video class="mainbanner__video" autoplay loop muted playsinline>
                    <source src="{{ asset('front/assets/videos/shutterstock_1075254077.mp4') }}" type="video/mp4">
                </video> -->
                <figure class="mainbanner__video">
                    <img src="{{ asset('front/assets/images/banner.jpg') }}" class="img-fluid" alt="">
                </figure>
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <div class="slideOne">
                                <small>Big Bear Off Road Recovery Services Yuma AZ</small>

                                <p>
Stuck in the sand or facing a breakdown? Our Yuma off road recovery service and expert 4x4 mechanic Yuma AZ will get you back on the trail fast.
                                </p>
                                <div class="btn-group">
                                    <a href="{{ route('front.services') }}" class="themeBtn themeBtn1">Emergency support 24/7</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="mainbanner__wrap">
                <!-- <video class="mainbanner__video" autoplay loop muted playsinline>
                    <source src="{{ asset('front/assets/videos/shutterstock_3582675201.mp4') }}" type="video/mp4">
                </video> -->
                <figure class="mainbanner__video">
                    <img src="{{ asset('front/assets/images/banner.jpg') }}" class="img-fluid" alt="">
                </figure>
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <div class="slideOne">
                                <small>Desert Recovery Service Yuma, Arizona
</small>

                                <p>From dunes to desert trails, our desert recovery service in Yuma and fast sand rescue towing in Arizona make sure you’re never stranded on your adventure.

                                </p>
                                <div class="btn-group">
                                    <a href="{{ route('front.services') }}" class="themeBtn themeBtn1">Emergency support 24/7</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-slide">
            <div class="mainbanner__wrap">
                <!-- <video class="mainbanner__video" autoplay loop muted playsinline>
                    <source src="{{ asset('front/assets/videos/01.mp4') }}" type="video/mp4">
                </video> -->
                <figure class="mainbanner__video">
                    <img src="{{ asset('front/assets/images/banner.jpg') }}" class="img-fluid" alt="">
                </figure>
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <div class="slideOne">
                                <small>Winch-Out & Off Road Towing Yuma AZ</small>

                                <p>Count on Big Bear Recovery for reliable winch out service Yuma, expert Yuma off road recovery service, and fast off road towing Yuma AZ, so you’re never stuck for long.
                                </p>
                                <div class="btn-group">
                                    <a href="{{ route('front.services') }}" class="themeBtn themeBtn1">Emergency support 24/7
</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="swiper-slide">
            <div class="mainbanner__wrap">
                <video class="mainbanner__video" autoplay loop muted playsinline>
                    <source src="{{ asset('front/assets/videos/shutterstock_3582675201.mp4') }}" type="video/mp4">
                </video>
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-lg-8">
                            <div class="slideOne">
                                <small>Welcome to Big Bear Recovery!</small>

                                <p>
                                    The world’s first off-road recovery subscription service, bringing AAA-style
                                    support to adventurers like you! Proudly based in Yuma, Arizona, Big Bear
                                    Recovery specializes in getting you back on the trail, no matter how rough it
                                    gets. With our local expertise and trail-proven team, we’re here to rescue
                                    off-roaders of all kinds, providing peace of mind and rapid recovery solutions
                                    whenever you need them. From sandy dunes to rocky terrain, you can explore with
                                    confidence, knowing we’re just a call away.
                                </p>
                                <div class="btn-group">
                                    <a href="{{ route('front.services') }}" class="themeBtn themeBtn1">Learn More!</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="recovery-msg">
        <img src="{{ asset('front/assets/images/up-left.png') }}" />
        <h2>Call Us Out ASAP!</h2>
    </div>
</section>

<!-- <section class="main-slider p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">
                @forelse ($sliders as $slider)
                    <div class="swiper-slide">
                        <div class="slide-inner bg-image" data-background="{{ $slider->sliderImage('slider_image') }}">
                            <div class="container">
                                <div class="row align-items-center">
                                    <div class="col-lg-8">
                                        <div class="slideOne">
                                            <small>{{ $slider->title }}</small>

                                            <p>
                                                {{ $slider->description }}
                                            </p>
                                            <div class="btn-group">
                                                <a href="{{ route('front.services') }}"
                                                    class="themeBtn themeBtn1">{{ $slider->btn_text }}</a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="bannerVideo">
                                            <a href="{{ $slider->video_link }}" data-fancybox=""><i
                                                    class="fas fa-play"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                @endforelse
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </section> -->

<section class="pricingSec">
    <div class="container-fluid">
        <div class="pricingHeading text-center" data-aos="fade-up">
            <span class="smallHeading"> {{ $data->content['pri_sec_title'] ?? '' }}</span>
            <h2 class="secHeading">{{ $data->content['pri_sec_heading'] ?? '' }} <br>
            </h2>
        </div>
        <div class="row justify-content-center">
            @include('front.include.package')
        </div>
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="pricingBottom">
                    <!-- <p data-aos="fade-up">{{ $data->content['pri_sec_des'] ?? '' }} </p> -->
                    <div class="btn-group mt-5" data-aos="fade-up">
                        <a href="{{ route('front.about') }}"
                            class="themeBtn themeBtn1">{{ $data->content['pri_sec_btn'] ?? '' }}</a>
                        <a href="{{ route('front.services') }}"
                            class="checkAll">{{ $data->content['pri_sec_btn1'] ?? '' }} <img
                                src="{{ asset('front/assets/images/check1.webp') }}" class="img-fluid" alt=""></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="message">
        <h2>Recoveries Start At <br> $725 Subscribes <br> Pay $0 </h2>
        <img src="{{ asset('front/assets/images/arrows.png') }}" alt="Arrow" />
    </div>
</section>

<section class="recoverySec">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <div class="recoveryHeading">
                    <div data-aos="fade-up">
                        <span class="smallHeading">{{ $data->content['about_sto_sec_title'] ?? '' }}</span>
                    </div>
                    <h2 class="secHeading" data-aos="fade-up">{{ $data->content['about_sto_sec_heading'] ?? '' }}</h2>
                    <div class="recoveryWrap">
                        <figure data-aos="fade-up">
                            <img src="{{ $data->cmsImages('about1') ?? '' }}" class="img-fluid" alt="">
                        </figure>
                        <div class="recoveryContent">
                            <p data-aos="fade-up">
                                <strong>
                                    {{ $data->content['about_sto_sec_description1'] ?? '' }}
                                </strong>
                            </p>
                            <p data-aos="fade-up">
                                {{ $data->content['about_sto_sec_description2'] ?? '' }}
                            </p>

                            <div class="btn-group" data-aos="fade-up">
                                <a href="{{ route('front.services') }}" class="themeBtn themeBtn1">
                                    {{ $data->content['about_sto_sec_btn1'] ?? '' }} </a>
                                <a href="{{ route('front.about') }}"
                                    class="themeBtn themeBtn1 borderBtn">{{ $data->content['about_sto_sec_btn2'] ?? '' }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="recoveryImage">
                    <video class="aboutVideo" autoplay loop muted playsinline>
                        <source src="{{ asset('front/assets/videos/Bear.mp4') }}" type="video/mp4">
                    </video>
                    <!-- <img src="{{ $data->cmsImages('about') ?? '' }}" alt=""> -->
                    <div class="recoveryBox">
                        <img src="{{ $data->cmsImages('about2') ?? '' }}" class="img-fluid" alt="">
                        <h3> {{ $data->content['about_sto_sec_like'] ?? '' }}</h3>
                        <p>{{ $data->content['about_sto_sec_about_like_info'] ?? '' }}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-7">
                <div class="recoveryVideo" data-aos="fade-up">
                    <img src="{{ $data->cmsImages('ceo') ?? '' }}" class="img-fluid" alt="roadside assistance">
                    <a href="{{ $data->content['our_ceo_sec_link'] ?? '' }}" data-fancybox=""><i
                            class="fas fa-play"></i></a>
                </div>
            </div>
            <div class="col-md-5">
                <div class="emergencyContent">
                    <div data-aos="fade-up">
                        <span class="smallHeading">{{ $data->content['our_ceo_sec_title'] ?? '' }}</span>
                    </div>
                    <h2 class="secHeading" data-aos="fade-up">{{ $data->content['our_ceo_sec_heading'] ?? '' }}</h2>
                    <p class="emergencyPara" data-aos="fade-up">
                        {{ $data->content['our_ceo_sec_des1'] ?? '' }}
                    </p>
                    <p class="emergencyPara" data-aos="fade-up">
                        {{ $data->content['our_ceo_sec_des2'] ?? '' }}
                    </p>

                </div>
            </div>
        </div>
    </div>
</section>

<section class="roadsideSec">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="roadsideHeading" data-aos="fade-up">
                    <span class="smallHeading"> {{ $data->content['our_goal_sec_title'] ?? '' }}</span>
                    <h2 class="secHeading"> {{ $data->content['our_goal_sec_heading'] ?? '' }}</h2>
                    <p>
                        {{ $data->content['our_goal_sec_des'] ?? '' }}
                    </p>
                </div>
            </div>
            <div class="col-md-8">
                <div class="swiper roadsideSlider" data-aos="fade-up">
                    <div class="swiper-wrapper">
                        @forelse ($ourGoals as $goal)
                        <div class="swiper-slide">
                            <div class="roadsideWrap">
                                <img src="{{ $goal->ourGoalImage('our_goal_image') }}" class="img-fluid" alt="{{ $goal->img_alt ?? '' }}">
                                <div class="roadsideContent">
                                    <h3>{{ $goal->heading }}</h3>
                                    <p>
                                        {{ $goal->description }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        @empty
                        @endforelse
                    </div>
                </div>
                <div class="swiper-button-next"><i class="fal fa-long-arrow-right"></i></div>
                <div class="swiper-button-prev"><i class="fal fa-long-arrow-left"></i></div>
                <div class="roadBottoms" data-aos="fade-up">
                    <ul>
                        <li><i class="fas fa-star"></i></li>
                        <li><i class="fas fa-star"></i></li>
                        <li><i class="fas fa-star"></i></li>
                        <li><i class="fas fa-star"></i></li>
                        <li><i class="fas fa-star"></i></li>
                    </ul>
                    <p><span>99.9% Customer Satisfaction </span>based on 750+ reviews of 6,154 Completed Projects,
                        and 2,194 Happy Customers trust us.</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- @include('front.include.stories') --}}

<section class="mapSec">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-4">
                <div class="mapWraps" data-aos="fade-up">
                    <figure>
                        <img src="{{ $data->cmsImages('how1') ?? '' }}" class="img-fluid" alt="">
                    </figure>
                    <div class="mapContent">
                        <h3>{{ $data->content['how_sec_st_heading1'] ?? '' }}</h3>
                        <p>
                            {{ $data->content['how_sec_st_des1'] ?? '' }}
                        </p>
                    </div>
                </div>
                <div class="mapWraps" data-aos="fade-up">
                    <figure>
                        <img src="{{ $data->cmsImages('how2') ?? '' }}" class="img-fluid" alt="">
                    </figure>
                    <div class="mapContent">
                        <h3>{{ $data->content['how_sec_st_heading2'] ?? '' }}</h3>
                        <p>
                            {{ $data->content['how_sec_st_des2'] ?? '' }}
                        </p>
                    </div>
                </div>
                <div class="mapWraps" data-aos="fade-up">
                    <figure>
                        <img src="{{ $data->cmsImages('how3') ?? '' }}" class="img-fluid" alt="">
                    </figure>
                    <div class="mapContent">
                        <h3>{{ $data->content['how_sec_st_heading3'] ?? '' }}</h3>
                        <p>
                            {{ $data->content['how_sec_st_des3'] ?? '' }}
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="mapImage" data-aos="fade-up">
                    <!-- <img src="{{ $data->cmsImages('how') ?? '' }}" class="img-fluid" alt=""> -->
                    <div>
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d108728.94624301668!2d-114.68894449645764!3d32.69265116965062!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80d68e9c367caac9%3A0xb63dfc51cb44be46!2sYuma%2C%20AZ%2C%20USA!5e0!3m2!1sen!2s!4v1729116236501!5m2!1sen!2s"
                            width="100%" height="420" style="border:0;" allowfullscreen=""
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                    <div class="mapHeading">
                        <h2 class="secHeading">{{ $data->content['how_sec_heading'] ?? '' }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{--
<section class="downloadSec">
    <div class="container">
        <div class="row justify-content-end">
            <div class="col-md-5">
                <div class="downloadHeading">
                    <h2 class="secHeading" data-aos="fade-up">{{ $data->content['pro_sec_heading'] ?? '' }}</h2>
                    <div class="downloadContent">
                        <p data-aos="fade-up">
                            {{ $data->content['pro_sec_des1'] ?? '' }}
                        </p>
                        <p data-aos="fade-up">
                            {{ $data->content['pro_sec_des2'] ?? '' }}

                        </p>
                        <div class="btn-group" data-aos="fade-up">
                        </div>

                    </div>
                </div>
            </div>
            <div class="downloadImages">
                <img src="{{ $data->cmsImages('pro1') ?? '' }}" class="img-fluid downloadOne" alt="">
                <img src="{{ $data->cmsImages('pro2') ?? '' }}" class="img-fluid downloadTwo" alt="">
            </div>
        </div>
    </div>
</section> --}}

@include('front.include.helpsec')

<section class="youtube-section padd-y">
    <div class="container">
        <div class="articleHeading text-center" data-aos="fade-up">
            <span class="smallHeading">{{ $data->content['com_sec_title'] ?? '' }}</span>
            <a href="{{ $data->content['com_sec_link'] ?? '' }}" target="_blank" class="youtube-icon"><img
                    src="{{ $data->cmsImages('com') ?? '' }}" alt="image" class="img-fluid"></a>
        </div>
        <div class="row">
            <div class="col-12">
                <h3 class="youtube-coming-heading text-center" data-aos="fade-up">
                    {{ $data->content['com_sec_heading'] ?? '' }}</h3>
            </div>
        </div>
    </div>
</section>



@endsection