<!-- Swiper JS CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<style>
    .main-slider {
        width: 100%;
        height: 70vh;
        background: #000;
    }

    .swiper-slide {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    .slide-bg {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background-size: cover;
        background-position: center;
        z-index: 1;
    }

    .slide-overlay {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2;
    }

    .slide-content {
        position: relative;
        z-index: 3;
        text-align: center;
        max-width: 800px;
        padding: 0 20px;
    }

    .slide-content h2 {
        font-size: 3.5rem;
        font-weight: 800;
        margin-bottom: 20px;
        transform: translateY(30px);
        opacity: 0;
        transition: 0.8s all ease;
    }

    .slide-content p {
        font-size: 1.2rem;
        margin-bottom: 30px;
        transform: translateY(30px);
        opacity: 0;
        transition: 0.8s all ease 0.2s;
    }

    .swiper-slide-active .slide-content h2,
    .swiper-slide-active .slide-content p {
        transform: translateY(0);
        opacity: 1;
    }

    .slider-btn {
        display: inline-block;
        padding: 12px 35px;
        background: var(--primary-brand, #00aeef);
        color: #fff;
        text-decoration: none;
        border-radius: 50px;
        font-weight: bold;
        transition: 0.3s;
    }

    .slider-btn:hover {
        background: var(--secondary-brand, #57a03a);
        transform: scale(1.05);
    }

    /* Swiper custom arrows */
    .swiper-button-next, .swiper-button-prev {
        color: #fff;
        background: rgba(255,255,255,0.1);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        after: { font-size: 20px; };
    }
</style>

<div class="swiper main-slider">
    <div class="swiper-wrapper">
        <!-- Slide 1 -->
        <div class="swiper-slide">
            <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1544197150-b99a580bb7a8?auto=format&fit=crop&w=1920&q=80');"></div>
            <div class="slide-overlay"></div>
            <div class="slide-content">
                <h2>হাই-স্পিড ফাইবার ইন্টারনেট</h2>
                <p>আমাদের আধুনিক অপটিক্যাল ফাইবার নেটওয়ার্কের সাথে পান বিরামহীন ব্রাউজিং অভিজ্ঞতা।</p>
                <a href="#packages" class="slider-btn">প্যাকেজ দেখুন</a>
            </div>
        </div>

        <!-- Slide 2 -->
        <div class="swiper-slide">
            <div class="slide-bg" style="background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1920&q=80');"></div>
            <div class="slide-overlay"></div>
            <div class="slide-content">
                <h2>সেরা গেমিং এক্সপেরিয়েন্স</h2>
                <p>লো-ল্যাটেন্সি এবং ডেডিকেটেড ব্যান্ডউইথ এর সাথে আপনার গেমিং হোক আরও স্মুথ।</p>
                <a href="contact.php" class="slider-btn">সংযোগ নিন</a>
            </div>
        </div>
    </div>
    
    <!-- Navigation arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- Pagination -->
    <div class="swiper-pagination"></div>
</div>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    const swiper = new Swiper('.main-slider', {
        loop: true,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>