@extends('layouts.app')
@section('title','Trusted facility service in bangladesh')
@section('keywords','Cleaning service in Dhaka,Best home cleaning,Office cleaning near me,Deep cleaning in Dhaka,Sofa cleaning service,Commercial cleaning')
@section('content')

<style>
    /* Enhanced Slider Animations */
    .slide {
        opacity: 0;
        visibility: hidden;
        transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
        transform: scale(1.05);
        z-index: 1;
    }

    .slide::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        transform: scale(1);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .slide.active::before {
        transform: scale(1);
    }

    .slide.active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        z-index: 2;
    }

    /* Smooth slide transitions */
    .slide.fade-in {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        z-index: 2;
    }

    .slide.fade-out {
        opacity: 0;
        visibility: hidden;
        transform: scale(1.05);
        z-index: 1;
    }

    /* Enhanced Navigation Dots */
    .slider-dot {
        position: relative;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .slider-dot::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
        border-radius: 50%;
        transform: scale(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .slider-dot.active::before {
        transform: scale(1);
    }

    .slider-dot:hover {
        transform: scale(1.2);
    }

    /* Enhanced Navigation Arrows */
    #prevSlide,
    #nextSlide {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    #prevSlide:hover,
    #nextSlide:hover {
        transform: translateY(-50%) scale(1.1);
        background: rgba(255, 255, 255, 0.4);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    }

    #prevSlide:active,
    #nextSlide:active {
        transform: translateY(-50%) scale(0.95);
    }

    /* Particle Animations */
    .particle:nth-child(1) {
        top: 20%;
        left: 10%;
    }

    .particle:nth-child(2) {
        top: 60%;
        left: 80%;
    }

    .particle:nth-child(3) {
        top: 30%;
        left: 70%;
    }

    .particle:nth-child(4) {
        top: 80%;
        left: 20%;
    }

    .particle:nth-child(5) {
        top: 50%;
        left: 50%;
    }

    @keyframes float-1 {
        0%, 100% {
            transform: translateY(0px) translateX(0px);
        }
        25% {
            transform: translateY(-20px) translateX(10px);
        }
        50% {
            transform: translateY(-10px) translateX(-5px);
        }
        75% {
            transform: translateY(-30px) translateX(15px);
        }
    }

    @keyframes float-2 {
        0%, 100% {
            transform: translateY(0px) translateX(0px);
        }
        33% {
            transform: translateY(-15px) translateX(-10px);
        }
        66% {
            transform: translateY(-25px) translateX(5px);
        }
    }

    @keyframes float-3 {
        0%, 100% {
            transform: translateY(0px) translateX(0px);
        }
        50% {
            transform: translateY(-40px) translateX(-20px);
        }
    }

    @keyframes float-4 {
        0%, 100% {
            transform: translateY(0px) translateX(0px);
        }
        25% {
            transform: translateY(-10px) translateX(-15px);
        }
        75% {
            transform: translateY(-20px) translateX(10px);
        }
    }

    @keyframes float-5 {
        0%, 100% {
            transform: translateY(0px) translateX(0px);
        }
        40% {
            transform: translateY(-35px) translateX(25px);
        }
        80% {
            transform: translateY(-15px) translateX(-10px);
        }
    }

    .animate-float-1 {
        animation: float-1 6s ease-in-out infinite;
    }

    .animate-float-2 {
        animation: float-2 8s ease-in-out infinite;
    }

    .animate-float-3 {
        animation: float-3 10s ease-in-out infinite;
    }

    .animate-float-4 {
        animation: float-4 7s ease-in-out infinite;
    }

    .animate-float-5 {
        animation: float-5 9s ease-in-out infinite;
    }

    /* Fade in animations */
    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in-up {
        animation: fade-in-up 0.8s ease-out forwards;
    }

    /* Responsive optimizations */
    @media (max-width: 768px) {
        #prevSlide,
        #nextSlide {
            width: 40px;
            height: 40px;
            left: 16px;
            right: 16px;
        }

        #prevSlide {
            left: 16px;
        }

        #nextSlide {
            right: 16px;
        }

        .slider-dot {
            width: 10px;
            height: 10px;
        }
    }

    /* Preload optimization */
    .hero-slider {
        will-change: transform;
    }

    .slide {
        will-change: opacity, transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
</style>

<!-- Enhanced Hero Section with Background Image Slider -->
<section id="cleaning-hero" class="relative min-h-screen overflow-hidden">
    <!-- Background Image Slider -->
    <div class="absolute inset-0 z-0">
        <!-- Slider Container -->
        <div class="hero-slider relative w-full h-full">
            <!-- Slide 1 - Professional Cleaning -->
            <div class="slide active absolute inset-0 bg-gradient-to-br from-emerald-900/90 via-teal-800/85 to-cyan-900/90"
                style="background-image: url('{{ asset('images/cleaning-hero-1.webp') }}'); background-size: cover; background-position: center;">
                <div class="absolute inset-0 bg-gradient-to-r from-emerald-600/20 via-transparent to-teal-600/20"></div>
            </div>

            <!-- Slide 2 - Deep Cleaning -->
            <div class="slide absolute inset-0 bg-gradient-to-br from-blue-900/90 via-blue-800/85 to-indigo-900/90"
                style="background-image: url('{{ asset('images/cleaning-hero-2.webp') }}'); background-size: cover; background-position: center;">
                <div class="absolute inset-0 bg-gradient-to-r from-blue-600/20 via-transparent to-indigo-600/20"></div>
            </div>

            <!-- Slide 3 - Commercial Cleaning -->
            <div class="slide absolute inset-0 bg-gradient-to-br from-purple-900/90 via-violet-800/85 to-fuchsia-900/90"
                style="background-image: url('{{ asset('images/cleaning-hero-3.webp') }}'); background-size: cover; background-position: center;">
                <div class="absolute inset-0 bg-gradient-to-r from-purple-600/20 via-transparent to-fuchsia-600/20"></div>
            </div>
        </div>

        <!-- Animated Particles Overlay -->
        <div class="absolute inset-0 overflow-hidden pointer-events-none z-10">
            <div class="particle absolute w-2 h-2 bg-white/30 rounded-full animate-float-1"></div>
            <div class="particle absolute w-1 h-1 bg-white/40 rounded-full animate-float-2"></div>
            <div class="particle absolute w-3 h-3 bg-white/20 rounded-full animate-float-3"></div>
            <div class="particle absolute w-1.5 h-1.5 bg-white/50 rounded-full animate-float-4"></div>
            <div class="particle absolute w-2.5 h-2.5 bg-white/25 rounded-full animate-float-5"></div>
        </div>
    </div>

    <!-- Content Overlay -->
    <div class="relative z-20 min-h-screen flex items-center">
        <div class="container mx-auto px-4 py-16 md:py-24">
            <div class="grid lg:grid-cols-12 gap-12 items-center min-h-[80vh]">
                <!-- Content -->
                <div class="space-y-10 animate-fade-in-up text-center">
                    <!-- Enhanced Service Badge -->
                    <div class="inline-flex items-center gap-3 px-6 py-3 rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white text-sm font-semibold shadow-2xl hover:bg-white/30 transition-all duration-300">
                        <div class="w-2.5 h-2.5 bg-gradient-to-r from-yellow-400 to-orange-500 rounded-full animate-pulse"></div>
                        <i class="fas fa-broom text-yellow-400"></i>
                        <span class="tracking-wide">Professional Cleaning Services</span>
                    </div>

                    <!-- Enhanced Main Heading -->
                    <div class="space-y-6">
                        <h1 class="text-5xl md:text-6xl lg:text-7xl font-black leading-[0.95] tracking-tight">
                            <span class="block text-white drop-shadow-2xl animate-fade-in-up">Professional</span>
                            <span class="block bg-gradient-to-r from-yellow-400 via-orange-400 to-red-400 bg-clip-text text-transparent drop-shadow-2xl flex items-center gap-3 animate-fade-in-up justify-center" style="animation-delay: 0.2s;">
                                <i class="fas fa-sparkles text-yellow-400 text-4xl md:text-5xl lg:text-6xl drop-shadow-lg"></i>
                                Cleaning Service
                            </span>
                            <span class="block text-white/90 text-3xl md:text-4xl lg:text-5xl font-semibold mt-2 tracking-normal animate-fade-in-up drop-shadow-xl" style="animation-delay: 0.4s;">in Dhaka, Bangladesh</span>
                        </h1>
                        
                        <p class="text-xl md:text-2xl text-white/90 font-light max-w-3xl mx-auto leading-relaxed animate-fade-in-up" style="animation-delay: 0.6s;">
                            Welcome to <span class="font-semibold text-yellow-400">Hello Facility</span> – Your trusted partner for <span class="font-semibold text-orange-400">spotless spaces</span> and exceptional cleaning solutions
                        </p>
                    </div>
                    
                    <!-- Enhanced Action Buttons -->
                    <div class="flex flex-col items-center justify-center text-center sm:flex-row gap-5 animate-fade-in-up" style="animation-delay: 0.8s;">
                        <a href="#contact" class="group inline-flex items-center justify-center px-10 py-4 bg-brand-orange from-blue-600 to-indigo-600 text-white font-bold rounded-2xl shadow-xl shadow-orange-500/25 hover:shadow-2xl hover:shadow-orange-500/40 hover:-translate-y-1 hover:scale-105 transition-all duration-300 transform">
                            <i class="fas fa-calendar-check mr-3 text-lg group-hover:animate-bounce"></i>
                            <span class="tracking-wide">Book Now</span>
                        </a>
                        
                        <a href="#services" class="group inline-flex items-center justify-center px-10 py-4 bg-white/20 backdrop-blur-md text-white font-bold rounded-2xl shadow-xl hover:bg-white/30 hover:-translate-y-1 hover:scale-105 transition-all duration-300 transform border border-white/30">
                            <i class="fas fa-arrow-down mr-3 text-lg group-hover:animate-bounce"></i>
                            <span class="tracking-wide">View Services</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Slider Navigation Dots -->
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-30">
        <div class="flex space-x-3">
            <button class="slider-dot active w-3 h-3 rounded-full bg-white/80 hover:bg-white transition-all duration-300" data-slide="0"></button>
            <button class="slider-dot w-3 h-3 rounded-full bg-white/40 hover:bg-white/80 transition-all duration-300" data-slide="1"></button>
            <button class="slider-dot w-3 h-3 rounded-full bg-white/40 hover:bg-white/80 transition-all duration-300" data-slide="2"></button>
        </div>
    </div>

    <!-- Slider Navigation Arrows -->
    <button class="absolute left-8 top-1/2 transform -translate-y-1/2 z-30 w-12 h-12 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-all duration-300 group" id="prevSlide">
        <i class="fas fa-chevron-left group-hover:scale-110 transition-transform duration-300"></i>
    </button>
    <button class="absolute right-8 top-1/2 transform -translate-y-1/2 z-30 w-12 h-12 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-all duration-300 group" id="nextSlide">
        <i class="fas fa-chevron-right group-hover:scale-110 transition-transform duration-300"></i>
    </button>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const slides = document.querySelectorAll('.slide');
    const dots = document.querySelectorAll('.slider-dot');
    const prevBtn = document.getElementById('prevSlide');
    const nextBtn = document.getElementById('nextSlide');
    let currentSlide = 0;
    let slideInterval;

    function showSlide(index) {
        // Remove active class from all slides and dots
        slides.forEach(slide => slide.classList.remove('active'));
        dots.forEach(dot => dot.classList.remove('active'));
        
        // Add active class to current slide and dot
        slides[index].classList.add('active');
        dots[index].classList.add('active');
        
        currentSlide = index;
    }

    function nextSlide() {
        const next = (currentSlide + 1) % slides.length;
        showSlide(next);
    }

    function prevSlide() {
        const prev = (currentSlide - 1 + slides.length) % slides.length;
        showSlide(prev);
    }

    function startAutoSlide() {
        slideInterval = setInterval(nextSlide, 5000);
    }

    function stopAutoSlide() {
        clearInterval(slideInterval);
    }

    // Event listeners
    nextBtn.addEventListener('click', () => {
        nextSlide();
        stopAutoSlide();
        startAutoSlide();
    });

    prevBtn.addEventListener('click', () => {
        prevSlide();
        stopAutoSlide();
        startAutoSlide();
    });

    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            showSlide(index);
            stopAutoSlide();
            startAutoSlide();
        });
    });

    // Pause on hover
    const heroSection = document.getElementById('cleaning-hero');
    heroSection.addEventListener('mouseenter', stopAutoSlide);
    heroSection.addEventListener('mouseleave', startAutoSlide);

    // Start auto-slide
    startAutoSlide();
});
</script>

<!-- Enhanced Why Choose Us Section -->
<section class="bg-white py-20 relative overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-5">
        <div class="absolute inset-0" style="background-image: linear-gradient(45deg, transparent 40%, rgba(0,114,188,0.1) 50%, transparent 60%), linear-gradient(-45deg, transparent 40%, rgba(243,156,18,0.1) 50%, transparent 60%); background-size: 60px 60px;"></div>
    </div>
    
    <div class="container mx-auto px-4 relative z-10">
        <!-- Section Header -->
        <div class="text-center mb-16" data-animate="fade-up">
            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-brand-blue/10 to-brand-orange/10 border border-brand-blue/20 shadow-sm mb-4">
                <i class="fas fa-award text-brand-blue"></i>
                <span class="text-sm font-medium text-brand-blue">Why Choose Us</span>
            </div>
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                Why Choose <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-blue to-brand-orange">Hello Facility?</span>
            </h2>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">We deliver exceptional cleaning services with unmatched professionalism and care</p>
        </div>
        
        <!-- Features Grid -->
        <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            <!-- Feature 1 -->
            <div class="group relative" data-animate="scale-in" data-delay="100">
                <div class="absolute -inset-1 rounded-2xl bg-gradient-to-r from-brand-blue/20 to-brand-orange/20 opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
                <div class="relative rounded-2xl border border-gray-100 bg-white p-8 shadow-lg hover:shadow-xl transition-all duration-500 group-hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-blue/10 to-brand-blue/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-user-shield text-xl text-brand-blue"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Trusted & Trained Professionals</h3>
                    <p class="text-gray-600 leading-relaxed">Experienced staff with reliable protocols for spotless results.</p>
                </div>
            </div>
            
            <!-- Feature 2 -->
            <div class="group relative" data-animate="scale-in" data-delay="200">
                <div class="absolute -inset-1 rounded-2xl bg-gradient-to-r from-brand-orange/20 to-brand-blue/20 opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
                <div class="relative rounded-2xl border border-gray-100 bg-white p-8 shadow-lg hover:shadow-xl transition-all duration-500 group-hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-orange/10 to-brand-orange/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-seedling text-xl text-brand-orange"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Eco‑Friendly Products</h3>
                    <p class="text-gray-600 leading-relaxed">Safe for people, pets, and the environment.</p>
                </div>
            </div>
            
            <!-- Feature 3 -->
            <div class="group relative" data-animate="scale-in" data-delay="300">
                <div class="absolute -inset-1 rounded-2xl bg-gradient-to-r from-brand-blue/20 to-brand-orange/20 opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
                <div class="relative rounded-2xl border border-gray-100 bg-white p-8 shadow-lg hover:shadow-xl transition-all duration-500 group-hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-blue/10 to-brand-orange/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-tags text-xl text-brand-blue"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Affordable & Custom Packages</h3>
                    <p class="text-gray-600 leading-relaxed">Tailored to your space, schedule, and budget.</p>
                </div>
            </div>
            
            <!-- Feature 4 -->
            <div class="group relative" data-animate="scale-in" data-delay="400">
                <div class="absolute -inset-1 rounded-2xl bg-gradient-to-r from-brand-orange/20 to-brand-blue/20 opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
                <div class="relative rounded-2xl border border-gray-100 bg-white p-8 shadow-lg hover:shadow-xl transition-all duration-500 group-hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-orange/10 to-brand-orange/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-clock text-xl text-brand-orange"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Punctual & Reliable</h3>
                    <p class="text-gray-600 leading-relaxed">We show up on time and deliver consistently.</p>
                </div>
            </div>
            
            <!-- Feature 5 -->
            <div class="group relative" data-animate="scale-in" data-delay="500">
                <div class="absolute -inset-1 rounded-2xl bg-gradient-to-r from-brand-blue/20 to-brand-orange/20 opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
                <div class="relative rounded-2xl border border-gray-100 bg-white p-8 shadow-lg hover:shadow-xl transition-all duration-500 group-hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-blue/10 to-brand-blue/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-map-marker-alt text-xl text-brand-blue"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Serving Dhaka & Surroundings</h3>
                    <p class="text-gray-600 leading-relaxed">We cover Dhaka and nearby areas with quick response.</p>
                </div>
            </div>
            
            <!-- Feature 6 - Bonus -->
            <div class="group relative" data-animate="scale-in" data-delay="600">
                <div class="absolute -inset-1 rounded-2xl bg-gradient-to-r from-brand-orange/20 to-brand-blue/20 opacity-0 group-hover:opacity-100 blur transition-all duration-500"></div>
                <div class="relative rounded-2xl border border-gray-100 bg-white p-8 shadow-lg hover:shadow-xl transition-all duration-500 group-hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-xl bg-gradient-to-br from-brand-orange/10 to-brand-orange/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                        <i class="fas fa-star text-xl text-brand-orange"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">100% Satisfaction Guarantee</h3>
                    <p class="text-gray-600 leading-relaxed">Your satisfaction is our priority, guaranteed.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Enhanced CTA Section -->
<section id="contact" class="relative bg-gradient-to-br from-brand-blue/10 via-white to-brand-orange/10 py-20 overflow-hidden">
    <!-- Background Elements -->
    <div class="absolute inset-0">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-brand-blue/5 to-brand-orange/5"></div>
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-brand-blue/10 rounded-full blur-3xl animate-pulse-slow"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-brand-orange/10 rounded-full blur-3xl animate-pulse-slow" style="animation-delay: 1s;"></div>
    </div>
    
    <div class="container mx-auto px-4 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <!-- CTA Content -->
            <div class="space-y-8" data-animate="slide-right">
                <div>
                    <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/80 backdrop-blur-sm border border-brand-blue/20 shadow-sm mb-4">
                        <i class="fas fa-phone text-brand-blue"></i>
                        <span class="text-sm font-medium text-brand-blue">Get Started Today</span>
                    </div>
                    
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                        Book Now or Get a 
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-blue to-brand-orange">Free Quote!</span>
                    </h2>
                    
                    <p class="text-lg text-gray-600 leading-relaxed">Ready to transform your space? Call or email us to book your professional cleaning service in Bangladesh today.</p>
                </div>
                
                <!-- Contact Info -->
                <div class="space-y-4">
                    <div class="flex items-center gap-4 p-4 rounded-xl bg-white/80 backdrop-blur-sm border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 group">
                        <div class="w-12 h-12 rounded-full bg-gradient-to-r from-brand-blue to-brand-blue-600 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-phone text-white"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 font-medium">Phone</p>
                            <a href="tel:01757111177" class="text-lg font-semibold text-brand-blue hover:text-brand-blue-600 transition-colors duration-300">01757111177</a>
                        </div>
                    </div>
                    
                    <div class="flex items-center gap-4 p-4 rounded-xl bg-white/80 backdrop-blur-sm border border-gray-100 shadow-sm hover:shadow-md transition-all duration-300 group">
                        <div class="w-12 h-12 rounded-full bg-gradient-to-r from-brand-orange to-brand-orange-600 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                            <i class="fas fa-envelope text-white"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 font-medium">Email</p>
                            <a href="mailto:info@hellofacility.com.bd" class="text-lg font-semibold text-brand-orange hover:text-brand-orange-600 transition-colors duration-300">info@hellofacility.com.bd</a>
                        </div>
                    </div>
                    
                    <div class="flex items-center gap-4 p-4 rounded-xl bg-white/80 backdrop-blur-sm border border-gray-100 shadow-sm">
                        <div class="w-12 h-12 rounded-full bg-gradient-to-r from-brand-blue to-brand-orange flex items-center justify-center">
                            <i class="fas fa-map-marker-alt text-white"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 font-medium">Service Area</p>
                            <p class="text-lg font-semibold text-gray-700">Dhaka and surrounding areas</p>
                        </div>
                    </div>
                </div>
                
                <!-- CTA Button -->
                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="tel:01757111177" class="group inline-flex items-center justify-center gap-3 px-8 py-4 bg-gradient-to-r from-brand-blue to-brand-blue-600 text-white font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
                        <i class="fas fa-phone text-lg group-hover:animate-pulse"></i>
                        <span>Call to Book Now</span>
                        <div class="absolute inset-0 rounded-full bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                    </a>
                    
                    <a href="mailto:info@hellofacility.com.bd" class="group inline-flex items-center justify-center gap-3 px-8 py-4 bg-white/90 backdrop-blur-sm text-brand-orange font-semibold rounded-full border-2 border-brand-orange/20 hover:border-brand-orange  hover:text-white transition-all duration-300">
                        <i class="fas fa-envelope text-lg"></i>
                        <span>Get Free Quote</span>
                    </a>
                </div>
            </div>
            
            <!-- Popular Searches Card -->
            <!-- <div class="relative" data-animate="slide-left">
                <div class="absolute -inset-4 rounded-3xl bg-gradient-to-br from-brand-blue/10 to-brand-orange/10 blur-xl"></div>
                <div class="relative rounded-2xl border border-gray-100 bg-white/95 backdrop-blur-sm p-8 shadow-xl hover:shadow-2xl transition-all duration-500">
                    <div class="flex items-center gap-3 mb-6">
                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-brand-blue to-brand-orange flex items-center justify-center">
                            <i class="fas fa-search text-white"></i>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900">Popular Searches</h3>
                    </div> -->
                    
                    <!-- <div class="flex flex-wrap gap-2">
                        <span class="px-3 py-1 bg-brand-blue/10 text-brand-blue text-sm rounded-full hover:bg-brand-blue hover:text-white transition-all duration-300 cursor-pointer">Cleaning service in Dhaka</span>
                        <span class="px-3 py-1 bg-brand-orange/10 text-brand-orange text-sm rounded-full hover:bg-brand-orange hover:text-white transition-all duration-300 cursor-pointer">Best home cleaning</span>
                        <span class="px-3 py-1 bg-brand-blue/10 text-brand-blue text-sm rounded-full hover:bg-brand-blue hover:text-white transition-all duration-300 cursor-pointer">Office cleaning near me</span>
                        <span class="px-3 py-1 bg-brand-orange/10 text-brand-orange text-sm rounded-full hover:bg-brand-orange hover:text-white transition-all duration-300 cursor-pointer">Deep cleaning in Dhaka</span>
                        <span class="px-3 py-1 bg-brand-blue/10 text-brand-blue text-sm rounded-full hover:bg-brand-blue hover:text-white transition-all duration-300 cursor-pointer">Sofa cleaning service</span>
                        <span class="px-3 py-1 bg-brand-orange/10 text-brand-orange text-sm rounded-full hover:bg-brand-orange hover:text-white transition-all duration-300 cursor-pointer">Commercial cleaning</span>
                    </div> -->
                <!-- </div>
            </div> -->
        </div>
    </div>
</section>

@endsection

@push('styles')
<style>
/* Additional Custom Animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out both;
}

.animate-slide-in-right {
    animation: slideInRight 0.8s ease-out both;
}

.animate-scale-in {
    animation: scaleIn 0.6s ease-out both;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #0072bc, #f39c12);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #005a94, #d97706);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Enhanced scroll animations with stagger effect
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const element = entry.target;
                const animationType = element.getAttribute('data-animate');
                const delay = parseInt(element.getAttribute('data-delay') || '0');
                
                setTimeout(() => {
                    element.style.opacity = '1';
                    element.style.visibility = 'visible';
                    
                    switch(animationType) {
                        case 'fade-up':
                            element.classList.add('animate-fade-in-up');
                            break;
                        case 'slide-left':
                            element.classList.add('animate-slide-in-left');
                            break;
                        case 'slide-right':
                            element.classList.add('animate-slide-in-right');
                            break;
                        case 'scale-in':
                            element.classList.add('animate-scale-in');
                            break;
                        default:
                            element.classList.add('animate-fade-in-up');
                    }
                }, delay);
                
                observer.unobserve(element);
            }
        });
    }, observerOptions);

    // Initialize all animated elements
    const animatedElements = document.querySelectorAll('[data-animate]');
    animatedElements.forEach(element => {
        element.style.opacity = '0';
        element.style.visibility = 'hidden';
        observer.observe(element);
    });

    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Add parallax effect to floating elements
    window.addEventListener('scroll', () => {
        const scrolled = window.pageYOffset;
        const parallaxElements = document.querySelectorAll('.animate-float, .animate-float-delayed');
        
        parallaxElements.forEach(element => {
            const speed = 0.5;
            const yPos = -(scrolled * speed);
            element.style.transform = `translateY(${yPos}px)`;
        });
    });
});
</script>
@endpush