<!-- Earn crypto flexibly Starts -->
<section class="earn_crypto pt-120 pb-120">
    <div class="container">
        <div class="row gy-5 gy-md-6">
            <div class="col-12">
                <div class="earn_crypto__title text-sm-center mb-7 mb-md-11 wow fadeInUp">
                    <h2>Earn crypto flexibly with <span class="p1-color">Bitco</span></h2>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="earn_crypto__cardone bg7-color br2 rounded-4 p-6 p-md-8 h-100 wow fadeInUp">
                    <div
                        class="d-flex align-items-start justify-content-between flex-wrap gap-3 mb-8 mb-sm-10 mb-md-15">
                        <div>
                            <h2 class="mb-3">Staking</h2>
                            <span>Calculate my earnings</span>
                        </div>
                        <div class="text-end bg1-color br2 rounded-3 ps-1 pe-2">
                            <div class="apex_section__slider-selector markets_section__rcard-selector">
                                <div class="f-group">
                                    <select id="select3" class="f-control f-dropdown">
                                        <option value="1" selected data-image="assets/images/icon/solanalogo.png">
                                            SOL</option>
                                        <option value="2" data-image="assets/images/icon/currencyCategory5333a.png">
                                            ETH</option>
                                        <option value="3" data-image="assets/images/icon/currencyCategory6bd4a.png">
                                            LFC</option>
                                        <option value="4" data-image="assets/images/icon/currencyCategory71949.png">
                                            TLP</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <div class="d-flex align-items-center gap-3 justify-content-between flex-wrap mb-5 mb-md-6">
                        <div>
                            <span class="mb-3">How many coins do you hold?</span>
                            <div class="d-flex align-items-end gap-2">
                                <h1 class="fw_500">18166</h1>
                                <span class="mb-2">SOL</span>
                            </div>
                        </div>
                        <div>
                            <span class="mb-3">Estimate Annual Reward</span>
                            <h1 class="fw_500 p1-color text-sm-end">41.12%</h1>
                        </div>
                    </div> -->
                    <!-- <div class="earn_crypto__wrapper mb-8 mb-md-10 w-100">
                        <progress class="w-100" id="progress-bar" value="40" max="100"></progress>
                    </div> -->
                    <div class="earn_crypto__rangeslider">
                        <div class="slidecontainer">
                            <div
                                class="d-flex align-items-center gap-3 justify-content-between flex-wrap mb-5 mb-md-6">
                                <div>
                                    <span class="mb-3">How many coins do you hold?</span>
                                    <div class="d-flex align-items-end gap-2">
                                        <h1 class="fw_500">18166</h1>
                                        <span class="mb-2">SOL</span>
                                    </div>
                                </div>
                                <div>
                                    <span class="mb-3">Estimate Annual Reward</span>
                                    <h1 class="fw_500 p1-color text-sm-end"><span id="demo"></span>%</h1>
                                    <h1></h1>
                                </div>
                            </div>
                            <div class="range-style overflow-hidden position-relative w-100">
                                <input type="range" min="1" max="100" value="50" class="slider w-100 rounded-5"
                                    id="myRange">

                            </div>
                            <!-- <div>
                                <input type="range" class="win10-thumb" min="0" max="100" value="25" />
                            </div> -->
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-1 mb-5 mb-md-6 justify-content-between flex-wrap">
                        <span>Daily Earnings:</span>
                        <span>0.019178 SOL 0.74 USD</span>
                    </div>
                    <div class="d-flex align-items-center gap-1 mb-5 mb-md-6 justify-content-between flex-wrap">
                        <span>Monthly Earnings:</span>
                        <span>0.583333 SOL 22 USD</span>
                    </div>
                    <div class="d-flex align-items-center gap-1 mb-9 mb-md-11 justify-content-between flex-wrap">
                        <span>Yearly Earnings:</span>
                        <span>7 SOL 270 USD</span>
                    </div>
                    <a href="staking-details.html" class="cmn-btn py-3 px-5 px-md-6 d-block ">Start saving</a>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="earn_crypto__cardtwo bg7-color br2 rounded-4 p-6 p-md-8 h-100 wow fadeInUp">
                    <h2 class="mb-3">Savings</h2>
                    <span class="mb-8 mb-md-10">Earn daily rewards</span>
                    <div
                        class="d-flex align-items-center justify-content-between flex-wrap flex-xl-nowrap gap-5 gap-md-6 mb-5 mb-md-6">
                        <div class="bg1-color p-5 p-md-6 br2 rounded-3 w-100 ">
                            <div class="d-flex align-items-center flex-wrap gap-3 mb-4">
                                <img src="assets/images/icon/ethereum5053.png" alt="Icon">
                                <div class="d-flex flex-column">
                                    <h5 class="mb-1">Tether USDT</h5>
                                    <span>USDC</span>
                                </div>
                            </div>
                            <span class="fs-ten">Annual reward 3%</span>
                        </div>
                        <div class="bg1-color p-5 p-md-6 br2 rounded-3 w-100 ">
                            <div class="d-flex align-items-center flex-wrap gap-3 mb-4">
                                <img src="assets/images/icon/ethereum5050.png" alt="Icon">
                                <div class="d-flex flex-column">
                                    <h5 class="mb-1">Ethereum</h5>
                                    <span>USDC</span>
                                </div>
                            </div>
                            <span class="fs-ten">Annual reward 1%</span>
                        </div>
                    </div>
                    <div
                        class="d-flex align-items-center justify-content-between flex-wrap flex-xl-nowrap gap-5 gap-md-6 mb-9 mb-md-13">
                        <div class="bg1-color p-5 p-md-6 br2 rounded-3 w-100 ">
                            <div class="d-flex align-items-center flex-wrap gap-3 mb-4">
                                <img src="assets/images/icon/ethereum5052.png" alt="Icon">
                                <div class="d-flex flex-column">
                                    <h5 class="mb-1">Bitcoin</h5>
                                    <span>BTC</span>
                                </div>
                            </div>
                            <span class="fs-ten">Annual reward 0.5%</span>
                        </div>
                        <div class="bg1-color p-5 p-md-6 br2 rounded-3 w-100 ">
                            <div class="d-flex align-items-center flex-wrap gap-3 mb-4">
                                <img src="assets/images/icon/ethereum5051.png" alt="Icon">
                                <div class="d-flex flex-column">
                                    <h5 class="mb-1">USD Coin</h5>
                                    <span>USDC</span>
                                </div>
                            </div>
                            <span class="fs-ten">Annual reward 3%</span>
                        </div>
                    </div>
                    <a href="staking-details.html" class="cmn-btn py-3 px-5 px-md-6 d-block ">Start saving</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Earn crypto flexibly Ends -->