

<?php $__env->startSection('title', 'Home'); ?>

<?php $content = app('App\Http\Controllers\FrontController'); ?>
<?php $__env->startSection('content'); ?>

<div class="overflow-x-hidden w-full">
<!-- Hero Section with Background Slider -->
<section class="relative h-[700px] md:h-[900px] bg-military-dark-green overflow-x-hidden">
    <!-- Military Background Pattern -->
    <div class="absolute inset-0 bg-hero-pattern opacity-20"></div>

    <!-- Slider Container -->
    <div x-data="{currentSlide: 1, totalSlides: 3}" x-init="
        setInterval(() => {
            currentSlide = currentSlide === totalSlides ? 1 : currentSlide + 1;
        }, 6000);
    " class="h-full relative">

        <!-- Background Images -->
        <div class="absolute inset-0 w-full h-full">
            <!-- Slide 1 Background -->
            <div x-show="currentSlide === 1"
                 x-transition:enter="transition-opacity ease-in-out duration-1500"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition-opacity ease-in-out duration-1500"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="absolute inset-0 w-full h-full">
                <img src="public/grepoksu/slide-05b.jpg" alt="Military Family Support" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-b from-military-dark-green/70 to-military-dark-green/90"></div>
                <div class="absolute inset-0 bg-military-green/20"></div>
            </div>

            <!-- Slide 2 Background -->
            <div x-show="currentSlide === 2"
                 x-transition:enter="transition-opacity ease-in-out duration-1500"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition-opacity ease-in-out duration-1500"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="absolute inset-0 w-full h-full">
                <img src="public/grepoksu/slide-06a.jpg" alt="Military Service Excellence" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-b from-military-dark-green/70 to-military-dark-green/90"></div>
                <div class="absolute inset-0 bg-military-green/20"></div>
            </div>

            <!-- Slide 3 Background -->
            <div x-show="currentSlide === 3"
                 x-transition:enter="transition-opacity ease-in-out duration-1500"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition-opacity ease-in-out duration-1500"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="absolute inset-0 w-full h-full">
                <img src="public/grepoksu/slide-05b.jpg" alt="Military Personnel Excellence" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-b from-military-dark-green/70 to-military-dark-green/90"></div>
                <div class="absolute inset-0 bg-military-green/20"></div>
            </div>
        </div>

        <!-- Content Container -->
        <div class="relative z-30 container mx-auto px-4 h-full flex flex-col justify-center text-white">
            <!-- Slide 1 Content -->
            <div x-show="currentSlide === 1"
                 x-transition:enter="transition-all ease-in-out duration-1200 delay-500"
                 x-transition:enter-start="opacity-0 transform translate-y-8"
                 x-transition:enter-end="opacity-100 transform translate-y-0"
                 x-transition:leave="transition-all ease-in-out duration-600"
                 x-transition:leave-start="opacity-100 transform translate-y-0"
                 x-transition:leave-end="opacity-0 transform -translate-y-8"
                 class="max-w-4xl mx-auto text-center">
                <div class="flex items-center justify-center mb-6">
                    <div class="w-20 h-px bg-eagle-gold"></div>
                    <i class="fas fa-star text-eagle-gold mx-4 text-xl"></i>
                    <div class="w-20 h-px bg-eagle-gold"></div>
                </div>
                <div class="bg-military-green/30 backdrop-blur-sm px-4 py-2 rounded-full inline-block mb-4">
                    <p class="text-eagle-gold font-bold uppercase tracking-wider">Official U.S. Military Service</p>
                </div>
                <h1 class="text-4xl sm:text-5xl md:text-7xl font-bold mb-6 font-military leading-tight break-words">
                    SUPPORTING OUR <span class="text-eagle-gold">HEROES</span><br class="hidden sm:block">
                    & THEIR FAMILIES
                </h1>
                <p class="text-xl md:text-2xl mb-8 font-hind text-gray-200 max-w-3xl mx-auto leading-relaxed">
                    The Military Leave Program ensures our service members can balance duty with family time, providing authorized leave for rest, recuperation, and family bonding.
                </p>
                <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
                    <a href="<?php echo e(route('apply_now')); ?>" class="btn-military px-10 py-4 rounded-full text-lg font-bold text-military-dark-green shadow-gold transform hover:scale-105 transition duration-300">
                        <i class="fas fa-file-signature mr-3"></i>APPLY FOR LEAVE
                    </a>
                    <a href="#services" class="border-2 border-eagle-gold text-eagle-gold px-10 py-4 rounded-full text-lg font-bold hover:bg-eagle-gold hover:text-military-dark-green transition duration-300">
                        <i class="fas fa-info-circle mr-3"></i>LEARN MORE
                    </a>
                </div>
            </div>

            <!-- Slide 2 Content -->
            <div x-show="currentSlide === 2"
                 x-transition:enter="transition-all ease-in-out duration-1200 delay-500"
                 x-transition:enter-start="opacity-0 transform translate-y-8"
                 x-transition:enter-end="opacity-100 transform translate-y-0"
                 x-transition:leave="transition-all ease-in-out duration-600"
                 x-transition:leave-start="opacity-100 transform translate-y-0"
                 x-transition:leave-end="opacity-0 transform -translate-y-8"
                 class="max-w-4xl">
                <div class="flex items-center mb-6">
                    <div class="w-20 h-px bg-eagle-gold"></div>
                    <i class="fas fa-shield-alt text-eagle-gold mx-4 text-xl"></i>
                    <div class="w-20 h-px bg-eagle-gold"></div>
                </div>
                <div class="bg-military-green/30 backdrop-blur-sm px-4 py-2 rounded-full inline-block mb-4">
                    <p class="text-eagle-gold font-bold uppercase tracking-wider">24/7 Professional Support</p>
                </div>
                <h1 class="text-4xl sm:text-5xl md:text-7xl font-bold mb-6 font-military leading-tight break-words">
                    EXPERT <span class="text-eagle-gold">ASSISTANCE</span><br class="hidden sm:block">
                    FOR MILITARY LEAVE
                </h1>
                <p class="text-xl md:text-2xl mb-8 font-hind text-gray-200 max-w-3xl leading-relaxed">
                    Our dedicated team of military leave specialists is here to guide you through every step of the process, ensuring you receive all entitled benefits and support.
                </p>
                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6">
                    <a href="<?php echo e(route('contact')); ?>" class="btn-military px-10 py-4 rounded-full text-lg font-bold text-military-dark-green shadow-gold transform hover:scale-105 transition duration-300">
                        <i class="fas fa-headset mr-3"></i>GET SUPPORT NOW
                    </a>
                    <!--<a href="tel:1-800-MILITARY" class="border-2 border-usa-red text-usa-red px-10 py-4 rounded-full text-lg font-bold hover:bg-usa-red hover:text-white transition duration-300">-->
                    <!--    <i class="fas fa-phone mr-3"></i>EMERGENCY: 1-800-MILITARY-->
                    <!--</a>-->
                </div>
            </div>

            <!-- Slide 3 Content -->
            <div x-show="currentSlide === 3"
                 x-transition:enter="transition-all ease-in-out duration-1200 delay-500"
                 x-transition:enter-start="opacity-0 transform translate-y-8"
                 x-transition:enter-end="opacity-100 transform translate-y-0"
                 x-transition:leave="transition-all ease-in-out duration-600"
                 x-transition:leave-start="opacity-100 transform translate-y-0"
                 x-transition:leave-end="opacity-0 transform -translate-y-8"
                 class="max-w-4xl">
                <div class="flex items-center mb-6">
                    <div class="w-20 h-px bg-eagle-gold"></div>
                    <i class="fas fa-flag-usa text-eagle-gold mx-4 text-xl"></i>
                    <div class="w-20 h-px bg-eagle-gold"></div>
                </div>
                <div class="bg-military-green/30 backdrop-blur-sm px-4 py-2 rounded-full inline-block mb-4">
                    <p class="text-eagle-gold font-bold uppercase tracking-wider">Comprehensive Benefits Package</p>
                </div>
                <h1 class="text-4xl sm:text-5xl md:text-7xl font-bold mb-6 font-military leading-tight break-words">
                    COMPLETE <span class="text-eagle-gold">MILITARY</span><br class="hidden sm:block">
                    LEAVE BENEFITS
                </h1>
                <p class="text-xl md:text-2xl mb-8 font-hind text-gray-200 max-w-3xl leading-relaxed">
                    Discover our comprehensive military leave package designed to support service members through adoption, pregnancy, terminal leave, and emergency situations.
                </p>
                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-6">
                    <a href="" class="btn-military px-10 py-4 rounded-full text-lg font-bold text-military-dark-green shadow-gold transform hover:scale-105 transition duration-300">
                        <i class="fas fa-gift mr-3"></i>VIEW BENEFITS PACKAGE
                    </a>
                    <a href="<?php echo e(route('apply_now')); ?>" class="border-2 border-eagle-gold text-eagle-gold px-10 py-4 rounded-full text-lg font-bold hover:bg-eagle-gold hover:text-military-dark-green transition duration-300">
                        <i class="fas fa-question-circle mr-3"></i>LEAVE TYPES FAQ
                    </a>
                </div>
            </div>
        </div>

        <!-- Enhanced Slider Controls -->
        <div class="absolute bottom-8 left-0 right-0 z-40 flex justify-center space-x-3">
            <button @click="currentSlide = 1" :class="{'bg-eagle-gold scale-125': currentSlide === 1, 'bg-white/50 hover:bg-white/80': currentSlide !== 1}" class="w-4 h-4 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-eagle-gold"></button>
            <button @click="currentSlide = 2" :class="{'bg-eagle-gold scale-125': currentSlide === 2, 'bg-white/50 hover:bg-white/80': currentSlide !== 2}" class="w-4 h-4 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-eagle-gold"></button>
            <button @click="currentSlide = 3" :class="{'bg-eagle-gold scale-125': currentSlide === 3, 'bg-white/50 hover:bg-white/80': currentSlide !== 3}" class="w-4 h-4 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-eagle-gold"></button>
        </div>

        <!-- Enhanced Prev/Next Controls -->
        <button @click="currentSlide = currentSlide === 1 ? 3 : currentSlide - 1" class="absolute left-6 top-1/2 transform -translate-y-1/2 z-40 bg-military-dark-green/80 hover:bg-military-dark-green text-white rounded-full p-3 transition-all duration-300 border-2 border-eagle-gold/50 hover:border-eagle-gold">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
        </button>
        <button @click="currentSlide = currentSlide === 3 ? 1 : currentSlide + 1" class="absolute right-6 top-1/2 transform -translate-y-1/2 z-40 bg-military-dark-green/80 hover:bg-military-dark-green text-white rounded-full p-3 transition-all duration-300 border-2 border-eagle-gold/50 hover:border-eagle-gold">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
        </button>
    </div>
</section>

<!-- Latest News & Military Updates Section -->
<section class="py-20 bg-gray-50 relative overflow-x-hidden">
    <!-- Background Pattern -->
    <div class="absolute inset-0 bg-hero-pattern opacity-5"></div>

    <div class="container mx-auto px-4 relative z-10">
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-16">
            <div class="mb-8 md:mb-0">
                <div class="flex items-center mb-4">
                    <div class="w-12 h-px bg-military-dark-green"></div>
                    <i class="fas fa-newspaper text-military-dark-green mx-4 text-xl"></i>
                    <div class="w-12 h-px bg-military-dark-green"></div>
                </div>
                <div class="bg-military-dark-green/10 backdrop-blur-sm px-4 py-2 rounded-full inline-block mb-4">
                    <p class="text-military-dark-green font-bold uppercase tracking-wider text-sm">Official Military Department Updates</p>
                </div>
                <h2 class="text-4xl md:text-5xl font-bold mb-6 font-military text-military-dark-green">
                    LATEST NEWS & <span class="text-military-dark-green">ANNOUNCEMENTS</span>
                </h2>
                <p class="text-gray-700 max-w-2xl text-lg leading-relaxed">
                    Stay informed with the latest updates from the US Military Welfare Department. We are committed to protecting job rights and supporting military personnel in accordance with federal and state law.
                </p>
            </div>
            <a href="#" class="btn-military px-8 py-4 rounded-full font-bold text-military-dark-green shadow-gold transform hover:scale-105 transition duration-300">
                <i class="fas fa-list mr-3"></i>VIEW ALL UPDATES
            </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- News Item 1 -->
            <div class="bg-white rounded-2xl shadow-military overflow-hidden transform transition duration-500 hover:-translate-y-3 hover:shadow-gold group">
                <div class="relative">
                    <img src="public/grepoksu/2020/07/Downloader.la-614097753c29a-370x250.jpg" alt="Pros & Cons of Military Service" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
                    <div class="absolute inset-0 bg-gradient-to-t from-military-dark-green/60 to-transparent opacity-0 group-hover:opacity-100 transition duration-300"></div>
                    <div class="absolute top-4 left-4 bg-military-dark-green text-white text-center p-4 rounded-xl shadow-lg">
                        <span class="text-2xl font-bold block">14</span>
                        <span class="text-sm font-semibold">SEP</span>
                    </div>
                    <div class="absolute top-4 right-4 bg-eagle-gold text-military-dark-green px-3 py-1 rounded-full text-xs font-bold">
                        FEATURED
                    </div>
                </div>
                <div class="p-6">
                    <div class="flex text-sm text-gray-500 mb-4 space-x-4">
                        <span class="flex items-center"><i class="fas fa-user-shield mr-2 text-military-dark-green"></i> Military Admin</span>
                        <span class="flex items-center"><i class="far fa-comments mr-2 text-military-dark-green"></i> Official Update</span>
                    </div>
                    <h3 class="text-xl font-bold mb-4 text-military-dark-green group-hover:text-military-green transition duration-300">
                        <a href="<?php echo e(route('military-package')); ?>" class="hover:text-military-green">
                            Military Service Benefits & Considerations
                        </a>
                    </h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        Comprehensive overview of military service benefits, training opportunities, and career advancement paths for new recruits and their families...
                    </p>
                    <a href="<?php echo e(route('military-package')); ?>" class="inline-flex items-center text-military-green font-bold hover:text-eagle-gold transition duration-300">
                        READ FULL REPORT <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>

            <!-- News Item 2 -->
            <div class="bg-white rounded-2xl shadow-military overflow-hidden transform transition duration-500 hover:-translate-y-3 hover:shadow-gold group">
                <div class="relative">
                    <img src="public/grepoksu/2021/09/Downloader.la-613b478f30702-370x250.jpg" alt="Getting a Taste of Military Life" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
                    <div class="absolute inset-0 bg-gradient-to-t from-military-dark-green/60 to-transparent opacity-0 group-hover:opacity-100 transition duration-300"></div>
                    <div class="absolute top-4 left-4 bg-military-dark-green text-white text-center p-4 rounded-xl shadow-lg">
                        <span class="text-2xl font-bold block">15</span>
                        <span class="text-sm font-semibold">SEP</span>
                    </div>
                    <div class="absolute top-4 right-4 bg-usa-red text-white px-3 py-1 rounded-full text-xs font-bold">
                        URGENT
                    </div>
                </div>
                <div class="p-6">
                    <div class="flex text-sm text-gray-500 mb-4 space-x-4">
                        <span class="flex items-center"><i class="fas fa-user-shield mr-2 text-military-green"></i> Training Command</span>
                        <span class="flex items-center"><i class="far fa-comments mr-2 text-military-green"></i> Training Update</span>
                    </div>
                    <h3 class="text-xl font-bold mb-4 text-military-dark-green group-hover:text-military-green transition duration-300">
                        <a href="<?php echo e(route('adoption-block-leave')); ?>" class="hover:text-military-green">
                            Military Life Orientation Program
                        </a>
                    </h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        Rock Island Arsenal hosts comprehensive orientation for new military families, providing essential insights into military culture and support systems...
                    </p>
                    <a href="<?php echo e(route('adoption-block-leave')); ?>" class="inline-flex items-center text-military-green font-bold hover:text-eagle-gold transition duration-300">
                        VIEW PROGRAM DETAILS <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>

            <!-- News Item 3 -->
            <div class="bg-white rounded-2xl shadow-military overflow-hidden transform transition duration-500 hover:-translate-y-3 hover:shadow-gold group">
                <div class="relative">
                    <img src="public/grepoksu/2021/09/610d069902352-370x250.jpg" alt="Jungle Operations Training Center" class="w-full h-64 object-cover group-hover:scale-105 transition duration-500">
                    <div class="absolute inset-0 bg-gradient-to-t from-military-dark/60 to-transparent opacity-0 group-hover:opacity-100 transition duration-300"></div>
                    <div class="absolute top-4 left-4 bg-military-green text-white text-center p-4 rounded-xl shadow-lg">
                        <span class="text-2xl font-bold block">15</span>
                        <span class="text-sm font-semibold">SEP</span>
                    </div>
                    <div class="absolute top-4 right-4 bg-military-green text-white px-3 py-1 rounded-full text-xs font-bold">
                        TRAINING
                    </div>
                </div>
                <div class="p-6">
                    <div class="flex text-sm text-gray-500 mb-4 space-x-4">
                        <span class="flex items-center"><i class="fas fa-user-shield mr-2 text-military-green"></i> Operations Division</span>
                        <span class="flex items-center"><i class="far fa-comments mr-2 text-military-green"></i> Tactical Update</span>
                    </div>
                    <h3 class="text-xl font-bold mb-4 text-military-dark-green group-hover:text-military-green transition duration-300">
                        <a href="<?php echo e(route('adoption-block-leave')); ?>" class="hover:text-military-green">
                            Advanced Jungle Operations Training
                        </a>
                    </h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        The Jungle Operations Training Center prepares soldiers for complex environmental challenges through comprehensive tactical and survival training programs...
                    </p>
                    <a href="<?php echo e(route('adoption-block-leave')); ?>" class="inline-flex items-center text-military-green font-bold hover:text-eagle-gold transition duration-300">
                        EXPLORE TRAINING <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </div>

        <!-- Statistics Bar -->
        <div class="mt-16 bg-military-green/90 rounded-2xl p-8 text-white">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
                <div class="border-r border-white/20 last:border-r-0">
                    <div class="text-3xl font-bold text-eagle-gold mb-2">2.1M+</div>
                    <div class="text-sm font-medium uppercase tracking-wider">Military Personnel Served</div>
                </div>
                <div class="border-r border-white/20 last:border-r-0">
                    <div class="text-3xl font-bold text-eagle-gold mb-2">95%</div>
                    <div class="text-sm font-medium uppercase tracking-wider">Leave Applications Approved</div>
                </div>
                <div class="border-r border-white/20 last:border-r-0">
                    <div class="text-3xl font-bold text-eagle-gold mb-2">24/7</div>
                    <div class="text-sm font-medium uppercase tracking-wider">Support Available</div>
                </div>
                <div>
                    <div class="text-3xl font-bold text-eagle-gold mb-2">50+</div>
                    <div class="text-sm font-medium uppercase tracking-wider">Years of Service</div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Military Leave Benefits Section -->
<section class="py-20 bg-gradient-military text-white relative overflow-x-hidden shadow-military">
    <!-- Background Pattern Overlay -->
    <div class="absolute inset-0 bg-hero-pattern opacity-30"></div>
    <div class="absolute top-0 right-0 w-96 h-96 bg-eagle-gold/10 rounded-full -translate-y-48 translate-x-48"></div>
    <div class="absolute bottom-0 left-0 w-96 h-96 bg-usa-red/10 rounded-full translate-y-48 -translate-x-48"></div>

    <div class="container mx-auto px-4 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div>
                <div class="flex items-center mb-6">
                    <div class="w-16 h-px bg-eagle-gold"></div>
                    <i class="fas fa-shield-alt text-eagle-gold mx-4 text-2xl"></i>
                    <div class="w-16 h-px bg-eagle-gold"></div>
                </div>
                <div class="bg-military-green/30 backdrop-blur-sm px-4 py-2 rounded-full inline-block mb-6">
                    <p class="text-eagle-gold font-bold uppercase tracking-wider text-sm">Comprehensive Military Benefits</p>
                </div>
                <h2 class="text-4xl md:text-5xl font-bold mb-8 font-military leading-tight">
                    COMPLETE <span class="text-eagle-gold">MILITARY LEAVE</span><br>
                    BENEFITS PACKAGE
                </h2>
                <p class="text-gray-200 mb-10 text-lg leading-relaxed">
                    Our comprehensive military leave program ensures every service member can maintain work-life balance while serving our nation. From family emergencies to personal rest and recuperation, we provide the support you've earned through your dedicated service.
                </p>

                <!-- Enhanced Statistics -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-10">
                    <div class="text-center bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-eagle-gold/30">
                        <div class="mb-3">
                            <span x-data="counter" x-text="Math.floor(current)" class="text-4xl font-bold text-eagle-gold" data-target="5650">0</span>
                            <span class="text-4xl font-bold text-eagle-gold">+</span>
                        </div>
                        <p class="text-white font-semibold uppercase tracking-wider text-sm">Active Military Personnel</p>
                        <p class="text-gray-300 text-xs mt-1">Currently Receiving Support</p>
                    </div>
                    <div class="text-center bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-eagle-gold/30">
                        <div class="mb-3">
                            <span x-data="counter" x-text="Math.floor(current)" class="text-4xl font-bold text-eagle-gold" data-target="4850">0</span>
                            <span class="text-4xl font-bold text-eagle-gold">+</span>
                        </div>
                        <p class="text-white font-semibold uppercase tracking-wider text-sm">Successful Leave Applications</p>
                        <p class="text-gray-300 text-xs mt-1">Processed This Year</p>
                    </div>
                </div>

                <!-- Key Benefits List -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-eagle-gold rounded-full flex items-center justify-center">
                            <i class="fas fa-check text-military-dark-green text-sm font-bold"></i>
                        </div>
                        <span class="text-white font-medium">30 Days Annual Leave</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-eagle-gold rounded-full flex items-center justify-center">
                            <i class="fas fa-check text-military-dark-green text-sm font-bold"></i>
                        </div>
                        <span class="text-white font-medium">Emergency Leave Support</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-eagle-gold rounded-full flex items-center justify-center">
                            <i class="fas fa-check text-military-dark-green text-sm font-bold"></i>
                        </div>
                        <span class="text-white font-medium">Family Support Services</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-eagle-gold rounded-full flex items-center justify-center">
                            <i class="fas fa-check text-military-dark-green text-sm font-bold"></i>
                        </div>
                        <span class="text-white font-medium">Mental Health Resources</span>
                    </div>
                </div>

                <!-- CTA Button -->
                <a href="<?php echo e(route('apply_now')); ?>" class="btn-military px-10 py-4 rounded-full text-lg font-bold text-military-dark-green shadow-gold transform hover:scale-105 transition duration-300 inline-flex items-center">
                    <i class="fas fa-file-signature mr-3"></i>START YOUR APPLICATION
                </a>
            </div>

            <div class="relative">
                <!-- Main Image Container -->
                <div class="relative">
                    <div class="bg-eagle-gold/20 absolute inset-0 rounded-2xl transform rotate-3 shadow-2xl"></div>
                    <div class="bg-military-green/30 absolute inset-0 rounded-2xl transform -rotate-2 shadow-xl"></div>
                    <img src="public/grepoksu/2021/09/slide-04d.png" alt="Military Personnel Excellence" class="relative z-10 rounded-2xl shadow-military w-full transform hover:scale-105 transition duration-500">

                    <!-- Floating Stats Cards -->
                    <div class="absolute -top-4 -right-4 bg-white rounded-xl p-4 shadow-lg z-20">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-military-green">95%</div>
                            <div class="text-xs text-gray-600 font-medium">Approval Rate</div>
                        </div>
                    </div>

                    <div class="absolute -bottom-4 -left-4 bg-eagle-gold rounded-xl p-4 shadow-lg z-20">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-military-dark-green">24/7</div>
                            <div class="text-xs text-military-dark-green font-medium">Support</div>
                        </div>
                    </div>
                </div>

                <!-- Decorative Elements -->
                <div class="absolute top-8 right-8 w-16 h-16 border-4 border-eagle-gold rounded-full opacity-60"></div>
                <div class="absolute bottom-8 left-8 w-12 h-12 bg-usa-red rounded-full opacity-40"></div>
            </div>
        </div>
    </div>
</section>

<!-- Enhanced US Military Welfare Department Section -->
<section id="services" class="py-20 bg-white relative">
    <!-- Background Elements -->
    <div class="absolute inset-0 bg-hero-pattern opacity-5"></div>
    <div class="absolute top-0 right-0 w-64 h-64 bg-military-green/10 rounded-full -translate-y-32 translate-x-32"></div>

    <div class="container mx-auto px-4 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <!-- Left Column - Enhanced Department Information -->
            <div>
                <div class="flex items-center mb-6">
                    <div class="w-16 h-px bg-military-green"></div>
                    <i class="fas fa-shield-alt text-military-green mx-4 text-2xl"></i>
                    <div class="w-16 h-px bg-military-green"></div>
                </div>
                <div class="bg-military-green/10 backdrop-blur-sm px-4 py-2 rounded-full inline-block mb-6">
                    <p class="text-military-green font-bold uppercase tracking-wider text-sm">Official Government Department</p>
                </div>
                <h2 class="text-4xl md:text-5xl font-bold mb-8 font-military text-military-dark-green">
                    US MILITARY <span class="text-military-green">WELFARE</span><br>
                    DEPARTMENT
                </h2>
                <p class="text-gray-700 mb-10 text-lg leading-relaxed">
                    Our department serves as the cornerstone of military family support, ensuring service members can balance their professional duties with personal responsibilities. We provide comprehensive leave programs, family support services, and career guidance to maintain the wellbeing of our nation's heroes.
                </p>

                <!-- Enhanced Progress Bars with Professional Styling -->
                <div class="space-y-8">
                    <!-- Leave Success Rate -->
                    <div class="skill-item bg-gray-50 rounded-xl p-6 border border-military-green/20">
                        <div class="flex justify-between items-center mb-4">
                            <div class="flex items-center space-x-3">
                                <i class="fas fa-chart-line text-military-green text-xl"></i>
                                <h4 class="text-lg font-bold text-military-dark-green">Leave Application Success Rate</h4>
                            </div>
                            <span class="text-2xl font-bold text-military-green bg-eagle-gold/20 px-3 py-1 rounded-full">95%</span>
                        </div>
                        <div class="w-full bg-gray-300 rounded-full h-4 shadow-inner">
                            <div class="bg-gradient-to-r from-military-green via-eagle-gold to-military-green h-4 rounded-full transition-all duration-2000 ease-out shadow-lg" style="width: 95%">
                                <div class="h-full bg-gradient-to-r from-transparent via-white/30 to-transparent rounded-full"></div>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600 mt-2">Over 2.1 million applications successfully processed</p>
                    </div>

                    <!-- Support and Assistance -->
                    <div class="skill-item bg-gray-50 rounded-xl p-6 border border-military-green/20">
                        <div class="flex justify-between items-center mb-4">
                            <div class="flex items-center space-x-3">
                                <i class="fas fa-hands-helping text-military-green text-xl"></i>
                                <h4 class="text-lg font-bold text-military-dark-green">Comprehensive Support Services</h4>
                            </div>
                            <span class="text-2xl font-bold text-military-green bg-eagle-gold/20 px-3 py-1 rounded-full">92%</span>
                        </div>
                        <div class="w-full bg-gray-300 rounded-full h-4 shadow-inner">
                            <div class="bg-gradient-to-r from-military-green via-eagle-gold to-military-green h-4 rounded-full transition-all duration-2000 ease-out shadow-lg" style="width: 92%">
                                <div class="h-full bg-gradient-to-r from-transparent via-white/30 to-transparent rounded-full"></div>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600 mt-2">Family counseling, emergency assistance, and career guidance</p>
                    </div>

                    <!-- Full Benefits Coverage -->
                    <div class="skill-item bg-gray-50 rounded-xl p-6 border border-military-green/20">
                        <div class="flex justify-between items-center mb-4">
                            <div class="flex items-center space-x-3">
                                <i class="fas fa-medal text-military-green text-xl"></i>
                                <h4 class="text-lg font-bold text-military-dark-green">Full Benefits Coverage</h4>
                            </div>
                            <span class="text-2xl font-bold text-military-green bg-eagle-gold/20 px-3 py-1 rounded-full">88%</span>
                        </div>
                        <div class="w-full bg-gray-300 rounded-full h-4 shadow-inner">
                            <div class="bg-gradient-to-r from-military-green via-eagle-gold to-military-green h-4 rounded-full transition-all duration-2000 ease-out shadow-lg" style="width: 88%">
                                <div class="h-full bg-gradient-to-r from-transparent via-white/30 to-transparent rounded-full"></div>
                            </div>
                        </div>
                        <p class="text-sm text-gray-600 mt-2">Complete leave benefits with full pay and job protection</p>
                    </div>
                </div>

                <!-- Department Credentials -->
                <div class="mt-10 grid grid-cols-2 gap-6">
                    <div class="text-center bg-military-green/10 rounded-xl p-4">
                        <div class="text-2xl font-bold text-military-green">50+</div>
                        <div class="text-sm text-gray-600 font-medium">Years of Service</div>
                    </div>
                    <div class="text-center bg-military-green/10 rounded-xl p-4">
                        <div class="text-2xl font-bold text-military-green">24/7</div>
                        <div class="text-sm text-gray-600 font-medium">Support Available</div>
                    </div>
                </div>
            </div>

            <!-- Right Column - Enhanced Service Blocks -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Apply for Leave -->
                <div class="service-block bg-white rounded-2xl shadow-military p-8 relative overflow-hidden group transform transition duration-500 hover:-translate-y-3 hover:shadow-gold border border-military-green/10">
                    <div class="bg-gradient-to-br from-military-green/20 to-eagle-gold/20 rounded-full p-6 mb-6 inline-block">
                        <i class="fas fa-file-signature text-3xl text-military-green"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 text-military-dark-green">Apply for Military Leave</h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">Submit your official military leave application through our secure, streamlined process. Get approved faster with our digital submission system.</p>

                    <!-- Enhanced Overlay -->
                    <div class="absolute inset-0 bg-gradient-to-br from-military-green via-military-dark to-military-green text-white p-8 flex flex-col justify-center opacity-0 group-hover:opacity-100 transition-all duration-500">
                        <div class="text-center">
                            <i class="fas fa-file-signature text-5xl mb-6 text-eagle-gold"></i>
                            <h3 class="text-2xl font-bold mb-4">START APPLICATION</h3>
                            <p class="text-gray-100 mb-6">Begin your military leave application process with our secure portal.</p>
                            <a href="<?php echo e(route('apply_now')); ?>" class="btn-military px-6 py-3 rounded-full font-bold text-military-dark-green inline-flex items-center">
                                APPLY NOW <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Leave Eligibility -->
                <div class="service-block bg-white rounded-2xl shadow-military p-8 relative overflow-hidden group transform transition duration-500 hover:-translate-y-3 hover:shadow-gold border border-military-green/10">
                    <div class="bg-gradient-to-br from-military-green/20 to-eagle-gold/20 rounded-full p-6 mb-6 inline-block">
                        <i class="fas fa-user-check text-3xl text-military-green"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 text-military-dark-green">Check Eligibility</h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">Verify your eligibility for different types of military leave benefits and understand your entitlements as a service member.</p>

                    <!-- Enhanced Overlay -->
                    <div class="absolute inset-0 bg-gradient-to-br from-military-green via-military-dark to-military-green text-white p-8 flex flex-col justify-center opacity-0 group-hover:opacity-100 transition-all duration-500">
                        <div class="text-center">
                            <i class="fas fa-user-check text-5xl mb-6 text-eagle-gold"></i>
                            <h3 class="text-2xl font-bold mb-4">VERIFY ELIGIBILITY</h3>
                            <p class="text-gray-100 mb-6">Check your qualification status for military leave benefits.</p>
                            <a href="#eligibility" class="btn-military px-6 py-3 rounded-full font-bold text-military-dark-green inline-flex items-center">
                                CHECK NOW <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Leave Benefits -->
                <div class="service-block bg-white rounded-2xl shadow-military p-8 relative overflow-hidden group transform transition duration-500 hover:-translate-y-3 hover:shadow-gold border border-military-green/10">
                    <div class="bg-gradient-to-br from-military-green/20 to-eagle-gold/20 rounded-full p-6 mb-6 inline-block">
                        <i class="fas fa-gift text-3xl text-military-green"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 text-military-dark-green">Explore Benefits</h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">Discover the comprehensive benefits package available to military personnel including health coverage, family support, and more.</p>

                    <!-- Enhanced Overlay -->
                    <div class="absolute inset-0 bg-gradient-to-br from-military-green via-military-dark to-military-green text-white p-8 flex flex-col justify-center opacity-0 group-hover:opacity-100 transition-all duration-500">
                        <div class="text-center">
                            <i class="fas fa-gift text-5xl mb-6 text-eagle-gold"></i>
                            <h3 class="text-2xl font-bold mb-4">VIEW BENEFITS</h3>
                            <p class="text-gray-100 mb-6">Explore your complete military benefits package.</p>
                            <a href="<?php echo e(route('military-package')); ?>" class="btn-military px-6 py-3 rounded-full font-bold text-military-dark-green inline-flex items-center">
                                LEARN MORE <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Support Services -->
                <div class="service-block bg-white rounded-2xl shadow-military p-8 relative overflow-hidden group transform transition duration-500 hover:-translate-y-3 hover:shadow-gold border border-military-green/10">
                    <div class="bg-gradient-to-br from-military-green/20 to-eagle-gold/20 rounded-full p-6 mb-6 inline-block">
                        <i class="fas fa-headset text-3xl text-military-green"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-4 text-military-dark-green">24/7 Support</h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">Access round-the-clock support from our military leave specialists for any questions or emergency situations.</p>

                    <!-- Enhanced Overlay -->
                    <div class="absolute inset-0 bg-gradient-to-br from-military-green via-military-dark to-military-green text-white p-8 flex flex-col justify-center opacity-0 group-hover:opacity-100 transition-all duration-500">
                        <div class="text-center">
                            <i class="fas fa-headset text-5xl mb-6 text-eagle-gold"></i>
                            <h3 class="text-2xl font-bold mb-4">GET SUPPORT</h3>
                            <p class="text-gray-100 mb-6">Connect with our expert support team immediately.</p>
                            <a href="<?php echo e(route('contact')); ?>" class="btn-military px-6 py-3 rounded-full font-bold text-military-green inline-flex items-center">
                                CONTACT US <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Military Leave Types Section -->
<section class="py-16 bg-gradient-military text-white relative overflow-hidden shadow-military">
    <!-- Background Pattern Overlay -->
    <div class="absolute inset-0 bg-hero-pattern opacity-30"></div>
    <div class="container mx-auto px-4 relative z-10">
        <div class="text-center mb-12">
            <p class="text-military-light font-medium uppercase mb-2">US Military Welfare Department</p>
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Military Leave types we offer</h2>
            <p class="text-gray-300 max-w-3xl mx-auto">The US Military Welfare Department is to help our military personnel balance their work and family responsibilities</p>
        </div>

        <div x-data="leaveTypesCarousel" class="relative">
            <!-- Slides Container -->
            <div class="overflow-hidden">
                <div class="flex transition-transform duration-500 ease-in-out" :style="'transform: translateX(-' + (activeSlide * 100) + '%)'">
                    <!-- Leave Type 1 -->
                    <div class="w-full md:w-1/3 flex-shrink-0 px-4">
                        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 h-full">
                            <div class="bg-military-green/20 rounded-full p-4 mb-4 inline-block">
                                <i class="fas fa-baby text-3xl text-white"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Adoption Block Leave</h3>
                            <p class="text-gray-300 mb-4">Special leave time for service members who are adopting a child. This type of leave allows military personnel to bond with their newly adopted child.</p>
                            <a href="<?php echo e(route('adoption-block-leave')); ?>" class="text-military-light hover:underline inline-flex items-center">
                                Learn More <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Leave Type 2 -->
                    <div class="w-full md:w-1/3 flex-shrink-0 px-4">
                        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 h-full">
                            <div class="bg-military-green/20 rounded-full p-4 mb-4 inline-block">
                                <i class="fas fa-female text-3xl text-white"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Pregnancy Home Leave</h3>
                            <p class="text-gray-300 mb-4">Leave granted to pregnant service members. This allows time for medical appointments, rest, and preparation for childbirth.</p>
                            <a href="<?php echo e(route('adoption-block-leave')); ?>" class="text-military-light hover:underline inline-flex items-center">
                                Learn More <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>

                    <!-- Leave Type 3 -->
                    <div class="w-full md:w-1/3 flex-shrink-0 px-4">
                        <div class="bg-white/10 backdrop-blur-sm rounded-lg p-6 h-full">
                            <div class="bg-military-green/20 rounded-full p-4 mb-4 inline-block">
                                <i class="fas fa-flag-usa text-3xl text-white"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3">Special Terminal Leave</h3>
                            <p class="text-gray-300 mb-4">Leave granted at the end of a service member's active duty period. This allows for transition time before officially separating from military service.</p>
                            <a href="<?php echo e(route('special-terminal-leave')); ?>" class="text-military-light hover:underline inline-flex items-center">
                                Learn More <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <button @click="prev()" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 text-white rounded-full p-2 transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
            </button>
            <button @click="next()" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-white/20 hover:bg-white/30 text-white rounded-full p-2 transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </button>

            <!-- Indicators -->
            <div class="flex justify-center mt-6 space-x-2">
                <button @click="activeSlide = 0" :class="{'bg-white': activeSlide === 0, 'bg-gray-400': activeSlide !== 0}" class="w-3 h-3 rounded-full transition-colors duration-300"></button>
                <button @click="activeSlide = 1" :class="{'bg-white': activeSlide === 1, 'bg-gray-400': activeSlide !== 1}" class="w-3 h-3 rounded-full transition-colors duration-300"></button>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
                <img src="public/grepoksu/2021/09/about-2.png" alt="Military Personnel" class="rounded-lg shadow-xl w-full">
            </div>

            <div>
                <p class="text-military-green font-medium uppercase mb-2">FREQUENTLY ASKED QUESTIONS</p>
                <h2 class="text-3xl md:text-4xl font-bold mb-6">Common Questions About Military Leave</h2>

                <div x-data="{selected:0}" class="space-y-4">
                    <!-- Question 1 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <button
                            @click="selected !== 0 ? selected = 0 : selected = null"
                            class="flex justify-between items-center w-full px-4 py-3 text-left font-medium"
                            :class="{'bg-military-green/10': selected === 0}"
                        >
                            <span>How much leave time am I entitled to?</span>
                            <svg :class="{'rotate-180': selected === 0}" class="w-5 h-5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="selected === 0" class="px-4 py-3 text-gray-600 bg-gray-50">
                            <p>Active duty service members typically accrue 2.5 days of leave per month, for a total of 30 days per year. Special leave types may provide additional time for specific circumstances.</p>
                        </div>
                    </div>

                    <!-- Question 2 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <button
                            @click="selected !== 1 ? selected = 1 : selected = null"
                            class="flex justify-between items-center w-full px-4 py-3 text-left font-medium"
                            :class="{'bg-military-green/10': selected === 1}"
                        >
                            <span>How do I apply for military leave?</span>
                            <svg :class="{'rotate-180': selected === 1}" class="w-5 h-5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="selected === 1" class="px-4 py-3 text-gray-600 bg-gray-50">
                            <p>You can apply for military leave through our online application system. The process requires you to submit the type of leave requested, dates, and any supporting documentation.</p>
                        </div>
                    </div>

                    <!-- Question 3 -->
                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                        <button
                            @click="selected !== 2 ? selected = 2 : selected = null"
                            class="flex justify-between items-center w-full px-4 py-3 text-left font-medium"
                            :class="{'bg-military-green/10': selected === 2}"
                        >
                            <span>Can I carry over unused leave to the next year?</span>
                            <svg :class="{'rotate-180': selected === 2}" class="w-5 h-5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                            </svg>
                        </button>
                        <div x-show="selected === 2" class="px-4 py-3 text-gray-600 bg-gray-50">
                            <p>Yes, service members can carry over up to 60 days of leave between fiscal years. However, we encourage using leave as it accrues rather than accumulating a large balance.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Enhanced Call to Action -->
<section class="py-20 bg-gradient-military text-white relative overflow-hidden shadow-military">
    <!-- Background Pattern Overlay -->
    <div class="absolute inset-0 bg-hero-pattern opacity-30"></div>
    <div class="absolute top-0 left-0 w-64 h-64 bg-eagle-gold/10 rounded-full -translate-y-32 -translate-x-32"></div>
    <div class="absolute bottom-0 right-0 w-80 h-80 bg-usa-red/10 rounded-full translate-y-40 translate-x-40"></div>

    <div class="container mx-auto px-4 text-center relative z-10">
        <div class="max-w-4xl mx-auto">
            <!-- Header -->
            <div class="flex items-center justify-center mb-8">
                <div class="w-20 h-px bg-eagle-gold"></div>
                <i class="fas fa-star text-eagle-gold mx-6 text-2xl"></i>
                <div class="w-20 h-px bg-eagle-gold"></div>
            </div>

            <div class="bg-military-green/30 backdrop-blur-sm px-6 py-3 rounded-full inline-block mb-8">
                <p class="text-eagle-gold font-bold uppercase tracking-wider">Take Action Today</p>
            </div>

            <h2 class="text-4xl md:text-6xl font-bold mb-8 font-military leading-tight">
                READY TO APPLY FOR<br>
                <span class="text-eagle-gold">MILITARY LEAVE?</span>
            </h2>

            <p class="text-xl mb-12 max-w-3xl mx-auto leading-relaxed text-gray-200">
                Our expert team of military leave specialists is standing by to assist you with your application. Don't wait - start accessing the benefits you've earned through your dedicated service to our nation.
            </p>

            <!-- Stats Row -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-eagle-gold/30">
                    <div class="text-3xl font-bold text-eagle-gold mb-2">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="text-lg font-bold mb-1">24 Hours</div>
                    <div class="text-sm text-gray-300">Average Processing Time</div>
                </div>
                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-eagle-gold/30">
                    <div class="text-3xl font-bold text-eagle-gold mb-2">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <div class="text-lg font-bold mb-1">100% Secure</div>
                    <div class="text-sm text-gray-300">Military-Grade Security</div>
                </div>
                <div class="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-eagle-gold/30">
                    <div class="text-3xl font-bold text-eagle-gold mb-2">
                        <i class="fas fa-headset"></i>
                    </div>
                    <div class="text-lg font-bold mb-1">Expert Support</div>
                    <div class="text-sm text-gray-300">Dedicated Military Specialists</div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row justify-center space-y-6 sm:space-y-0 sm:space-x-8 mb-12">
                <a href="<?php echo e(route('apply_now')); ?>" class="btn-military px-12 py-5 rounded-full text-xl font-bold text-military-green shadow-gold transform hover:scale-105 transition duration-300 inline-flex items-center justify-center">
                    <i class="fas fa-file-signature mr-4 text-2xl"></i>
                    <span>APPLY ONLINE NOW</span>
                </a>
                <a href="<?php echo e(route('contact')); ?>" class="border-3 border-eagle-gold text-eagle-gold px-12 py-5 rounded-full text-xl font-bold hover:bg-eagle-gold hover:text-military-green transition duration-300 inline-flex items-center justify-center">
                    <i class="fas fa-phone mr-4 text-2xl"></i>
                    <span>SPEAK TO SPECIALIST</span>
                </a>
            </div>

            <!-- Emergency Contact -->
            <div class="bg-usa-red/90 backdrop-blur-sm rounded-xl p-6 border border-usa-red">
                <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
                    <div class="flex items-center">
                        <i class="fas fa-exclamation-triangle text-white text-2xl mr-4"></i>
                        <div class="text-left">
                            <div class="text-lg font-bold text-white">Emergency Military Leave Required?</div>
                            <div class="text-sm text-white/80">Call our 24/7 emergency hotline immediately</div>
                        </div>
                    </div>
                    <a href="tel:1-800-MILITARY" class="bg-white text-usa-red px-8 py-3 rounded-full font-bold text-lg hover:bg-gray-100 transition duration-300">
                        <i class="fas fa-phone mr-2"></i>1-800-MILITARY
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- Enhanced JavaScript for Animations and Interactions -->
<script>
// Counter Animation
document.addEventListener('alpine:init', () => {
    Alpine.data('counter', (element) => ({
        current: 0,
        target: parseInt(element.$el.dataset.target),

        init() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        this.animateCounter();
                        observer.unobserve(entry.target);
                    }
                });
            });

            observer.observe(this.$el);
        },

        animateCounter() {
            const increment = this.target / 100;
            const timer = setInterval(() => {
                this.current += increment;
                if (this.current >= this.target) {
                    this.current = this.target;
                    clearInterval(timer);
                }
            }, 30);
        }
    }));

    // Leave Types Carousel
    Alpine.data('leaveTypesCarousel', () => ({
        activeSlide: 0,
        totalSlides: 2,

        init() {
            // Auto-play carousel
            setInterval(() => {
                this.next();
            }, 8000);
        },

        next() {
            this.activeSlide = this.activeSlide === this.totalSlides ? 0 : this.activeSlide + 1;
        },

        prev() {
            this.activeSlide = this.activeSlide === 0 ? this.totalSlides : this.activeSlide - 1;
        }
    }));
});

// Enhanced scroll animations
document.addEventListener('DOMContentLoaded', function() {
    // Add smooth scrolling 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'
                });
            }
        });
    });

    // Parallax effect for hero section
    window.addEventListener('scroll', () => {
        const scrolled = window.pageYOffset;
        const rate = scrolled * -0.5;
        const heroImages = document.querySelectorAll('.hero-slide img');
        heroImages.forEach(img => {
            img.style.transform = `translateY(${rate}px)`;
        });
    });

    // Add loading animation
    window.addEventListener('load', () => {
        document.body.classList.add('loaded');
    });
});

// Professional form validation for military applications
function validateMilitaryForm(form) {
    const requiredFields = form.querySelectorAll('[required]');
    let isValid = true;

    requiredFields.forEach(field => {
        if (!field.value.trim()) {
            field.classList.add('border-red-500');
            isValid = false;
        } else {
            field.classList.remove('border-red-500');
        }
    });

    return isValid;
}

// Security notification for sensitive data
function showSecurityNotice() {
    if (!localStorage.getItem('securityNoticeShown')) {
        setTimeout(() => {
            alert('SECURITY NOTICE: This is an official U.S. Government system. All activities are monitored and recorded for security purposes.');
            localStorage.setItem('securityNoticeShown', 'true');
        }, 3000);
    }
}

showSecurityNotice();
</script>

<!-- Additional CSS for enhanced animations -->

</div> <!-- End overflow-x-hidden wrapper -->
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.base', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/elitemaxpro/milita.elitemaxpro.click/resources/views/home/index.blade.php ENDPATH**/ ?>