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

<head>
    <meta charset="utf-8">
    <title>Cruise Kerala - Blogs</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;
    }
       #head{
            width: 150px;
            height:65px;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 15px;
         
        }
    </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.html" 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 ms-auto me-0" 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">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 -->


 


    <!-- Blog Start -->
    <div class="container-fluid py-5 blog-section">
        <div class="container py-5">
            <div class="text-center mx-auto mb-5 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
                <h1 class="mb-3">Latest From Our <span class="text-primary">Blog</span></h1>
                <p>Discover stories, tips, and guides about Kerala Houseboat tourism.</p>
            </div>
            <div class="row g-4">
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                    <div class="blog-item rounded">
                        <div class="blog-img position-relative">
                            <img class="img-fluid" src="img/about-1.jpg" alt="">
                            <a class="position-absolute top-0 start-0 bg-primary text-white rounded-end mt-5 py-2 px-4" href="#">Houseboats</a>
                        </div>
                        <div class="p-4">
                            <div class="d-flex mb-3">
                                <small class="me-3"><i class="far fa-user text-primary me-2"></i>Admin</small>
                                <small><i class="far fa-calendar-alt text-primary me-2"></i>01 Jan, 2025</small>
                            </div>
                            <h4 class="mb-3">A Guide to Houseboat Categories</h4>
                            <p>Understanding the difference between Deluxe, Premium, and Luxury houseboats to choose the best one for your trip.</p>
                            <a class="text-uppercase" href="#">Read More <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
                    <div class="blog-item rounded">
                        <div class="blog-img position-relative">
                            <img class="img-fluid" src="img/about-2.jpg" alt="">
                            <a class="position-absolute top-0 start-0 bg-primary text-white rounded-end mt-5 py-2 px-4" href="#">Travel</a>
                        </div>
                        <div class="p-4">
                            <div class="d-flex mb-3">
                                <small class="me-3"><i class="far fa-user text-primary me-2"></i>Admin</small>
                                <small><i class="far fa-calendar-alt text-primary me-2"></i>15 Feb, 2025</small>
                            </div>
                            <h4 class="mb-3">Top 5 Backwater Routes in Alleppey</h4>
                            <p>Explore the most scenic routes through the backwaters, from narrow canals to vast lakes.</p>
                            <a class="text-uppercase" href="#">Read More <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="blog-item rounded">
                        <div class="blog-img position-relative">
                            <img class="img-fluid" src="img/about-3.jpg" alt="">
                            <a class="position-absolute top-0 start-0 bg-primary text-white rounded-end mt-5 py-2 px-4" href="#">Food</a>
                        </div>
                        <div class="p-4">
                            <div class="d-flex mb-3">
                                <small class="me-3"><i class="far fa-user text-primary me-2"></i>Chef Mike</small>
                                <small><i class="far fa-calendar-alt text-primary me-2"></i>20 Mar, 2025</small>
                            </div>
                            <h4 class="mb-3">Authentic Kerala Cuisine on Board</h4>
                            <p>A look into the delicious traditional meals served on our houseboats, including the famous Karimeen Pollichathu.</p>
                            <a class="text-uppercase" href="#">Read More <i class="bi bi-arrow-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Blog End -->

    <!-- 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/about-1.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 -->

    <!-- 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="https://www.facebook.com/cruisekerala.official"><i class="fab fa-facebook-f"></i></a>
                        <a class="btn btn-outline-primary btn-square border-2 me-2" href="https://www.youtube.com/@CruiseKerala"><i class="fab fa-youtube"></i></a>
                        <a class="btn btn-outline-primary btn-square border-2" href="https://www.instagram.com/cruise_kerala"><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 -->

    <!-- 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-3 rounded mb-3 align-self-start" style="max-width: 80%;">
                    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>

    <!-- 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 -->

   


    <!-- 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>

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

    <!-- Initialize WOW.js -->
    <script>
        new WOW().init();
    </script>
</body>

</html>