{% extends "snippets/main.html" %}
{% load static %}
{% block content %}
<section class="hero-section hero-section-full-height">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-12 p-0">
                <div id="hero-slide" class="carousel carousel-fade slide" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="{% static 'images/slide/volunteer-helping-with-donation-box.jpg' %}" class="carousel-image img-fluid" alt="...">
                            <div class="carousel-caption d-flex flex-column justify-content-end">
                                <h1>Social</h1>
                                <p>Social learning experience mencakup</br>budaya, interaksi, dan komunikasi sosial.</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="{% static 'images/slide/volunteer-selecting-organizing-clothes-donations-charity.jpg' %}" class="carousel-image img-fluid" alt="...">
                            <div class="carousel-caption d-flex flex-column justify-content-end">
                                <h1>Ecological</h1>
                                <p>Ecological learning experience mencerminkan</br>keseimbangan sumber daya dan ekosistem dalam </br>kegiatan Anindhaloka.</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="{% static 'images/slide/medium-shot-people-collecting-donations.jpg' %}" class="carousel-image img-fluid" alt="...">
                            <div class="carousel-caption d-flex flex-column justify-content-end">
                                <h1>Spiritual</h1>
                                <p>Spiritual learning experience menyeimbangkan</br>keyakinan, pikiran, dan pemahaman diri.</p>
                            </div>
                        </div>

                        <div class="carousel-item">
                            <img src="{% static 'images/slide/medium-shot-people-collecting-donations.jpg' %}" class="carousel-image img-fluid" alt="...">
                            <div class="carousel-caption d-flex flex-column justify-content-end">
                                <h1>Technological</h1>
                                <p>Technological learning menggambarkan</br>solusi, kemodernan, dan dampak teknologi Anindhaloka.</p>
                            </div>
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#hero-slide" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#hero-slide" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>
            </div>

        </div>
    </div>
</section>

<section class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-12 text-center mx-auto">
                <h2 class="mb-5">Welcome to Anindhaloka</h2>
            </div>
            <div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0 mb-md-4">
                <div class="featured-block d-flex justify-content-center align-items-center">
                    <a href="donate.html" class="d-block">
                        <img src="{% static 'images/icons/heart.png' %}" class="featured-block-image img-fluid" alt="">
                        <p class="featured-block-text"><strong>Caring</strong> Earth</p>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0">
                <div class="featured-block d-flex justify-content-center align-items-center">
                    <a href="donate.html" class="d-block">
                        <img src="{% static 'images/icons/scholarship.png' %}" class="featured-block-image img-fluid" alt="">

                        <p class="featured-block-text"><strong>Join a</strong> Program</p>
                    </a>
                </div>
            </div>

            <div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0">
                <div class="featured-block d-flex justify-content-center align-items-center">
                    <a href="donate.html" class="d-block">
                        <img src="{% static 'images/icons/hands.png' %}" class="featured-block-image img-fluid" alt="">

                        <p class="featured-block-text">Become a <strong>volunteer</strong></p>
                    </a>
                </div>
            </div>

            <div class="col-lg-3 col-md-6 col-12 mb-4 mb-lg-0 mb-md-4">
                <div class="featured-block d-flex justify-content-center align-items-center">
                    <a href="donate.html" class="d-block">
                        <img src="{% static 'images/icons/receive.png' %}" class="featured-block-image img-fluid" alt="">

                        <p class="featured-block-text">Be a<strong>Support</strong></p>
                    </a>
                </div>
            </div>

        </div>
    </div>
</section>

<section class="section-padding section-bg" id="section_2">
    <div class="container">
        <div class="row">

            <div class="col-lg-6 col-12 mb-5 mb-lg-0">
                <img src="{% static 'images/ours.jpg' %}" class="custom-text-box-image img-fluid" alt="">
            </div>

            <div class="col-lg-6 col-12">
                <div class="custom-text-box">
                    <h2 class="mb-2">Our Story</h2>

                    <h5 class="mb-3">Anindhaloka, Rumah Gotong Royong</h5>

                    <p class="mb-0">Rumah terpercaya dan kesayangan yang menghubungkan pikiran-hati-tindakan Pemelajar 
                        Bahagia untuk melahirkan mahakarya bagi kemanusiaan, kelestarian alam, dan kebijaksanaan 
                        spiritualitas melalui kerja Gotong Royong.</p>
                </div>
                
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-12">
                        <div class="custom-text-box mb-lg-0">
                            <h5 class="mb-3">Our Mission</h5>

                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                            <ul class="custom-list mt-2">
                                <li class="custom-list-item d-flex">
                                    <i class="bi-check custom-text-box-icon me-2"></i>
                                    Charity Theme
                                </li>

                                <li class="custom-list-item d-flex">
                                    <i class="bi-check custom-text-box-icon me-2"></i>
                                    Semantic HTML
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-12">
                        <div class="custom-text-box d-flex flex-wrap d-lg-block mb-lg-0">
                            <div class="counter-thumb"> 
                                <div class="d-flex">
                                    <span class="counter-number" data-from="1" data-to="2009" data-speed="1000"></span>
                                    <span class="counter-number-text"></span>
                                </div>

                                <span class="counter-text">Founded</span>
                            </div> 

                            <div class="counter-thumb mt-4"> 
                                <div class="d-flex">
                                    <span class="counter-number" data-from="1" data-to="120" data-speed="1000"></span>
                                    <span class="counter-number-text">B</span>
                                </div>

                                <span class="counter-text">Donations</span>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>


<section class="about-section section-padding">
    <div class="container">
        <div class="row">

            <div class="col-lg-6 col-md-5 col-12">
                <img src="{% static 'images/founder.jpg' %}" class="about-image ms-lg-auto bg-light shadow-lg img-fluid" alt="">
            </div>

            <div class="col-lg-5 col-md-7 col-12">
                <div class="custom-text-block">
                    <h2 class="mb-0">Cokorda Istri Dewi</h2>

                    <p class="text-muted mb-lg-4 mb-md-4">Founder Anindhaloka</p>

                    <p>Lorem Ipsum dolor sit amet, consectetur adipsicing kengan omeg kohm tokito Professional charity theme based</p>

                    <p>You are not allowed to redistribute this template ZIP file on any other template collection website. Please contact TemplateMo for more information.</p>

                    <ul class="social-icon mt-4">
                        <li class="social-icon-item">
                            <a href="#" class="social-icon-link bi-twitter"></a>
                        </li>

                        <li class="social-icon-item">
                            <a href="#" class="social-icon-link bi-facebook"></a>
                        </li>

                        <li class="social-icon-item">
                            <a href="#" class="social-icon-link bi-instagram"></a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</section>

<section class="cta-section section-padding section-bg">
    <div class="container">
        <div class="row justify-content-center align-items-center">

            <div class="col-lg-5 col-12 ms-auto">
                <h2 class="mb-0">Make an impact. <br> Save lives.</h2>
            </div>

            <div class="col-lg-5 col-12">
                <a href="#" class="me-4">Make a donation</a>

                <a href="#section_4" class="custom-btn btn smoothscroll">Become a volunteer</a>
            </div>

        </div>
    </div>
</section>


<section class="section-padding" id="section_3">
    <div class="container">
        <div class="row">

            <div class="col-lg-12 col-12 text-center mb-4">
                <h2>Our Program / Event</h2>
            </div>

            <div class="col-lg-4 col-md-6 col-12 mb-4 mb-lg-0">
                <div class="custom-block-wrap">
                    <img src="{% static 'images/causes/group-african-kids-paying-attention-class.jpg' %}" class="custom-block-image img-fluid" alt="">

                    <div class="custom-block">
                        <div class="custom-block-body">
                            <h5 class="mb-3">Pencil x Nature</h5>

                            <p>Kelas interaktif anak-anak untuk belajar ilustrasi, cat air, dan menggambar kreatif.</p>

                            <div class="progress mt-4">
                                <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>

                            <div class="d-flex align-items-center my-2">
                                <p class="mb-0">
                                    <strong>Raised:</strong>
                                    $18,500
                                </p>

                                <p class="ms-auto mb-0">
                                    <strong>Goal:</strong>
                                    $32,000
                                </p>
                            </div>
                        </div>

                        <a href="donate.html" class="custom-btn btn">Read More</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-12 mb-4 mb-lg-0">
                <div class="custom-block-wrap">
                    <img src="{% static 'images/causes/poor-child-landfill-looks-forward-with-hope.jpg' %}" class="custom-block-image img-fluid" alt="">

                    <div class="custom-block">
                        <div class="custom-block-body">
                            <h5 class="mb-3">Pasar Bahagia</h5>

                            <p>Menghadirkan kreator untuk Indonesia yang lebih bahagia dan berkelanjutan.</p>

                            <div class="progress mt-4">
                                <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>

                            <div class="d-flex align-items-center my-2">
                                <p class="mb-0">
                                    <strong>Raised:</strong>
                                    $27,600
                                </p>

                                <p class="ms-auto mb-0">
                                    <strong>Goal:</strong>
                                    $60,000
                                </p>
                            </div>
                        </div>

                        <a href="donate.html" class="custom-btn btn">Read More</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-6 col-12">
                <div class="custom-block-wrap">
                    <img src="{% static 'images/causes/african-woman-pouring-water-recipient-outdoors.jpg' %}" class="custom-block-image img-fluid" alt="">

                    <div class="custom-block">
                        <div class="custom-block-body">
                            <h5 class="mb-3">Kelas Unik</h5>

                            <p>Kelas Seni Unik x Nin hadir untuk mengasah kreativitas dan ekspresi melalui berbagai seni.</p>

                            <div class="progress mt-4">
                                <div class="progress-bar w-100" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>

                            <div class="d-flex align-items-center my-2">
                                <p class="mb-0">
                                    <strong>Raised:</strong>
                                    $84,600
                                </p>

                                <p class="ms-auto mb-0">
                                    <strong>Goal:</strong>
                                    $100,000
                                </p>
                            </div>
                        </div>

                        <a href="donate.html" class="custom-btn btn">Read More</a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<section class="volunteer-section section-padding" id="section_4">
    <div class="container">
        <div class="row">

            <div class="col-lg-6 col-12">
                <h2 class="text-white mb-4">Volunteer</h2>

                <form class="custom-form volunteer-form mb-5 mb-lg-0" action="#" method="post" role="form">
                    <h3 class="mb-4">Become a volunteer today</h3>

                    <div class="row">
                        <div class="col-lg-6 col-12">
                            <input type="text" name="volunteer-name" id="volunteer-name" class="form-control" placeholder="Jack Doe" required>
                        </div>

                        <div class="col-lg-6 col-12">    
                            <input type="email" name="volunteer-email" id="volunteer-email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Jackdoe@gmail.com" required>
                        </div>

                        <div class="col-lg-6 col-12">
                            <input type="text" name="volunteer-subject" id="volunteer-subject" class="form-control" placeholder="Subject" required>
                        </div>

                        <div class="col-lg-6 col-12">
                            <div class="input-group input-group-file">
                                <input type="file" class="form-control" id="inputGroupFile02">
                                
                                <label class="input-group-text" for="inputGroupFile02">Upload your CV</label>

                                <i class="bi-cloud-arrow-up ms-auto"></i>
                            </div>
                        </div>
                    </div>

                    <textarea name="volunteer-message" rows="3" class="form-control" id="volunteer-message" placeholder="Comment (Optional)"></textarea>

                    <button type="submit" class="form-control">Submit</button>
                </form>
            </div>

            <div class="col-lg-6 col-12">
                <img src="{% static 'images/smiling-casual-woman-dressed-volunteer-t-shirt-with-badge.jpg' %}" class="volunteer-image img-fluid" alt="">

                <div class="custom-block-body text-center">
                    <h4 class="text-white mt-lg-3 mb-lg-3">About Volunteering</h4>

                    <p class="text-white">Lorem Ipsum dolor sit amet, consectetur adipsicing kengan omeg kohm tokito Professional charity theme based</p>
                </div>
            </div>

        </div>
    </div>
</section>

<section class="news-section section-padding" id="section_5">
    <div class="container">
        <div class="row">

            <div class="col-lg-12 col-12 mb-5">
                <h2>Latest News</h2>
            </div>

            <div class="col-lg-7 col-12">
                <div class="news-block">
                    <div class="news-block-top">
                        <a href="news-detail.html">
                            <img src="{% static 'images/news/medium-shot-volunteers-with-clothing-donations.jpg' %}" class="news-image img-fluid" alt="">
                        </a>

                        <div class="news-category-block">
                            <a href="#" class="category-block-link">
                                Lifestyle,
                            </a>

                            <a href="#" class="category-block-link">
                                Clothing Donation
                            </a>
                        </div>
                    </div>

                    <div class="news-block-info">
                        <div class="d-flex mt-2">
                            <div class="news-block-date">
                                <p>
                                    <i class="bi-calendar4 custom-icon me-1"></i>
                                    October 12, 2036
                                </p>
                            </div>

                            <div class="news-block-author mx-5">
                                <p>
                                    <i class="bi-person custom-icon me-1"></i>
                                    By Admin
                                </p>
                            </div>

                            <div class="news-block-comment">
                                <p>
                                    <i class="bi-chat-left custom-icon me-1"></i>
                                    32 Comments
                                </p>
                            </div>
                        </div>

                        <div class="news-block-title mb-2">
                            <h4><a href="news-detail.html" class="news-block-title-link">Clothing donation to urban area</a></h4>
                        </div>

                        <div class="news-block-body">
                            <p>Lorem Ipsum dolor sit amet, consectetur adipsicing kengan omeg kohm tokito Professional charity theme based on Bootstrap</p>
                        </div>
                    </div>
                </div>

                <div class="news-block mt-3">
                    <div class="news-block-top">
                        <a href="news-detail.html">
                            <img src="{% static 'images/news/medium-shot-people-collecting-foodstuff.jpg' %}" class="news-image img-fluid" alt="">
                        </a>

                        <div class="news-category-block">
                            <a href="#" class="category-block-link">
                                Food,
                            </a>

                            <a href="#" class="category-block-link">
                                Donation,
                            </a>

                            <a href="#" class="category-block-link">
                                Caring
                            </a>
                        </div>
                    </div>

                    <div class="news-block-info">
                        <div class="d-flex mt-2">
                            <div class="news-block-date">
                                <p>
                                    <i class="bi-calendar4 custom-icon me-1"></i>
                                    October 20, 2036
                                </p>
                            </div>

                            <div class="news-block-author mx-5">
                                <p>
                                    <i class="bi-person custom-icon me-1"></i>
                                    By Admin
                                </p>
                            </div>

                            <div class="news-block-comment">
                                <p>
                                    <i class="bi-chat-left custom-icon me-1"></i>
                                    35 Comments
                                </p>
                            </div>
                        </div>

                        <div class="news-block-title mb-2">
                            <h4><a href="news-detail.html" class="news-block-title-link">Food donation area</a></h4>
                        </div>

                        <div class="news-block-body">
                            <p>Sed leo nisl, posuere at molestie ac, suscipit auctor mauris. Etiam quis metus elementum, tempor risus vel, condimentum orci</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-12 mx-auto">
                <form class="custom-form search-form" action="#" method="get" role="form">
                    <input name="search" type="search" class="form-control" id="search" placeholder="Search" aria-label="Search">

                    <button type="submit" class="form-control">
                        <i class="bi-search"></i>
                    </button>
                </form>

                <h5 class="mt-5 mb-3">Recent news</h5>

                <div class="news-block news-block-two-col d-flex mt-4">
                    <div class="news-block-two-col-image-wrap">
                        <a href="news-detail.html">
                            <img src="{% static 'images/news/africa-humanitarian-aid-doctor.jpg' %}" class="news-image img-fluid" alt="">
                        </a>
                    </div>

                    <div class="news-block-two-col-info">
                        <div class="news-block-title mb-2">
                            <h6><a href="news-detail.html" class="news-block-title-link">Food donation area</a></h6>
                        </div>

                        <div class="news-block-date">
                            <p>
                                <i class="bi-calendar4 custom-icon me-1"></i>
                                October 16, 2036
                            </p>
                        </div>
                    </div>
                </div>

                <div class="news-block news-block-two-col d-flex mt-4">
                    <div class="news-block-two-col-image-wrap">
                        <a href="news-detail.html">
                            <img src="{% static 'images/news/close-up-happy-people-working-together.jpg' %}" class="news-image img-fluid" alt="">
                        </a>
                    </div>

                    <div class="news-block-two-col-info">
                        <div class="news-block-title mb-2">
                            <h6><a href="news-detail.html" class="news-block-title-link">Volunteering Clean</a></h6>
                        </div>

                        <div class="news-block-date">
                            <p>
                                <i class="bi-calendar4 custom-icon me-1"></i>
                                October 24, 2036
                            </p>
                        </div>
                    </div>
                </div>

                <div class="category-block d-flex flex-column">
                    <h5 class="mb-3">Categories</h5>

                    <a href="#" class="category-block-link">
                        Drinking water
                        <span class="badge">20</span>
                    </a>

                    <a href="#" class="category-block-link">
                        Food Donation
                        <span class="badge">30</span>
                    </a>

                    <a href="#" class="category-block-link">
                        Children Education
                        <span class="badge">10</span>
                    </a>

                    <a href="#" class="category-block-link">
                        Poverty Development
                        <span class="badge">15</span>
                    </a>

                    <a href="#" class="category-block-link">
                        Clothing Donation
                        <span class="badge">20</span>
                    </a>
                </div>

                <div class="tags-block">
                    <h5 class="mb-3">Tags</h5>

                    <a href="#" class="tags-block-link">
                        Donation
                    </a>

                    <a href="#" class="tags-block-link">
                        Clothing
                    </a>

                    <a href="#" class="tags-block-link">
                        Food
                    </a>

                    <a href="#" class="tags-block-link">
                        Children
                    </a>

                    <a href="#" class="tags-block-link">
                        Education
                    </a>

                    <a href="#" class="tags-block-link">
                        Poverty
                    </a>

                    <a href="#" class="tags-block-link">
                        Clean Water
                    </a>
                </div>

                <form class="custom-form subscribe-form" action="#" method="get" role="form">
                    <h5 class="mb-4">Newsletter Form</h5>

                    <input type="email" name="subscribe-email" id="subscribe-email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Email Address" required>

                    <div class="col-lg-12 col-12">
                        <button type="submit" class="form-control">Subscribe</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</section>


<section class="testimonial-section section-padding section-bg">
    <div class="container">
        <div class="row">

            <div class="col-lg-8 col-12 mx-auto">
                <h2 class="mb-lg-3">Happy Partners</h2>
                
                    <div id="testimonial-carousel" class="carousel carousel-fade slide" data-bs-ride="carousel">

                        <div class="carousel-inner">
                            <div class="carousel-item active">
                               <div class="carousel-caption">
                                    <h4 class="carousel-title">Lorem Ipsum dolor sit amet, consectetur adipsicing kengan omeg kohm tokito charity theme</h4>

                                    <small class="carousel-name"><span class="carousel-name-title">Maria</span>, Boss</small>
                               </div>
                            </div>

                            <div class="carousel-item">
                                <div class="carousel-caption">
                                    <h4 class="carousel-title">Sed leo nisl, posuere at molestie ac, suscipit auctor mauris quis metus tempor orci</h4>

                                    <small class="carousel-name"><span class="carousel-name-title">Thomas</span>, Partner</small>
                                </div>
                            </div>

                            <div class="carousel-item">
                                <div class="carousel-caption">
                                    <h4 class="carousel-title">Lorem Ipsum dolor sit amet, consectetur adipsicing kengan omeg kohm tokito charity theme</h4>

                                    <small class="carousel-name"><span class="carousel-name-title">Jane</span>, Advisor</small>
                                </div>
                            </div>

                            <div class="carousel-item">
                                <div class="carousel-caption">
                                    <h4 class="carousel-title">Sed leo nisl, posuere at molestie ac, suscipit auctor mauris quis metus tempor orci</h4>

                                    <small class="carousel-name"><span class="carousel-name-title">Bob</span>, Entreprenuer</small>
                               </div>
                            </div>

                              <ol class="carousel-indicators">
                                   <li data-bs-target="#testimonial-carousel" data-bs-slide-to="0" class="active">
                                        <img src="{% static 'images/avatar/portrait-beautiful-young-woman-standing-grey-wall.jpg' %}" class="img-fluid rounded-circle avatar-image" alt="avatar">
                                   </li>

                                   <li data-bs-target="#testimonial-carousel" data-bs-slide-to="1" class="">
                                        <img src="{% static 'images/avatar/portrait-young-redhead-bearded-male.jpg' %}" class="img-fluid rounded-circle avatar-image" alt="avatar">
                                   </li>

                                   <li data-bs-target="#testimonial-carousel" data-bs-slide-to="2" class="">
                                        <img src="{% static 'images/avatar/pretty-blonde-woman-wearing-white-t-shirt.jpg' %}" class="img-fluid rounded-circle avatar-image" alt="avatar">
                                   </li>

                                   <li data-bs-target="#testimonial-carousel" data-bs-slide-to="3" class="">
                                        <img src="{% static 'images/avatar/studio-portrait-emotional-happy-funny.jpg' %}" class="img-fluid rounded-circle avatar-image" alt="avatar">
                                   </li>
                              </ol>

                     </div>
                </div>
            </div>

        </div>
    </div>
</section>


<section class="contact-section section-padding" id="section_6">
    <div class="container">
        <div class="row">

            <div class="col-lg-4 col-12 ms-auto mb-5 mb-lg-0">
                <div class="contact-info-wrap">
                    <h2>Get in touch</h2>

                    <div class="contact-image-wrap d-flex flex-wrap">
                        <img src="{% static 'images/avatar/pretty-blonde-woman-wearing-white-t-shirt.jpg' %}" class="img-fluid avatar-image" alt="">

                        <div class="d-flex flex-column justify-content-center ms-3">
                            <p class="mb-0">Tri Wahyuning Rahayu</p>
                            <p class="mb-0"><strong>HR & Office Manager</strong></p>
                        </div>
                    </div>

                    <div class="contact-info">
                        <h5 class="mb-3">Contact Infomation</h5>

                        <p class="d-flex mb-2">
                            <i class="bi-geo-alt me-2"></i>
                            Bintaro, Jakarta, Indonesia
                        </p>

                        <p class="d-flex mb-2">
                            <i class="bi-telephone me-2"></i>

                            <a href="tel: 120-240-9600">
                                120-240-9600
                            </a>
                        </p>

                        <p class="d-flex">
                            <i class="bi-envelope me-2"></i>

                            <a href="mailto:info@yourgmail.com">
                                donate@charity.org
                            </a>
                        </p>

                        <a href="#" class="custom-btn btn mt-3">Get Direction</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-5 col-12 mx-auto">
                <form class="custom-form contact-form" action="#" method="post" role="form">
                    <h2>Contact form</h2>

                    <p class="mb-4">Or, you can just send an email:
                        <a href="#">info@charity.org</a>
                    </p>
                    <div class="row">
                        <div class="col-lg-6 col-md-6 col-12">
                            <input type="text" name="first-name" id="first-name" class="form-control" placeholder="Jack" required>
                        </div>

                        <div class="col-lg-6 col-md-6 col-12">
                            <input type="text" name="last-name" id="last-name" class="form-control" placeholder="Doe" required>
                        </div>
                    </div>

                    <input type="email" name="email" id="email" pattern="[^ @]*@[^ @]*" class="form-control" placeholder="Jackdoe@gmail.com" required>

                    <textarea name="message" rows="5" class="form-control" id="message" placeholder="What can we help you?"></textarea>

                    <button type="submit" class="form-control">Send Message</button>
                </form>
            </div>

        </div>
    </div>
</section>
{% endblock %}