
<?php
include("config/db.php");
$result = mysqli_query($conn, "SELECT * FROM services ORDER BY id DESC");
?>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Cruise Kerala - Premium Houseboat Experiences</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="" name="keywords">
    <meta content="" name="description">

    <!-- Favicon -->
    <link href="img/favicon.ico" rel="icon">

    <!-- Google Web Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Space+Grotesk&display=swap" rel="stylesheet">

    <!-- Icon Font Stylesheet -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

    <!-- Libraries Stylesheet -->
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">

    <!-- Customized Bootstrap Stylesheet -->    
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
    <style>
        /* Popup Background */
.booking-popup{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Popup Box */
.booking-popup-content{
    background: #fff;
    max-width: 800px;
    width: 90%;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

/* Close Button */
.btn-close-popup{
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    border: none;
    background: none;
    cursor: pointer;
}
.logo-img{
    max-height:50px;
    width:auto;
}

/* Mobile Fix */
@media (max-width: 768px){
    .logo-img{
        max-height:40px;
    }
}
 
    .booking-popup .thank-you-message {
        padding: 40px;
        min-height: 330px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: #f8faff;
        border-radius: 15px;
        animation: fade-in 0.5s ease;
    }
    .hero-header {
        position: relative;
        overflow: hidden;
        background: none !important;
    }
    .hero-video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: -1;
        z-index: 0;
        transform: translate(-50%, -50%);
        object-fit: cover;
    }
    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.63);
        z-index: -1;
        z-index: 0;
    }
   #head{
            width: 150px;
            height:65px;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 15px;
         
        }
        #hometxt h1{
         font-weight:300;
         
        }
    </style>
</head>

<body>
    <!-- Spinner Start -->
    <div id="spinner"
        class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
        <div class="spinner-grow text-primary" style="width: 3rem; height: 3rem;" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <!-- Spinner End -->

     <div class="top-bar">
        <div class="container">
            <div class="left-info">
                <span class="company-name">Cruise Kerala</span>
                <span><i class="fas fa-phone me-2"></i><a href="tel:+919526788688" style="color: inherit; text-decoration: none;">+91 95267 88688</a> / <a href="tel:+918086788688" style="color: inherit; text-decoration: none;">+91 80867 88688</a></span>
                <span class="ms-3"><i class="fas fa-envelope me-2"></i><a href="mailto:cruisekerala.info@gmail.com" style="color: inherit; text-decoration: none;">cruisekerala.info@gmail.com</a></span>
                <span class="ms-3"><i class="fas fa-tag me-2"></i><a href="#" id="topBarQuote" style="color: inherit; text-decoration: none;">Get a Free Quote</a></span>
            </div>
    
            <div class="right-social">
                <a href="tel:+919526788688"><i class="fas fa-phone-alt"></i></a>
                <a href="https://wa.me/919526788688" target="_blank"><i class="fab fa-whatsapp"></i></a>
                <a href="https://www.facebook.com/cruisekerala.official"><i class="fab fa-facebook-f"></i></a>
                <a href="https://www.instagram.com/cruise_kerala"><i class="fab fa-instagram"></i></a>
                <a href="https://www.youtube.com/@CruiseKerala"><i class="fab fa-youtube"></i></a>
            </div>
        </div>
    </div>
    <!-- Top Header End -->


    <!-- Navbar Start -->

    <div class="container-fluid sticky-top">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light border-bottom border-2 border-white">
                <a href="index.php" class="navbar-brand" id="head">
<img src="img/oglogo2.png" alt="Cruise Kerala Logo" width="110px" height="60px">
</a>
                <button type="button" class="navbar-toggler" data-bs-toggle="collapse"
                    data-bs-target="#navbarCollapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <div class="navbar-nav mx-auto">
                        <a href="index.php" class="nav-item nav-link active">Home</a>
                        <a href="about.php" class="nav-item nav-link">About</a>
                        <a href="service.php" class="nav-item nav-link">Services</a>
                        <a href="gallery.php" class="nav-item nav-link">Gallery</a>
                         <a href="blog.php" class="nav-item nav-link">Blogs</a>
                        <a href="contact.php" class="nav-item nav-link">Contact Us</a>
                    </div>
                    <div class="d-flex align-items-center">
                        <div class="nav-social-icons">
                            <a href="https://www.instagram.com/cruise_kerala" target="_blank"><i class="fab fa-instagram"></i></a>
                            <a href="https://www.facebook.com/cruisekerala.official" target="_blank"><i class="fab fa-facebook-f"></i></a>
                            <a href="https://www.youtube.com/@CruiseKerala" target="_blank"><i class="fab fa-youtube"></i></a>
                        </div>
                        <a href="#" id="navBookNow" class="btn btn-primary rounded-pill py-2 px-3">Book Now</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <!-- Navbar End -->


    <!-- Hero Start -->
    <div class="container-fluid pb-5 hero-header page-header-home mb-5">
        <video autoplay muted loop playsinline class="hero-video">
            <source src="vdo/bg7.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="hero-overlay"></div>
        <div class="container py-5" style="position: relative; z-index: 1;">
            <div class="row g-5 align-items-center mb-5">
                <div class="col-lg-6 text-center text-lg-start" id="hometxt">
                    <h1 class="display-1 mb-4 animated slideInLeft"> Experience  <span class="text-primary">South Indian</span>
                        Backwaters</h1>
                    <h5 class="d-inline-block py-3 px-5 mb-0 animated slideInLeft hero-subtitle text-primary">
                       Sail Through Nature’s Paradise</h5>
                    <a href="#" id="navBookNow" class="btn btn-primary py-3 px-5 mt-4 animated slideInLeft btn-book-now">BookNow</a>
                </div>
                <div class="col-lg-6 d-none d-md-block">
                    <div class="owl-carousel header-carousel animated slideInRight" id="homebg">
                        <img class="img-fluid" src="img/home-1.jpg" alt="">
                        <img class="img-fluid" src="img/home-2.jpg" alt="">
                        <img class="img-fluid" src="img/home-3.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero End -->


    <!-- About Start -->
    <section class="about-sec"> <div class="container-fluid py-5">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6">
                    <div class="row align-items-end">
                        <div class="col-6 wow fadeIn" data-wow-delay="0.1s">
                            <img class="img-fluid w-100" src="img/about-4.jpg" alt="" style="height: 410px; object-fit: cover;" loading="lazy">
                        </div>
                        <div class="col-6 wow fadeIn" data-wow-delay="0.3s">
                            <img class="img-fluid w-100" src="img/about.5.jpg" alt="" style="height: 290px; object-fit: cover;" loading="lazy">
                            <div class="d-flex align-items-center text-center bg-primary p-4" style="height: 120px;">
                                <h4 class="text-white lh-base mb-0"><span data-toggle="counter-up">100</span>+<br> Happy  Customers</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s" id="about-sec">
                    <h1 class="mb-5">Welcome to <span class="text-uppercase text-primary">Cruise Kerala</span></h1>
                    <p class="mb-4">Welcome to the world of serenity and breathtaking vistas. Our houseboats, traditionally known as 'Kettuvallams', were once used to carry rice and spices. Today, they are transformed into floating luxury hotels. Glide through the emerald green waters of South India, witnessing the rustic charm of village life, vast paddy fields, and ancient temples. We promise an experience that is as authentic as it is luxurious.</p>
     
                    <div class="row g-3">
                        <div class="col-sm-6">
                            <h6 class="mb-3"><i class="fa fa-check text-primary me-2"></i>Premium Service</h6>
                            <h6 class="mb-0"><i class="fa fa-check text-primary me-2"></i>Expert Captains</h6>
                        </div>
                        <div class="col-sm-6">
                            <h6 class="mb-3"><i class="fa fa-check text-primary me-2"></i>24/7 Support</h6>
                            <h6 class="mb-0"><i class="fa fa-check text-primary me-2"></i>Affordable Packages</h6>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mt-5">
                        <a class="btn btn-primary btn-read-more px-4 me-2 btn-pulse" href="contact.php">Book Now</a>
                        <a class="btn btn-outline-primary btn-square border-2 me-2" href="#!"><i
                                class="fab fa-facebook-f"></i></a>
                        <a class="btn btn-outline-primary btn-square border-2" href="#!"><i
                                class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </section>
    <!-- About End -->


    <!-- Feature Start -->
    <div class="container-fluid py-5" id="sevice">
        <div class="container">
            <div class="text-center wow fadeIn" data-wow-delay="0.1s">
                <h1 class="mb-5">Why People <span class="text-uppercase text-primary">Choose Us</span>
                </h1>
            </div>
            <div class="row g-5 align-items-center text-center">
                <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay="0.1s">
                    <div class="feature-item">
                        <i class="fa fa-users fa-5x text-primary mb-4"></i>
                        <h4><span data-toggle="counter-up">100</span>+ Happy Customers</h4>
                        <p class="mb-0">Serving happy customers with memorable backwater experiences for over two decades.</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay="0.3s">
                    <div class="feature-item">
                        <i class="fa fa-route fa-5x text-primary mb-4"></i>
                        <h4>Scenic Routes</h4>
                        <p class="mb-0">Explore the hidden gems of India's waterways with our curated cruise paths.</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay="0.5s">
                    <div class="feature-item">
                        <i class="fa fa-utensils fa-5x text-primary mb-4"></i>
                        <h4>Delicious Cuisine</h4>
                        <p class="mb-0">Enjoy authentic Indian cuisine prepared fresh on board by our expert chefs.</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay="0.1s">
                    <div class="feature-item">
                        <i class="fa fa-user fa-5x text-primary mb-4"></i>
                        <h4>Customer Satisfaction</h4>
                        <p class="mb-0">Our priority is your comfort and happiness. We strive to provide the best service.</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay="0.3s">
                    <div class="feature-item">
                        <i class="fa fa-hand-holding-usd fa-5x text-primary mb-4"></i>
                        <h4>Budget Friendly</h4>
                        <p class="mb-0">We offer a range of packages to suit every budget without compromising on quality.</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4 wow fadeIn" data-wow-delay="0.5s">
                    <div class="feature-item">
                        <i class="fa fa-life-ring fa-5x text-primary mb-4"></i>
                        <h4>Safety First</h4>
                        <p class="mb-0">Our boats are equipped with all necessary safety gear and operated by trained staff.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Feature End -->


    <!-- Project Start -->
   <section class="premium-section">
    <div class="container">
        <h2 class="section-title">Our Services</h2>
        <p class="section-subtitle">Luxury • Comfort • Experience Indian Backwaters</p>

        <div class="boat-grid">
            <?php
            if ($result && mysqli_num_rows($result) > 0) {
                $delay = 0.1;
                while ($row = mysqli_fetch_assoc($result)) {
            ?>
                    <div class="boat-card wow fadeInUp" data-wow-delay="<?php echo $delay; ?>s">
                        <img src="admin/uploads/<?php echo htmlspecialchars($row['image']); ?>" alt="<?php echo htmlspecialchars($row['title']); ?>" loading="lazy">
                        <div class="boat-content">
                            <h3><?php echo htmlspecialchars($row['title']); ?></h3>
                            <p><?php echo htmlspecialchars($row['description']); ?></p>
                            <a href="#" class="book-btn gallery-booking-trigger">Book Now</a>
                        </div>
                    </div>
            <?php
                    $delay += 0.2;
                    if ($delay > 0.5) { // Reset delay for next row
                        $delay = 0.1;
                    }
                }
            } else {
                echo '<p class="text-center col-12">No special services available at the moment. Please check back later.</p>';
            }
            ?>
        </div>
    </div>
</section>
    <!-- Project End -->


    <!-- Service Start -->
    <div class="container-fluid py-5" id="premium-service">
        <div class="container py-5">
            <div class="row g-5 align-items-center">
                <div class="col-lg-5 wow fadeIn" data-wow-delay="0.1s">
                    <h1 class="mb-5">Our Premium <span
                            class="text-uppercase text-primary">Services</span></h1>
                    <p class="mb-5">We provide a wide range of services to make your backwater experience unforgettable. From day cruises to overnight stays, we have it all covered with top-notch hospitality.</p>
                    <div class="d-flex align-items-center bg-light">
                        <div class="btn-square flex-shrink-0 bg-primary" style="width: 100px; height: 100px;">
                            <i class="fa fa-phone fa-2x text-white"></i>
                        </div>
                        <div class="px-3">
                            <h3><a href="tel:+919526788688" style="color: inherit; text-decoration: none;">+91 95267 88688</a></h3>
                            <span>Call us direct 24/7 for get a free consultation</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="row g-0">
                        <div class="col-md-6 wow fadeIn" data-wow-delay="0.2s">
                            <div class="service-item h-100 d-flex flex-column justify-content-center bg-primary">
                                <a href="day-cruises.html" class="service-img position-relative mb-4">
                                    <img class="img-fluid w-100" src="img/day.jpg" alt="" loading="lazy">
                                    <h3>Day Cruises</h3>
                                </a>
                                <p class="mb-0">Enjoy a relaxing day out on the backwaters with lunch and tea. <br>11am to 5pm</p>
                            </div>
                        </div>
                        <div class="col-md-6 wow fadeIn" data-wow-delay="0.4s">
                            <div class="service-item h-100 d-flex flex-column justify-content-center bg-light">
                                <a href="overnight-stays.html" class="service-img position-relative mb-4">
                                    <img class="img-fluid w-100" src="img/overnight.jpg" alt="" loading="lazy">
                                    <h3>Overnight Stays</h3>
                                </a>
                                <p class="mb-0">Experience the magic of the backwaters under the stars. <br>5:30pm to 9 am</p>
                            </div>
                        </div>
                        <div class="col-md-6 wow fadeIn" data-wow-delay="0.6s">
                            <div class="service-item h-100 d-flex flex-column justify-content-center bg-light">
                                <a href="day-and-night-cruise.html" class="service-img position-relative mb-4">
                                    <img class="img-fluid w-100" src="img/day night3.jpg" alt="" loading="lazy">
                                    <h3>Day & Night Cruise</h3>
                                </a>
                                <p class="mb-0">Relax with a one-night houseboat stay and scenic cruise 12pm to 9am</p>
                            </div>
                        </div>
                        <div class="col-md-6 wow fadeIn" data-wow-delay="0.8s">
                            <div class="service-item h-100 d-flex flex-column justify-content-center bg-primary">
                                <a href="birthday-and-private-parties.html" class="service-img position-relative mb-4">
                                    <img class="img-fluid w-100" src="img/wedding shoot.jpg" alt="" loading="lazy">
                                    <h3>Birthday & Private Parties</h3>
                                </a>
                                <p class="mb-0">Celebrate Your Special Moments on a Private Luxury Houseboat.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Service End -->

    <!-- Destination Start -->
    <div class="container-fluid py-5 bg-fixed-image">
        <div class="container">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                <h1 class="mb-5">Popular <span class="text-primary text-uppercase">Destinations</span></h1>
            </div>
            <div class="row g-4 justify-content-center">
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="position-relative rounded overflow-hidden destination-item">
                        <img class="img-fluid w-100" src="img/allepy.jpg" alt="" style="height: 250px; object-fit: cover;" loading="lazy">
                        <div class="position-absolute bottom-0 start-0 w-100 p-3 text-center" style="background: rgba(0,0,0,0.7);">
                            <h5 class="text-white mb-0">Alleppey Backwaters</h5>
                            <small class="text-white-50">Venice of the East</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="position-relative rounded overflow-hidden destination-item">
                        <img class="img-fluid w-100" src="img/kumarakam.jpg" alt="" style="height: 250px; object-fit: cover;" loading="lazy">
                        <div class="position-absolute bottom-0 start-0 w-100 p-3 text-center" style="background: rgba(0,0,0,0.7);">
                            <h5 class="text-white mb-0">Kumarakom Lake</h5>
                            <small class="text-white-50">Bird Sanctuary & Serenity</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="position-relative rounded overflow-hidden destination-item">
                        <img class="img-fluid w-100" src="img/ashtamudi.jpg" alt="" style="height: 250px; object-fit: cover;" loading="lazy">
                        <div class="position-absolute bottom-0 start-0 w-100 p-3 text-center" style="background: rgba(0,0,0,0.7);">
                            <h5 class="text-white mb-0">Kollam Ashtamudi</h5>
                            <small class="text-white-50">Gateway to Backwaters</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="position-relative rounded overflow-hidden destination-item">
                        <img class="img-fluid w-100" src="img/kannur.png" alt="" style="height: 250px; object-fit: cover;" loading="lazy">
                        <div class="position-absolute bottom-0 start-0 w-100 p-3 text-center" style="background: rgba(0,0,0,0.7);">
                            <h5 class="text-white mb-0">Kannur</h5>
                            <small class="text-white-50">Gateway to Backwaters</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="position-relative rounded overflow-hidden destination-item">
                        <img class="img-fluid w-100" src="img/allepy.jpg" alt="" style="height: 250px; object-fit: cover;" loading="lazy">
                        <div class="position-absolute bottom-0 start-0 w-100 p-3 text-center" style="background: rgba(0,0,0,0.7);">
                            <h5 class="text-white mb-0">Neeleshwaram</h5>
                            <small class="text-white-50">Gateway to Backwaters</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Destination End -->

   
    <!-- Cuisine Start -->
    <div class="container-fluid py-5 cuisine-section">
        <div class="container">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                <h1 class="mb-5">Authentic <span class="text-primary text-uppercase">South Indian Cuisine</span></h1>
            </div>
            <div class="row g-4 align-items-center">
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="d-flex align-items-center mb-4 cuisine-item">
                        <div class="flex-shrink-0 btn-square bg-primary rounded-circle me-3">
                            <i class="fa fa-utensils text-white"></i>
                        </div>
                        <div>
                            <h5 class="mb-1">Traditional Kerala Sadya</h5>
                            <p class="mb-0">Relish a wholesome vegetarian feast served on a banana leaf, featuring an array of curries, rice, and payasam.</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-4 cuisine-item">
                        <div class="flex-shrink-0 btn-square bg-primary rounded-circle me-3">
                            <i class="fa fa-fish text-white"></i>
                        </div>
                        <div>
                            <h5 class="mb-1">Karimeen Pollichathu</h5>
                            <p class="mb-0">Our signature dish! Pearl Spot fish marinated in spicy masala, wrapped in banana leaves, and grilled to perfection.</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mb-4 cuisine-item">
                        <div class="flex-shrink-0 btn-square bg-primary rounded-circle me-3">
                            <i class="fa fa-coffee text-white"></i>
                        </div>
                        <div>
                            <h5 class="mb-1">Evening Tea & Snacks</h5>
                            <p class="mb-0">Enjoy the sunset with hot tea/coffee and traditional snacks like Banana Fritters (Pazham Pori).</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="row g-3">
                        <div class="col-6">
                            <img class="img-fluid rounded w-100" src="img/karimeen1.jpg" alt="Cuisine 1" style="height: 370px; object-fit: cover;" loading="lazy">
                        </div>
                        <div class="col-6">
                            <img class="img-fluid rounded w-100" src="img/tea.jpg" alt="Cuisine 2" style="height: 370px; object-fit: cover;" loading="lazy">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Cuisine End -->

    <!-- Testimonial Start -->
    <div class="container-fluid testimonial-section py-5">
        <div class="container">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                <h1 class="mb-3">What Our <span class="text-primary">Guests</span> Say</h1>
                <p>Read the experiences of our happy customers who enjoyed their stay with us.</p>
            </div>
            <div class="owl-carousel testimonial-carousel wow fadeInUp" data-wow-delay="0.1s">
                <?php
                $reviews = mysqli_query($conn, "SELECT * FROM reviews ORDER BY id DESC");
                if ($reviews && mysqli_num_rows($reviews) > 0) {
                    while ($row = mysqli_fetch_assoc($reviews)) {
                ?>
                        <div class="testimonial-item text-center">
                            <img class="img-fluid rounded-circle mx-auto mb-4" 
                                 src="admin/uploads/<?php echo htmlspecialchars($row['image']); ?>" 
                                 style="width:100px;height:100px;object-fit:cover;"
                                 alt="Review from <?php echo htmlspecialchars($row['name']); ?>">
                            <p class="fs-5">
                                <?php echo htmlspecialchars($row['review']); ?>
                            </p>
                            <h5 class="mb-1"><?php echo htmlspecialchars($row['name']); ?></h5>
                            <span class="fst-italic">
                                <?php echo htmlspecialchars($row['place']); ?>
                            </span>
                        </div>
                <?php
                    }
                } else {
                    // Optional: show a message if there are no reviews
                    echo '<div class="testimonial-item text-center"><p>No reviews yet. Be the first to write one!</p></div>';
                }
                ?>
            </div>
        </div>
    </div>
    <!-- Testimonial End -->    

   



    <!-- Footer Start -->
    <div class="container-fluid bg-dark text-white-50 footer pt-5">
        <div class="container py-5">
            <div class="row g-5">
                <div class="col-md-6 col-lg-3 wow fadeIn" data-wow-delay="0.1s">
                      <a href="index.php" class="d-inline-block mb-3" style="background: #fff; padding: 5px; border-radius: 5px;">
                        <img src="img/oglogo2.png" alt="Cruise Kerala Logo" style="max-height: 40px;">
                </a>
                    <p class="mb-0">Your gateway to the beautiful backwaters of India. We provide premium houseboat services with a focus on comfort and safety.</p>
                </div>
                <div class="col-md-6 col-lg-3 wow fadeIn" data-wow-delay="0.3s">
                    <h5 class="text-white mb-4">Get In Touch</h5>
                    <p><i class="fa fa-map-marker-alt me-3"></i>Cruise Kerala, Head Office, Punnamada, Alappuzha – 688006</p>
                    <p><i class="fa fa-phone-alt me-3"></i>+91 95267 88688, +91 80867 88688</p>
                    <p><i class="fa fa-envelope me-3"></i>cruisekerala.info@gmail.com</p>
                    <div class="d-flex pt-2">
                        <a class="btn btn-outline-primary btn-square border-2 me-2" href="#!"><i
                                class="fab fa-facebook-f"></i></a>
                        <a class="btn btn-outline-primary btn-square border-2 me-2" href="#!"><i
                                class="fab fa-youtube"></i></a>
                        <a class="btn btn-outline-primary btn-square border-2" href="#!"><i
                                class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div class="col-md-6 col-lg-3 wow fadeIn" data-wow-delay="0.5s">
                    <h5 class="text-white mb-4">Popular Link</h5>
                    <a class="btn btn-link" href="about.php">About Us</a>
                    <a class="btn btn-link" href="service.php">Services</a>
                    <a class="btn btn-link" href="gallery.php">Gallery</a>
                    <a class="btn btn-link" href="blog.php">Blogs</a>
                    <a class="btn btn-link" href="contact.php">Contact Us</a>
                    <a class="btn btn-link" href="terms.html">Terms & Condition</a>
                </div>
                <div class="col-md-6 col-lg-3 wow fadeIn" data-wow-delay="0.7s">
                    <h5 class="text-white mb-4">Our Services</h5>
                    <a class="btn btn-link" href="day-cruises.html">Day Cruises</a>
                    <a class="btn btn-link" href="overnight-stays.html">Overnight Stays</a>
                    <a class="btn btn-link" href="honeymoon-special.html">Honeymoon Special</a>
                    <a class="btn btn-link" href="corporate-events.html">Corporate & Group Events</a>
                </div>
            </div>
        </div>
        <div class="container wow fadeIn" data-wow-delay="0.1s">
            <div class="copyright">
                <div class="row">
                    <div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
                        &copy; <a class="border-bottom" href="#!">Cruise Kerala</a>, All Right Reserved.
                    </div>
                   
                </div>
            </div>
        </div>
    </div>
    <!-- Footer End -->


    <!-- Floating Buttons Start -->
    <div class="floating-buttons">
        <div class="floating-menu">
            <a href="tel:+919526788688" class="btn btn-primary btn-lg-square"><i class="bi bi-telephone-fill"></i></a>
            <a href="https://wa.me/919526788688" target="_blank" class="btn btn-success btn-lg-square"><i class="bi bi-whatsapp"></i></a>
            <a href="#!" class="btn btn-primary btn-lg-square chat-boat"><i class="bi bi-chat-dots"></i></a>
        </div>
        <button class="btn btn-primary btn-lg-square floating-toggle" id="floating"><i class="bi bi-chat-square-text"></i></button>
    </div>
    <!-- Floating Buttons End -->

    <!-- Chat Window -->
    <div class="chat-window">
        <div class="chat-header">
            <h5 class="text-white mb-0">Chat with us</h5>
            <button type="button" class="btn-close btn-close-white"></button>
        </div>
        <div class="chat-body">
            <div class="d-flex flex-column">
                <div class="bg-light p-1 rounded mb-1 align-self-start" style="max-width: 30%;">
                    Hello! How can I help you with your houseboat booking today?
                </div>
            </div>
        </div>
        <div class="chat-footer">
            <input type="text" class="form-control" placeholder="Type a message...">
            <button class="btn btn-primary"><i class="bi bi-send"></i></button>
        </div>
    </div>

    <!-- Booking Popup Start -->
    <div id="bookingPopup" class="booking-popup">
        <div class="booking-popup-content">
            <div class="row g-0">
                <div class="col-lg-5 d-none d-lg-block">
                    <img src="img/booking.jpg" class="img-fluid h-100" alt="Houseboat" style="object-fit: cover; border-radius: 15px 0 0 15px;">
                </div>
                <div class="col-lg-7 p-5 position-relative">
                    <button type="button" class="btn-close-popup" id="closePopup">&times;</button>
                    <div class="text-center mb-4">
                        <h4 class="text-primary">Book Your Houseboat</h4>
                        <p class="mb-0">Fill in the details below to get a quote</p>
                    </div>
                    <form id="bookingPopupForm" method="POST">
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control" id="popupName" name="popupName" placeholder="Your Name" required>
                            <label for="popupName">Your Name</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="tel" class="form-control" id="popupPhone" name="popupPhone" placeholder="Phone Number" required>
                            <label for="popupPhone">Phone Number</label>
                        </div>
                        <div class="form-floating mb-3">
                            <select class="form-select" id="popupBoat" name="popupBoat" required>
                                <option value="" selected disabled>Select Boat</option>
                                <option value="Deluxe">Deluxe Houseboat</option>
                                <option value="Premium">Premium Houseboat</option>
                                <option value="Luxury">Luxury Houseboat</option>
                            </select>
                            <label for="popupBoat">Select Boat</label>
                        </div>
                        <button type="submit" class="btn btn-primary w-100 py-3">Book Now</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Booking Popup End -->

    <!-- JavaScript Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="lib/wow/wow.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/waypoints/waypoints.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>

    <!--  Javascript -->
    <script src="js/main.js"></script>

    <script>
         new WOW().init();
    </script>
    
    <script>
        document.addEventListener('mousemove', function(e) {
            let moveX = (e.clientX / window.innerWidth - 0.5) * 40; // Movement range -20px to 20px
            let moveY = (e.clientY / window.innerHeight - 0.5) * 40; // Movement range -20px to 20px

            // Animate Hero Section
            const homeText = document.getElementById('hometxt');
            const homeBg = document.getElementById('homebg');
            if (homeText) {
                homeText.style.transform = `translateX(${moveX * -0.5}px) translateY(${moveY * -0.5}px)`;
            }
            if (homeBg) {
                homeBg.style.transform = `translateX(${moveX * 0.75}px) translateY(${moveY * 0.75}px)`;
            }

            // Animate About Section
            const aboutImages = document.querySelectorAll('.about-sec .col-lg-6:first-child .wow');
            const aboutText = document.getElementById('about-sec');
            
            aboutImages.forEach(img => {
                img.style.transform = `translateX(${moveX * 0.5}px) translateY(${moveY * 0.5}px)`;
            });

            if (aboutText) {
                aboutText.style.transform = `translateX(${moveX * -0.5}px) translateY(${moveY * -0.5}px)`;
            }
        });
        
    </script>
    <script>
        $(document).ready(function () {
            setTimeout(function () {
                $('#navBookNow').trigger('click');
            }, 2000); // 5000ms = 3 seconds
        });
    </script>
</body>

</html>