<?php include "nav.php" ;?>
<style>
    .event-image-banner {
    display: flex;
    align-items: center; /* Centers the content vertically */
    height: 350px; /* Adjust the height as needed */
    background-image: url("assets/images/bg/bg-image-10.jpg");
    background-size: cover;
    background-position: center;
}

</style>
<div class="event-image-banner">
  <div class="container">
  <ul class="page-list text-white" style="color:#fff!important">
            <li class="rbt-breadcrumb-item text-white"><a href="index.php" class="text-white">Home</a></li>
             <li>
                <div class="icon-right"><i class="feather-chevron-right"></i></div>
            </li>
            <li class="rbt-breadcrumb-item active text-white">Celebration</li>
    </ul>
    <h2 class="title mb--0 text-white">Celebrations</h2>

  </div>
</div>

<!-- <div class="rbt-breadcrumb-default rbt-breadcrumb-style-3">
        <div class="breadcrumb-inner">
            <img src="assets/images/bg/bg-image-10.jpg" alt="Vethathiri School Images">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="content">
                        <div class="content text-start">
                            <ul class="page-list text-white" style="color:#fff!important">
                                <li class="rbt-breadcrumb-item text-white"><a href="index.php text-white">Home</a></li>
                                <li>
                                    <div class="icon-right"><i class="feather-chevron-right"></i></div>
                                </li>
                                <li class="rbt-breadcrumb-item active text-white">Event</li>
                            </ul>
                            <h2 class="title mb--0 text-white">Event Details</h2>

                          
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> -->
    <!-- <div class="rbt-banner-area rbt-banner-8 variation-02 with-shape">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-10 offset-lg-1">
                    <div class="content">
                        <div class="inner text-center">
                            <div class="section-title text-center"> <span class="subtitle bg-primary-opacity">JOIN WITH
                                    US</span>
                            </div>
                            <h1 class="title">Our facilities are
                                <span class="header-caption">
                                    <span class="cd-headline clip is-full-width">
                                        <span class="cd-words-wrapper">
                                            <b class="is-visible theme-gradient">Advanced</b>
                                            <b class="is-hidden theme-gradient">Well maintained</b>
                                            <b class="is-hidden theme-gradient">Educating</b>
                                            <b class="is-hidden theme-gradient">Safe</b>
                                        </span>
                                    </span>
                                </span>
                            </h1>
                            <p class="description has-medium-font-size mt--20">At VMSS, we believe in providing the best
                                facilities and a safe environment to help them learn without worry.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="shape-image">
                <img src="assets/images/icons/tree-shape.svg" alt="Shape">
            </div>
        </div>
    </div> -->
    <div class="container mt_dec--120 mt--30">
        <div class="rbt-page-banner-wrapper">
            <!-- Start Banner BG Image  -->
            <!-- End Banner BG Image  -->
            <div class="rbt-banner-content">
                <!-- Start Course Top  -->
                <div class="rbt-course-top-wrapper">
                    <div class="container">
                        <!-- <div class="row g-5 align-items-center">
                            <div class="col-xl-5 col-lg-12 col-md-12">
                                <div class="rbt-sorting-list d-flex flex-wrap align-items-center">
                                    <div class="rbt-short-item switch-layout-container">
                                        <ul class="course-switch-layout">
                                            <li class="course-switch-item"><button class="rbt-grid-view active"
                                                    title="Grid Layout"><i class="feather-grid"></i> <span
                                                        class="text">Grid</span></button></li>
                                            <li class="course-switch-item"><button class="rbt-list-view"
                                                    title="List Layout"><i class="feather-list"></i> <span
                                                        class="text">List</span></button></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
                <!-- End Course Top  -->
            </div>
        </div>
    </div>
    <div class="rbt-section-overlayping-top mb--100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="rbt-course-grid-column">
                    <?php
  $sql = "SELECT * FROM celebration";

    $res=$connect->query($sql);

    $total_records = $res->num_rows;
    $records_per_page = 6;
    $total_pages = ceil($total_records / $records_per_page);

    // Check if page parameter is set, if not, set it to 1
    $page = isset($_GET['page']) ? $_GET['page'] : 1;

    $offset = ($page - 1) * $records_per_page;

    $sql .= " LIMIT $offset, $records_per_page";
    $res = $connect->query($sql);

    if($res->num_rows > 0){
        $i = 0;
        while($r = $res->fetch_assoc()){
            $i++;
?>

<!-- Your HTML for displaying individual cards goes here -->
<div class="course-grid-3">
    <div class="rbt-card variation-01 rbt-hover">
        <div class="rbt-card-img">
            <a>
                <img style="width:100%;height:250px;object-fit:cover" src="admin/<?php echo $r["CIMAGE"]; ?>" alt="Card image">
            </a>
        </div>
        <div class="rbt-card-body">
            <h4 class="rbt-card-title"><a><?php echo $r["CNAME"]; ?></a></h4>
            <p class="rbt-card-text">
                <?php 
                    $words = str_word_count($r["CDES"], 1); // Split the string into words
                    $first_15_words = implode(' ', array_slice($words, 0, 15)); // Take the first 15 words and reassemble them
                    echo $first_15_words;
                    if(count($words) > 15) echo "..."; // If there are more than 15 words, add ellipsis
                ?>
            </p>
            <a href="celebration-details.php?id=<?php echo $r["CID"]; ?>">
                <span class="btn-text know-btn">Know more</span>
            </a>
        </div>
    </div>
</div>
<!-- End of individual card -->

<?php
        }
    } else {
        echo '';
    }
?>

<!-- Pagination -->


                      

                    </div>
                    <div class="pagination">
    <?php
        for ($page = 1; $page <= $total_pages; $page++) {
            echo '<a class="dynamic-num" href="?page=' . $page . '">' . $page . '</a> ';
        }
    ?>
</div>
                </div>
            </div>
        </div>
    </div>
    <div class="rbt-separator-mid">
        <div class="container">
            <hr class="rbt-separator m-0">
        </div>
    </div>
    <div class="rbt-rbt-blog-area rbt-section-gapTop bg-color-darker rbt-round-bottom-shape">
        <div class="wrapper pb--50 rbt-index-upper">
            <div class="container">
                <div class="row g-5 align-items-end mb--60">
                    <div class="col-lg-6 col-md-12 col-12">
                        <div class="section-title text-start">
                            <h2 class="title color-white">Join us</h2>
                            <p class="description color-white-off mt--20">In our school, we have values, education,
                                morale, and a safe environment suited to feed bright little minds. </p>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12 col-12">
                        <div class="load-more-btn text-start text-lg-end">
                            <a class="rbt-btn btn-sm btn-border color-white-off" href="">
                                Know More
                            </a>
                        </div>
                    </div>
                </div>
                <!-- Start Card Area -->
                <div class="row g-5">
                    <!-- Start Splash Service  -->
                    <div class="col-lg-4 col-md-6 col-sm-12 col-12" data-sal-delay="150" data-sal="slide-up"
                        data-sal-duration="800">
                        <div class="rbt-splash-service no-translate h-100">
                            <div class="inner">
                                <div class="icon">
                                    <img src="assets/images/home/documentation.png" alt="Icons Images">
                                </div>
                                <div class="content">
                                    <h4 class="title"><a href="contact-us.php">Details</a></h4>
                                    <p class="description">To know more about our school</p>
                                    <a class="rbt-btn bg-primary-opacity hover-icon-reverse w-100" target="_blank"
                                        href="about-us.php">
                                        <span class="icon-reverse-wrapper">
                                            <span class="btn-text">View</span>
                                            <span class="btn-icon"><i class="feather-arrow-right"></i></span>
                                            <span class="btn-icon"><i class="feather-arrow-right"></i></span>
                                        </span>
                                    </a>
                                    <!-- <ul class="liststyle">
                                        <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellat,
                                            Asperiores nobis.</li>
                                    </ul> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Splash Service  -->

                    <!-- Start Splash Service  -->
                    <div class="col-lg-4 col-md-6 col-sm-12 col-12" data-sal-delay="200" data-sal="slide-up"
                        data-sal-duration="800">
                        <div class="rbt-splash-service no-translate support h-100">
                            <div class="inner">
                                <div class="icon">
                                    <img src="assets/images/home/support.png" alt="Icons Images">
                                </div>
                                <div class="content">
                                    <h4 class="title"><a href="contact-us.php">Contact us</a></h4>
                                    <p class="description">Get assistance with the admission</p>
                                    <a class="rbt-btn bg-secondary-opacity hover-icon-reverse w-100" target="_blank"
                                        href="contact-us.php">
                                        <span class="icon-reverse-wrapper">
                                            <span class="btn-text">Get Support</span>
                                            <span class="btn-icon"><i class="feather-arrow-right"></i></span>
                                            <span class="btn-icon"><i class="feather-arrow-right"></i></span>
                                        </span>
                                    </a>
                                    <ul class="liststyle">
                                        <li><span>Support Time:</span> Monday – Friday</li>
                                        <li><span>Response Time:</span> Maximum 24 hours</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Splash Service  -->

                    <!-- Start Splash Service  -->
                    <div class="col-lg-4 col-md-6 col-sm-12 col-12" data-sal-delay="250" data-sal="slide-up"
                        data-sal-duration="800">
                        <div
                            class="rbt-splash-service no-translate support h-100 bg-gradient-7 rbt-splash-service-white border-0">
                            <div class="inner">
                                <div class="icon">
                                    <img src="assets/images/home/hire.png" alt="Icons Images">
                                </div>
                                <div class="content">
                                    <h4 class="title color-white">Academics </h4>
                                    <!-- <p class="description color-white">Need you any custom job</p> -->
                                    <p class="description color-white opacity-75">For all Academics related queries like
                                        timing, holidays, homework, directly contact us.

                                    </p>
                                    <a class="rbt-btn btn-white hover-icon-reverse w-100" target="_blank"
                                        href="contact-us.php">
                                        <span class="icon-reverse-wrapper">
                                            <span class="btn-text">Contact</span>
                                            <span class="btn-icon"><i class="feather-arrow-right"></i></span>
                                            <span class="btn-icon"><i class="feather-arrow-right"></i></span>
                                        </span>
                                    </a>
                                    <ul class="plan-offer-list rbt-list-white-opacity mt--20">
                                        <li>
                                            <i class="feather-check"></i>Response Time: 2 Hours
                                        </li>
                                        <li>
                                            <i class="feather-check"></i> Personal response from our staff.
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End Splash Service  -->
                </div>
                <!-- End Card Area -->
            </div>
        </div>
    </div>
    <footer class="rbt-footer footer-style-1 pt--100">
        <div class="footer-top">
            <div class="container">
                <div class="row row--15 mt_dec--30">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-12 mt--30">
                        <div class="footer-widget">
                            <div class="logo text-center text-lg-start"> <a href="index.php"> <img
                                        src="assets/images/logo/logo.png" alt="Vethathiri School"> </a>
                            </div>
                            <p class="description mt--20 text-center text-lg-start">Ever since the blossoming of our
                                school in Tharamangalam in 2012, we have impacted more than 2,000 lives, setting a new
                                benchmark for education. We're one of the top schools in Tamil Nadu.</p>
                            <div class="contact-btn mt--30 text-center text-lg-start"> <a
                                    class="rbt-btn hover-icon-reverse btn-border-gradient radius-round"
                                    href="contact-us.php">
                                    <div class="icon-reverse-wrapper"> <span class="btn-text">Contact With Us</span>
                                        <span class="btn-icon"><i class="feather-arrow-right"></i></span> <span
                                            class="btn-icon"><i class="feather-arrow-right"></i></span>
                                    </div>
                                </a> </div>
                        </div>
                    </div>
                    <div class="offset-lg-1 col-lg-2 col-md-6 col-sm-6 col-12 mt--30">
                        <div class="footer-widget">
                            <h5 class="ft-title text-center text-lg-start">Useful Links</h5>
                            <ul class="ft-link text-center text-lg-start">
                                <li> <a href="index.php">Home</a> </li>
                                <li> <a href="about-us.php">About Us</a> </li>
                                <li> <a href="facilities.php">Facilities</a> </li>
                                <li> <a href="careers.php">Careers</a> </li>
                                <li> <a href="contact-us.php">Contact Us</a> </li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 col-sm-6 col-12 mt--30">
                        <div class="footer-widget">
                            <h5 class="ft-title text-center text-lg-start">Get Contact</h5>
                            <ul class="ft-link text-center text-lg-start">
                                <li><span>Phone:</span> <a href="tel:9976477520">(+91) 99764 77520</a></li>
                                <li><span>E-mail:</span> <a href="mailto:vmmschool@gmail.com">vmmschool@gmail.com</a>
                                </li>
                                <li><span>Location:</span> <a href="https://goo.gl/maps/QDLbFpMsQZxERTzm9"
                                        target="_blank">Tharamangalam, Salem.</a></li>
                            </ul>
                            <ul
                                class="social-icon social-default icon-naked justify-content-center  justify-content-lg-start mt--20">
                                <li><a href="https://www.facebook.com/vethathirimaharishismartschool" target="_blank">
                                        <i class="feather-facebook"></i> </a> </li>
                                <li><a href="https://www.instagram.com/vethathirimaharishismartschool/" target="_blank">
                                        <i class="feather-instagram"></i> </a> </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <div class="rbt-separator-mid">
        <div class="container">
            <hr class="rbt-separator m-0">
        </div>
    </div>
    <div class="copyright-area copyright-style-1 ptb--20">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xxl-8 col-xl-8 col-lg-8 col-md-12 col-12">
                    <p class="rbt-link-hover text-lg-start text-center">© 2023 All
                        Rights
                        Reserved | Designed
                        with <i class="fa fa-heart text-danger"></i> by <a href="http://thedotstudios.com/"
                            target="_blank">TheDotStudios</a></p>
                </div>
                <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 col-12">
                    <ul
                        class="social-icon social-default icon-naked justify-content-center  justify-content-lg-end  m-0">
                        <li><a href="https://www.facebook.com/thedotstudios/" target="_blank"> <i
                                    class="feather-facebook"></i> </a>
                        </li>
                        <li><a href="https://mobile.twitter.com/thedotstudios"> <i class="feather-twitter"
                                    target="_blank"></i> </a>
                        </li>
                        <li><a href="https://www.instagram.com/thedotstudios/"> <i class="feather-instagram"
                                    target="_blank"></i>
                            </a> </li>
                        <li><a href="https://in.linkedin.com/company/thedotstudios"> <i class="feather-linkedin"
                                    target="_blank"></i> </a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="rbt-progress-parent">
        <svg class="rbt-back-circle svg-inner" width="100%" height="100%" viewBox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
        </svg>
    </div>
    <script src="assets/js/vendor/modernizr.min.js"></script>
    <script src="assets/js/vendor/jquery.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <script src="assets/js/vendor/sal.js"></script>
    <script src="assets/js/vendor/swiper.js"></script>
    <script src="assets/js/vendor/magnify.min.js"></script>
    <script src="assets/js/vendor/jquery-appear.js"></script>
    <script src="assets/js/vendor/odometer.js"></script>
    <script src="assets/js/vendor/backtotop.js"></script>
    <script src="assets/js/vendor/isotop.js"></script>
    <script src="assets/js/vendor/imageloaded.js"></script>
    <script src="assets/js/vendor/wow.js"></script>
    <script src="assets/js/vendor/waypoint.min.js"></script>
    <script src="assets/js/vendor/easypie.js"></script>
    <script src="assets/js/vendor/text-type.js"></script>
    <script src="assets/js/vendor/jquery-one-page-nav.js"></script>
    <script src="assets/js/vendor/bootstrap-select.min.js"></script>
    <script src="assets/js/vendor/jquery-ui.js"></script>
    <script src="assets/js/vendor/magnify-popup.min.js"></script>
    <script src="assets/js/vendor/paralax-scroll.js"></script>
    <script src="assets/js/vendor/paralax.min.js"></script>
    <script src="assets/js/vendor/countdown.js"></script>
    <script src="assets/js/main.js"></script>
</body>

</html>