<section class="hero-slider">
    <div class="slides">
        <!-- Slide 1 - Welcome -->
        <div class="slide active" style="background-image: url('{{ asset('img/slider1.jpg') }}');">
            <div class="overlay"></div>
            <div class="hero-content text-center">
                <h1>Welcome to Trinexa</h1>
                <p>Your Trusted Digital Partner for Success</p>
                <a href="#services" class="hero-btn">Explore More</a>
            </div>
        </div>

        <!-- Slide 2 - Website Development -->
        <div class="slide" style="background-image: url('{{ asset('img/slider2.jpg') }}');">
            <div class="overlay"></div>
            <div class="hero-content text-center">
                <h1>Powerful Web Solutions</h1>
                <p>From Ecommerce to Custom CMS – We Build Every Website</p>
                <a href="#web" class="hero-btn">Discover Services</a>
            </div>
        </div>

        <!-- Slide 3 - Graphics Design -->
        <div class="slide" style="background-image: url('{{ asset('img/slider3.jpg') }}');">
            <div class="overlay"></div>
            <div class="hero-content text-center">
                <h1>Creative Graphic Design</h1>
                <p>Logos, Posters, Brochures & Branding – Designs That Inspire</p>
                <a href="#graphics" class="hero-btn">View Portfolio</a>
            </div>
        </div>

        <!-- Slide 4 - Digital Marketing -->
        <div class="slide" style="background-image: url('{{ asset('img/slider4.jpg') }}');">
            <div class="overlay"></div>
            <div class="hero-content text-center">
                <h1>Digital Growth Strategies</h1>
                <p>SEO, SMM, WhatsApp API & Lead Generation Tools for Your Business</p>
                <a href="#marketing" class="hero-btn">Start Growing</a>
            </div>
        </div>
    </div>

    <!-- Navigation Arrows with Bootstrap Icons -->
    <a class="prev"><i class="bi bi-chevron-left"></i></a>
    <a class="next"><i class="bi bi-chevron-right"></i></a>

    <!-- Dot Indicators -->
    <div class="dots"></div>
</section>
