@extends('layouts.master')
@section('content')
    <div class="main-body">
        <div class="main-about">
            <h1 class="py-auto">Financial</h1>
            <!-- <h5>Events - <span class="company">Activity Center</span></h5> -->
        </div>

    <style>
        .pricing-card {
            border: 1px solid #e6e6e6;
            _border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            text-align: center;
            padding-bottom: 30px;
            transition: transform 0.3s, box-shadow 0.3s;
        }

        /* .pricing-card:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        } */

        .pricing-card.featured {
            _border-color: #ffc107;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
            margin-top: -17px
        }

        .pricing-card>.titlefinance {
            font-size: 18px;
            font-weight: bold;
            _margin-bottom: 20px;
            background: #B6B6B5!important;
            box-shadow: 0px 3.702px 11.105px 0px rgba(0, 0, 0, 0.10);
            
        }

        .pricing-card .price {
            font-size: 36px;
            font-weight: bold;
            color: #333;
            border-bottom: 0.925px solid #C1C1C1;
            background: #F5F6FA;
            padding: 30px;
            line-height:1;
        }

        .pricing-card .price span {
            font-size: 14px;
            font-weight: normal;
            color: #6c757d;
        }

        .pricing-card ul {
            list-style: none;
            padding: 0;
            margin: 20px 0;
        }

        .pricing-card ul li {
            margin-bottom: 10px;
            color: #6c757d;
            border-bottom: 1px solid #c5c5c5
        }

        .pricing-card button {
            border-radius: 25px;
        }

        .featured .titlefinance-fe {
            background-color: #ffc107;
            color: #fff;
            padding: 10px 0;
            _border-radius: 8px 8px 0 0;
        }
        .colorprice{color:#13406A!important}
        .pricebutton{color: #3F3F3F; background:none!important; font-size: 20px;font-weight: 600; border:1px solid #000}
    </style>

<div class="container py-5">
<div class="our-member">

<h1 class="text-center">Payment Methods</h1>

<h5 class="text-center mb">We're here with you to analyzing your business according to different<br> points of view and guide you in your business.</h5>

</div> 
    <div class="row justify-content-center">
        <!-- Basic Plan -->
        <div class="col-md-4 pe-0">
            <div class="pricing-card">
                <div class="titlefinance bg-light text-dark py-2">Basic</div>
                <div class="price">৳250 <br><span>per month</span></div>
                <ul>
                    <li>16 Hours Consultation</li>
                    <li>24 Hours Emails Support</li>
                </ul>
                <button class="btn btn-outline-primary pricebutton">Select Now</button>
            </div>
        </div>
        <!-- Premium Plan -->
        <div class="col-md-4 ps-0 pe-0">
            <div class="pricing-card featured">
                <div class="titlefinance-fe">Premium</div>
                <div class="price text-primary colorprice">৳250 <br><span>per month</span></div>
                <ul>
                    <li>16 Hours Consultation</li>
                    <li>24 Hours Emails Support</li>
                    <li>Priority Hotline</li>
                    <li>Per Month</li>
                </ul>
                <button class="btn btn-warning text-white">Select Now</button>
            </div>
        </div>
        <!-- Premium Plan -->
        <div class="col-md-4 ps-0">
            <div class="pricing-card">
                <div class="titlefinance bg-light text-dark py-2">Premium</div>
                <div class="price">৳250 <br><span>per month</span></div>
                <ul>
                    <li>Unlimited Consultation</li>
                    <li>Unlimited Emails Support</li>
                    <!-- <li>Priority Hotline</li> -->
                </ul>
                <button class="btn btn-outline-primary pricebutton">Select Now</button>
            </div>
        </div>
    </div>
</div>


<div class="donate">

    <div class="container">

        <div class="row">

            <div class="col-sm-7">

                <div class="donate-left">

                    <h2 class="text-white">Donate Now</h2>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque ornare nulla sapien, non bibendum lectus ultrices eu. Praesent nec diam magna. Fusce dignissim scelerisque est, vel tempus ante condimentum sagittis.</p>
                    <button class="btn btn-warning text-white">More info</button>
                </div>    

            </div>



            <div class="col-sm-5 position-relative">

                <div class="request-donate bg-white ">

                    <h2 class="text-dark text-center">Support Us</h2>
                    <p class="text-center">We're here with you to analyzing your business according to different points of view and guide in your business.</p>

                    <form id="contactForm" action="/submit-form" method="post">
                        <div class="mb-3">
                        <!-- <i class="fa-sharp fa-solid fa-bangladeshi-taka-sign"></i>--> <input type="text" class="form-control" id="name" name="name" required placeholder="Name"> 
                        </div>
                        <div class="mb-3 spantext">
                            <span><i class="fa-sharp fa-solid fa-bangladeshi-taka-sign"></i>50.00</span><span><i class="fa-sharp fa-solid fa-bangladeshi-taka-sign"></i>100.00</span><span><i class="fa-sharp fa-solid fa-bangladeshi-taka-sign"></i>150.00</span><span><i class="fa-sharp fa-solid fa-bangladeshi-taka-sign"></i>200.00</span><span>Custom</span>
                        </div>

                        <button type="submit" class="btn btn-primary w-100 border-0 donate-but">Donate Now</button>
                    </form>

                </div>    

            </div>

        </div>

    </div>

</div>   

       <div style="margin-top:60px">
            @include('layouts.art')
        </div>    
   

@endsection