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


<head>
    <title>Sales Basket ::Home</title>
    <link rel="icon" href="images/icon.webp" type="image/gif" sizes="16x16">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0" name="viewport" >
    <meta content="" name="description" >
    <meta content="" name="keywords" >
    <meta content="" name="author" >
    <!-- CSS Files
    ================================================== -->
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" id="bootstrap">
    <link href="css/plugins.css" rel="stylesheet" type="text/css" >
    <link href="css/swiper.css" rel="stylesheet" type="text/css" >
    <link href="css/style.css" rel="stylesheet" type="text/css" >
    <link href="css/coloring.css" rel="stylesheet" type="text/css" >
    <link href="css/swiper-custom-1.css" rel="stylesheet" type="text/css" >
    <link href="css/colors/scheme-01.css" id="colors" rel="stylesheet" type="text/css" >
    <link href="css/datepicker.css" rel="stylesheet" type="text/css" >
</head>

<body>

   <?php 
// Database connection for gallery
$galleryItems = [];
$dbError = false;

// Database configuration
$host = 'localhost';
$dbname = 'godsonin_real_state';
$username = 'godsonin_real';
$password = 'Nitin@321';

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // Fetch all gallery images (limit to 6 for the homepage)
    $stmt = $pdo->query("
        SELECT gi.*, gc.name as category_name 
        FROM gallery_images gi
        LEFT JOIN gallery_categories gc ON gi.category_id = gc.id
        ORDER BY gi.uploaded_at DESC
        LIMIT 6
    ");
    $galleryItems = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    error_log("Database error: " . $e->getMessage());
    $dbError = true;
}

include 'header.php'; 
?>
    
    <main>
        <a href="#" id="back-to-top"></a>
        <!-- page preloader begin -->
        <div id="de-loader"></div>
        <!-- page preloader close -->

        <section class="bg-dark-1 text-light no-top no-bottom relative overflow-hidden mt-80 mt-sm-50">
            <div class="mh-800">
                <div class="abs w-100 py-5 mt-3 z-3">
                    <div class="container">
                        <div class="row g-4 justify-content-between">
                            <div class="col-md-7">
                                <h1 class="fs-72 fs-xs-10vw lh-1-1 split">Sales Basket – Building Trust, Delivering Value</h1>
                            </div>
                            <div class="col-md-3 xs-hide">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="abs bottom-0 w-100 py-5 mt-3 z-3">
                    <div class="container">
                        <div class="row justify-content-end align-items-end">
                            <div class="col-lg-6">
                                <h5 class="mb-lg-0 mb-sm-5 wow fadeIn" data-wow-delay=".5s">Lucknow’s Trusted Real Estate Partner for Over 10 Years <br></h5>
                            </div>
                            <div class="col-lg-6">
                                <div class="p-4 bg-blur rounded-1 h-100 wow zoomIn">
                                    <div class="row g-4 align-items-center">
                                        <div class="col-6">
                                            <img src="images/misc/s1.webp" class="w-100 rounded-1 wow scaleIn" alt="">
                                        </div>
                                        <div class="col-6">
                                            <h3>Talk to Our Property Expert Today</h3>
                                            <p class="xs-hide">Thoughtfully designed homes that look great, perform well, and fit your lifestyle perfectly every day.</p>
                                            <a class="btn-main fx-slide text-dark" href="contact.php"><span>Schedule Visit</span></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wm abs-center z-2 fw-600 text-uppercase">
                    for sale
                </div>
                <div class="swiper wow scaleIn">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="swiper-inner" data-bgimage="url(images/slider/1.webp) center">
                                <div class="sw-overlay op-4"></div>
                                <div class="gradient-edge-left z-2"></div>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="swiper-inner" data-bgimage="url(images/slider/2.webp) center">
                                <div class="sw-overlay op-4"></div>
                                <div class="gradient-edge-left z-2"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


      <section class="about-eco-section position-relative overflow-hidden py-5">
  <div class="container">
    <div class="row g-5 align-items-center">

      <!-- LEFT CONTENT -->
      <div class="col-lg-6 wow animate__animated animate__fadeInLeft">
        <span class="badge eco-badge mb-3">About Sales Basket</span>
        <h2 class="eco-heading mb-4">
         Your One-Stop Real-Estate<br><span> Solution in Lucknow</span>
        </h2>

      <p class="eco-text">
  <strong>Sales Basket</strong> is a professionally managed real estate company based in <strong>Lucknow, Uttar Pradesh</strong>, offering <strong>end-to-end property solutions</strong>.
</p>

<p class="eco-text">
  Over the years, we have successfully assisted hundreds of clients in <strong>purchasing, selling, and investing in properties</strong> across prime and developing locations of Lucknow.
</p>

<p class="eco-text">
  Our deep understanding of <strong>local market trends, legal procedures, and future growth areas</strong> enables us to deliver <strong>safe, profitable, and hassle-free property transactions</strong>.
</p>

      </div>

      <!-- RIGHT IMAGE -->
      <div class="col-lg-6 wow animate__animated animate__fadeInRight">
        <div class="sticky-image">
          <img src="images/aboutus.jpg" alt="Sales Basket">
          <div class="experience-card wow animate__animated animate__zoomIn">
            <i class="fas fa-leaf"></i>
            <div>
              <h4>10+ Years</h4>
              <span>Green Excellence</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ================= WHAT WE OFFER SECTION ================= -->
<section class="what-we-offer">
  <div class="container">
    <h2 class="section-title">What We Offer</h2>
    <p class="section-subtitle">Complete Property Solutions Under One Roof</p>
    
    <div class="offer-grid">
      <div class="offer-item">
        <span class="checkmark">✔</span>
        <p>Residential & Commercial Plotting</p>
      </div>
      <div class="offer-item">
        <span class="checkmark">✔</span>
        <p>Agricultural & Non-Agricultural Land</p>
      </div>
      <div class="offer-item">
        <span class="checkmark">✔</span>
        <p>Farmhouse Properties</p>
      </div>
      <div class="offer-item">
        <span class="checkmark">✔</span>
        <p>Flats & Apartments</p>
      </div>
      <div class="offer-item">
        <span class="checkmark">✔</span>
        <p>Independent Houses & Row Houses</p>
      </div>
      <div class="offer-item">
        <span class="checkmark">✔</span>
        <p>Property Consultation & Documentation Support</p>
      </div>
    </div>

    <p class="offer-note">
      Every property we offer is carefully selected and verified to ensure <strong>clear titles, fair pricing, and long-term value</strong>.
    </p>
  </div>
</section>

<!-- ================= STYLES ================= -->
<style>
  /* Container Styling */
  .what-we-offer {
    padding: 60px 20px;
    background: linear-gradient(135deg, #f3702b10, #23636e10); /* subtle gradient from logo colors */
    text-align: center;
    font-family: 'Arial', sans-serif;
  }

  .what-we-offer .container {
    max-width: 1000px;
    margin: 0 auto;
  }

  /* Titles */
  .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #f3702b; /* logo orange */
    margin-bottom: 10px;
    animation: fadeInUp 1s ease forwards;
  }

  .section-subtitle {
    font-size: 1.2rem;
    color: #23636e; /* logo teal */
    margin-bottom: 40px;
    animation: fadeInUp 1.2s ease forwards;
  }

  /* Grid Layout */
  .offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
  }

  .offer-item {
    background: #ffffff;
    padding: 20px 15px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.5s forwards;
  }

  .offer-item:nth-child(1) { animation-delay: 0.2s; }
  .offer-item:nth-child(2) { animation-delay: 0.4s; }
  .offer-item:nth-child(3) { animation-delay: 0.6s; }
  .offer-item:nth-child(4) { animation-delay: 0.8s; }
  .offer-item:nth-child(5) { animation-delay: 1s; }
  .offer-item:nth-child(6) { animation-delay: 1.2s; }

  .offer-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
    background: linear-gradient(135deg, #f3702b20, #23636e20); /* subtle hover gradient */
  }

  .checkmark {
    font-size: 1.5rem;
    color: #f3702b; /* logo orange */
    flex-shrink: 0;
  }

  .offer-item p {
    margin: 0;
    font-size: 1rem;
    color: #23636e; /* logo teal */
    font-weight: 500;
  }

  .offer-note {
    margin-top: 40px;
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
    animation: fadeInUp 1.4s ease forwards;
  }

  /* Animation Keyframes */
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(30px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Responsive Adjustments */
  @media (max-width: 600px) {
    .section-title { font-size: 2rem; }
    .section-subtitle { font-size: 1rem; }
    .offer-item { flex-direction: row; gap: 10px; }
  }
</style>


<!-- ================= WHY SALES BASKET SECTION ================= -->
<section class="why-sales-basket">
  <div class="container">
    <h2 class="section-title">Why Sales Basket?</h2>
    <p class="section-subtitle">More Than a Real Estate Company — A Trusted Partner</p>

    <div class="features-grid">
      <div class="feature-card">
        <div class="icon-circle">🏆</div>
        <h3>10+ Years of Experience</h3>
        <p>Strong presence in the Lucknow real estate market with proven expertise.</p>
      </div>
      <div class="feature-card">
        <div class="icon-circle">💎</div>
        <h3>Transparent Dealings</h3>
        <p>No hidden charges, no false promises — only honest advice.</p>
      </div>
      <div class="feature-card">
        <div class="icon-circle">✔️</div>
        <h3>Verified Properties</h3>
        <p>Legal due diligence done before property listing.</p>
      </div>
      <div class="feature-card">
        <div class="icon-circle">🤝</div>
        <h3>Customer-Centric Approach</h3>
        <p>We focus on your needs, budget, and future goals.</p>
      </div>
      <div class="feature-card">
        <div class="icon-circle">📍</div>
        <h3>Local Market Expertise</h3>
        <p>In-depth knowledge of upcoming areas, price trends, and investment opportunities.</p>
      </div>
    </div>
  </div>
</section>

<!-- ================= STYLES ================= -->
<style>
  .why-sales-basket {
    padding: 70px 20px;
    background: #eef2f5;
    font-family: 'Arial', sans-serif;
    text-align: center;
  }

  .section-title {
    font-size: 2.8rem;
    color: #f3702b;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .section-subtitle {
    font-size: 1.3rem;
    color: #23636e;
    margin-bottom: 60px;
  }

  /* Grid with 3 cards per row */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .feature-card {
    background: #fff;
    padding: 30px 20px 20px 20px;
    border-radius: 20px;
    box-shadow: 0 12px 25px rgba(0,0,0,0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 35px rgba(0,0,0,0.15);
    background: linear-gradient(135deg, #f3702b10, #23636e10);
  }

  .icon-circle {
    width: 70px;
    height: 70px;
    background: #f3702b;
    color: #fff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
  }

  .feature-card:hover .icon-circle {
    transform: scale(1.2);
  }

  .feature-card h3 {
    font-size: 1.25rem;
    color: #23636e;
    font-weight: 600;
    margin-bottom: 10px;
  }

  .feature-card p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
  }

  /* Responsive Adjustments */
  @media (max-width: 900px) {
    .features-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 600px) {
    .features-grid {
      grid-template-columns: 1fr;
    }
    .section-title { font-size: 2rem; }
    .section-subtitle { font-size: 1rem; }
    .feature-card { padding: 25px 15px 15px 15px; }
    .icon-circle { width: 60px; height: 60px; font-size: 1.7rem; }
  }
</style>

<style>
.about-eco-section {
  background: linear-gradient(180deg, #f8fff9, #ffffff);
}

.eco-heading {
  font-size: 40px;
  font-weight: 800;
}
.eco-heading span {
  color: var(--accent-color) !important;
}

.eco-badge {
  background: rgba(46,204,113,.1);
  color: var(--accent-color) !important;
  padding: 8px 16px;
  border-radius: 30px;
}

.eco-text {
  color: #555;
  font-size: 16px;
  line-height: 1.7;
}

.eco-box {
  background: #ffffff;
  border-left: 4px solid var(--accent-color) !important;
  padding: 20px;
  margin-top: 25px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.eco-list {
  padding-left: 18px;
}
.eco-list li {
  margin-bottom: 8px;
}

.sticky-image {
  position: sticky;
  top: 100px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.sticky-image img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  transition: transform .6s ease;
}
.sticky-image:hover img {
  transform: scale(1.05);
}

.experience-card {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(255,255,255,.95);
  padding: 16px 20px;
  border-radius: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.15);
}
.experience-card i {
  font-size: 28px;
  color:  var(--accent-color) !important;
}

.eco-stats .stat-card {
  background: #fff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: all .4s ease;
}
.eco-stats .stat-card:hover {
  transform: translateY(-8px);
}
.eco-stats img {
  width: 48px;
  margin-bottom: 10px;
}
.eco-stats h3 {
  font-weight: 700;
  color:  var(--accent-color) !important;
}
.eco-stats .highlight {
  background: linear-gradient(135deg,#2ecc71,#27ae60);
  color: #fff;
}
.eco-stats .highlight h3,
.eco-stats .highlight p {
  color: #fff;
}
</style>

         <section id="section-facilities">
             <div class="container">
                 <div class="row g-4 align-items-end justify-content-between mb-4">
                     <div class="col-lg-8">
                         <div class="h-100 relative">
                             <div class="subtitle wow fadeInUp" style="color:#f3702b;">Home Facilities</div>
                             <h2 class="mb-0 wow fadeInUp" data-wow-delay=".2s">Facilities For Lifestyle</h2>
                         </div>
                     </div>
                     <div class="col-lg-4 text-lg-end">
                         <a href="about.php" class="btn-main fx-slide hover-white wow fadeInUp" data-wow-delay=".6s"><span>View More</span></a>
                     </div>                                            
                 </div>

                 <div class="row g-4">

                     <div class="col-lg-6 wow fadeInUp">
                         <div class="hover overflow-hidden">
                             <div class="row g-0 align-items-center">
                                 <div class="col-sm-6 wow fadeInLeft">
                                    <img src="images/misc/s2.webp" class="w-100 rounded-1" alt="">
                                 </div>
                                 <div class="col-sm-6 wow fadeInRight">
                                     <div class="p-40">
                                         <h3>Smart Home</h3>
                                         <p class="mb-0">Experience seamless daily comfort with intuitive smart features that connect your home effortlessly and enhance modern living.</p>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>

                     <div class="col-lg-6 wow fadeInUp">
                         <div class="hover overflow-hidden">
                             <div class="row g-0 align-items-center">
                                 <div class="col-sm-6 wow fadeInLeft">
                                    <img src="images/misc/s3.webp" class="w-100 rounded-1" alt="">
                                 </div>
                                 <div class="col-sm-6 wow fadeInRight">
                                     <div class="p-40">
                                         <h3>Solar Powered</h3>
                                         <p class="mb-0">Generate clean renewable energy with efficient solar systems designed to lower utility costs while supporting a greener lifestyle.</p>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>

                     <div class="col-lg-6 wow fadeInUp">
                         <div class="hover overflow-hidden">
                             <div class="row g-0 align-items-center">
                                 <div class="col-sm-6 wow fadeInRight">
                                     <div class="p-40">
                                         <h3>Swimming Pool</h3>
                                         <p class="mb-0">Relax in a beautifully designed private pool that offers refreshing water, peaceful ambiance, and the perfect space for leisure at home.</p>
                                     </div>
                                 </div>

                                 <div class="col-sm-6 wow fadeInLeft">
                                    <img src="images/misc/s4.webp" class="w-100 rounded-1" alt="">
                                 </div>
                             </div>
                         </div>
                     </div>

                     <div class="col-lg-6 wow fadeInUp">
                         <div class="hover overflow-hidden">
                             <div class="row g-0 align-items-center">
                                 <div class="col-sm-6 wow fadeInRight">
                                     <div class="p-40">
                                         <h3>Home Security</h3>
                                         <p class="mb-0">Protect your home with advanced security features that offer continuous monitoring, smart alerts, and peace of mind every day.</p>
                                     </div>
                                 </div>
                                 <div class="col-sm-6 wow fadeInLeft">
                                    <img src="images/misc/s5.webp" class="w-100 rounded-1" alt="">
                                 </div>
                             </div>
                         </div>
                     </div>

                 </div>
             </div>
         </section>
       
        <section class="eco-attractions-section position-relative overflow-hidden">
  <div class="container">

    <!-- Heading -->
    <div class="row mb-5">
      <div class="col-lg-8 mx-auto text-center wow animate__animated animate__fadeInUp">
        <span class="eco-subtitle">Plot in Lucknow for Sale</span>
        <h2 class="eco-title mt-2">
          Key Attractions of <span>Sales Basket</span>
        </h2>
        <p class="eco-desc">
          A thoughtfully planned eco-community offering lifestyle, leisure, and long-term value.
        </p>
      </div>
    </div>

    <!-- Cards -->
    <div class="row g-4 justify-content-center">

      <!-- Card 1 -->
      <div class="col-lg-4 col-md-6 wow animate__animated animate__fadeInUp">
        <a href="indraprastha-resorts.php" class="eco-card">
          <div class="eco-card-img">
            <img src="images/indra.png" alt="Indraprastha Resorts">
          </div>
          <div class="eco-card-body">
            <h4>Indraprastha Resorts</h4>
            <p>Payyakholi, Sheetla (Mukteshwar), District – Nainital (U.K.)</p>
          </div>
        </a>
      </div>

      <!-- Card 2 -->
      <div class="col-lg-4 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay=".15s">
        <a href="#" class="eco-card">
          <div class="eco-card-img">
            <img src="images/waterpark.png" alt="Eco Water Park">
          </div>
          <div class="eco-card-body">
            <h4>Eco Water Park</h4>
            <p>Uttaar Gaon, Mohanlalganj, Lucknow</p>
          </div>
        </a>
      </div>

      <!-- Card 3 -->
      <div class="col-lg-4 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay=".3s">
        <a href="ecogram-residency.php" class="eco-card">
          <div class="eco-card-img">
            <img src="images/ecogram.png" alt="Ecogram Residency">
          </div>
          <div class="eco-card-body">
            <h4>Ecogram Residency</h4>
            <p>Located just 4 km from Mohanlalganj</p>
          </div>
        </a>
      </div>

    </div>
  </div>
</section>

<style>
/* =========================
   BRAND COLORS
========================= */
:root{
  --brand-teal: #0F4C5C;
  --brand-teal-dark: #0B3C48;
  --brand-teal-light: #145A6A;
  --brand-orange: #FF7A32;
}

/* SECTION BACKGROUND */
.eco-attractions-section {
  padding: 100px 0;
  background: linear-gradient(135deg, var(--brand-teal-dark), var(--brand-teal-light));
  color: #ffffff;
}

/* HEADING */
.eco-subtitle {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 30px;
  background: rgba(255, 122, 50, 0.15);
  color: var(--brand-orange);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .5px;
}

.eco-title {
  font-size: 42px;
  font-weight: 800;
  margin-top: 12px;
}
.eco-title span {
  color: var(--brand-orange);
}

.eco-desc {
  max-width: 620px;
  margin: 14px auto 0;
  font-size: 16px;
  opacity: 0.9;
}

/* CARD */
.eco-card {
  display: block;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  border-radius: 22px;
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: #fff;
  transition: all .45s ease;
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,0.12);
}

.eco-card:hover {
  transform: translateY(-14px);
  box-shadow: 0 45px 90px rgba(0,0,0,.55);
  border-color: rgba(255,122,50,0.45);
  color: #000;

}

/* IMAGE */
.eco-card-img {
  height: 240px;
  overflow: hidden;
}
.eco-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.eco-card:hover img {
  transform: scale(1.15);
}

/* BODY */
.eco-card-body {
  padding: 26px 24px 30px;
  text-align: center;
}
.eco-card-body h4 {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--brand-orange);
}
.eco-card-body p {
  font-size: 14px;
  opacity: 0.9;
  line-height: 1.6;
}

/* MOBILE */
@media(max-width:768px){
  .eco-title {
    font-size: 32px;
  }
  .eco-card-img {
    height: 200px;
  }
}
</style>




        <section class="bg-dark-1 relative overflow-hidden p-0" aria-label="section">
            <div class="container-fluid">
                <div class="row relative">
                    <div class="col-lg-12">
                        <a class="d-block hover popup-youtube overflow-hidden" href="https://www.youtube.com/watch?v=JMyl8K2voHU">
                            <div class="relative overflow-hidden">
                                <div class="absolute start-0 w-100 abs-middle fs-36 text-white text-center z-2">
                                    <div class="player circle wow scaleIn"><span></span></div>
                                </div> 
                                <div class="absolute w-100 h-100 top-0 bg-dark hover-op-05"></div>
                                <img src="images/background/1.webp" class="w-100 hover-scale-1-1" alt="">



                                <div class="wm abs-center z-2 fw-600 text-uppercase bottom-0">
                                    tour
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </section>

      <section class="upcoming-project-section position-relative overflow-hidden py-5" style="padding: 80px 0;">
  <div class="container">

    <!-- Heading -->
    <div class="row mb-5">
      <div class="col-lg-10 mx-auto text-center wow animate__animated animate__fadeInUp">
        <span class="badge eco-badge mb-3">Upcoming Project</span>
        <h2 class="eco-heading text-white">
          Upcoming Project By <span>Sales Basket</span>
        </h2>
        <p class="eco-subtext mt-3">
          Introducing our next chapter in eco-conscious real estate — a premium residential township
          launching soon near <strong>Lucknow – Kanpur – Unnao Expressway</strong>
        </p>
      </div>
    </div>

    <!-- Project Cards -->
    <div class="row g-4">

      <!-- Project Card 1 -->
      <div class="col-lg-6 wow animate__animated animate__fadeInLeft">
        <div class="project-card">
          <img src="images/upcoming.jpg" alt="Upcoming Apartment Project">
          <div class="project-overlay">
            <h4>Premium Apartments</h4>
            <p>Smartly designed eco-friendly residences with modern amenities.</p>
          </div>
        </div>
      </div>

      <!-- Project Card 2 -->
      <div class="col-lg-6 wow animate__animated animate__fadeInRight">
        <div class="project-card">
          <img src="images/upcoming2.jpg" alt="Upcoming Villa Project">
          <div class="project-overlay">
            <h4>Luxury Villas</h4>
            <p>Low-density green living with private spaces and serene surroundings.</p>
          </div>
        </div>
      </div>

    </div>

  </div>
</section>
<style>
.upcoming-project-section {
  background: linear-gradient(135deg, #0f3d3e, #0b5f60);
  position: relative;
}

.eco-heading {
  font-size: 42px;
  font-weight: 800;
}
.eco-heading span {
  color:  var(--accent-color) !important;
}

.eco-subtext {
  color: #e0f2f1;
  font-size: 16px;
}

.project-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(0,0,0,.35);
  transition: all 0.5s ease;
  background: #0f3d3e; /* Base color for the fade effect */
}

.project-card:hover {
  transform: translateY(-12px);
}

.project-card img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  transition: all 0.6s ease;
  opacity: 0.8;
  mix-blend-mode: screen;
}

.project-card:hover img {
  transform: scale(1.08);
  opacity: 0.6;
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(15, 61, 62, 0.9), rgba(32, 201, 151, 0.7));
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.project-card:hover::before {
  opacity: 0.8;
}

.project-overlay {
  z-index: 2;
}

.project-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translateY(10px);
  transition: all 0.5s ease;
}

.project-card:hover .project-overlay {
  transform: translateY(0);
}

.project-logo {
  width: 70px;
  margin-bottom: 15px;
}

.project-overlay h4 {
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
  font-size: 24px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.project-overlay p {
  font-size: 15px;
  color: #f0f0f0;
  margin-bottom: 20px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease 0.1s;
  opacity: 0.95;
}

.eco-btn {
  display: inline-block;
  padding: 10px 25px;
  background: #fff;
  color: #0f3d3e;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.eco-btn:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* Hover effects for overlay content */
.project-card:hover .project-overlay h4 {
  transform: translateY(-5px);
}

.project-card:hover .project-overlay p {
  transform: translateY(-3px);
  opacity: 1;
}

.eco-btn {
  margin-top: 15px;
  display: inline-block;
  padding: 10px 22px;
  background:  var(--accent-color) !important;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: background .3s ease;
}

.eco-btn:hover {
  background: #27ae60;
  color: #fff;
}
</style>


        <section id="section-gallery" class="overflow-hidden">
            <div class="container">
                <div class="row mb-3 g-4 align-items-center justify-content-between">
                    <div class="col-lg-6 wow fadeIn" data-wow-delay=".2s">
                        <div class="uptitle id-color wow fadeInUp">Home Gallery</div>
                        <h2 class="wow fadeInUp">Designed for Living</h2>
                    </div>
                    <div class="col-lg-6">
                        <div class="relative">
                            <div class="de-custom-nav dark d-flex flex-end" data-target="#services-carousel">
                                <div class="d-prev"></div>
                                <div class="d-next"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <style>
                /* Ensure all gallery images have the same size */
                #services-carousel .item {
                    height: 300px; /* Fixed height for all items */
                    margin: 5px;
                }
                #services-carousel .gallery-image-container {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    border-radius: 8px;
                }
                #services-carousel .gallery-image-container img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                    transition: transform 0.5s ease;
                }
                #services-carousel .item:hover .gallery-image-container img {
                    transform: scale(1.05);
                }
                @media (max-width: 767.98px) {
                    #services-carousel .item {
                        height: 250px; /* Slightly smaller on mobile */
                    }
                }
            </style>
            <div class="container-fluid px-0">
                <div class="row g-0">
                    <div class="col-12">
                        <div id="services-carousel" class="owl-carousel owl-theme wow fadeInUp" data-margin="15" data-nav="false" data-dots="false" data-loop="true" data-autoplay="true" data-autoplay-timeout="3000" data-responsive='{"0":{"items": 1, "margin": 10}, "576":{"items": 2, "margin": 15}, "992":{"items": 3, "margin": 20}, "1200":{"items": 4, "margin": 25}}'>
                            <?php if (!$dbError && !empty($galleryItems)): ?>
                                <?php foreach ($galleryItems as $item): ?>
                                <!-- Gallery Item Begin -->
                                <div class="item">
                                    <div class="gallery-item h-100">
                                        <a href="<?php echo htmlspecialchars($item['image_path']); ?>" class="image-popup d-block hover h-100">
                                            <div class="relative overflow-hidden rounded-1 h-100">
                                                <div class="gallery-overlay position-absolute w-100 h-100 d-flex align-items-center justify-content-center">
                                                    <div class="text-center text-white z-3 p-4">
                                                        <i class="fas fa-search-plus fa-2x mb-2"></i>
                                                        <h5 class="mb-0"><?php echo htmlspecialchars($item['title']); ?></h5>
                                                        <?php if (!empty($item['category_name'])): ?>
                                                            <span class="badge bg-primary mt-2"><?php echo htmlspecialchars($item['category_name']); ?></span>
                                                        <?php endif; ?>
                                                    </div>
                                                </div>
                                                <div class="gallery-image-container">
                                                    <img src="<?php echo htmlspecialchars($item['image_path']); ?>" class="img-fluid w-100 h-100 object-fit-cover" alt="<?php echo htmlspecialchars($item['title']); ?>">
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <!-- Gallery Item End -->
                                <?php endforeach; ?>
                            <?php else: ?>
                                <!-- Fallback content if no images found -->
                                <div class="col-12 text-center py-5">
                                    <p>No gallery images found. Please add some images from the admin panel.</p>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </section>

       
<section class="eco-location-section py-5 position-relative overflow-hidden">
  <div class="container">

    <!-- Section Heading -->
    <div class="row mb-5">
      <div class="col-lg-8 mx-auto text-center wow animate__animated animate__fadeInUp">
        <span class="badge eco-badge mb-3">Location Highlights</span>
        <h2 class="eco-heading">
          Everything You Need, <span>All Around You</span>
        </h2>
        <p class="eco-text mt-3">
          Enjoy seamless connectivity, everyday conveniences, and future-ready infrastructure — all just minutes away.
        </p>
      </div>
    </div>

    <!-- Highlights Grid -->
    <div class="row g-4">

      <div class="col-lg-3 col-md-6 wow animate__animated animate__fadeInUp">
        <div class="location-card">
          <div class="icon-circle">
            <i class="fas fa-road"></i>
          </div>
          <h5>Expressway Access</h5>
          <p>Direct connectivity to Lucknow–Kanpur–Unnao Expressway.</p>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay=".1s">
        <div class="location-card">
          <div class="icon-circle">
            <i class="fas fa-hospital"></i>
          </div>
          <h5>Healthcare</h5>
          <p>Leading hospitals and medical facilities within close reach.</p>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay=".2s">
        <div class="location-card">
          <div class="icon-circle">
            <i class="fas fa-school"></i>
          </div>
          <h5>Schools & Colleges</h5>
          <p>Renowned schools and educational institutes nearby.</p>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay=".3s">
        <div class="location-card">
          <div class="icon-circle">
            <i class="fas fa-shopping-bag"></i>
          </div>
          <h5>Shopping & Leisure</h5>
          <p>Malls, markets, restaurants, and entertainment zones.</p>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 wow animate__animated animate__fadeInUp">
        <div class="location-card">
          <div class="icon-circle">
            <i class="fas fa-plane"></i>
          </div>
          <h5>Airport Connectivity</h5>
          <p>Easy access to domestic and international airports.</p>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay=".1s">
        <div class="location-card">
          <div class="icon-circle">
            <i class="fas fa-train"></i>
          </div>
          <h5>Railway Station</h5>
          <p>Major railway stations just a short drive away.</p>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay=".2s">
        <div class="location-card">
          <div class="icon-circle">
            <i class="fas fa-tree"></i>
          </div>
          <h5>Green Surroundings</h5>
          <p>Parks, open spaces, and eco-friendly environment.</p>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 wow animate__animated animate__fadeInUp" data-wow-delay=".3s">
        <div class="location-card">
          <div class="icon-circle">
            <i class="fas fa-map-marked-alt"></i>
          </div>
          <h5>Prime Location</h5>
          <p>Strategically located for growth and future appreciation.</p>
        </div>
      </div>

    </div>

  </div>
</section>
<style>
.eco-location-section {
  background: linear-gradient(180deg, #ffffff, #f8fff9);
}

.location-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 30px 22px;
  text-align: center;
  height: 100%;
  box-shadow: 0 15px 40px rgba(0,0,0,.08);
  transition: all .4s ease;
}

.location-card:hover {
  transform: translateY(-12px);
}

.icon-circle {
  width: 70px;
  height: 70px;
  background: rgba(46,204,113,.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.icon-circle i {
  font-size: 30px;
  color:  var(--accent-color) !important;
}

.location-card h5 {
  font-weight: 700;
  margin-bottom: 10px;
}

.location-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
}
</style>
<!-- ================= OUR COMMITMENT SECTION ================= -->
<section class="our-commitment">
  <div class="container">
    <div class="commitment-content">
      <h2 class="commitment-title">Our Commitment</h2>
      <p class="commitment-text">
        At <span>Sales Basket</span>, we believe buying property is not just a transaction — it’s a <span>life decision</span>. 
        Our team is committed to delivering <span>value</span>, <span>security</span>, and <span>satisfaction</span> with every deal we close.
      </p>
      <div class="commitment-highlight">
        <div class="highlight-item">💼 Trusted Advisors</div>
        <div class="highlight-item">🔒 Secure Transactions</div>
        <div class="highlight-item">🏡 Life-changing Decisions</div>
      </div>
    </div>
  </div>
</section>

<!-- ================= STYLES ================= -->
<style>
  .our-commitment {
    padding: 80px 20px;
    background: linear-gradient(135deg, #f3702b10, #23636e10);
    font-family: 'Arial', sans-serif;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .our-commitment::before {
    content: '';
    position: absolute;
    top: -50px;
    left: -50px;
    width: 200px;
    height: 200px;
    background: #f3702b20;
    border-radius: 50%;
    z-index: 0;
  }

  .our-commitment::after {
    content: '';
    position: absolute;
    bottom: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: #23636e20;
    border-radius: 50%;
    z-index: 0;
  }

  .our-commitment .container {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
  }

  .commitment-title {
    font-size: 2.8rem;
    color: #f3702b;
    font-weight: 700;
    margin-bottom: 20px;
    animation: fadeInUp 1s ease forwards;
  }

  .commitment-text {
    font-size: 1.25rem;
    color: #23636e;
    line-height: 1.8;
    margin-bottom: 40px;
    animation: fadeInUp 1.2s ease forwards;
  }

  .commitment-text span {
    font-weight: 600;
    color: #f3702b;
  }

  .commitment-highlight {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }

  .highlight-item {
    background: #fff;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    color: #23636e;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .highlight-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
  }

  /* Animation Keyframes */
  @keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* Responsive */
  @media (max-width: 768px) {
    .commitment-title { font-size: 2.2rem; }
    .commitment-text { font-size: 1.1rem; }
    .commitment-highlight { flex-direction: column; align-items: center; gap: 15px; }
  }
</style>


<!-- CONTACT SECTION -->
<section id="section-contact" class="eco-contact-section position-relative overflow-hidden py-5">
  <div class="container">

    <div class="row g-5 align-items-center">

      <!-- LEFT CONTENT -->
      <div class="col-lg-4 wow animate__animated animate__fadeInLeft">
        <span class="badge eco-badge mb-3">Contact Us</span>
        <h2 class="eco-heading mb-4">
          Schedule a <span>Home Tour</span>
        </h2>
        <p class="eco-text">
          Interested in this property or planning a site visit?  
          Share your details and our experts will arrange a personalized tour at your convenience.
        </p>

        <div class="contact-features mt-4">
          <div class="feature-item">
            <i class="fas fa-calendar-check"></i> Flexible Scheduling
          </div>
          <div class="feature-item">
            <i class="fas fa-user-tie"></i> Expert Guidance
          </div>
          <div class="feature-item">
            <i class="fas fa-leaf"></i> Eco-Friendly Projects
          </div>
        </div>
      </div>

      <!-- RIGHT FORM -->
      <div class="col-lg-8 wow animate__animated animate__fadeInRight">
        <div class="contact-form-card">

          <h3 class="mb-2">Request a Visit</h3>
          <p class="text-muted mb-4">Fill in the details and we’ll contact you shortly.</p>

          <form id="inquiryForm" method="post" action="request_visit.php" class="needs-validation" novalidate>

            <!-- Inquiry Type -->
           <div class="btn-group inquiry-group w-100" role="group">

  <input type="radio" class="btn-check" name="inquiry_type" id="purchase" value="Purchase" checked>
  <label class="btn flex-fill"
         for="purchase"
         style="height:48px; box-sizing:border-box; margin-left:0;">
    Purchase
  </label>

  <input type="radio" class="btn-check" name="inquiry_type" id="rent" value="Rent">
  <label class="btn flex-fill"
         for="rent"
         style="height:48px; box-sizing:border-box; margin-left:0;">
    Rent
  </label>

  <input type="radio" class="btn-check" name="inquiry_type" id="sell" value="Sell">
  <label class="btn flex-fill"
         for="sell"
         style="height:48px; box-sizing:border-box; margin-left:0;">
    Sell
  </label>

  <input type="radio" class="btn-check" name="inquiry_type" id="evaluation" value="Evaluation">
  <label class="btn flex-fill"
         for="evaluation"
         style="height:48px; box-sizing:border-box; margin-left:0;">
    Evaluation
  </label>

  <input type="radio" class="btn-check" name="inquiry_type" id="mortgage" value="Mortgage">
  <label class="btn flex-fill"
         for="mortgage"
         style="height:48px; box-sizing:border-box; margin-left:0;">
    Mortgage
  </label>

</div>


            <!-- USER DETAILS -->
            <div class="row g-3 mb-4">
              <div class="col-md-4">
                <label class="form-label fw-bold">Full Name</label>
                <div class="input-group eco-input">
                  <span class="input-group-text"><i class="fas fa-user"></i></span>
                  <input type="text" class="form-control" name="name" placeholder="Your Name" required>
                </div>
              </div>

              <div class="col-md-4">
                <label class="form-label fw-bold">Phone Number</label>
                <div class="input-group eco-input">
                  <span class="input-group-text"><i class="fas fa-phone"></i></span>
                  <input type="tel" class="form-control" name="phone" placeholder="+91 XXXXX XXXXX" required>
                </div>
              </div>

              <div class="col-md-4">
                <label class="form-label fw-bold">Email Address</label>
                <div class="input-group eco-input">
                  <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                  <input type="email" class="form-control" name="email" placeholder="you@email.com" required>
                </div>
              </div>
            </div>

            <!-- PROPERTY DETAILS -->
            <div class="row g-3 mb-4">
              <div class="col-md-6">
                <label class="form-label fw-bold">Location</label>
                <div class="input-group eco-input">
                  <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
                  <select class="form-select" name="location" required>
                    <option value="" disabled selected>Select Location</option>
                    <option>Lucknow</option>
                    <option>Unnao</option>
                  </select>
                </div>
              </div>

              <div class="col-md-6">
                <label class="form-label fw-bold">Property Type</label>
                <div class="input-group eco-input">
                  <span class="input-group-text"><i class="fas fa-home"></i></span>
                  <select class="form-select" name="property_type" required>
                    <option value="" disabled selected>Select Property Type</option>
                    <option>Apartment</option>
                    <option>Commercial</option>
                    <option>Farm House</option>
                    <option>Land</option>
                    <option>Residential</option>
                  </select>
                </div>
              </div>
            </div>

            <!-- SUBMIT -->
            <button type="submit" class="eco-submit-btn w-100">
              Submit Request <i class="fas fa-paper-plane ms-2"></i>
            </button>

          </form>
        </div>
      </div>

    </div>
  </div>

  <!-- SUCCESS MESSAGE -->
  <div id="success_message" class="toast-container position-fixed bottom-0 end-0 p-3">
    <div class="toast text-white bg-success border-0">
      <div class="d-flex">
        <div class="toast-body">
          <i class="fas fa-check-circle me-2"></i>
          Thank you! Your request has been submitted successfully.
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
      </div>
    </div>
  </div>
</section>


<style>
.eco-contact-section {
  background: linear-gradient(135deg, #f8fff9, #ffffff);
}

.eco-heading span {
  color:  var(--accent-color) !important;
}

.contact-form-card {
  background: rgba(255,255,255,.96);
  border-radius: 22px;
  padding: 40px;
  box-shadow: 0 25px 60px rgba(0,0,0,.12);
}

.inquiry-group .btn {
  border: 1px solid  var(--accent-color) !important;
  color:  var(--accent-color) !important;
  font-weight: 600;
  border-radius: 30px;
}
.inquiry-group .btn-check:checked + .btn {
  background:  var(--accent-color) !important;
  color: #fff !important;
}

.eco-input .input-group-text {
  background: #f1fdf6;
  border: none;
  color:  var(--accent-color) !important;
}
.eco-input .form-control,
.eco-input .form-select {
  border: none;
  background: #f8fff9;
}

.eco-submit-btn {
  background:#FF7A32;
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 40px;
  font-weight: 700;
  transition: all .3s ease;
}
.eco-submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(46,204,113,.35);
}

.contact-features .feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 600;
}
.contact-features i {
  color:  var(--accent-color) !important;
}

@media(max-width:768px){
  .contact-form-card {
    padding: 28px;
  }
}
</style>

        <!-- Add this script to handle form submission and show success message -->
        <script>
        document.getElementById('inquiryForm').addEventListener('submit', function(e) {
            e.preventDefault();
            // Simulate form submission
            setTimeout(() => {
                const toast = new bootstrap.Toast(document.querySelector('.toast'));
                toast.show();
                this.reset();
            }, 1000);
        });
        </script>

        <!--<section class="p-0" aria-label="section">-->
        <!--    <div class="bg-color-op-5 text-dark d-flex py-3 lh-1">-->
        <!--        <div class="de-marquee-list-1">-->
        <!--            <h3 class="d-inline-block mb-0 fs-48 mx-4">Elegant Urban Residence</h3>-->
        <!--            <h3 class="d-inline-block mb-0 fs-48 mx-4 op-5">Serene Garden Outlook</h3>-->
        <!--            <h3 class="d-inline-block mb-0 fs-48 mx-4">Modern Living Spaces</h3>-->
        <!--            <h3 class="d-inline-block mb-0 fs-48 mx-4 op-5">Premium Crafted Finishes</h3>-->
        <!--            <h3 class="d-inline-block mb-0 fs-48 mx-4">Sunlit Corner Rooms</h3>-->
        <!--            <h3 class="d-inline-block mb-0 fs-48 mx-4 op-5">Exclusive Private Amenities</h3>-->
        <!--            <h3 class="d-inline-block mb-0 fs-48 mx-4">Comfort Luxury Retreat</h3>-->
        <!--            <h3 class="d-inline-block mb-0 fs-48 mx-4 op-5">Spacious Family Design</h3>-->
        <!--            <h3 class="d-inline-block mb-0 fs-48 mx-4">Stylish Interior Concept</h3>-->
        <!--            <h3 class="d-inline-block mb-0 fs-48 mx-4 op-5">Prime Residential Location</h3>-->
        <!--        </div>-->
        <!--    </div>-->
        <!--</section>-->
        
        
    </main>

    <!-- Footer -->
    <?php include 'footer.php'; ?>

    <!-- Javascript Files
    ================================================== -->
    <script src="js/vendors.js"></script>
    <script src="js/designesia.js"></script>
    <script src="js/custom-marquee.js"></script>
    <script src="js/custom-datepicker.js"></script>
    <script src="js/validation-visit.js"></script>

    <!-- swiper slider -->
    <script src="js/swiper.js"></script>
    <script src="js/custom-swiper-1.js"></script>
    <script>
    document.getElementById('inquiryForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    // Show loading state
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalBtnText = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Sending...';
    
    try {
        // Collect form data
        const formData = new FormData(this);
        
        // Add a timestamp to prevent caching
        formData.append('_', Date.now());
        
        console.log('Sending form data:', Object.fromEntries(formData.entries()));
        
        // Send AJAX request
        const response = await fetch('request_visit.php', {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        });
        
        let data;
        try {
            data = await response.json();
        } catch (e) {
            console.error('Failed to parse JSON response:', e);
            throw new Error('Received invalid response from server');
        }
        
        console.log('Response:', data);
        
        // Show success/error message in a popup
        showAlert(data.message, data.success ? 'success' : 'danger');
        
        // Reset form if successful
        if (data.success) {
            this.reset();
        }
        
    } catch (error) {
        console.error('Error:', error);
        showAlert(error.message || 'An error occurred. Please try again.', 'danger');
    } finally {
        // Reset button state
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalBtnText;
    }
});

// Helper function to show alerts
function showAlert(message, type = 'info') {
    // Remove any existing alerts
    document.querySelectorAll('.custom-alert').forEach(el => el.remove());
    
    const alertDiv = document.createElement('div');
    alertDiv.className = `custom-alert alert alert-${type}`;
    alertDiv.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 9999;
        min-width: 300px;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.3s, transform 0.3s;
    `;
    
    alertDiv.textContent = message;
    document.body.appendChild(alertDiv);
    
    // Trigger reflow
    alertDiv.offsetHeight;
    
    // Show alert
    alertDiv.style.opacity = '1';
    alertDiv.style.transform = 'translateY(0)';
    
    // Auto-remove after 5 seconds
    setTimeout(() => {
        alertDiv.style.opacity = '0';
        alertDiv.style.transform = 'translateY(-20px)';
        setTimeout(() => alertDiv.remove(), 300);
    }, 5000);
}
</script>

   
</body>


</html>