<?php
   require_once 'config.php';
   
   if (session_status() == PHP_SESSION_NONE) {
       session_start();
   }
   
   
   $upload_dir = "uploads/";
   if (!is_dir($upload_dir)) {
       mkdir($upload_dir, 0777, true);
   }
   
   
   if ($_SERVER["REQUEST_METHOD"] === "POST") {
   
       
       $image_path_for_db = null;
   
       if (isset($_FILES['profile_image']) && $_FILES['profile_image']['error'] === UPLOAD_ERR_OK) {
           $file_tmp_path   = $_FILES['profile_image']['tmp_name'];
           $file_name       = $_FILES['profile_image']['name'];
           $file_extension  = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
   
           
           $allowed_ext = ['jpg', 'jpeg', 'png', 'webp'];
           if (in_array($file_extension, $allowed_ext)) {
               $unique_name = 'testimonial_' . uniqid() . '.' . $file_extension;
               $dest_path   = $upload_dir . $unique_name;
   
               if (move_uploaded_file($file_tmp_path, $dest_path)) {
                   $image_path_for_db = 'uploads/' . $unique_name; 
               }
           }
       }
   
      
       $name             = trim($_POST['client_name'] ?? '');
       $location         = trim($_POST['client_location'] ?? '');
       $product_service  = trim($_POST['product_service'] ?? '');
       $testimonial_text = trim($_POST['testimonial'] ?? '');
       $rating           = (int)($_POST['rating'] ?? 5);
       $language         = trim($_POST['language'] ?? 'en');
   
      
       if (!empty($name) && !empty($location) && !empty($product_service) && !empty($testimonial_text)) {
   
           
           $sql = "INSERT INTO testimonials 
                   (client_name, client_location, product_service, testimonial_text, client_image_path, rating, submission_date, language)
                   VALUES (:name, :location, :product_service, :testimonial_text, :image_path, :rating, NOW(), :language)";
   
           try {
               $stmt = $pdo->prepare($sql);
               $stmt->bindParam(':name', $name);
               $stmt->bindParam(':location', $location);
               $stmt->bindParam(':product_service', $product_service);
               $stmt->bindParam(':testimonial_text', $testimonial_text);
               $stmt->bindParam(':image_path', $image_path_for_db);
               $stmt->bindParam(':rating', $rating, PDO::PARAM_INT);
               $stmt->bindParam(':language', $language);
   
               if ($stmt->execute()) {
                   $_SESSION['form_status'] = 'success';
               } else {
                   $_SESSION['form_status'] = 'error';
               }
   
           } catch (PDOException $e) {
               error_log("Database insertion error: " . $e->getMessage());
               $_SESSION['form_status'] = 'error';
           }
   
       } else {
           $_SESSION['form_status'] = 'invalid';
       }
   
      
       header("Location: " . $_SERVER["PHP_SELF"] . "#entry");
       exit();
   }
   
   
   
   $winners = [];
   
   $sql_fetch = "SELECT winner_name, winner_location, prize_won, winner_image_path, testimonial FROM winners ORDER BY id DESC LIMIT 9";
   
   try {
       if ($result = $pdo->query($sql_fetch)) {
           $winners = $result->fetchAll(PDO::FETCH_ASSOC);
           unset($result);
       }
   } catch (PDOException $e) {
       
       error_log("Winner fetch error: " . $e->getMessage());
   }
   
   $form_status = $_SESSION['form_status'] ?? null;
   unset($_SESSION['form_status']); 
   
   
   require_once  'get_setting.php';
   
   
   ?>
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><?php echo htmlspecialchars($site_settings['site_title'] ?? 'ReliParcel Express'); ?> | Global Express & Logistics Solutions</title>
      <!-- Favicon -->
      <?php if ($use_favicon): ?>
      <link rel="icon" type="<?php echo $favicon_mime; ?>" href="<?php echo $favicon_path; ?>">
      <?php else: ?>
      <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
      <?php endif; ?>
      
      
      <!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
      
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
      <link rel="stylesheet" href="assets/css/font-awesome-pro.css">
	  <link rel="stylesheet" href="assets/css/gtranslate.css">
	  <link href="assets/css/style.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
      <style>
           .clean-draw-btn {
     background: transparent;
     border: 2px solid white;
     color: white;
     font-weight: 600;
     font-size: 1.1rem;
     padding: 14px 26px;
     border-radius: 8px;
     letter-spacing: 0.3px;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .clean-draw-btn:hover {
     background: white;
     color: #1e3c72;
     transform: translateY(-2px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
 }

 .clean-draw-btn:active {
     transform: translateY(0);
 }

 .clean-draw-btn .bi-trophy {
     font-size: 1.2rem;
     margin-right: 8px;
 }

 .button-showcase {
     text-align: center;
 }

 .button-showcase h2 {
     color: white;
     margin-bottom: 30px;
     font-weight: 300;
     letter-spacing: 1px;
 }

 .btn-skew {
     transform: skewX(-15deg);
     padding: 10px 30px !important;
     border-radius: 5px !important;
     font-size: 13px;
     font-weight: 800 !important;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     font-family: 'Work Sans', sans-serif !important;
     display: inline-block;
     border: none;
 }

 .btn-skew-text {
     transform: skewX(15deg);
     display: inline-block;
     transition: transform 0.3s ease;
 }

 .btn-skew:hover {
     transform: skewX(15deg) scale(1.05);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }

 .btn-skew:hover .btn-skew-text {
     transform: skewX(-15deg);
 }

 @media(max-width:478px) {
     .clean-draw-btn {
         font-size: 0.8rem;
     }
 }

 .winner-img-container {
     position: relative;
     overflow: hidden;
 }

 .winner-verified-badge {
     position: absolute;
     top: 10px;
     right: 10px;
     z-index: 10;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     padding: 0.4em 0.8em;
     font-size: 6px;
     color: #fff;
 }

 #hero-slider-main {
     position: relative;
     max-height: 700px;
     overflow: hidden;
 }

 .hero-image {
     height: 600px;
     object-fit: cover;
     filter: brightness(0.85);
     transition: transform 0.5s ease, filter 0.5s ease;
 }

 .carousel-item:hover .hero-image {
     transform: scale(1.05);
     filter: brightness(0.75);
 }

 .carousel-item {
     position: relative;
 }

 .carousel-caption {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 10;
     background: linear-gradient(135deg, rgba(176, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
 }

 .hero-caption-box {
     max-width: 800px;
     background: rgba(0, 0, 0, 0.3);
     padding: 3rem !important;
     border-radius: 0.5rem;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(218, 165, 32, 0.3);
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
     animation: fadeInUp 0.8s ease-out;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .hero-caption-box h1 {
     text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.8);
     letter-spacing: 1px;
 }

 .hero-caption-box p {
     text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
 }

 .hero-caption-box .btn {
     transition: all 0.3s ease;
     border: 2px solid transparent;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .hero-caption-box .btn:hover,
 .btn-skew-text:hover {
     transform: skewX(15deg) scale(1.05);
     border-color: rgba(255, 255, 255, 0.3);
 }

 #mainHeroCarousel .carousel-indicators {
     bottom: 30px;
 }

 #mainHeroCarousel .carousel-indicators button {
     width: 25px;
    height: 3px;
    background: #daa520;
    opacity: 0.4;
    margin: 0 4px !important;
    border-radius: 1.5px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 #mainHeroCarousel .carousel-indicators button:hover {
     opacity: 0.9;
     transform: scale(1.2);
 }

 #mainHeroCarousel .carousel-indicators .active {
     background: #b00000;
    opacity: 1;
    width: 45px;
    height: 3px;
    border-radius: 1.5px;
 }

 #mainHeroCarousel .carousel-control-prev-icon,
 #mainHeroCarousel .carousel-control-next-icon {
     width: 3rem;
     height: 3rem;
     background-color: rgba(176, 0, 0, 0.6);
     border-radius: 50%;
     transition: all 0.3s ease;
     border: 2px solid rgba(218, 165, 32, 0.4);
 }

 #mainHeroCarousel .carousel-control-prev-icon:hover,
 #mainHeroCarousel .carousel-control-next-icon:hover {
     background-color: rgba(176, 0, 0, 0.9);
     border-color: #daa520;
     transform: scale(1.1);
 }

 #mainHeroCarousel .carousel-control-prev,
 #mainHeroCarousel .carousel-control-next {
     opacity: 0.7;
     transition: opacity 0.3s ease;
 }

 #mainHeroCarousel .carousel-control-prev:hover,
 #mainHeroCarousel .carousel-control-next:hover {
     opacity: 1;
 }

 @media (max-width: 768px) {
     .hero-image {
         height: 500px;
     }
     .hero-caption-box {
         padding: 2rem !important;
     }
     .hero-caption-box h1 {
         font-size: 21px !important;
     }
 }

 #typeText::after {
     content: '|';
     animation: blink 0.7s infinite;
     color: goldenrod;
 }

 @keyframes blink {
     50% {
         opacity: 0;
     }
 }

 @media (max-width:470px) {
     .hero-caption-box p {
         font-size: 14px !important;
     }
     .winner-img {
         height: 250px;
     }
 }
		 
		 .winner-img {width: 100%; display: block; height: 300px; object-position: center center;}
		 
		 /* Swiper Hero Slider Styles */
.heroSwiper {
    width: 100%;
    height: 100vh;
    min-height: 600px;
}

.hero-slide {
    width: calc(100% + 2px);
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    margin-left: -1px
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(258.98deg, rgba(20, 23, 41, 0.92) 28.78%, rgb(1 21 30 / 71%) 73.15%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}


.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide {
    box-sizing: border-box;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


/* Simple staggered animation */
.animate-slide-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.animate-slide-up.show {
    opacity: 1;
    transform: translateY(0);
}


/* Custom navigation buttons */
.heroSwiper .swiper-button-next,
.heroSwiper .swiper-button-prev {
    width: 50px;
    height: 50px;
    background-color: rgba(176, 0, 0, 0.7);
    border-radius: 50%;
    border: 2px solid rgba(218, 165, 32, 0.5);
    transition: all 0.3s ease;
}

.heroSwiper .swiper-button-next:after,
.heroSwiper .swiper-button-prev:after {
    font-size: 20px;
    color: white;
    font-weight: bold;
}

.heroSwiper .swiper-button-next:hover,
.heroSwiper .swiper-button-prev:hover {
    background-color: rgba(176, 0, 0, 0.9);
    border-color: #daa520;
    transform: scale(1.1);
}

.heroSwiper .swiper-pagination-bullet {
    width: 25px;
    height: 3px;
    background: #daa520;
    opacity: 0.4;
    margin: 0 4px !important;
    border-radius: 1.5px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.heroSwiper .swiper-pagination-bullet-active {
    background: #b00000;
    opacity: 1;
    width: 45px;
    height: 3px;
    border-radius: 1.5px;
}

.swiftx-hero__subtitle {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: #FFB302;
    display: inline-block;
    margin-bottom: 35px;
}

.subtitle-border {
    position: relative;
}

.subtitle-border::after {
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fec201;
    content: "";
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .heroSwiper {
        height: 70vh;
        min-height: 500px;
    }
    
    .hero-content h1 {
        font-size: 2rem !important;
    }
    
    .hero-content p {
        font-size: 1rem !important;
    }
}

@media (max-width:480px){
    .heroSwiper .swiper-button-next, .heroSwiper .swiper-button-prev{
        display:none;
    }
    
    #mainHeroCarousel .carousel-control-prev-icon, #mainHeroCarousel .carousel-control-next-icon{
         display:none;
    }
}
 .service-card-premium {
    position: relative;
    border: none;
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.service-card-premium:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 60px rgba(176, 0, 0, 0.15);
}

.service-icon-wrapper {
    width: 70px;
    height: 70px;
    background: rgba(176, 0, 0, 0.05);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.service-card-premium:hover .service-icon-wrapper {
    background: var(--bs-crimson-light);
    transform: scale(1.1) rotate(10deg);
}

.service-card-premium:hover .service-icon-wrapper i {
    color: #fff !important;
}

.service-card-premium .card-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 15px;
    color: var(--primary-900);
}

.service-card-premium .card-text {
    color: var(--primary-500);
    line-height: 1.6;
    font-size: 0.95rem;
}

.service-bg-shape {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 150px;
    height: 150px;
    background: rgba(176, 0, 0, 0.03);
    border-radius: 50%;
    z-index: 1;
    transition: all 0.6s ease;
}

.service-card-premium:hover .service-bg-shape {
    background: rgba(176, 0, 0, 0.08);
    transform: scale(1.5);
}

.service-number {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(176, 0, 0, 0.03);
    font-family: 'ABC Ginto Nord Unlicensed Trial Black';
    z-index: 0;
}
 .testimonial-premium-card {
    background: #fff;
    border-radius: 20px;
    padding: 35px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.testimonial-premium-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(176, 0, 0, 0.1);
}

.testimonial-user-img {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-right: 15px;
}

.verified-badge-premium {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 0.65rem;
    padding: 4px 10px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    margin-bottom: 15px;
}

.quote-icon-premium {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2.5rem;
    color: rgba(176, 0, 0, 0.05);
    transition: all 0.4s ease;
}

.testimonial-premium-card:hover .quote-icon-premium {
    color: rgba(176, 0, 0, 0.15);
    transform: rotate(-10deg) scale(1.1);
}

.service-tag {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--bs-crimson-light);
    background: rgba(176, 0, 0, 0.05);
    padding: 5px 12px;
    border-radius: 5px;
    display: inline-block;
    margin-top: 15px;
}
 .testimonials-dark-wrap {
    background: radial-gradient(circle at 50% 50%, #1a1e26 0%, #0b0e14 100%);
    position: relative;
    overflow: hidden;
}

.testimonials-dark-wrap::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(176, 0, 0, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.testimonial-glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    position: relative;
}

.testimonial-glass-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 193, 7, 0.3);
    transform: translateY(-10px) scale(1.02);
}

.testimonial-quote-bubble {
    color: #e2e8f0;
    font-size: 1.1rem;
    line-height: 1.8;
    font-weight: 400;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.testimonial-client-meta {
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 25px;
}

.client-avatar-wrap {
    position: relative;
}

.client-avatar-wrap::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, var(--bs-gold), var(--bs-crimson-light));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.testimonial-client-img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
}

.client-info-text {
    margin-left: 15px;
}

.client-info-text h6 {
    color: #fff;
    margin: 0;
    font-weight: 700;
    font-size: 1rem;
}

.client-info-text span {
    color: var(--bs-gold);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.testimonial-stars-gold {
    color: var(--bs-gold);
    font-size: 0.85rem;
    margin-bottom: 20px;
}

.swiper-pagination-premium .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.2;
}

.swiper-pagination-premium .swiper-pagination-bullet-active {
    background: var(--bs-gold);
    opacity: 1;
    width: 25px;
    border-radius: 4px;
}
 .verified-testimonial-card {
    background: #fff;
    border: none;
    border-radius: 20px;
    padding: 35px;
    transition: all 0.4s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.verified-testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(176, 0, 0, 0.1);
}

.verified-testimonial-card::after {
    content: '\f10d';
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    color: rgba(176, 0, 0, 0.04);
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    object-fit: cover;
    margin-right: 15px;
}

.testimonial-quote-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--primary-800);
    margin-bottom: 25px;
    font-weight: 500;
}

.testimonial-footer-premium {
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.testimonial-service-badge {
    background: rgba(255, 193, 7, 0.1);
    color: #9a7800;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
 .shipment-gallery-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    height: 380px;
    border: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.shipment-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.shipment-gallery-card:hover .shipment-gallery-img {
    transform: scale(1.1) rotate(2deg);
}

.shipment-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 14, 20, 0.9) 0%, rgba(11, 14, 20, 0.2) 50%, transparent 100%);
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: all 0.4s ease;
}

.shipment-gallery-card:hover .shipment-overlay {
    background: linear-gradient(to top, rgba(176, 0, 0, 0.9) 0%, rgba(176, 0, 0, 0.4) 100%);
}

.shipment-status-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.9);
    color: #0b0e14;
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.shipment-route {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.shipment-route i {
    font-size: 0.8rem;
    margin: 0 10px;
    color: var(--bs-gold);
}

.shipment-details {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}
      </style>
   </head>
   <body>
      <?php include "nav.php" ?>
      <?php
         
         if (isset($_SESSION['alert'])) {
             $alert = $_SESSION['alert'];
            
             unset($_SESSION['alert']);
         
            
             echo "<script>
                 document.addEventListener('DOMContentLoaded', function() {
                     Swal.fire({
                         icon: '{$alert['type']}',
                         title: '{$alert['title']}',
                         text: '{$alert['text']}',
                         confirmButtonColor: '#b00000', // Adjust to your crimson color
                     });
                 });
             </script>";
         }
         ?>
         
         <section id="mainRevSlider" class="p-0">
    <div class="swiper heroSwiper">
        <div class="swiper-wrapper">
            
            <!-- Slide 6 (Track Parcel) -->
<div class="swiper-slide">
    <div class="hero-slide" style="background-image: url('assets/images/slide1-2.jpg');">
        <div class="hero-overlay"></div>
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-lg-8">
                    <div class="hero-content" data-swiper-parallax="-300">

                        <h4 class="swiftx-hero__subtitle subtitle-border">Track Every Step, Instantly</h4>

                        <h1 class="display-6 fw-bold text-white mb-4 animate-slide-up">
                            REAL-TIME SHIPMENT TRACKING
                        </h1>
                        <p class="lead text-white mb-4 animate-slide-up" style="animation-delay: 0.2s;">
                            Enter your tracking number and monitor your delivery with live location updates and status logs.
                        </p>

                        <a href="track.php" class="btn btn-lg fw-bold px-5 py-3 btn-skew btn-light">
                            <span class="btn-skew-text"><i class="fas fa-search-location me-2"></i> TRACK YOUR PARCEL</span>
                        </a>

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

            

            <!-- Slide 1 -->
            <div class="swiper-slide">
                <div class="hero-slide" style="background-image: url('https://demos.dlinkservices.co.uk/courier2/assets/images/banner.png');">
                    <div class="hero-overlay"></div>
                    <div class="container h-100">
                        <div class="row h-100 align-items-center">
                            <div class="col-lg-8">
                                <div class="hero-content" data-swiper-parallax="-300">

                                    <h4 class="swiftx-hero__subtitle subtitle-border">Beyond Boundaries</h4>

                                    <h1 class="display-6 fw-bold text-white mb-4 animate-slide-up">
                                        GLOBAL EXPRESS SHIPPING REDEFINED
                                    </h1>
                                    <p class="lead text-white mb-4 animate-slide-up" style="animation-delay: 0.2s;">
                                        Delivering faster across 240+ destinations with secure customs handling and guaranteed efficiency.
                                    </p>

                                    <a href="services.php" class="btn btn-lg fw-bold px-5 py-3 btn-skew btn-warning">
                                        <span class="btn-skew-text"><i class="fas fa-warehouse-alt me-2"></i> DISCOVER FREIGHT SERVICE</span>
                                    </a>

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

            <!-- Slide 2 -->
            <div class="swiper-slide">
                <div class="hero-slide" style="background-image: url('assets/images/slide3.jpg');">
                    <div class="hero-overlay"></div>
                    <div class="container h-100">
                        <div class="row h-100 align-items-center">
                            <div class="col-lg-8">
                                <div class="hero-content" data-swiper-parallax="-300">

                                    <h4 class="swiftx-hero__subtitle subtitle-border">Delivering Excellence, Every Mile</h4>

                                    <h1 class="display-6 fw-bold text-white mb-4 animate-slide-up">
                                        SMART LOGISTICS. SEAMLESS MOVEMENT.
                                    </h1>
                                    <p class="lead text-white mb-4 animate-slide-up" style="animation-delay: 0.2s;">
                                        From air to ocean to road — flexible freight built for scale, speed, and full transparency.
                                    </p>

                                    <a href="services.php" class="btn btn-lg fw-bold px-5 py-3 btn-skew btn-light">
                                        <span class="btn-skew-text"><i class="fas fa-warehouse-alt me-2"></i> DISCOVER FREIGHT SERVICE</span>
                                    </a>

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

            <!-- Slide 3 -->
            <div class="swiper-slide">
                <div class="hero-slide" style="background-image: url('assets/images/d.jpg');">
                    <div class="hero-overlay"></div>
                    <div class="container h-100">
                        <div class="row h-100 align-items-center">
                            <div class="col-lg-8">
                                <div class="hero-content" data-swiper-parallax="-300">

                                    <h4 class="swiftx-hero__subtitle subtitle-border">Fast. Secure. Reliable.</h4>

                                    <h1 class="display-6 fw-bold text-white mb-4 animate-slide-up">
                                        EXPRESS DELIVERY YOU CAN DEPEND ON
                                    </h1>
                                    <p class="lead text-white mb-4 animate-slide-up" style="animation-delay: 0.2s;">
                                        Time-critical packages delivered with precision tracking and unmatched reliability.
                                    </p>

                                    <a href="services.php" class="btn btn-lg fw-bold px-5 py-3 btn-skew btn-warning">
                                        <span class="btn-skew-text"><i class="fas fa-warehouse-alt me-2"></i> DISCOVER FREIGHT SERVICE</span>
                                    </a>

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

            <!-- Slide 4  -->
            <div class="swiper-slide">
                <div class="hero-slide" style="background-image: url('assets/images/slide2.jpg');">
                    <div class="hero-overlay"></div>
                    <div class="container h-100">
                        <div class="row h-100 align-items-center">
                            <div class="col-lg-8">
                                <div class="hero-content" data-swiper-parallax="-300">

                                    <h4 class="swiftx-hero__subtitle subtitle-border">Precision Meets Performance</h4>

                                    <h1 class="display-6 fw-bold text-white mb-4 animate-slide-up">
                                        COMPLETE SUPPLY CHAIN SOLUTIONS
                                    </h1>
                                    <p class="lead text-white mb-4 animate-slide-up" style="animation-delay: 0.2s;">
                                        Integrated logistics support for businesses of any size — optimized routes, minimized delays.
                                    </p>

                                    <a href="services.php" class="btn btn-lg fw-bold px-5 py-3 btn-skew btn-light">
                                        <span class="btn-skew-text"><i class="fas fa-warehouse-alt me-2"></i> DISCOVER FREIGHT SERVICE</span>
                                    </a>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Slide 5 (Contact Us) -->
<div class="swiper-slide">
    <div class="hero-slide" style="background-image: url('assets/images/bg3.jpg');">
        <div class="hero-overlay"></div>
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-lg-8">
                    <div class="hero-content" data-swiper-parallax="-300">

                        <h4 class="swiftx-hero__subtitle subtitle-border">We’re Always Within Reach</h4>

                        <h1 class="display-6 fw-bold text-white mb-4 animate-slide-up">
                            CONNECT WITH OUR SUPPORT TEAM
                        </h1>
                        <p class="lead text-white mb-4 animate-slide-up" style="animation-delay: 0.2s;">
                            Dedicated customer service standing by 24/7 to assist with inquiries, shipments, and solutions.
                        </p>

                        <a href="contact.php" class="btn btn-lg fw-bold px-5 py-3 btn-skew btn-warning">
                            <span class="btn-skew-text"><i class="fas fa-headset me-2"></i> CONTACT US NOW</span>
                        </a>

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


        </div>

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

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

         
         
      <header class="hero-gradient-bg text-white text-center pt-1 pb-6 shadow-lg">
    <div class="container mt-5 pt-5" style="padding-bottom:100px;">
        <h1 id="typeText" class="display-6 fw-bolder mb-3"></h1>
        <p class="lead mb-5 fs-5">Get instant quotes, book your delivery, and track your package every step of the way.</p>
        <div class="mb-5">
            <a type="button" href="quote.php" class="clean-draw-btn" style="text-decoration:none; font-family: 'ABC Ginto Nord Unlicensed Trial Regular';">
                <i class="fa-light fa-truck me-1"></i> GET AN INSTANT SHIPPING QUOTE
            </a>
        </div>
    </div>
</header>
<section class="stats-section bg-light text-center pb-5">
    <div class="container">
        <div class="row row-cols-1 row-cols-md-3 g-4">
            <div class="col">
                <span id="shipments" class="display-3 fw-bolder text-crimson" data-target="15480">0</span><span class="display-3 fw-bolder text-crimson"></span>
                <p class="lead text-dark-text mb-0">PACKAGES DELIVERED</p>
            </div>
            <div class="col">
                <span class="display-3 fw-bolder text-gold">240</span><span class="display-3 fw-bolder text-gold">+</span>
                <p class="lead text-dark-text mb-0">COUNTRIES SERVED</p>
            </div>
            <div class="col">
                <span class="display-3 fw-bolder text-gold">4.9/5</span>
                <p class="lead text-dark-text mb-0">CUSTOMER RATING</p>
                <div class="text-warning fs-4">
                    <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-half"></i>
                </div>
            </div>
        </div>
    </div>
</section>


      <section id="about" class="py-5 bg-white">
    <div class="container">
        <!-- Responsive Mission Title -->
        <h2 class="text-center fw-900 mb-5 text-dark d-none d-md-block" style="font-family: 'ABC Ginto Nord Unlicensed Trial Black';">OUR MISSION</h2>
        <h2 class="text-center fw-bold mb-5 text-dark d-md-none">Our Mission: More Than Just Delivery</h2>
        <div class="row align-items-center">
            <div class="col-md-5 text-center mb-4 mb-md-0">
                <img src="assets/images/p1.jpg"
                    alt="Courier Team in Action"
                    class="img-fluid rounded-circle shadow-lg border border-5 border-light"
                    style="width: 350px; height: 350px; object-fit: cover; object-position: center; border-radius: 50%; overflow: hidden;">
            </div>
            <div class="col-md-7">
                <p class="lead text-muted">
                    At <?php echo htmlspecialchars($site_settings['site_title'] ?? 'ReliParcel'); ?>, we understand that every package is a promise. It's a business transaction, a timely gift, or a vital document. Our mission is to bridge distances and connect people by ensuring your critical shipments arrive safely, reliably, and on time.
                </p>
                <p class="text-muted">
                    We've engineered our logistics network not just for speed, but for complete transparency and peace of mind. We harness cutting-edge tracking technology and employ dedicated professionals who treat your package with the urgency it deserves, from the first mile to the last. We are committed to redefining reliability in shipping.
                </p>
                <figure class="mt-4">
                    <blockquote class="blockquote border-start border-warning border-4 ps-3">
                        <p class="fst-italic text-dark fs-5">
                            "We don't just move parcels; we move opportunities, connections, and peace of mind. Your world is always within reach."
                        </p>
                    </blockquote>
                    <figcaption class="blockquote-footer text-end text-dark">
                        <cite title="Source Title">ReliParcel Leadership</cite>
                    </figcaption>
                </figure>
            </div>
        </div>
    </div>
</section>

     <section id="service-showcase-main" class="p-0">
    <div id="mainHeroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="7000">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1: Global Speed"></button>
            <button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="1" aria-label="Slide 2: Comprehensive Tracking"></button>
            <button type="button" data-bs-target="#mainHeroCarousel" data-bs-slide-to="2" aria-label="Slide 3: Secure Handling"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="assets/images/d.jpg" class="d-block w-100 hero-image" alt="Express Delivery Across Continents">
                <div class="carousel-caption d-flex align-items-center justify-content-center h-100">
                    <div class="text-center p-3 p-md-5 hero-caption-box">
                        <h1 class="fw-bolder text-white mb-3 text-uppercase">
                            Lightning-Fast Global Express
                        </h1>
                        <p class="lead text-white-50 mb-4 fw-light">
                            When time is money, rely on our prioritized network. Delivering to 240+ countries in record time. Your deadlines are safe with us.
                        </p>
                        <a href="international_shipping.php" class="btn btn-lg fw-bold px-5 py-3 shadow-lg btn-skew btn-warning">
                            <span class="btn-skew-text"> <i class="fas fa-plane-departure me-2"></i> EXPLORE INTERNATIONAL SERVICE </span>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="carousel-item">
                <img src="assets/images/banner.png" class="d-block w-100 hero-image" alt="Real-Time Shipment Tracking">
                <div class="carousel-caption d-flex align-items-center justify-content-center h-100">
                    <div class="text-center p-3 p-md-5 hero-caption-box">
                        <h1 class="fw-bolder text-white mb-3">
                            Know Where It Is, Always
                        </h1>
                        <p class="lead text-white-50 mb-4">
                            Full, transparent visibility from pickup to delivery. Our real-time tracking is updated instantly, giving you complete peace of mind.
                        </p>
                        <a href="track_package.php" class="btn btn-lg fw-bold px-5 py-3 btn-skew btn-light">
                            <span class="btn-skew-text"> TRACK YOUR SHIPMENT NOW </span>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="carousel-item">
                <img src="assets/images/home-1.jpg" class="d-block w-100 hero-image" alt="Secure and Insured Logistics">
                <div class="carousel-caption d-flex align-items-center justify-content-center h-100">
                    <div class="text-center p-3 p-md-5 hero-caption-box">
                        <h1 class="fw-bolder text-white mb-3">
                            Security You Can Rely On
                        </h1>
                        <p class="lead text-white-50 mb-4">
                            Every package is handled with dedicated care and backed by robust insurance options. Secure transport is our guarantee.
                        </p>
                        <a href="insurance_options.php" class="btn btn-lg fw-bold px-5 py-3 btn-skew btn-warning">
                            <span class="btn-skew-text"> <i class="fas fa-shield-alt me-2"></i> LEARN ABOUT SECURITY </span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#mainHeroCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#mainHeroCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
</section>
	  
	  
	  
<section class="py-5" style="background: linear-gradient(to bottom, #f8fafc, #fff);">
    <div class="container py-4">
        <div class="row align-items-end mb-5 text-center text-lg-start">
            <div class="col-lg-7">
                <span class="text-crimson fw-bold text-uppercase mb-2 d-block" style="letter-spacing: 2px; font-size: 0.85rem;">World-Class Expertise</span>
                <h2 class="display-5 fw-900 mb-0" style="font-family: 'ABC Ginto Nord Unlicensed Trial Black';">ELITE LOGISTICS SOLUTIONS</h2>
            </div>
            <div class="col-lg-5 text-lg-end d-none d-lg-block">
                <p class="text-muted mb-0 lead fs-6">Delivering excellence across borders with specialized handling and real-time precision.</p>
            </div>
        </div>

        <div class="row g-4">
            <!-- Service 1: Air Freight -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 p-4 service-card-premium">
                    <span class="service-number">01</span>
                    <div class="service-icon-wrapper">
                        <i class="fa-light fa-plane-up fs-2 text-crimson"></i>
                    </div>
                    <div class="service-bg-shape"></div>
                    <h5 class="card-title">Global Air Freight</h5>
                    <p class="card-text">Velocity without borders. Our priority sky-bridge network ensures time-critical cargo reaches its destination with unparalleled speed and security.</p>
                    <a href="services.php" class="btn btn-link text-crimson fw-bold ps-0 mt-2 text-decoration-none">
                        Learn More <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>

            <!-- Service 2: Ocean Freight -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 p-4 service-card-premium">
                    <span class="service-number">02</span>
                    <div class="service-icon-wrapper">
                        <i class="fa-light fa-ship fs-2 text-crimson"></i>
                    </div>
                    <div class="service-bg-shape"></div>
                    <h5 class="card-title">Ocean Logistics</h5>
                    <p class="card-text">Massive capacity, optimized global routes. We manage full-container and partial loads with cost-effective precision for international trade.</p>
                    <a href="services.php" class="btn btn-link text-crimson fw-bold ps-0 mt-2 text-decoration-none">
                        Learn More <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>

            <!-- Service 3: Smart Warehousing -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 p-4 service-card-premium">
                    <span class="service-number">03</span>
                    <div class="service-icon-wrapper">
                        <i class="fa-light fa-warehouse-full fs-2 text-crimson"></i>
                    </div>
                    <div class="service-bg-shape"></div>
                    <h5 class="card-title">Smart Warehousing</h5>
                    <p class="card-text">AI-driven inventory management in strategic global hubs. Secure, climate-controlled environments tailored for your fulfillment needs.</p>
                    <a href="services.php" class="btn btn-link text-crimson fw-bold ps-0 mt-2 text-decoration-none">
                        Learn More <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>

            <!-- Service 4: Last-Mile Delivery -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 p-4 service-card-premium">
                    <span class="service-number">04</span>
                    <div class="service-icon-wrapper">
                        <i class="fa-light fa-truck-fast fs-2 text-crimson"></i>
                    </div>
                    <div class="service-bg-shape"></div>
                    <h5 class="card-title">Last-Mile Fulfillment</h5>
                    <p class="card-text">Precision to the final doorstep. Our optimized local networks ensure rapid delivery for modern e-commerce and retail excellence.</p>
                    <a href="services.php" class="btn btn-link text-crimson fw-bold ps-0 mt-2 text-decoration-none">
                        Learn More <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>

            <!-- Service 5: Sensitive Cargo -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 p-4 service-card-premium">
                    <span class="service-number">05</span>
                    <div class="service-icon-wrapper">
                        <i class="fa-light fa-vial-virus fs-2 text-crimson"></i>
                    </div>
                    <div class="service-bg-shape"></div>
                    <h5 class="card-title">Specialized Handling</h5>
                    <p class="card-text">White-glove care for medical, fragile, and high-value shipments. Advanced temperature control and real-time monitoring for peace of mind.</p>
                    <a href="services.php" class="btn btn-link text-crimson fw-bold ps-0 mt-2 text-decoration-none">
                        Learn More <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>

            <!-- Service 6: Customs Expertise -->
            <div class="col-lg-4 col-md-6">
                <div class="card h-100 p-4 service-card-premium">
                    <span class="service-number">06</span>
                    <div class="service-icon-wrapper">
                        <i class="fa-light fa-file-invoice fs-2 text-crimson"></i>
                    </div>
                    <div class="service-bg-shape"></div>
                    <h5 class="card-title">Customs Brokerage</h5>
                    <p class="card-text">Seamless border crossings. Our licensed experts navigate complex international regulations to avoid delays and optimize your supply chain.</p>
                    <a href="services.php" class="btn btn-link text-crimson fw-bold ps-0 mt-2 text-decoration-none">
                        Learn More <i class="bi bi-arrow-right ms-1"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="winners" class="py-5 testimonials-dark-wrap">
    <div class="container py-5">
        <div class="text-center mb-5">
            <span class="text-gold fw-bold text-uppercase mb-2 d-block" style="letter-spacing: 4px; font-size: 0.7rem;">Verified Testimonials</span>
            <h2 class="display-5 fw-900 mb-0 text-white" style="font-family: 'ABC Ginto Nord Unlicensed Trial Black';">TRUSTED GLOBALLY</h2>
            <div class="mx-auto mt-3" style="width: 60px; height: 3px; background: var(--bs-crimson-light); border-radius: 10px;"></div>
        </div>

        <?php if (!empty($winners)): ?>
            <div class="swiper testimonialsSwiper px-2 py-4">
                <div class="swiper-wrapper">
                    <?php foreach ($winners as $winner): ?>
                        <div class="swiper-slide h-auto">
                            <div class="testimonial-glass-card">
                                <div class="testimonial-stars-gold">
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                    <i class="bi bi-star-fill"></i>
                                </div>

                                <div class="testimonial-quote-bubble">
                                    "<?php echo htmlspecialchars($winner['testimonial']); ?>"
                                </div>

                                <div class="testimonial-client-meta">
                                    <div class="client-avatar-wrap">
                                        <?php
                                            $image_path = htmlspecialchars($winner['winner_image_path']);
                                            $cleaned_path = str_replace('../', '', $image_path);
                                            $placeholder_url = 'https://ui-avatars.com/api/?name=' . urlencode($winner['winner_name']) . '&background=6d0000&color=fff';
                                            $final_image_url = ($cleaned_path && file_exists($cleaned_path)) ? $cleaned_path : $placeholder_url;
                                        ?>
                                        <img src="<?php echo $final_image_url; ?>" class="testimonial-client-img" alt="Client">
                                    </div>
                                    <div class="client-info-text">
                                        <h6 class="text-white"><?php echo htmlspecialchars($winner['winner_name']); ?></h6>
                                        <span><?php echo htmlspecialchars($winner['winner_location']); ?></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
                <!-- Pagination -->
                <div class="swiper-pagination swiper-pagination-premium mt-4 position-relative"></div>
            </div>
            
            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    new Swiper(".testimonialsSwiper", {
                        slidesPerView: 1,
                        spaceBetween: 30,
                        grabCursor: true,
                        loop: true,
                        autoplay: {
                            delay: 4000,
                            disableOnInteraction: false,
                        },
                        pagination: {
                            el: ".swiper-pagination",
                            clickable: true,
                        },
                        breakpoints: {
                            768: {
                                slidesPerView: 2,
                            },
                            1024: {
                                slidesPerView: 3,
                            },
                        },
                    });
                });
            </script>
        <?php else: ?>
            <div class="alert alert-info border-0 shadow-sm bg-dark text-white-50" role="alert">
                No recent success stories found at the moment.
            </div>
        <?php endif; ?>
    </div>
</section>
      <section id="entry" class="py-5" style="background-color: #F5FBFF;">
         <div class="container">
            <div class="row justify-content-center">
               <div class="col-lg-8">
                  <div class="card form-card p-4 p-md-5" style="border:none; ">
                     <h3 class="text-center fw-bolder mb-4" style="color: #6d0000">Share Your Story!</h3>
                     <p class="text-center text-muted mb-4">Did your critical shipment arrive flawlessly? Share your experience and help others choose reliability..</p>
                     <form method="POST" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" enctype="multipart/form-data" class="needs-validation" novalidate>
                        <div class="row g-3 mb-3">
                           <div class="col-md-6">
                              <label for="client_name" class="form-label fw-bold">Full Name</label>
                              <input type="text" class="form-control" id="client_name" name="client_name" placeholder="Please enter your full name" required minlength="2">
                              <div class="invalid-feedback">
                                 Please enter your name (at least 2 characters).
                              </div>
                           </div>
                           <div class="col-md-6">
                              <label for="location" class="form-label fw-bold">Your Location (City, Country)</label>
                              <input type="text" class="form-control" id="location" name="client_location" placeholder="Enter your city and country" required>
                              <div class="invalid-feedback">
                                 Please enter your location.
                              </div>
                           </div>
                        </div>
                        <div class="mb-3">
                           <label for="product_service" class="form-label fw-bold">Service Used</label>
                           <select class="form-select" id="product_service" name="product_service" required>
                                <option selected disabled value="">Which service did you use?</option>
                                <option value="express">Express International</option>
                                <option value="standard">Standard Freight</option>
                                <option value="domestic">Domestic Next-Day</option>
                            </select>
                           <div class="invalid-feedback">
                              Please specify the service used.
                           </div>
                        </div>
                        <div class="mb-3">
                           <label for="testimonial" class="form-label fw-bold">Your Story/Testimonial</label>
                           <textarea class="form-control" id="testimonial" name="testimonial" rows="4" required minlength="20" maxlength="500" placeholder="Describe the service: speed, security, and tracking experience. Write in your prefered language."></textarea>
                           <div class="invalid-feedback">
                              Please share your story (min 20, max 500 characters).
                           </div>
                        </div>
                        <div class="row g-3 mb-4 align-items-center">
                           <div class="col-md-6">
                              <label for="language" class="form-label fw-bold">Select Language</label>
                              <select class="form-select" id="language" name="language" required>
							  <option selected value="lt">Lithuanian (Lietuvių)</option>
    <option  value="en">English</option>
    <option value="es">Spanish (Español)</option>
    <option value="fr">French (Français)</option>
    <option value="de">German (Deutsch)</option>
    <option value="pt">Portuguese (Português)</option>
    <option value="it">Italian (Italiano)</option>
    <option value="zh">Chinese (Mandarin - 简体中文)</option>
    <option value="ja">Japanese (日本語)</option>
    <option value="ko">Korean (한국어)</option>
    <option value="ru">Russian (Русский)</option>
    <option value="ar">Arabic (العربية)</option>
    <option value="hi">Hindi (हिन्दी)</option>
    
</select>
                              <div class="invalid-feedback">
                                 Please select a language.
                              </div>
                           </div>
                           <div class="col-md-6">
                              <label class="form-label d-block fw-bold">Your Rating</label>
                              <div class="star-rating fs-3">
                                 <svg class="active" data-rating="1" width="30" height="30" viewBox="0 0 24 24">
                                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                                 </svg>
                                 <svg class="active" data-rating="2" width="30" height="30" viewBox="0 0 24 24">
                                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                                 </svg>
                                 <svg class="active" data-rating="3" width="30" height="30" viewBox="0 0 24 24">
                                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                                 </svg>
                                 <svg class="active" data-rating="4" width="30" height="30" viewBox="0 0 24 24">
                                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                                 </svg>
                                 <svg class="active" data-rating="5" width="30" height="30" viewBox="0 0 24 24">
                                    <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                                 </svg>
                              </div>
                              <input type="hidden" name="rating" id="rating-value" value="5">
                           </div>
                        </div>
                        <div class="mb-4">
                           <label class="form-label fw-bold">Upload Your Photo (Optional)</label>
                           <div class="file-drop-zone" id="dropZone">
                              <input type="file" id="profileImage" name="profile_image" accept="image/jpeg, image/png, image/webp">
                              <div class="d-flex flex-column align-items-center">
                                 <i class="bi bi-cloud-arrow-up file-drop-icon"></i>
                                 <p class="mb-1 text-dark-emphasis fw-bold">Drag & Drop or Click to Upload</p>
                                 <p class="small text-muted mb-0">JPEG, PNG, or WEBP (Max 5MB)</p>
                                 <p class="file-name-display d-none" id="fileNameDisplay"></p>
                              </div>
                           </div>
                           <div class="image-preview text-center" id="imagePreview">
                              <img src="" alt="Profile Image Preview" class="img-fluid" id="previewImage">
                           </div>
                        </div>
                        <div class="d-grid">
                           <button type="submit" class="btn btn-lg text-white fw-bold btn-gradient shadow-lg">SHARE MY STORY</button>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </section>
      <?php
         // --- Pagination settings ---
         $initial_limit = 3; 
         $initial_offset = 0; 
         
         
         $total_stmt = $pdo->query("SELECT COUNT(*) FROM testimonials");
         $total_testimonials = (int)$total_stmt->fetchColumn();
         
         
         $stmt = $pdo->prepare("SELECT * FROM testimonials ORDER BY submission_date DESC LIMIT :limit OFFSET :offset");
         $stmt->bindValue(':limit', $initial_limit, PDO::PARAM_INT);
         $stmt->bindValue(':offset', $initial_offset, PDO::PARAM_INT);
         $stmt->execute();
         $testimonials = $stmt->fetchAll(PDO::FETCH_ASSOC);
         
         $next_offset = count($testimonials); 
         ?>
     <section id="testimonials" class="pt-5 pb-4" style="background-color: #f8fafc;">
    <div class="container py-4">
        <div class="text-center mb-5">
            <span class="text-crimson fw-bold text-uppercase mb-2 d-block" style="letter-spacing: 2.5px; font-size: 0.75rem;">Verified Testimonials</span>
            <!-- Responsive Title -->
            <h2 class="display-6 fw-900 mb-2 text-dark d-none d-md-block" style="font-family: 'ABC Ginto Nord Unlicensed Trial Black';">Delivering Peace of Mind: Verified Client Reviews</h2>
            <h2 class="fw-bolder mb-2 text-dark d-md-none">VERIFIED REVIEWS</h2>
            <p class="text-muted mx-auto" style="max-width: 700px;">Don't just take our word for it—read transparent, real-world reviews of our speed and security from clients around the globe.</p>
        </div>

        <div id="testimonial-container" class="row row-cols-1 row-cols-md-3 g-4">
            <?php if (!empty($testimonials)): ?>
                <?php foreach ($testimonials as $t): ?>
                    <div class="col">
                        <div class="card h-100 verified-testimonial-card">
                            <?php 
                                $image = !empty($t['client_image_path']) ? htmlspecialchars($t['client_image_path']) : 'https://ui-avatars.com/api/?name=' . urlencode($t['client_name']) . '&background=6d0000&color=fff';
                                $rating = 5; 
                                $stars = '';
                                for ($i = 1; $i <= 5; $i++) {
                                    $stars .= '<i class="bi bi-star-fill text-gold me-1"></i>';
                                }
                                $submission_date = date("M d, Y", strtotime($t['submission_date'])); 
                            ?>
                            
                            <div class="testimonial-stars-premium mb-3">
                                <?= $stars ?>
                            </div>

                            <p class="testimonial-quote-text">“<?= htmlspecialchars($t['testimonial_text']) ?>”</p>

                            <div class="mt-auto testimonial-footer-premium">
                                <div class="d-flex align-items-center justify-content-between mb-3">
                                    <div class="d-flex align-items-center">
                                        <img src="<?= $image ?>" class="testimonial-avatar" alt="Client">
                                        <div>
                                            <h6 class="mb-0 fw-bold text-dark"><?= htmlspecialchars($t['client_name']) ?></h6>
                                            <small class="text-muted"><?= htmlspecialchars($t['client_location']) ?></small>
                                        </div>
                                    </div>
                                    <span class="testimonial-service-badge"><?= htmlspecialchars($t['product_service']) ?></span>
                                </div>
                                <div class="text-end">
                                    <small class="text-secondary opacity-50"><?= $submission_date ?></small>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php else: ?>
                <div class="col-12 text-center">
                    <div class="alert alert-light border-0 shadow-sm py-4">
                        <i class="bi bi-chat-left-quote display-4 text-muted mb-3 d-block"></i>
                        No testimonials available yet.
                    </div>
                </div>
            <?php endif; ?>
        </div>

        <?php if ($total_testimonials > $initial_limit): ?>
            <div class="text-center mt-5">
                <button id="loadMoreBtn" class="btn btn-crimson-outline btn-lg fw-bold px-5 py-3 rounded-pill shadow-sm" data-offset="<?= $next_offset ?>" data-limit="<?= $initial_limit ?>">
                    <span class="spinner-border spinner-border-sm me-2 d-none" role="status" aria-hidden="true"></span>
                    EXPLORE MORE REVIEWS
                </button>
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- Recent Shipments Gallery Section -->
<section id="shipment-gallery" class="py-5" style="background-color: #fff;">
    <div class="container py-4">
        <div class="row align-items-center mb-5">
            <div class="col-lg-6 text-center text-lg-start">
                <span class="text-crimson fw-bold text-uppercase mb-2 d-block" style="letter-spacing: 2.5px; font-size: 0.75rem;">Live Fleet Operations</span>
                <h2 class="display-6 fw-900 mb-0" style="font-family: 'ABC Ginto Nord Unlicensed Trial Black';">RECENT SHIPMENTS IN TRANSIT</h2>
            </div>
            <div class="col-lg-6 text-center text-lg-end d-none d-lg-block">
                <p class="text-muted mb-0 lead fs-6">A glimpse into our daily global cargo operations across major trade lanes.</p>
            </div>
        </div>

        <div class="row g-4">
            <!-- Shipment 1 -->
            <div class="col-lg-3 col-md-6">
                <div class="shipment-gallery-card">
                    <img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&q=80&w=600" class="shipment-gallery-img" alt="Cargo Plane">
                    <div class="shipment-status-badge">In Transit (Air)</div>
                    <div class="shipment-overlay">
                        <div class="shipment-route">
                            Shanghai <i class="bi bi-arrow-right"></i> London
                        </div>
                        <div class="shipment-details">Electronic Components • Express</div>
                    </div>
                </div>
            </div>

            <!-- Shipment 2 -->
            <div class="col-lg-3 col-md-6">
                <div class="shipment-gallery-card">
                    <img src="https://images.unsplash.com/photo-1494412552100-42e4e7a74ec6?auto=format&fit=crop&q=80&w=600" class="shipment-gallery-img" alt="Cargo Ship">
                    <div class="shipment-status-badge">Arrived (Ocean)</div>
                    <div class="shipment-overlay">
                        <div class="shipment-route">
                            Dubai <i class="bi bi-arrow-right"></i> Rotterdam
                        </div>
                        <div class="shipment-details">Industrial Machinery • Bulk Cargo</div>
                    </div>
                </div>
            </div>

            <!-- Shipment 3 -->
            <div class="col-lg-3 col-md-6">
                <div class="shipment-gallery-card">
                    <img src="https://images.unsplash.com/photo-1519003722824-194d4455a60c?auto=format&fit=crop&q=80&w=600" class="shipment-gallery-img" alt="Logistics Warehouse">
                    <div class="shipment-status-badge">Processing</div>
                    <div class="shipment-overlay">
                        <div class="shipment-route">
                            Singapore <i class="bi bi-arrow-right"></i> Sydney
                        </div>
                        <div class="shipment-details">Retail Inventory • Smart Hub</div>
                    </div>
                </div>
            </div>

            <!-- Shipment 4 -->
            <div class="col-lg-3 col-md-6">
                <div class="shipment-gallery-card">
                    <img src="https://images.unsplash.com/photo-1620714223084-8fcacc6dfd8d?auto=format&fit=crop&q=80&w=600" class="shipment-gallery-img" alt="Delivery Truck">
                    <div class="shipment-status-badge">Last Mile</div>
                    <div class="shipment-overlay">
                        <div class="shipment-route">
                            Los Angeles <i class="bi bi-arrow-right"></i> Chicago
                        </div>
                        <div class="shipment-details">E-commerce Parcel • Priority</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

      <?php include "include/payment_modals.php" ?>
      <?php include "footer.php" ?>
	  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
      <!-- Swiper JS -->
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 

   
      
      <script>
         document.addEventListener('DOMContentLoaded', () => {
         
         
             
             const formatNumber = (num, id) => {
                 if (id === 'prize-value' && num >= 1000000) {
                    
                     const millions = num / 1000000;
                     return '$' + millions.toFixed(0) + 'M'; 
                 } else if (id === 'participants' && num >= 1000) {
                     
                     return num.toLocaleString(); 
                 } else {
                     return num.toLocaleString();
                 }
             };
         
             // --- 1. Key Stats Counter Animation ---
             const counters = document.querySelectorAll('[data-target]');
             const speed = 200;
         
             counters.forEach(counter => {
                 const updateCount = () => {
                     const target = +counter.getAttribute('data-target');
                     
                     const count = +counter.innerText.replace(/[$,+M]/g, '');
         
                     const increment = target / speed;
         
                     if (count < target) {
                         
                         if (target > 1000000) {
                             counter.innerText = Math.ceil(count + (increment * 100));
                         } else if (target > 50000) {
                             counter.innerText = Math.ceil(count + (increment * 10));
                         } else {
                             counter.innerText = Math.ceil(count + increment);
                         }
                         setTimeout(updateCount, 1);
                     } else {
                         
                         counter.innerText = formatNumber(target, counter.id) + '+';
                     }
                 };
         
                 
                 updateCount();
             });
         
         
             
         const ratingContainer = document.querySelector('.star-rating');
                 
         if (ratingContainer) {
         
         const stars = ratingContainer.querySelectorAll('svg');
         const ratingInput = document.getElementById('rating-value');
         
         stars.forEach((star, index) => {
             star.addEventListener('click', () => {
                 const rating = index + 1;
         
                
                 ratingInput.value = rating;
         
                
                 stars.forEach((s, sIndex) => {
                     if (sIndex < rating) {
                         s.classList.add('active');
                     } else {
                         s.classList.remove('active');
                     }
                 });
             });
         });
         }
             
             // --- 3. Navbar Sticky and Shadow Effect ---
             const navbar = document.querySelector('.navbar-dark');
             if (navbar) {
                 window.addEventListener('scroll', () => {
                     if (window.scrollY > 50) {
                         navbar.classList.add('scrolled');
                     } else {
                         navbar.classList.remove('scrolled');
                     }
                 });
             }
         
         
         // --- NEW: Bootstrap Form Validation Initialization ---
         const forms = document.querySelectorAll('.needs-validation');
         
         // Loop over them and prevent submission
         Array.from(forms).forEach(form => {
         form.addEventListener('submit', event => {
             if (!form.checkValidity()) {
                 event.preventDefault();
                 event.stopPropagation();
             }
         
             form.classList.add('was-validated');
         }, false);
         });
         
         
         
         
         const loadMoreBtn = document.getElementById('loadMoreBtn');
         const container = document.getElementById('testimonial-container');
         
         if (loadMoreBtn && container) {
             
             loadMoreBtn.addEventListener('click', function() {
                 const currentOffset = parseInt(this.getAttribute('data-offset'));
                 const limit = parseInt(this.getAttribute('data-limit'));
                 
                 
                 this.disabled = true;
                 this.querySelector('.spinner-border').classList.remove('d-none');
                 this.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> LOADING...';
         
                 fetch(`load_stories.php?offset=${currentOffset}&limit=${limit}`)
                     .then(response => {
                         
                         if (response.status === 204) {
                             return ''; 
                         }
                         if (!response.ok) {
                             throw new Error('Network response was not ok');
                         }
                         return response.text();
                     })
                     .then(html => {
                         if (html) {
                             
                             container.insertAdjacentHTML('beforeend', html);
                             
                             
                             const newOffset = currentOffset + limit;
                             loadMoreBtn.setAttribute('data-offset', newOffset);
                             
                             
                             loadMoreBtn.disabled = false;
                             loadMoreBtn.innerHTML = 'LOAD MORE STORIES'; 
                             
                             
                             const itemsLoaded = container.querySelectorAll('.col:not(.load-more-item)').length; 
                             const newItemsCount = html.split('<div class="col load-more-item">').length - 1;
         
                             if (newItemsCount < limit) {
                                  loadMoreBtn.disabled = true;
                                  loadMoreBtn.innerHTML = 'NO MORE STORIES';
                                  loadMoreBtn.classList.replace('btn-outline-danger', 'btn-secondary');
                             }
                             
                         } else {
                             // No content returned (204)
                             loadMoreBtn.disabled = true;
                             loadMoreBtn.innerHTML = 'NO MORE STORIES';
                             loadMoreBtn.classList.replace('btn-outline-danger', 'btn-secondary');
                         }
                     })
                     .catch(error => {
                         console.error('AJAX Load Error:', error);
                         
                         loadMoreBtn.disabled = true;
                         loadMoreBtn.innerHTML = 'LOAD ERROR';
                         loadMoreBtn.classList.replace('btn-outline-danger', 'btn-danger');
                     });
             });
         }
         
         
         
         
         
             
         });
      </script>
      <script>
         // --- SweetAlert Display Logic ---
         const formStatus = '<?php echo $form_status; ?>';
         const brandColor = '#4f46e5'; 
         
         if (formStatus === 'success') {
             Swal.fire({
                 icon: 'success',
                 title: 'Congratulations!',
                 text: 'Your testimonial has been submitted successfully and is awaiting approval.',
                 confirmButtonColor: brandColor,
                 timer: 4000
             });
         } else if (formStatus === 'error') {
             Swal.fire({
                 icon: 'error',
                 title: 'Submission Failed 😥',
                 text: 'We encountered an error processing your request. Please check your inputs and try again.',
                 confirmButtonColor: '#dc3545' 
             });
         }
         
         
         
         // --- NEW: Rich File Upload / Drag-and-Drop Logic ---
         const dropZone = document.getElementById('dropZone');
         const fileInput = document.getElementById('profileImage');
         const imagePreview = document.getElementById('imagePreview');
         const previewImage = document.getElementById('previewImage');
         const fileNameDisplay = document.getElementById('fileNameDisplay');
         
         
         function handleFileSelect(file) {
         
         if (file) {
             const reader = new FileReader();
         
             reader.onload = function(e) {
                 previewImage.src = e.target.result;
                 imagePreview.style.display = 'block';
             }
         
             reader.readAsDataURL(file);
             
             
             fileNameDisplay.textContent = file.name;
             fileNameDisplay.classList.remove('d-none');
             
         } else {
             
             imagePreview.style.display = 'none';
             previewImage.src = '';
             fileNameDisplay.classList.add('d-none');
             fileNameDisplay.textContent = '';
         }
         }
         
         
         
         fileInput.addEventListener('change', (e) => {
         handleFileSelect(e.target.files[0]);
         });
         
         
         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
         dropZone.addEventListener(eventName, preventDefaults, false);
         });
         
         function preventDefaults (e) {
         e.preventDefault();
         e.stopPropagation();
         }
         
         
         ['dragenter', 'dragover'].forEach(eventName => {
         dropZone.addEventListener(eventName, () => {
             dropZone.classList.add('is-dragover');
         }, false);
         });
         
         ['dragleave', 'drop'].forEach(eventName => {
         dropZone.addEventListener(eventName, () => {
             dropZone.classList.remove('is-dragover');
         }, false);
         });
         
         
         dropZone.addEventListener('drop', (e) => {
         const dt = e.dataTransfer;
         const file = dt.files[0];
         
         
         fileInput.files = dt.files; 
         
         handleFileSelect(file);
         }, false);
         
      </script>
     <script>
document.addEventListener("DOMContentLoaded", function () {
  const allNavLinks = Array.from(document.querySelectorAll('.nav-link'));
  const anchorNavLinks = allNavLinks.filter(l => (l.getAttribute('href') || '').includes('#'));
  const homeLink = allNavLinks.find(l => (l.getAttribute('href') || '').replace(location.origin, '').endsWith('index.php'));

  function linkHash(link) {
    try {
      return new URL(link.getAttribute('href'), location.href).hash || '';
    } catch {
      const raw = link.getAttribute('href') || '';
      return raw.includes('#') ? raw.slice(raw.indexOf('#')) : '';
    }
  }

  function clearActive() {
    allNavLinks.forEach(l => l.classList.remove('active'));
  }

  function setActiveByHash(hash) {
    clearActive();
    if (hash) {
      const match = anchorNavLinks.find(l => linkHash(l) === hash);
      if (match) match.classList.add('active');
    } else if (homeLink) {
      homeLink.classList.add('active');
    }
  }

  
  setActiveByHash(location.hash);

 
  anchorNavLinks.forEach(link => {
    link.addEventListener('click', e => {
      const hash = linkHash(link);
      if (!hash) return;
      const linkUrl = new URL(link.getAttribute('href'), location.href);
      if (linkUrl.pathname !== location.pathname) return; // another page
      e.preventDefault();

      history.pushState(null, '', hash);
      setActiveByHash(hash);

      const target = document.querySelector(hash);
      if (target) {
        const yOffset = document.querySelector('.navbar')?.offsetHeight + 10 || 0;
        const rect = target.getBoundingClientRect();
        const top = window.scrollY + rect.top - yOffset;
        window.scrollTo({ top, behavior: 'smooth' });
      }
    });
  });

 
  window.addEventListener('popstate', () => setActiveByHash(location.hash));
});
</script>

</script>

      <script>
         document.addEventListener("DOMContentLoaded", function() {
             const text = "YOUR RELIABLE, FAST, AND SECURE SHIPPING PARTNER";
             const element = document.getElementById("typeText");
             let index = 0;
         
             function typeEffect() {
                 if (index < text.length) {
                     element.textContent += text.charAt(index);
                     index++;
                     setTimeout(typeEffect, 80); 
                 }
             }
         
             typeEffect();
         });
      </script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const swiper = new Swiper('.heroSwiper', {
        speed: 800, // Faster for the flash effect
        autoplay: {
            delay: 7000,
            disableOnInteraction: false,
        },
        loop: true,
        effect: 'creative', // Using creative effect for flash fade
        creativeEffect: {
            prev: {
                opacity: 0,
                translate: [0, 0, 0],
            },
            next: {
                opacity: 0,
                translate: [0, 0, 0],
            },
        },
        
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        
        keyboard: {
            enabled: true,
        },
        
        on: {
            slideChangeTransitionStart: function() {
                const allSlides = this.slides;
                allSlides.forEach(slide => {
                    const title = slide.querySelector('h1');
                    const subtitle = slide.querySelector('p');
                    const button = slide.querySelector('a');
                    
                    if(title) title.classList.remove('show');
                    if(subtitle) subtitle.classList.remove('show');
                    if(button) button.classList.remove('show');
                });
            },
            
            slideChangeTransitionEnd: function() {
                const activeSlide = this.slides[this.activeIndex];
                const title = activeSlide.querySelector('h1');
                const subtitle = activeSlide.querySelector('p');
                const button = activeSlide.querySelector('a');
                
                setTimeout(() => title.classList.add('show'), 100);
                setTimeout(() => subtitle.classList.add('show'), 400);
                setTimeout(() => button.classList.add('show'), 700);
            },
            
            init: function() {
                const activeSlide = this.slides[this.activeIndex];
                const title = activeSlide.querySelector('h1');
                const subtitle = activeSlide.querySelector('p');
                const button = activeSlide.querySelector('a');
                
                setTimeout(() => title.classList.add('show'), 500);
                setTimeout(() => subtitle.classList.add('show'), 800);
                setTimeout(() => button.classList.add('show'), 1100);
            }
        }
    });
});
</script>


	  
	 
	  
	  <?php include "custom_script.php" ?>
   </body>
</html>