@extends('frontend.layouts.app')
@section('content')
 <!-- ====================================== Section Hero Slider ===================================== -->
    <section class="hero-slider-section">
        <div class="swiper hero-slider">
            <div class="swiper-wrapper">
                <div class="swiper-slide main-swiper-slide" id="hero-slider-img1">
                    <div class="slide-content">
                        <div class="container">
                            <div class="row main-swiper-row">
                                <div class="col-xxl-6 col-xl-6 col-lg-10 clearfix-space animate-slide">
                                    <p class="needs-text">needs professional cleaning</p>
                                    <h1 class="lets-us-do">Let Us Do Your Dirty Work</h1>
                                    <h2 class="residents">Hire us! We are a professional cleaning company offering all
                                        type of cleaning and maintenance services.</h2>
                                    <a href="services.html" class="btn-quote our-services-btn">Our Services
                                        <img src="/frontend/assets/images/svg/cross-arrow.svg" alt="cross-arrow">
                                    </a>
                                </div>
                                <div class="col-xxl-6 col-xl-6 col-lg-10 position-relative">
                                    <img class="home-img-clening " src="/frontend/assets/images/home/home-img1.png"
                                        alt="home-img1">
                                    <div class="cutomer-img-main-text">
                                        <div class="cutomer-img-main">
                                            <img class="cutome1" src="/frontend/assets/images/home/customer1.jpg" alt="customer1">
                                            <img class="cutome2" src="/frontend/assets/images/home/customer2.jpg" alt="customer2">
                                            <img class="cutome3" src="/frontend/assets/images/home/customer3.jpg" alt="customer3">
                                        </div>
                                        <div class="cutomers-text-main">
                                            <h2>Customers Satisfied</h2>
                                            <p>3.8 (2.3k Reviews)</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide main-swiper-slide" id="hero-slider-img2">
                    <div class="slide-content">
                        <div class="container">
                            <div class="row main-swiper-row">
                                <div class="col-xxl-6 col-xl-6 col-lg-10 clearfix-space animate-slide">
                                    <p class="needs-text">needs professional cleaning</p>
                                    <h1 class="lets-us-do">Amazing quality cleaning service</h1>
                                    <h2 class="residents">Hire us! We are a professional cleaning company offering all
                                        type of cleaning and maintenance services.</h2>
                                    <a href="services.html" class="btn-quote our-services-btn">Our Services
                                        <img src="/frontend/assets/images/svg/cross-arrow.svg" alt="cross-arrow">
                                    </a>
                                </div>
                                <div class="col-xxl-6 col-xl-6 col-lg-10 position-relative">
                                    <img class="home-img-clening " src="/frontend/assets/images/home/home-img1.png"
                                        alt="home-img1">
                                    <div class="cutomer-img-main-text">
                                        <div class="cutomer-img-main">
                                            <img class="cutome1" src="/frontend/assets/images/home/customer1.jpg" alt="customer1">
                                            <img class="cutome2" src="/frontend/assets/images/home/customer2.jpg" alt="customer2">
                                            <img class="cutome3" src="/frontend/assets/images/home/customer3.jpg" alt="customer3">
                                        </div>
                                        <div class="cutomers-text-main">
                                            <h2>Customers Satisfied</h2>
                                            <p>3.8 (2.3k Reviews)</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-slide main-swiper-slide video-slide">
                    <video autoplay muted loop playsinline>
                        <source src="/frontend/assets/video/video1.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                    <div class="slide-content">
                        <div class="container">
                            <div class="row main-swiper-row">
                                <div class="col-xxl-6 col-xl-6 col-lg-10 clearfix-space animate-slide">
                                    <p class="needs-text">needs professional cleaning</p>
                                    <h1 class="lets-us-do">Crystal Cove Cleaning Service</h1>
                                    <h2 class="residents">Hire us! We are a professional cleaning company offering all
                                        type of cleaning and maintenance services.</h2>
                                    <a href="services.html" class="btn-quote our-services-btn">Our Services
                                        <img src="/frontend/assets/images/svg/cross-arrow.svg" alt="cross-arrow">
                                    </a>
                                </div>
                                <div class="col-xxl-6 col-xl-6 col-lg-10 position-relative">
                                    <img class="home-img-clening " src="/frontend/assets/images/home/home-img1.png"
                                        alt="home-img1">
                                    <div class="cutomer-img-main-text">
                                        <div class="cutomer-img-main">
                                            <img class="cutome1" src="/frontend/assets/images/home/customer1.jpg" alt="customer1">
                                            <img class="cutome2" src="/frontend/assets/images/home/customer2.jpg" alt="customer2">
                                            <img class="cutome3" src="/frontend/assets/images/home/customer3.jpg" alt="customer3">
                                        </div>
                                        <div class="cutomers-text-main">
                                            <h2>Customers Satisfied</h2>
                                            <p>3.8 (2.3k Reviews)</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====================================== Section Two ===================================== -->
    <section class="section-two">
        <div class="container">
            <div class="row">
                <div class="col-xxl-6 col-xl-6 col-lg-6">
                    <p class="cap-text fade_in">about </p>
                    <h2 class="sec-text fade_up">Sunil Engineering and Systems</h2>
                    <p class="sec-sub-text fade_up">At Sunil Engineering and Systems, we offer full engineering solutions in HVAC, MEP, and Firefighting systems. We have a reputation for quality, innovation, and timely project delivery. We help clients create safe, sustainable, and comfortable spaces. Our team has years of technical experience and a customer-first approach on every project.  </p>
                    <div class="about-grid-box-main">
                        <div class="about-box-main zoom_in">
                            <div class="about-svg-main">
                                <img src="/frontend/assets/images/svg/certification_11112875.png" alt="about-svg1" width="40px">
                            </div>
                            <div>
                                <h3 class="expeStaff">Proven Experience</h3>
                                <p class="fessional">years of delivering successful projects across industries.</p>
                            </div>
                        </div>
                        <div class="about-box-main zoom_in">
                            <div class="about-svg-main">
                                <img src="/frontend/assets/images/svg/about-svg2.svg" alt="about-svg2">
                            </div>
                            <div>
                                <h3 class="expeStaff"> End-to-End Services  </h3>
                                <p class="fessional">From design and installation to commissioning and maintenance.</p>
                            </div>
                        </div>
                        <div class="about-box-main zoom_in">
                            <div class="about-svg-main">
                                <img src="/frontend/assets/images/svg/about-svg3.svg" alt="about-svg3">
                            </div>
                            <div>
                                <h3 class="expeStaff">  Energy-Efficient Solutions </h3>
                                <p class="fessional"> Reduce costs and meet green building standards.
                                </p>
                            </div>
                        </div>
                        <div class="about-box-main zoom_in">
                            <div class="about-svg-main">
                                <img src="/frontend/assets/images/svg/about-svg4.svg" alt="about-svg4">
                            </div>
                            <div>
                                <h3 class="expeStaff"> Certified Safety Standards  </h3>
                                <p class="fessional"> Firefighting and MEP systems that meet regulations .
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="about-sec-main">
                        <a href="\about" class="btn-quote our-services-btn">About Us
                            <img src="/frontend/assets/images/svg/cross-arrow.svg" alt="cross-arrow">
                        </a>
                        <div class="call">
                            <div class="headphone-main">
                                <img src="/frontend/assets/images/svg/headphone-icon.svg" alt="headphone-icon">
                            </div>
                            <div class="need-help-main">
                                <p>Need Help Now?</p>
                                <a href="tel:+12483578866">9246283777</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-6 col-xl-6 col-lg-6 position-relative">
                    <div class="sub-img-main">
                        <img class="about-img1" src="/frontend/assets/images/about/about-img1.jpg" alt="about-img1">
                        <img class="subtract-img" src="/frontend/assets/images/about/Subtract.png" alt="Subtract">
                        <img class="about-img2" src="/frontend/assets/images/about/about-img2.jpg" alt="about-img2">
                        <img class="about-img3" src="/frontend/assets/images/about/about-img3.jpg" alt="about-img3">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====================================== Section Three ===================================== -->
    <section class="section-three">
        <div class="container">
            <p class="cap-text fade_up">OUR FEATURED SERVICES</p>
            <div class="section-main-text-flex">
                <h2 class="sec-text pb-0 fade_up">“Have a project in mind? Let’s make it a success together.”
</h2>
                <p class="sec-sub-text ornare fade_up">At Sunil Engineering and Systems, we offer complete HVAC,
                    MEP, and Firefighting solutions designed for the specific needs of residential, commercial,
                     and industrial clients. We have expertise in both Wet Services and Dry Services for HVAC,
                      ensuring comfort, efficiency, and reliability.</p>
            </div>
            <div class="swiper services-slider">
                <div class="swiper-wrapper">
                    @forelse($services as $service)
                    <div class="swiper-slide cleaning-card">
                        <div class="cleaning-card-img-main">
                            <img src="{{ asset('storage/' . $service->img) }}" alt="{{ $service->title }}">
                        </div>
                        <div class="services-svg-main">
                            <img src="/frontend/assets/images/svg/services-svg{{ $loop->iteration }}.svg" alt="services-svg{{ $loop->iteration }}">
                        </div>
                        <div class="card-containe">
                            <h3 class="services-name">{{ $service->title }}</h3>
                            <p class="services-card-sub-text">{{ $service->short_desc }}</p>
                        </div>

                          <a href="/service_detail/{{ $service->slug }}" class="card-learn-more">
                        {{-- <a href="{{ route('service.detail', $service->slug) }}" class="card-learn-more">  --}}
                            Learn More
                            <img src="/frontend/assets/images/svg/cross-arrow.svg" alt="cross-arrow">
                        </a>
                    </div>
                    @empty
                    <div class="swiper-slide cleaning-card">
                        <div class="card-containe">
                            <h3 class="services-name">No Services Available</h3>
                            <p class="services-card-sub-text">Please check back later for our services.</p>
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    <!-- ====================================== Section Four ===================================== -->
    <section class="section-four">
        <div class="container">
            <div class="row why-choose-row">
                <div class="col-xxl-6 col-xl-6 col-lg-6">
                    <p class="cap-text fade_up">why clients choose us</p>
                    {{-- <h2 class="sec-text fade_up">When you choose Sunil Engineering and Systems, you’re not just hiring a contractor. You’re gaining a long-term partner committed to your project’s success.  </h2> --}}
                    <p class="sec-sub-text fade_up">When you choose Sunil Engineering and Systems, you’re not just hiring a contractor. You’re gaining a long-term partner committed to your project’s success.</p>
                    <div class="check-box-main">
                        <div class="check-box-main-sub fade_up">
                            <img src="/frontend/assets/images/svg/check-transparent.svg" alt="check-transparent">
                            <div>
                                <h2>Complete Solutions Under One Roof</h2>
                                <p>HVAC, MEP & Firefighting</p>
                            </div>
                        </div>
                        <div class="check-box-main-sub fade_up">
                            <img src="/frontend/assets/images/svg/check-transparent.svg" alt="check-transparent">
                            <div>
                                <h2>Expertise & Experience</h2>
                                <p>Skilled engineers with a proven track record .</p>
                            </div>
                        </div>
                        <div class="check-box-main-sub fade_up">
                            <img src="/frontend/assets/images/svg/check-transparent.svg" alt="check-transparent">
                            <div>
                                <h2> Safety & Reliability</h2>
                                <p> Systems designed to protect lives and property</p>
                            </div>
                        </div>
                        <div class="check-box-main-sub fade_up">
                            <img src="/frontend/assets/images/svg/check-transparent.svg" alt="check-transparent">
                            <div>
                                <h2> Energy Efficiency </h2>
                                <p>  Sustainable and cost-effective solutions</p>
                            </div>
                        </div>

                        <div class="check-box-main-sub fade_up">
                            <img src="/frontend/assets/images/svg/check-transparent.svg" alt="check-transparent">
                            <div>
                                <h2> Customer-Centric Approach </h2>
                                <p>  On-time delivery with ongoing support .</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-6 col-xl-6 col-lg-6 sec-video2">
                    <video autoplay muted loop playsinline class="video2">
                        <source src="/frontend/assets/video/video2.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                    <div class="sadas"></div>
                    <img class="why-choose-img3" src="/frontend/assets/images/about/5216607.jpg" width="250px" alt="about-img3">
                </div>
            </div>
        </div>
    </section>

    <!-- ====================================== Section Sales ===================================== -->
    <section class="section-three">
        <div class="container">
            <p class="cap-text fade_up">Sales </p>
            <div class="section-main-text-flex">
                <h2 class="sec-text pb-0 fade_up">“Smart Engineering Solutions That Deliver Comfort, Safety and Efficiency.”  </h2>
                <p class="sec-sub-text ornare fade_up">Managing HVAC, MEP, and firefighting systems can be complex. Rising energy costs and safety compliance add to the challenge. Businesses and homeowners need a partner they can trust. </p>
            </div>
            <div class="swiper services-slider">
                <div class="swiper-wrapper">
                    @forelse($sales as $sale)
                    <div class="swiper-slide cleaning-card">
                        <div class="cleaning-card-img-main">
                            <img src="{{ asset('storage/' . $sale->img) }}" alt="{{ $sale->title }}">
                        </div>
                        <div class="services-svg-main">
                            <img src="/frontend/assets/images/svg/services-svg{{ $loop->iteration }}.svg" alt="services-svg{{ $loop->iteration }}">
                        </div>
                        <div class="card-containe">
                            <h3 class="services-name">{{ $sale->title }}</h3>
                            <p class="services-card-sub-text">{{ Str::limit(strip_tags($sale->short_desc), 80) }}</p>
                        </div>
                        <a href="/sales_detail/{{ $sale->slug }}" class="card-learn-more"> Learn More
                            <img src="/frontend/assets/images/svg/cross-arrow.svg" alt="cross-arrow">
                        </a>
                    </div>
                    @empty
                    <div class="swiper-slide cleaning-card">
                        <div class="card-containe">
                            <h3 class="services-name">No Sales Available</h3>
                            <p class="services-card-sub-text">Check back later for exciting deals and special offers.</p>
                        </div>
                        <a href="/service" class="card-learn-more"> View Services
                            <img src="/frontend/assets/images/svg/cross-arrow.svg" alt="cross-arrow">
                        </a>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    <!-- ====================================== Section Five ===================================== -->
    <section class="section-five">
        <div class="container">
            <p class="cap-text cost-cal fade_up">Cost Calculator</p>
            <h2 class="sec-text fami-cal pb-0 fade_up">Be a Part of Hundreds of Happy Families.</h2>
            <div class="calculator-box-main zoom_in">
                <div class="calcult-from-grid">
                    <div>
                        <h3 class="input-label-text">Choose a Service</h3>
                        <div class="input-main">
                            <div class="wrapper">
                                <div class="formDropDown">Residential Cleaning
                                    <img class="arrow-icon-form" src="/frontend/assets/images/svg/dropdown-arrow.svg"
                                        alt="arrow-icon-form">
                                </div>
                                <div class="position-relative">
                                    <ul class="formDropDown-ul-list">
                                        <li><a href="javascript:void(0)">Residential Cleaning</a></li>
                                        <li><a href="javascript:void(0)">House Cleaning</a></li>
                                        <li><a href="javascript:void(0)">Kitchen Cleaning</a></li>
                                        <li><a href="javascript:void(0)">Office Cleaning</a></li>
                                        <li><a href="javascript:void(0)">Window Cleaning</a></li>
                                        <li><a href="javascript:void(0)">Corporate Cleaning</a></li>
                                        <li><a href="javascript:void(0)">Carpet Cleaning</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="input-label-text">TYPE OF CLEAN</h3>
                        <div class="input-main">
                            <div class="wrapper">
                                <div class="formDropDown">Full Cleaning
                                    <img class="arrow-icon-form" src="/frontend/assets/images/svg/dropdown-arrow.svg"
                                        alt="arrow-icon-form">
                                </div>
                                <div class="position-relative">
                                    <ul class="formDropDown-ul-list">
                                        <li><a href="javascript:void(0)">Full Cleaning</a></li>
                                        <li><a href="javascript:void(0)">House Cleaning</a></li>
                                        <li><a href="javascript:void(0)">Kitchen Cleaning</a></li>
                                        <li><a href="javascript:void(0)">Office Cleaning</a></li>
                                        <li><a href="javascript:void(0)">Window Cleaning</a></li>
                                        <li><a href="javascript:void(0)">Corporate Cleaning</a></li>
                                        <li><a href="javascript:void(0)">Carpet Cleaning</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h3 class="input-label-text">TOTAL FLOOR AREA</h3>
                        <input type="text" placeholder="ex. 1590 sq ft" name="area" autocomplete="off">
                    </div>
                    <div>
                        <h3 class="input-label-text">Your Name</h3>
                        <input type="text" placeholder="Enter your full name" name="full name" autocomplete="off">
                    </div>
                    <div>
                        <h3 class="input-label-text">zip code</h3>
                        <input type="text" placeholder="Your area code" name="zip code" autocomplete="off">
                    </div>
                    <div>
                        <h3 class="input-label-text">email address</h3>
                        <input type="email" placeholder="Enter your email address" name="email" autocomplete="off">
                    </div>
                </div>
                <div class="get-cost-estimate">
                    <a href="#" class="btn-quote">Get Cost Estimate
                        <img src="/frontend/assets/images/svg/cross-arrow.svg" alt="cross-arrow">
                    </a>
                    <p class="fessional send-info">Submit this information and we will send you the cost for the
                        service.
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- ====================================== Section Six ===================================== -->
    <section class="section-six">
        <div class="container position-relative">
            <img class="how-to-work-bg" src="/frontend/assets/images/about/how-to-work-bg.png" alt="how-to-work-bg">
            <p class="cap-text cost-cal position-relative fade_up">How it works</p>
            <h2 class="sec-text mazing position-relative fade_up">Get Amazing Cleaning in 3 Simple Steps</h2>
            <p class="sec-sub-text scetur position-relative fade_up">At amet in adipiscing hac suspendisse. Laoreet sit
                consectetur donec odio ornare elementum pellentesque. Ante gravida netus dignissim sed tristique mauris
                egestas egestas aenean turpis id eget.</p>
            <div class="how-work-step-box">
                <div class="how-work-step-box-sub fade_up">
                    <div class="how-to-work-circle">
                        <img src="/frontend/assets/images/svg/how-to-work-svg1.svg" alt="how-to-work-svg1">
                    </div>
                    <h3>Pick a suitable plan</h3>
                    <p class="fessional send-info">Rule first third above first tree saw Grass subdue great eep saying
                        forth rule hath to the replenish.
                    </p>
                </div>
                <div class="how-work-step-box-sub how-to-work-arrow">
                    <div>
                        <img src="/frontend/assets/images/svg/how-to-work-arrow.svg" alt="how-to-work-arrow">
                    </div>
                </div>
                <div class="how-work-step-box-sub fade_up">
                    <div class="how-to-work-circle">
                        <img src="/frontend/assets/images/svg/how-to-work-svg2.svg" alt="how-to-work-svg2">
                    </div>
                    <h3>Set your schedule</h3>
                    <p class="fessional send-info">Quam nulla maecenas aliquam non erat auctor tristique. Ut quis quam
                        donec cum. Eu sed ante scelerisque massa.
                    </p>
                </div>
                <div class="how-work-step-box-sub how-to-work-arrow">
                    <div>
                        <img src="/frontend/assets/images/svg/how-to-work-arrow.svg" alt="how-to-work-arrow">
                    </div>
                </div>
                <div class="how-work-step-box-sub fade_up">
                    <div class="how-to-work-circle">
                        <img src="/frontend/assets/images/svg/how-to-work-svg3.svg" alt="how-to-work-svg3">
                    </div>
                    <h3>Get things done</h3>
                    <p class="fessional send-info">Urna praesent fusce risus pellentesque odio. Eget nulla volutpat
                        proin sagittis lacus ornare sagittis risus.
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- ====================================== Section Seven ===================================== -->
    <section class="section-seven">
        <div class="container">
            <p class="cap-text fade_up">OUR works</p>
            <div class="section-main-text-flex">
                <h2 class="sec-text pb-0 fade_up">Our Recent Projects</h2>
                <p class="sec-sub-text ornare fade_up">At Sunil Engineering and Systems, we take pride in delivering HVAC, MEP, and Firefighting projects across various sectors. Each project shows our commitment to quality, safety, and timely execution. From residential developments to large industrial facilities, we have built strong relationships with clients by providing reliable engineering solutions.</p>
            </div>
        </div>
        <div class="swiper projectSlider">
            <div class="swiper-wrapper">
                @forelse($portfolios as $portfolio)
                <div class="swiper-slide">
                    <div class="single-img">
                        <img src="{{ $portfolio->image_url }}" alt="{{ $portfolio->title }}" class="home-project-img">
                        {{-- <div class="img-overlay">
                            <div>
                                <h3 class="project-name-home">{{ $portfolio->title }}</h3>
                                {{-- <p>Professional engineering solutions delivered with excellence and precision for our valued clients.</p>
                            </div>
                        </div> --}}
                    </div>
                </div>
                @empty
                <div class="swiper-slide">
                    <div class="single-img">
                        <img src="/frontend/assets/images/project/project-img1.jpg" alt="project-img1" class="home-project-img">
                        <div class="img-overlay">
                            <div>
                                <h3 class="project-name-home">Our Projects</h3>
                                <p>No projects available at the moment.</p>
                            </div>
                        </div>
                    </div>
                </div>
                @endforelse
            </div>
            <div class="swiper-button-next project-button-next"></div>
            <div class="swiper-button-prev project-button-prev"></div>
        </div>
    </section>
    <!-- ====================================== Section Eight ===================================== -->
    <section class="section-eight pt-0">
        <div class="container">
            <p class="cap-text cost-cal fade_up">Our Expert Worker</p>
            <h2 class="sec-text mazing pb-0 fade_up">We Are Expert Team To Keep Your Vision</h2>
            <div class="row exper-team-row-home">
                <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6">
                    <div class="team-circle-link zoom_in">
                        <div class="team-circle-main">
                            <a href="team-details.html" class="inner-team-circle">
                                <img src="/frontend/assets/images/team/team-mem-img1.png" alt="team-mem-img1">
                            </a>
                            <div class="share-icon-main">
                                <img src="/frontend/assets/images/svg/share-icon.svg" alt="share-icon">
                                <ul class="social-icons">
                                    <li>
                                        <a href="https://www.instagram.com">
                                            <img src="/frontend/assets/images/svg/insta.svg" alt="Instagram">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://www.facebook.com">
                                            <img src="/frontend/assets/images/svg/facebook.svg" alt="Facebook">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://wa.me/+1234567890">
                                            <img src="/frontend/assets/images/svg/whatsapp.svg" alt="WhatsApp">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://x.com">
                                            <img src="/frontend/assets/images/svg/twitter.svg" alt="Twitter">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <h3>Richard Powel</h3>
                        <p>Cleaner</p>
                    </div>
                </div>
                <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6">
                    <div class="team-circle-link zoom_in">
                        <div class="team-circle-main">
                            <a href="team-details.html" class="inner-team-circle">
                                <img src="/frontend/assets/images/team/team-mem-img2.png" alt="team-mem-img2">
                            </a>
                            <div class="share-icon-main">
                                <img src="/frontend/assets/images/svg/share-icon.svg" alt="share-icon">
                                <ul class="social-icons">
                                    <li>
                                        <a href="https://www.instagram.com">
                                            <img src="/frontend/assets/images/svg/insta.svg" alt="Instagram">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://www.facebook.com">
                                            <img src="/frontend/assets/images/svg/facebook.svg" alt="Facebook">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://wa.me/+1234567890">
                                            <img src="/frontend/assets/images/svg/whatsapp.svg" alt="WhatsApp">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://x.com">
                                            <img src="/frontend/assets/images/svg/twitter.svg" alt="Twitter">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <h3>Ashley Riordan</h3>
                        <p>Cleaner</p>
                    </div>
                </div>
                <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6">
                    <div class="team-circle-link zoom_in">
                        <div class="team-circle-main">
                            <a href="team-details.html" class="inner-team-circle">
                                <img src="/frontend/assets/images/team/team-mem-img3.png" alt="team-mem-img3">
                            </a>
                            <div class="share-icon-main">
                                <img src="/frontend/assets/images/svg/share-icon.svg" alt="share-icon">
                                <ul class="social-icons">
                                    <li>
                                        <a href="https://www.instagram.com">
                                            <img src="/frontend/assets/images/svg/insta.svg" alt="Instagram">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://www.facebook.com">
                                            <img src="/frontend/assets/images/svg/facebook.svg" alt="Facebook">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://wa.me/+1234567890">
                                            <img src="/frontend/assets/images/svg/whatsapp.svg" alt="WhatsApp">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://x.com">
                                            <img src="/frontend/assets/images/svg/twitter.svg" alt="Twitter">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <h3>Robina Smith</h3>
                        <p>Cleaner</p>
                    </div>
                </div>
                <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6">
                    <div class="team-circle-link zoom_in">
                        <div class="team-circle-main">
                            <a href="team-details.html" class="inner-team-circle">
                                <img src="/frontend/assets/images/team/team-mem-img4.png" alt="team-mem-img4">
                            </a>
                            <div class="share-icon-main">
                                <img src="/frontend/assets/images/svg/share-icon.svg" alt="share-icon">
                                <ul class="social-icons">
                                    <li>
                                        <a href="https://www.instagram.com">
                                            <img src="/frontend/assets/images/svg/insta.svg" alt="Instagram">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://www.facebook.com">
                                            <img src="/frontend/assets/images/svg/facebook.svg" alt="Facebook">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://wa.me/+1234567890">
                                            <img src="/frontend/assets/images/svg/whatsapp.svg" alt="WhatsApp">
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://x.com">
                                            <img src="/frontend/assets/images/svg/twitter.svg" alt="Twitter">
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <h3>Robert Michel</h3>
                        <p>Cleaner</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====================================== Section Nine ===================================== -->
    <section class="section-nine pt-0">
        <div class="testimonial-section-main">
            <img class="man-cleaning-home" src="/frontend/assets/images/testimonials/man-cleaning-home.jpg"
                alt="man-cleaning-home">
            <div class="testimonials-col-main">
                <p class="cap-text fade_up">testimonials</p>
                <h2 class="sec-text tryse pb-0 fade_up">Trusted By Thousand Of People & Companies.</h2>
                <div class="swiper testimonialSlider zoom_in">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide testimonialSlider-swiper-slide">
                            <img src="/frontend/assets/images/svg/quote.svg" alt="quote">
                            <h3 class="cellent">“I would recommend practitioners at this center to everyone! They are
                                great to work with and are excellent trainers. Thank you all!”</h3>
                            <div class="client-details-main">
                                <img class="testimonial-client-img1"
                                    src="/frontend/assets/images/testimonials/testimonial-client-img1.jpg"
                                    alt="testimonial-client-img1">
                                <div class="client-details">
                                    <h3>Evangeline Lee</h3>
                                    <p>Owner</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide testimonialSlider-swiper-slide">
                            <img src="/frontend/assets/images/svg/quote.svg" alt="quote">
                            <h3 class="cellent">“I would recommend practitioners at this center to everyone! They are
                                great to work with and are excellent trainers. Thank you all!”</h3>
                            <div class="client-details-main">
                                <img class="testimonial-client-img1"
                                    src="/frontend/assets/images/testimonials/testimonial-client-img1.jpg"
                                    alt="testimonial-client-img1">
                                <div class="client-details">
                                    <h3>Evangeline Lee</h3>
                                    <p>Owner</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide testimonialSlider-swiper-slide">
                            <img src="/frontend/assets/images/svg/quote.svg" alt="quote">
                            <h3 class="cellent">“I would recommend practitioners at this center to everyone! They are
                                great to work with and are excellent trainers. Thank you all!”</h3>
                            <div class="client-details-main">
                                <img class="testimonial-client-img1"
                                    src="/frontend/assets/images/testimonials/testimonial-client-img1.jpg"
                                    alt="testimonial-client-img1">
                                <div class="client-details">
                                    <h3>Evangeline Lee</h3>
                                    <p>Owner</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide testimonialSlider-swiper-slide">
                            <img src="/frontend/assets/images/svg/quote.svg" alt="quote">
                            <h3 class="cellent">“I would recommend practitioners at this center to everyone! They are
                                great to work with and are excellent trainers. Thank you all!”</h3>
                            <div class="client-details-main">
                                <img class="testimonial-client-img1"
                                    src="/frontend/assets/images/testimonials/testimonial-client-img1.jpg"
                                    alt="testimonial-client-img1">
                                <div class="client-details">
                                    <h3>Evangeline Lee</h3>
                                    <p>Owner</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="testimonial-next swiper-button-next"></div>
                    <div class="testimonial-prev swiper-button-prev"></div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====================================== Section Blog ===================================== -->
    <section class="blog-section">
        <div class="container">
            <p class="cap-text cost-cal fade_up">latest news</p>
            <h2 class="sec-text mazing pb-0 fade_up">Our Most Recent Posts</h2>
            <div class="container">
                <div class="row home-blog-row">
                    @forelse($recentPosts as $post)
                    <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6">
                        <a href="/blog/{{ $post->slug }}" class="blog-box-main zoom_in">
                            <div class="blog-img-main">
                                <img class="blog-img" src="{{ $post->image ? asset('storage/' . $post->image) : '/frontend/assets/images/blog/default-blog.jpg' }}" alt="{{ $post->title }}">
                                <h3 class="blog-date">{{ $post->created_at->format('d M Y') }}</h3>
                            </div>
                            <div class="blog-containe-main">
                                <h2>{{ $post->title }}</h2>
                                <p>{{ $post->excerpt ?: Str::limit(strip_tags($post->body), 100) }}</p>
                            </div>
                        </a>
                    </div>
                    @empty
                    <div class="col-xxl-12">
                        <div class="text-center">
                            <h3>No Recent Posts</h3>
                            <p>Check back later for our latest news and updates.</p>
                            <a href="/blog" class="btn-quote">
                                View All Posts
                                <img src="/frontend/assets/images/svg/cross-arrow.svg" alt="cross-arrow">
                            </a>
                        </div>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>
    </section>
    <div class="expand-img-main image">
        <img class="expand-img" src="/frontend/assets/images/expand-img/person-taking-care.jpg" alt="expand-img">
    </div>
    <!-- ====================================== Section Form ===================================== -->
    <section class="contact-form-section">
        <div class="container">
            <div class="row form-sec-row">
                <div class="col-xxl-6 col-xl-6 col-lg-5">
                    <p class="cap-text fade_up">Sunil Engineering And Systems</p>
                    <h2 class="sec-text get-toch fade_up">Get In Touch With Us</h2>
                    <p class="sec-sub-text fade_up">We would love to hear from you. Whether you are planning a new project, need expert advice, or require reliable HVAC, MEP, or Firefighting services, our team is ready to help. </p>
                    <p class="call-support-text">Sales manager
                    <a href="tel:+18042568899" class="tel-num">9248052227</a></p>
                    <p class="call-support-text">Service Incharge
                    <a href="tel:+18042568899" class="tel-num">9246283777</a></p>
                    <div class="adres-main-home fade_up">
                        <div>
                            <p class="call-support-text">Our Address</p>
                            <p class="tel-num addees">Plot no. 57, Venkat sai, 4th floor, kavuri hills, phasae-1, Madhapur, Hyderabad, Telangana-50001 </p>
                        </div>
                        <div>
                            <p class="call-support-text">Our Mail Address</p>
                            <a href="mailto:admin@sesaircon.org" class="tel-num addees">admin@sesaircon.org	</a>
                            <a href="mailto:sales@sesaircon.org" class="tel-num addees">sales@sesaircon.org	</a>
                        </div>

                    </div>
                </div>
                <div class="col-xxl-6 col-xl-6 col-lg-7">
                    <div class="contac-form-main zoom_in">
                        <!-- Success/Error Messages -->
                        <div id="contact-message-index" class="alert" style="display: none; margin-bottom: 20px; padding: 15px; border-radius: 10px; font-weight: 500;"></div>

                        <form id="contact-form-index" action="{{ route('contact.submit') }}" method="POST">
                            @csrf
                            <div class="calcult-from-grid contac-form">
                                <div>
                                    <h3 class="input-label-text">Full Name*</h3>
                                    <input type="text" placeholder="Enter your full name" name="name"
                                        autocomplete="off" value="{{ old('name') }}" required>
                                    @error('name')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div>
                                    <h3 class="input-label-text">email address*</h3>
                                    <input type="email" placeholder="Enter your email" name="email"
                                        autocomplete="off" value="{{ old('email') }}" required>
                                    @error('email')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div>
                                    <h3 class="input-label-text">phone number*</h3>
                                    <input type="text" placeholder="Enter phone number" name="mobile"
                                        autocomplete="off" value="{{ old('mobile') }}" required>
                                    @error('mobile')
                                        <div class="text-danger small mt-1">{{ $message }}</div>
                                    @enderror
                                </div>
                            {{-- <div>
                                <h3 class="input-label-text">choose cleaning area*</h3>
                                <div class="input-main">
                                    <div class="wrapper">
                                        <div class="formDropDown">Choose from list
                                            <img class="arrow-icon-form" src="/frontend/assets/images/svg/dropdown-arrow.svg"
                                                alt="arrow-icon-form">
                                        </div>
                                        <div class="position-relative">
                                            <ul class="formDropDown-ul-list">
                                                <li><a href="javascript:void(0)">Full Cleaning</a></li>
                                                <li><a href="javascript:void(0)">House Cleaning</a></li>
                                                <li><a href="javascript:void(0)">Kitchen Cleaning</a></li>
                                                <li><a href="javascript:void(0)">Office Cleaning</a></li>
                                                <li><a href="javascript:void(0)">Window Cleaning</a></li>
                                                <li><a href="javascript:void(0)">Corporate Cleaning</a></li>
                                                <li><a href="javascript:void(0)">Carpet Cleaning</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div> --}}
                        </div>
                            {{-- </div> --}}
                            <div class="your-message-input">
                                <h3 class="input-label-text">your Subject</h3>
                                <input type="text" placeholder="subject " name="subject"
                                    autocomplete="off" value="{{ old('subject') }}" required>
                                @error('subject')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="your-message-input">
                                <h3 class="input-label-text">your message</h3>
                                <input type="text" placeholder="Write here" name="message"
                                    autocomplete="off" required style="border-radius: 10px; border: 2px solid #F5F6F7; background: #FFF; padding: 12px 15px; width: 100%; color: #000; font-size: 18px; font-weight: 400; line-height: 24px; resize: vertical;" value="{{ old('message') }}">
                                @error('message')
                                    <div class="text-danger small mt-1">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="get-cost-estimate send-main-btn">
                                <button type="submit" class="btn-quote" id="submit-btn-index">
                                    <span id="btn-text-index">Send Us Your Mail</span>
                                    <span id="btn-loading-index" style="display: none;">Sending...</span>
                                    <img src="/frontend/assets/images/svg/cross-arrow.svg" alt="cross-arrow">
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('contact-form-index');
            const messageDiv = document.getElementById('contact-message-index');
            const submitBtn = document.getElementById('submit-btn-index');
            const btnText = document.getElementById('btn-text-index');
            const btnLoading = document.getElementById('btn-loading-index');

            form.addEventListener('submit', function(e) {
                e.preventDefault();

                // Show loading state
                submitBtn.disabled = true;
                btnText.style.display = 'none';
                btnLoading.style.display = 'inline';

                // Hide previous messages
                messageDiv.style.display = 'none';

                // Clear previous validation errors
                const errorDivs = form.querySelectorAll('.text-danger');
                errorDivs.forEach(div => div.remove());

                // Prepare form data
                const formData = new FormData(form);

                // Submit form via AJAX
                fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        // Show success message
                        messageDiv.className = 'alert';
                        messageDiv.style.backgroundColor = '#d4edda';
                        messageDiv.style.color = '#155724';
                        messageDiv.style.border = '1px solid #c3e6cb';
                        messageDiv.textContent = data.message;
                        messageDiv.style.display = 'block';

                        // Reset form
                        form.reset();

                        // Scroll to message
                        messageDiv.scrollIntoView({ behavior: 'smooth' });
                    } else {
                        // Show error message
                        messageDiv.className = 'alert';
                        messageDiv.style.backgroundColor = '#f8d7da';
                        messageDiv.style.color = '#721c24';
                        messageDiv.style.border = '1px solid #f5c6cb';
                        messageDiv.textContent = data.message || 'An error occurred. Please try again.';
                        messageDiv.style.display = 'block';
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    messageDiv.className = 'alert';
                    messageDiv.style.backgroundColor = '#f8d7da';
                    messageDiv.style.color = '#721c24';
                    messageDiv.style.border = '1px solid #f5c6cb';
                    messageDiv.textContent = 'An error occurred. Please try again.';
                    messageDiv.style.display = 'block';
                })
                .finally(() => {
                    // Reset button state
                    submitBtn.disabled = false;
                    btnText.style.display = 'inline';
                    btnLoading.style.display = 'none';
                });
            });
        });
    </script>
<style>
/* Standardize image sizes for services and sales sections */
.services-slider .cleaning-card-img-main {
    height: 280px;
    overflow: hidden;
    position: relative;
}

.services-slider .cleaning-card-img-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px 20px 0 0;
    transition: transform 0.7s ease;
}

/* Standardize blog image sizes */
.home-blog-row .blog-img-main {
    height: 250px;
    overflow: hidden;
    position: relative;
}

.home-blog-row .blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

/* Blog Section Enhancements */
.home-blog-row .blog-box-main {
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.home-blog-row .blog-box-main:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.home-blog-row .blog-box-main:hover .blog-img {
    transform: scale(1.05);
}

.home-blog-row .blog-containe-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Ensure consistent card heights */
.home-blog-row .col-xxl-4,
.home-blog-row .col-xl-4,
.home-blog-row .col-lg-4,
.home-blog-row .col-md-6 {
    display: flex;
    margin-bottom: 30px;
}

/* No content styling */
.btn-quote {
    background: linear-gradient(135deg, #3c55ab 0%, #0099CC 100%);
    border: none;
    padding: 12px 25px;
    border-radius: 25px;
    color: white;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.btn-quote:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 194, 255, 0.3);
    color: white;
    text-decoration: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .services-slider .cleaning-card-img-main {
        height: 220px;
    }

    .home-blog-row .blog-img-main {
        height: 200px;
    }
}

@media (max-width: 576px) {
    .services-slider .cleaning-card-img-main {
        height: 180px;
    }

    .home-blog-row .blog-img-main {
        height: 160px;
    }

    .btn-quote {
        padding: 10px 20px;
        font-size: 14px;
    }
}

@media (max-width: 425px) {
    .services-slider .cleaning-card-img-main {
        height: 160px;
    }

    .home-blog-row .blog-img-main {
        height: 140px;
    }
}
</style>
@stop