{{-- ============================================================ HERO
        ============================================================ --}}
        <section class="hero" id="home">

            {{-- BACKGROUND VIDEO --}}
            <div class="hero-video-bg">
                <video class="hero-video" autoplay muted loop playsinline preload="auto"
                    poster="{{ asset('assets/images/hero-gold-finance.png') }}">
                    <source src="{{ asset('assets/videos/hero-gold.mp4') }}" type="video/mp4">
                </video>
            </div>

            {{-- DARK CINEMATIC OVERLAY --}}
            <div class="hero-video-overlay"></div>

            {{-- DECORATIVE BACKGROUND --}}
            <div class="hero-bg-shape hero-bg-shape-1"></div>
            <div class="hero-bg-shape hero-bg-shape-2"></div>

            <div class="container hero-container">

                <div class="hero-grid">

                    {{-- LEFT CONTENT --}}
                    <div class="hero-copy" data-aos="fade-right">

                        {{-- TAMIL BRAND LINE --}}
                        <p class="hero-tamil">
                            <span class="eyebrow-rule"></span>
                            <span id="tamilTyped"></span><span class="tamil-cursor">|</span>
                        </p>


                        {{-- EYEBROW --}}
                        <!-- <p class="eyebrow">
                            <span class="eyebrow-rule"></span>
                            Trusted Gold Finance
                        </p> -->

                        {{-- HERO CAROUSEL --}}
                        <div id="heroCarousel"
                            class="carousel slide"
                            data-bs-ride="carousel"
                            data-bs-interval="4000">

                            <div class="carousel-inner">

                                {{-- SLIDE 1 - TAMIL --}}
                                <div class="carousel-item active">
                                    <h1 class="hero-title">
                                        உங்களின் அனைத்து வித
                                        <span class="text-gold">
                                            கடன் தேவைகளுக்கும் ஒரே தீர்வு
                                        </span>
                                    </h1>

                                    <p class="hero-desc">
                                        உங்கள் அனைத்து நிதித் தேவைகளுக்கும்
                                        நம்பகமான மற்றும் விரைவான சேவை.
                                    </p>
                                </div>

                                {{-- SLIDE 2 - TAMIL --}}
                                <div class="carousel-item">
                                    <h1 class="hero-title">
                                        உங்களின் தங்க நகைகளை
                                        <span class="text-gold">
                                            நல்ல விலைக்கு விற்றிட
                                        </span>
                                    </h1>

                                    <p class="hero-desc">
                                        உங்கள் தங்க நகைகளுக்கு சிறந்த மதிப்பைப்
                                        பெற்று, எளிதாக விற்பனை செய்யுங்கள்.
                                    </p>
                                </div>

                                {{-- SLIDE 3 - ENGLISH --}}
                                <div class="carousel-item">
                                    <h1 class="hero-title">
                                        One Solution for
                                        <span class="text-gold">
                                            All Your Loan Needs
                                        </span>
                                    </h1>

                                    <p class="hero-desc">
                                        Get quick, transparent and reliable
                                        financial assistance from a trusted partner.
                                    </p>
                                </div>

                                {{-- SLIDE 4 - ENGLISH --}}
                                <div class="carousel-item">
                                    <h1 class="hero-title">
                                        Sell Your Gold
                                        <span class="text-gold">
                                            at the Best Price
                                        </span>
                                    </h1>

                                    <p class="hero-desc">
                                        Get the best value for your gold jewellery
                                        with a simple and transparent process.
                                    </p>
                                </div>

                            </div>

                            {{-- CAROUSEL INDICATORS --}}
                            <div class="carousel-indicators hero-indicators">
                                <button type="button"
                                    data-bs-target="#heroCarousel"
                                    data-bs-slide-to="0"
                                    class="active"
                                    aria-current="true"
                                    aria-label="Slide 1"></button>

                                <button type="button"
                                    data-bs-target="#heroCarousel"
                                    data-bs-slide-to="1"
                                    aria-label="Slide 2"></button>

                                <button type="button"
                                    data-bs-target="#heroCarousel"
                                    data-bs-slide-to="2"
                                    aria-label="Slide 3"></button>

                                <button type="button"
                                    data-bs-target="#heroCarousel"
                                    data-bs-slide-to="3"
                                    aria-label="Slide 4"></button>
                            </div>

                        </div>

                        {{-- ACTION BUTTONS --}}
                        <div class="hero-actions">

                            <a href="#contact-us" class="btn btn-maroon">
                                Apply For Gold Loan
                                <i class="fa-solid fa-arrow-up-right-from-square"></i>
                            </a>
                            <a href="#gold-rate" class="btn btn-maroon">
                                View Gold Rates
                                <i class="fa-solid fa-arrow-up-right-from-square"></i>
                            </a>



                        </div>

                        {{-- FEATURES --}}
                        <ul class="hero-features">

                            <li>
                                <span class="hero-feature-icon">
                                    <i class="fa-solid fa-bolt"></i>
                                </span>

                                <span>Quick Processing</span>
                            </li>

                            <li>
                                <span class="hero-feature-icon">
                                    <i class="fa-solid fa-shield-halved"></i>
                                </span>

                                <span>Transparent Valuation</span>
                            </li>

                            <li>
                                <span class="hero-feature-icon">
                                    <i class="fa-solid fa-user-group"></i>
                                </span>

                                <span>Trusted Service</span>
                            </li>

                        </ul>

                    </div>

                </div>

            </div>

        </section>

        {{-- ============================================================ STATS BAR
        ============================================================ --}}
        <section class="stats-bar" data-aos="fade-up">
            <div class="container stats-grid">
                <div class="stat-item">
                    <i class="fa-solid fa-users"></i>
                    <div><span class="stat-num">10K+</span><span class="stat-label">Happy Customers</span></div>
                </div>
                <div class="stat-item">
                    <i class="fa-solid fa-hand-holding-dollar"></i>
                    <div><span class="stat-num">₹500Cr+</span><span class="stat-label">Loans Disbursed</span></div>
                </div>
                <div class="stat-item">
                    <i class="fa-solid fa-shield"></i>
                    <div><span class="stat-num">15+</span><span class="stat-label">Years of Trust</span></div>
                </div>
                <div class="stat-item">
                    <i class="fa-solid fa-star"></i>
                    <div><span class="stat-num">100%</span><span class="stat-label">Customer Satisfaction</span></div>
                </div>
            </div>
        </section>