
    <!-- Hero Section Starts -->
    <section class="hero_area pt-120 pb-16 position-relative">
        <div class="container z-1">
            <div class="row justify-content-center mt-8 mt-sm-13 mt-md-0">
                <div class="col-xl-9">
                    <div class="hero_area__content pt-17 pt-sm-20 pt-lg-0 text-center">
                        <span class="fs-five py-2 px-3 px-sm-5 mb-4 wow fadeInUp">
                            Turn Market volatility To Profit
                        </span>
                        <h1 class="display-three mb-5 mb-md-6 wow fadeInUp">
                            Trade Across Profitable Markets
                        </h1>
                        <p class="mb-8 mb-md-10 wow fadeInUp">Using volatility or systematic risk of a security or portfolio compared to the market analysis to trade across markets
                        </p>
                        <div
                            class="d-flex align-items-center justify-content-center flex-wrap gap-4 gap-md-6 mb-10 mb-md-13 wow fadeInUp">
                            <a class="hero_area__content-btnone cmn-btn px-6 px-md-8 py-3 d-center gap-3"
                                href="https://dashboard.young-trade.com/register">Get
                                Started
                                <i class="ti ti-chevron-right fs-five px-1 bg4-color p6-color rounded-3 fw-bolder"></i>
                            </a>
                            <a class="hero_area__content-btntwo cmn-btn third-alt px-6 px-md-8 py-3 d-center gap-3"
                                href="https://dashboard.young-trade.com">Login
                                <i class="ti ti-chevron-right fs-five px-1 bg2-color rounded-3 fw-bolder"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="hero_area__thumb wow fadeInUp position-relative">
                        <img class="rounded-5" src="assets/images/hero-banner.png" alt="Hero Banner">
                        <img class="hero_area__thumb-style leftright-animation position-absolute"
                            src="assets/images/round-image-for-home-page.png" alt="Image">
                    </div>
                </div>
            </div>
        </div>
        <div class="hero_area__shape">
            <img class="position-absolute rotated_animattwo" src="assets/images/hero-shape.png" alt="Shape">
        </div>
        <div class="hero_area__lishtone">
            <img class="position-absolute opacity-75" src="assets/images/lightone.png" alt="light">
        </div>
        <div class="hero_area__lishttwo">
            <img class="position-absolute opacity-75" src="assets/images/lighttwo.png" alt="light">
        </div>
    </section>
    <!-- Hero Section Ends -->