<?php include'header.php'?>

  <!-- TITLE BANNER START -->
    <section class="title-banner">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-lg-10 col-md-11">
                    <div class="title-wrapper">
                        <div class="row align-items-center">
                            <div class="col-lg-6 col-sm-6">
                                <div class="title-content">
                                    <h1 class="white fw-700">Blog Detail</h1>
                                </div>
                            </div>
                            <div class="col-lg-6 col-sm-6 d-sm-block d-none">
                                <div class="title-image">
                                    <img src="assets/media/backgrounds/title-banner.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- TITLE BANNER END -->

    <!-- OUR BLOG DETAIL START -->
    <section class="blog-detail-sec pt-80 pb-40">
        <div class="container-fluid">
            <div class="blog-wrapper">
                <div class="row row-gap-4 justify-content-center">
                    <div class="col-xl-8">
                        <div class="blog-detail-wrapper">
                            <div class="main-image mb-16">
                                <img src="assets/media/blog/blog-detail-1.png" alt="" class="mb-16 br-12">
                            </div>
                            <div class="d-flex align-items-center gap-32 mb-32">
                            <div class="d-flex align-items-center gap-8">
                                <img src="assets/media/icons/calender-black.png" alt="">
                                <p class="black fw-500">24 April, 2026</p>
                            </div>
                        </div>
                            <div class="hr-line mb-32"></div>
                            <div class="mb-16">
                                <h4 class="black mb-24 fw-700 category-title">How to Stay Motivated While Learning Online</h4>
                                <p class="mb-16">Staying motivated while learning online can be challenging, especially without a structured classroom environment. However, with the right approach, you can stay focused and achieve your goals. Start by setting clear and realistic goals for what you want to learn. Break your study sessions into smaller tasks so that you don’t feel overwhelmed, and celebrate small achievements along the way.</p>
                                <p class="mb-32">Create a dedicated study space that is free from distractions and helps you stay focused. Maintaining a consistent schedule is also important—try to study at the same time each day to build a routine. Stay engaged by taking notes, participating in discussions, and applying what you learn through practice. Additionally, remind yourself why you started and keep your end goal in mind.</p>
                                <p class="mb-32">Finally, take care of your well-being. Avoid burnout by taking regular breaks, staying physically active, and getting enough rest. Surround yourself with supportive people or join online communities where you can share your progress and stay inspired. With discipline, consistency, and a positive mindset, you can stay motivated and succeed in online learning.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- OUR BLOG DETAIL END -->

    <!-- ARTICLES SECTION START -->
    <section class="article-section pt-40 pb-80">
        <div class="container-fluid">
            <div class="heading mb-48 text-center">
                <h2 class="black fw-700 mb-8 category-title">Related Articles</h2>
            </div>

            <!-- Swiper -->
            <div class="swiper myArticleSwiper">
                <div class="swiper-wrapper">

                    <!-- Slide 1 -->
                    <div class="swiper-slide">
                        <a href="blog-detail.php" class="article-block bg-white br-12">
                            <div class="article-image shine br-8 mb-24">
                                <img src="assets/media/blog/blog-1.png" class="br-8">
                            </div>
                            <div class="article-content">
                                <p class="dark-gray fw-500 mb-16">24 April, 2026</p>
                                <h6 class="fw-700 mb-16">Top Tips for Successful Online Learning</h6>
                                <p class="dark-gray mb-24">Achieve your learning goals with smart strategies.</p>
                                <p class="fw-600">Read More →</p>
                            </div>
                        </a>
                    </div>

                    <!-- Slide 2 -->
                    <div class="swiper-slide">
                        <a href="blog-detail.php" class="article-block bg-white br-12">
                            <div class="article-image shine br-8 mb-24">
                                <img src="assets/media/blog/blog-2.png" class="br-8">
                            </div>
                            <div class="article-content">
                                <p class="dark-gray fw-500 mb-16">24 April, 2026</p>
                                <h6 class="fw-700 mb-16">Stay Motivated While Learning Online</h6>
                                <p class="dark-gray mb-24">Simple techniques to stay focused and consistent.</p>
                                <p class="fw-600">Read More →</p>
                            </div>
                        </a>
                    </div>

                    <!-- Slide 3 -->
                    <div class="swiper-slide">
                        <a href="blog-detail.php" class="article-block bg-white br-12">
                            <div class="article-image shine br-8 mb-24">
                                <img src="assets/media/blog/blog-3.png" class="br-8">
                            </div>
                            <div class="article-content">
                                <p class="dark-gray fw-500 mb-16">24 April, 2026</p>
                                <h6 class="fw-700 mb-16">Boost Your Learning Productivity</h6>
                                <p class="dark-gray mb-24">Improve focus and efficiency with proven tips.</p>
                                <p class="fw-600">Read More →</p>
                            </div>
                        </a>
                    </div>

                    <!-- Slide 4 -->
                    <div class="swiper-slide">
                        <a href="blog-detail.php" class="article-block bg-white br-12">
                            <div class="article-image shine br-8 mb-24">
                                <img src="assets/media/blog/blog-4.png" class="br-8">
                            </div>
                            <div class="article-content">
                                <p class="dark-gray fw-500 mb-16">24 April, 2026</p>
                                <h6 class="fw-700 mb-16">Benefits of Interactive Learning</h6>
                                <p class="dark-gray mb-24">Engage better with modern learning tools.</p>
                                <p class="fw-600">Read More →</p>
                            </div>
                        </a>
                    </div>

                    <!-- Slide 5 -->
                    <div class="swiper-slide">
                        <a href="blog-detail.php" class="article-block bg-white br-12">
                            <div class="article-image shine br-8 mb-24">
                                <img src="assets/media/blog/blog-9.png" class="br-8">
                            </div>
                            <div class="article-content">
                                <p class="dark-gray fw-500 mb-16">24 April, 2026</p>
                                <h6 class="fw-700 mb-16">Balancing Work, Life, and Online Study</h6>
                                <p class="dark-gray mb-24">Achieve your learning goals with our comprehensive tips and strategies.</p>
                                <p class="fw-600">Read More →</p>
                            </div>
                        </a>
                    </div>

                </div>

                <!-- Navigation -->
                <!-- <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div> -->

                <!-- Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        
    </section>
    <!-- ARTICLES SECTION END -->


    <script>
    var swiper = new Swiper(".myArticleSwiper", {
        slidesPerView: 4,
        spaceBetween: 24,
        loop: true,

        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },

        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },

        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },

        breakpoints: {
            0: {
                slidesPerView: 1
            },
            576: {
                slidesPerView: 2
            },
            992: {
                slidesPerView: 3
            },
            1200: {
                slidesPerView: 4
            }
        }
    });
    </script>
    
    <style>
        
        .category-title {
            position: relative;
            display: inline-block;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            font-size: 32px;
            padding-bottom: 12px;
        }
        
        .category-title::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 70px;
            height: 3px;
            background-color: #f59e0b;
            transform: translateX(-50%);
            border-radius: 999px;
        }

        @media (max-width: 767px) {
            .category-title {
                display: table;
                margin-left: auto;
                margin-right: auto;
                text-align: center !important;
                font-size: 26px;
                line-height: 1.3;
            }
        }
    </style>

<?php include'footer.php'?>
