<?php
// Include the universal header file
include 'header.php';
?>

    <div class="container-xxl py-5">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                    <h6 class="section-title text-start text-primary text-uppercase">About Us</h6>
                    <h1 class="mb-4">Welcome to <span class="text-primary text-uppercase">District Buner</span></h1>
                    <h5 class="mb-0">History & Description:</h5>
                    <p class="text-body mb-3"> The Buner Valley lies between Swabi on the South and Swat on the North. It is a mountain valley, dotted with villages and divided into four sub-divisions. The Mora Hills and the Ilam range divide it from the Swat Valley, the Sinawar range from Yusafzai, the Guru mountains from the Mardan Valley, and the Duma range from the Puran Valley.</p>
                    <p class="text-body mb-3"> During the 1580s, many Yusufzais and Mandanrs rebelled against the Mughal Empire. In late 1585, Mughal Emperor Akbar sent military forces under Zain Khan Koka and Birbal to crush the rebellion. In February 1586, about 8,000 Mughal soldiers, including Birbal, were killed near the Karakar Pass by the Yusufzai lashkar, led by Kalu Khan. This was the greatest disaster faced by the Mughal Army during Akbar's reign.</p>
                    See more about District Buner on <a href="https://en.wikipedia.org/wiki/Buner_District">Wikipedia</a>
                    <div class="row g-3 pb-4">
                        <div class="col-sm-6 wow fadeIn" data-wow-delay="0.5s">
                            <div class="border rounded p-1">
                                <div class="border rounded text-center p-4">
                                    <i class="fa fa-users fa-2x text-primary mb-2"></i>
                                    <h2 class="mb-1" data-toggle="counter-up">895,460</h2>
                                    <p class="mb-0">Population</p>
                                    Area code:0939
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 wow fadeIn" data-wow-delay="0.1s">
                            <div class="border rounded p-1">
                                <div class="border rounded text-center p-4">
                                    <i class="fa fa-building fa-2x text-primary mb-2"></i>
                                    <h2 class="mb-1" data-toggle="counter-up">6</h2>
                                    <p class="mb-0">Tehsil</p>Area: 1,865 km²
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="row g-3">
                        <div class="col-6 text-end">
                            <img class="img-fluid rounded w-75 wow zoomIn" data-wow-delay="0.1s" src="img/Session Gate.jpg" style="margin-top: 25%;">
                        </div>
                        <div class="col-6 text-start">
                            <img class="img-fluid rounded w-100 wow zoomIn" data-wow-delay="0.3s" src="img/New Civil.jpg">
                        </div>
                        <div class="col-6 text-end">
                            <img class="img-fluid rounded w-50 wow zoomIn" data-wow-delay="0.5s" src="img/Session 1.jpg">
                        </div>
                        <div class="col-6 text-start">
                            <img class="img-fluid rounded w-75 wow zoomIn" data-wow-delay="0.7s" src="img/Civil New Block.jpg">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php
// Include the universal footer file
include 'footer.php';
?>