@extends('frontend.layouts.app')
@section('content')

    <!-- START SLIDER -->
    <section class="slider">
        <div class="slick_slider row"
            data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "arrows":true, "dots":false, "autoplay":true, "infinite":true, "responsive": [{"breakpoint":1200,"settings":{"slidesToShow": 1}}, {"breakpoint":1024,"settings":{"slidesToShow": 1}}, {"breakpoint":777,"settings":{"slidesToShow": 1}}, {"breakpoint":575,"settings":{"slidesToShow": 1}}, {"breakpoint":420,"settings":{"slidesToShow": 1}}]}'>

            @if (count($sliders) > 0)
                @foreach ($sliders as $slider)
                    <img src="{{ asset('../backend/images/slider/' . $slider->image) }}"
                        onerror="this.src='{{ asset('frontend/images/slides/sliderbg-003.jpg') }}'; this.onerror='';">
                @endforeach

        </div>
    @else
        <img src="{{ asset('frontend/images/slides/sliderbg-003.jpg') }}" class="w-100" alt="image">
        @endif
    </section>

    <!--about-section-->
    <section class="prt-row home01-welcome-section clearfix">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-6 col-lg-12" data-aos="fade-right">
                    <div class="position-relative text-center text-sm-start">
                        <div class="prt_single_image-wrapper">
                            <img class="w-100 h-100" src="{{ asset('frontend/images/animate.png') }}">
                            <img class="img-fluid banner-image" src="{{ asset('frontend/images/single-img-1.png') }}"
                                onerror="this.src='{{ asset('frontend/images/single-img-1.png') }}'; this.onerror='';">
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-12" data-aos="fade-left">
                    <!--section-title -->
                    <div class="section-title">
                        <div class="title-header">
                            <div class="sub-head">
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                                <h3>Heartiest Welcome</h3>
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                            </div>
                            <h2 class="title">Welcome To <br><span style="font-style:inherit">{{ env('APP_NAME') }}</span></h2>
                            <h5>Make Your Business More Powerful With us ...</h5>
                        </div>
                        <div class="title-desc">
                            <p>To be world class leader in Business that enrich lives and contribute to nation in building
                                Int. through sustainble value creation.</p>
                            <p>At {{ env('APP_NAME') }}, we are driven by a vision to become a world-class leader in
                                business. Our mission is to not only enrich the lives of our stakeholders but also
                                contribute to the broader goal of nation-building. Through sustainable value creation, we
                                aim to empower individuals, communities, and industries, fostering growth and innovation
                                that leads to long-term prosperity.</p>
                        </div>
                    </div>
                    <!--section-title-end -->
                    <div class="row pt-10 res-991-pt-0">
                        <div class="col-lg-8 col-md-8 col-sm-12 align-self-center">
                            <a class="prt-btn prt-btn-size-sm prt-btn-shape-rounded prt-btn-style-fill prt-btn-color-dark"
                                href="{{ route('about') }}"> Know More </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--about-section end-->

    <!-- Media-Section -->
    {{-- <section class="prt-row bg-base-grey clearfix">
        <div class="container" data-aos="fade-up">
            <div class="slick_slider row"
                data-slick='{"slidesToShow": 2, "slidesToScroll": 2, "arrows":false, "dots":false, "autoplay":true, "infinite":true, "responsive": [{"breakpoint":1200,"settings":{"slidesToShow": 5}}, {"breakpoint":1024,"settings":{"slidesToShow": 4}}, {"breakpoint":777,"settings":{"slidesToShow": 3}}, {"breakpoint":575,"settings":{"slidesToShow": 2}}, {"breakpoint":420,"settings":{"slidesToShow": 1}}]}'>
                <img src="{{ asset('frontend/images/slides/sliderbg-001.jpg') }}"
                    onerror="this.src='{{ asset('frontend/images/slides/sliderbg-001.jpg') }}'; this.onerror='';">
                <img src="{{ asset('frontend/images/slides/sliderbg-002.jpg') }}"
                    onerror="this.src='{{ asset('frontend/images/slides/sliderbg-002.jpg') }}'; this.onerror='';">
                <img src="{{ asset('frontend/images/slides/sliderbg-003.jpg') }}"
                    onerror="this.src='{{ asset('frontend/images/slides/sliderbg-003.jpg') }}'; this.onerror='';">
                <img src="{{ asset('frontend/images/slides/sliderbg-004.jpg') }}"
                    onerror="this.src='{{ asset('frontend/images/slides/sliderbg-004.jpg') }}'; this.onerror='';">
                <img src="{{ asset('frontend/images/slides/sliderbg-005.jpg') }}"
                    onerror="this.src='{{ asset('frontend/images/slides/sliderbg-005.jpg') }}'; this.onerror='';">
                <img src="{{ asset('frontend/images/slides/sliderbg-006.jpg') }}"
                    onerror="this.src='{{ asset('frontend/images/slides/sliderbg-006.jpg') }}'; this.onerror='';">
            </div>
        </div>
    </section> --}}
    <!--Media-Section-end -->

    <!--services-section-->
    <section class="prt-row home01-services-section bg-base-grey prt-bg prt-bgimage-yes clearfix">
        <div class="container" data-aos="fade-up">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-10 m-auto mb-3">
                    <!--section-title-->
                    <div class="section-title title-style-center_text">
                        <div class="title-header">
                            <div class="sub-head-1">
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                                <h3>OUR Services</h3>
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                            </div>
                            <h2 class="title">We Provide Popular <span>Services </span></h2>
                        </div>
                    </div>
                    <!--section-title end-->
                </div>
            </div>
            <div class="row gutters-10 row-cols-xl-5 row-cols-md-5 row-cols-2">
                @foreach ($services as $service)
                    <div class="col">
                        <div class="featured-imagebox featured-imagebox-services style2">
                            <div class="prt-box-view-overlay prt-portfolio-box-view-overlay">
                                <div class="featured-thumbnail">
                                    <img class="img-fluid" src="{{ asset('backend/images/services/' . $service->image) }}"
                                        alt="">
                                </div>
                                <div class="featured-content">
                                    <div class="featured-title">
                                        <h3><a
                                                href="{{ route('service-detail', $service->slug) }}">{{ $service->title }}</a>
                                        </h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--services-section end-->

    <!-- why-choose-section -->
    <section class="prt-row clearfix">
        <div class="container aos-init aos-animate" data-aos="fade-up">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-10 m-auto">
                    <!--section-title-->
                    <div class="section-title title-style-center_text">
                        <div class="title-header">
                            <div class="sub-head-1">
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                                <h3>Why Us</h3>
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                            </div>
                            <h2 class="title">Why <span>{{ env('APP_NAME') }}</span></h2>
                        </div>
                    </div>
                    <!--section-title end-->
                </div>
            </div>
            <div class="row">
                <p class="text-center why-text-style">350+ Verified Legal Experts Ready to Streamline Your
                    Business
                    Operations.</p>
                <div class="row align-items-center">
                    <div class="col-md-6 pt-4">
                        <img src="{{ asset('frontend/images/service.gif') }}" class="img-size" alt="video">
                    </div>
                    <div class="col-md-6">
                        <div class="col-lg-12 prt-box-col-wrapper">
                            <div class="featured-icon-box style11">
                                <div class="featured-icon">
                                    <div class="prt-icon prt-icon_element-onlytxt prt-icon_element-color-skincolor">
                                        <i class="flaticon-visa-1"></i>
                                    </div>
                                </div>
                                <div class="featured-content">
                                    <div class="featured-title">
                                        <h3 class="why-title">E-Commerce</h3>
                                        <p>Ecommerce (short for electronic commerce) refers to the buying and selling of
                                            goods and services over the internet. It’s a broad sector that has seen
                                            explosive growth due to the rise of online shopping and digital technologies.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12 prt-box-col-wrapper">
                            <div class="featured-icon-box style11">
                                <div class="featured-icon">
                                    <div class="prt-icon prt-icon_element-onlytxt prt-icon_element-color-skincolor">
                                        <i class="flaticon-process"></i>
                                    </div>
                                </div>
                                <div class="featured-content">
                                    <div class="featured-title">
                                        <h3>Media & Entertainment</h3>
                                        <p>The Media & Entertainment industry refers to businesses and organizations
                                            involved in the creation, production, distribution, and consumption of content
                                            for entertainment, information, and cultural purposes.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12 prt-box-col-wrapper">
                            <div class="featured-icon-box style11">
                                <div class="featured-icon">
                                    <div class="prt-icon prt-icon_element-onlytxt prt-icon_element-color-skincolor">
                                        <i class="flaticon-customer-service"></i>
                                    </div>
                                </div>
                                <div class="featured-content">
                                    <div class="featured-title">
                                        <h3>Financial Services</h3>
                                        <p>Content services here could involve developing informative materials about health
                                            insurance policies, financial planning, and related products.</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-12 prt-box-col-wrapper">
                            <div class="featured-icon-box style11">
                                <div class="featured-icon">
                                    <div class="prt-icon prt-icon_element-onlytxt prt-icon_element-color-skincolor">
                                        <i class="flaticon-instructor"></i>
                                    </div>
                                </div>
                                <div class="featured-content">
                                    <div class="featured-title">
                                        <h3>Legal Associates</h3>
                                        <p>We could be providing legal content services related to healthcare law, patient
                                            rights, or the legal aspects of healthcare services, which might include content
                                            on compliance, insurance law, and medical malpractice.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- why-choose-section-end -->


    <!-- numbers-section -->
    <section class="prt-row clearfix bg-base-grey py-5">
        <div class="container" data-aos="fade-up">
            <div class="row mb-4">
                <div class="col-lg-12 col-md-12 col-sm-10 m-auto mb-3">
                    <!--section-title-->
                    <div class="section-title title-style-center_text">
                        <div class="title-header">
                            <div class="sub-head-1">
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                                <h3>Achieve Greater Heights with Us!</h3>
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                            </div>
                            <h2 class="title">Our Hubshot by the <span>Numbers </span></h2>
                        </div>
                    </div>
                    <!--section-title end-->
                </div>
            </div>
            <div class="row justify-content-center">
                <div class="col-lg-3 col-md-4 col-sm-6 text-center mb-4">
                    <!-- prt-fid -->
                    <div
                        class="prt-fid inside prt-fid-with-icon prt-fid-view-lefticon style4 br-right shadow-lg p-3 rounded bg-white">
                        <div class="prt-fid-icon-wrapper mb-3">
                            <i class="flaticon-travel-agency"></i>
                        </div>
                        <div class="prt-fid-contents">
                            <h4 class="prt-fid-inner">
                                <span data-appear-animation="animateDigits" data-from="0" data-to="10"
                                    data-interval="1" data-before="" data-before-style="sup" data-after="+"
                                    data-after-style="sub" class="numinate text-dark">10</span>
                                <span class="fid-prefix text-muted"><sup>+</sup></span>
                            </h4>
                        </div>
                        <h3 class="prt-fid-title font-weight-bold">Global Offices</h3>
                        <a href="#">Learn More →</a>
                    </div><!-- prt-fid end -->
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 text-center mb-4">
                    <!-- prt-fid -->
                    <div
                        class="prt-fid inside prt-fid-with-icon prt-fid-view-lefticon style4 shadow-lg p-3 rounded bg-white">
                        <div class="prt-fid-icon-wrapper mb-3">
                            <i class="flaticon-teamwork text-warning"></i>
                        </div>
                        <div class="prt-fid-contents">
                            <h4 class="prt-fid-inner">
                                <span data-appear-animation="animateDigits" data-from="0" data-to="100"
                                    data-interval="1" data-before="" data-before-style="sup" data-after="+"
                                    data-after-style="sub" class="numinate text-dark">100</span>
                                <span class="fid-prefix text-muted"><sup>+</sup></span>
                            </h4>
                        </div>
                        <h3 class="prt-fid-title font-weight-bold">Employees</h3>
                        <a href="#">Learn More →</a>
                    </div><!-- prt-fid end -->
                </div>
                <div class="col-lg-3 col-md-4 col-sm-6 text-center mb-4">
                    <!-- prt-fid -->
                    <div
                        class="prt-fid inside prt-fid-with-icon prt-fid-view-lefticon style4 br-right shadow-lg p-3 rounded bg-white">
                        <div class="prt-fid-icon-wrapper mb-3">
                            <i class="flaticon-instructor text-danger"></i>
                        </div>
                        <div class="prt-fid-contents">
                            <h4 class="prt-fid-inner">
                                <span data-appear-animation="animateDigits" data-from="0" data-to="1000"
                                    data-interval="1" data-before="" data-before-style="sup" data-after="+"
                                    data-after-style="sub" class="numinate text-dark">1000</span>
                                <span class="fid-prefix text-muted"><sup>+</sup></span>
                            </h4>
                        </div>
                        <h3 class="prt-fid-title text-dark font-weight-bold">Customers</h3>
                        <a href="#">Learn More →</a>
                    </div><!-- prt-fid end -->
                </div>
            </div>
        </div>
    </section>
    <!-- numbers-end -->

    <!-- Our Journey -->
    <section class="prt-row clearfix">
        <div class="container aos-init aos-animate" data-aos="fade-up">
            <div class="row mb-4">
                <div class="col-lg-12">
                    <!--section-title-->
                    <div class="section-title title-style-center_text">
                        <div class="title-header">
                            <div class="sub-head-1">
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                                <h3>Our Journey</h3>
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                            </div>
                            <h2 class="title">Journey of <span>Progress & Innovation </span></h2>
                        </div>
                    </div>
                </div>
            </div>
            <!--section-title end-->
            <div class="row gutters-10 row-cols-xl-5 row-cols-md-5 row-cols-1 journey-section">
                <div class="col">
                    <div class="event-content">
                        <h3>2025</h3>
                        <p>As we step into 2025, our focus is on sustainable innovation and global leadership. With a strong
                            foundation, we are poised to lead the charge into the future, committed to excellence,
                            technology, and growth.</p>
                    </div>
                </div>
                <div class="col">
                    <div class="event-content">
                        <h3>2024</h3>
                        <p>2024 marked a year of transformation, with enhanced operational efficiency and new strategic
                            acquisitions. Our teams worked together to deliver top-tier services that exceeded industry
                            expectations.</p>
                    </div>
                </div>
                <div class="col">
                    <div class="event-content">
                        <h3>2023</h3>
                        <p>By 2023, TPL Groups reached new heights. With significant investments in R&D, we introduced
                            groundbreaking solutions that reshaped our industry. Our global footprint expanded, bringing us
                            closer to clients worldwide.</p>
                    </div>
                </div>
                <div class="col">
                    <div class="event-content">
                        <h3>2022</h3>
                        <p>In 2022, we continued to innovate, laying the groundwork for sustainable development. We
                            strengthened partnerships and began exploring international markets, further solidifying our
                            presence.</p>
                    </div>
                </div>
                <div class="col">
                    <div class="event-content">
                        <h3>2021</h3>
                        <p>Our journey began with a focus on strategic expansion and building strong foundations. In 2021,
                            we launched new projects, setting the stage for future growth and embracing technological
                            advancements.</p>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!-- Our Journey End -->

    <!-- testimonial-section -->
    <section class="prt-row clearfix bg-base-grey">
        <div class="container aos-init aos-animate" data-aos="fade-up">
            <div class="row mb-4">
                <div class="col-lg-12">
                    <!-- section title -->
                    <div class="section-title title-style-center_text style5">
                        <div class="title-header">
                            <div class="sub-head-1">
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                                <h3>TESTIMONIALS</h3>
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                            </div>
                            <h2 class="title">What People Say <span>About Us </span></h2>
                        </div>
                    </div><!-- section title end -->
                </div>
            </div>
            <div class="row slick_slider"
                data-slick='{"slidesToShow": 2, "slidesToScroll": 1, "arrows":false, "dots":false, "autoplay":true, "infinite":true, "responsive": [{"breakpoint":1200,"settings":{"slidesToShow": 2}} , {"breakpoint":992,"settings":{"slidesToShow": 2}}, {"breakpoint":768,"settings":{"slidesToShow": 1}}]}'>
                @foreach ($testimonials as $testimonial)
                    <div class="col-lg-6 prt-box-col-wrapper">
                        <div class="testimonials style2 mb-3">
                            <div class="testimonial-wrapper">
                                <div class="testimonial-info">
                                    <div class="testimonial-avatar">
                                        <div class="testimonial-img">
                                            <img class="img-fluid"
                                                src="{{ asset('../backend/images/testimonial/' . $testimonial->image) }}"
                                                onerror="this.src='{{ asset('frontend/images/testimonial.png') }}'; this.onerror='';"
                                                width="72" height="72">
                                        </div>
                                    </div>
                                    <div class="testimonial-caption">
                                        <h3>{{ $testimonial->title }}</h3>
                                    </div>
                                </div>
                                <div class="testimonial-content">
                                    <blockquote class="testimonial-text">{!! $testimonial->description !!}</blockquote>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- testimonial-section-end -->

    <!-- blog-section -->
    <section class="prt-row clearfix enhanced-blog-section">
        <div class="container" data-aos="fade-up">
            <div class="row mb-4">
                <div class="col-lg-8 col-md-10 col-sm-12 m-auto text-center">
                    <!-- section-title -->
                    <div class="section-title title-style-center_text">
                        <div class="title-header">
                            <div class="sub-head-1">
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                                <h3 class="title-heading">Our Latest Blogs</h3>
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                            </div>
                            <h2 class="main-title">Our <span class="highlight-text">Blogs</span></h2>
                        </div>
                    </div>
                    <!-- section-title end -->
                </div>
            </div>
            <div class="row">
                @foreach ($blogs as $blog)
                    <div class="col-md-4 mb-4">
                        <div class="blog-card">
                            <div class="blog-thumbnail">
                                <img src="{{ asset('../backend/images/blog/' . $blog->image) }}" class="w-100 rounded-lg"
                                    alt="{{ $blog->title }}">
                            </div>
                            <div class="blog-content">
                                <a href="{{ route('blogs', $blog->slug) }}">
                                    <h5 class="blog-title">{{ $blog->title }}</h5>
                                </a>
                                <p class="blog-description">{{ $blog->short_description }}</p>
                                <div class="blog-footer">
                                    <a class="btn-read-more" href="{{ route('blogs', $blog->slug) }}">Read More →</a>
                                    <span class="post-date"><i class="fa fa-calendar"></i>
                                        {{ date('d F Y', strtotime($blog->created_at)) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="mt-20 text-center">
                <a class="prt-btn prt-btn-size-sm prt-btn-shape-rounded prt-btn-style-fill prt-btn-color-dark"
                    href="{{ route('blog') }}"> View All Blogs </a>
            </div>
        </div>
    </section>

    <!-- newsroom-section -->
    <section class="prt-row bg-base-grey clearfix enhanced-blog-section">
        <div class="container" data-aos="fade-up">
            <div class="row mb-4">
                <div class="col-lg-8 col-md-10 col-sm-12 m-auto text-center">
                    <!-- section-title -->
                    <div class="section-title title-style-center_text">
                        <div class="title-header">
                            <div class="sub-head-1">
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                                <h3 class="title-heading">Our Latest News Room</h3>
                                <div class="dotted">
                                    <span class="dot-1"></span>
                                    <span class="dot-2"></span>
                                    <span class="dot-3"></span>
                                </div>
                            </div>
                            <h2 class="main-title">Our <span class="highlight-text">News Room</span></h2>
                        </div>
                    </div>
                    <!-- section-title end -->
                </div>
            </div>
            <div class="row">
                @foreach ($newsrooms as $newsroom)
                    <div class="col-md-4 mb-4">
                        <div class="blog-card">
                            <div class="blog-thumbnail">
                                <img src="{{ asset('../backend/images/newsroom/' . $newsroom->image) }}"
                                    class="w-100 rounded-lg" alt="{{ $newsroom->title }}">
                            </div>
                            <div class="blog-content">
                                <a href="{{ route('newsrooms', $newsroom->slug) }}">
                                    <h5 class="blog-title">{{ $newsroom->title }}</h5>
                                </a>
                                <p class="blog-description">{{ $newsroom->short_description }}</p>
                                <div class="blog-footer">
                                    <a class="btn-read-more" href="{{ route('newsrooms', $newsroom->slug) }}">Read More
                                        →</a>
                                    <span class="post-date"><i class="fa fa-calendar"></i>
                                        {{ date('d F Y', strtotime($newsroom->created_at)) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="mt-20 text-center">
                <a class="prt-btn prt-btn-size-sm prt-btn-shape-rounded prt-btn-style-fill prt-btn-color-dark"
                    href="{{ route('newsroom') }}"> View All News Rooms </a>
            </div>
        </div>
    </section>

    <!-- newsroom-section-end -->

    <script src="{{ asset('frontend/js/jquery-3.6.0.min.js') }}"></script>

    <script type="text/javascript">
        $(window).ready(function() {
            setTimeout(function() {
                $('#myModal1').modal('show');
            }, 5000);
        });

        // $(document).ready(function() {
        //         if (sessionStorage.getItem('#myModal1') !== 'true') {
        //           $('#myModal').modal('show');
        //           sessionStorage.setItem('#myModal1','true');
        //         }
        //     });
    </script>


    <!--Start Auto Open Modal -->
    {{-- <div class="modal" id="myModal1" data-bs-keyboard="false" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title text-center">Enquiry Now</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"><i class="fa fa-times"
                            aria-hidden="true"></i></button>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <form action="{{ route('contactform') }}" class="contact_form clearfix" method="post">
                            @csrf
                            @if ($message = Session::get('success'))
                                <div class="alert alert-success">
                                    <p>{{ $message }}</p>
                                </div>
                            @endif
                            <div class="row">
                                <div class="col-md-6">
                                    <input type="text" name="name" class="form-control"
                                        value="{{ old('name') }}" placeholder="Your Name *" required="">
                                    @if ($errors->has('name'))
                                        <div class="text-danger">{{ $errors->first('name') }}</div>
                                    @endif
                                </div>

                                <div class="col-md-6">
                                    <input type="email" name="email" class="form-control"
                                        value="{{ old('email') }}" placeholder="Your Email *" required="">
                                    @if ($errors->has('email'))
                                        <div class="text-danger">{{ $errors->first('email') }}</div>
                                    @endif
                                </div>

                                <div class="col-md-6">
                                    <input type="number" name="number" class="form-control"
                                        value="{{ old('number') }}" maxlength="10" pattern="[0-9]{10}"
                                        placeholder="Your Number *" required="">
                                    @if ($errors->has('number'))
                                        <div class="text-danger">{{ $errors->first('number') }}</div>
                                    @endif
                                </div>

                                <div class="col-md-6">
                                    <input type="text" name="services" class="form-control"
                                        value="{{ old('services') }}" placeholder="Service You Need *" required="">
                                    @if ($errors->has('services'))
                                        <div class="text-danger">{{ $errors->first('services') }}</div>
                                    @endif
                                </div>

                                <div class="col-md-6">
                                    <input type="text" name="city" class="form-control"
                                        value="{{ old('city') }}" placeholder="Your City *" required="">
                                    @if ($errors->has('city'))
                                        <div class="text-danger">{{ $errors->first('city') }}</div>
                                    @endif
                                </div>

                                <div class="col-md-6">
                                    <input type="text" name="state" class="form-control"
                                        value="{{ old('state') }}" placeholder="Your State *" required="">
                                    @if ($errors->has('state'))
                                        <div class="text-danger">{{ $errors->first('state') }}</div>
                                    @endif
                                </div>

                                <div class="col-md-12">
                                    <textarea name="message" class="form-control textarea" placeholder="Type Your Message Here . . .">{{ old('message') }}</textarea>
                                </div>
                                <div class="mt-5 text-center">
                                    <button
                                        class="submit prt-btn prt-btn-size-md prt-btn-shape-round prt-btn-style-fill prt-btn-color-skincolor"
                                        type="submit" value="submit">Submit Here <i
                                            class="fa fa-angle-right"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
    <!-- End Auto Open Modal -->

@endsection