@extends('layouts.webhome') @section('content') 
 
    <script src="../code.jquery.com/jquery-3.7.1.js"></script>
            <script type="text/javascript">

                $(document).ready(function () {
                    $('.toggle').click(function () {
                        $('.sidebar-contact').toggleClass('active')
                        $('.toggle').toggleClass('active')
                    })
                })
            </script>
            <style>
                .flip-container {
                    perspective: 1000px;
                    transform-style: preserve-3d;
                }

                .flip-container:hover .back {
                    transform: rotateY(0deg);
                }

                .flip-container:hover .front {
                    transform: rotateY(180deg);
                }

                .flip-container,
                .front,
                .back {
                    width: 100%;
                    /*height: 259px;*/
                    float: left;
                    border-radius: 10px;
                }

                .flipper {
                    transition: 0.6s;
                    transform-style: preserve-3d;
                    position: relative;
                }

                /* hide back of pane during swap */
                .front,
                .back {
                    backface-visibility: hidden;
                    transition: 0.6s;
                    transform-style: preserve-3d;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .front {
                    z-index: 2;
                    transform: rotateY(0deg);
                }

                .back {
                    transform: rotateY(-180deg);
                    background: #fff;
                    color: #000;
                    text-align: center;
                    line-height: 1.4em;
                }

                .vertical.flip-container {
                    position: relative;
                }

                .vertical .back {
                    transform: rotateX(180deg);
                }

                .vertical.flip-container:hover .back {
                    transform: rotateX(0deg);
                }

                .vertical.flip-container:hover .front {
                    transform: rotateX(180deg);
                }

                .front {
                    background: #9c3;
                    color: #fff;
                    text-align: center;
                    border: 5px solid #fff;
                }

                .front h1 {
                    font-size: 19px;
                    background-color: #ffffffe3;
                    margin: 108px 0px;
                    padding: 10px 0px;
                }

                .back h2 {
                    font-size: 22px;
                    padding: 7px 0px;
                    margin-bottom: 18px;
                    border-bottom: 1px dashed rgba(154, 157, 162, .3);
                }

                .back p {
                    margin-bottom: 0px;
                    text-align: left;
                    margin-left: 25px;
                    font-size: 14px;
                    padding: 2px 0px;
                    transition: 0.2s;
                }

                .back p:hover {
                    padding-left: 3px;
                }

                .back p:before {
                    content: url(img/right-arrow.png);
                    display: inline-block;
                    text-rendering: auto;
                    margin-right: 5px;
                    position: absolute;
                    left: 0;
                    padding: 0px 7px;
                }

                .sidebar-contact {
                    position: absolute;
                    top: 76%;
                    left: -223px;
                    transform: translateY(-50%);
                    width: 223px;
                    height: auto;
                    padding: 6px;
                    background: #fff;
                    /* box-shadow: 0 20px 50px rgba(0,0,0,.5); */
                    box-sizing: border-box;
                    transition: 0.5s;
                    z-index: 99;
                }

                .sidebar-contact.active {
                    left: 0;
                }

                .sidebar-contact input,
                .sidebar-contact textarea {
                    width: 100%;
                    height: 36px;
                    padding: 5px;
                    margin-bottom: 10px;
                    box-sizing: border-box;
                    border: 1px solid rgba(0, 0, 0, .5);
                    outline: none;
                }

                .sidebar-contact h2 {
                    margin: 0 0 20px;
                    padding: 0;
                }

                .sidebar-contact textarea {
                    height: 60px;
                    resize: none;
                }

                .sidebar-contact input[type="submit"] {
                    background: #00bcd4;
                    color: #fff;
                    cursor: pointer;
                    border: none;
                    font-size: 18px;
                }

                .toggle {
                    position: absolute;
                    height: 98px;
                    width: 75px;
                    text-align: center;
                    cursor: pointer;
                    /* background: #f3f6f9; */
                    top: -76px;
                    left: 247px;
                    line-height: 16px;
                    border-radius: 50%;
                    z-index: 99999999999;
                }


                @media(max-width:768px) {
                    .sidebar-contact {

                        height: 83%;
                        top: 54% !important;

                    }

                    .box a {
                        color: #fff;
                        font-size: 10px !important;
                        transition: 0.2s;
                    }

                    .zoom-in-zoom-out {
                        margin-top: 25px !important;
                        width: 63px !important;
                    }

                    .sidebar-contact .toggle {
                        top: 0%;
                        transform: translateY(-50%);
                        transition: 0.5s;
                    }

                    p.rounded {
                        font-size: 8px !important;
                    }

                    .sidebar-contact.active .toggle {
                        top: 0;
                        right: 0;
                        transform: translateY(0);
                    }

                    .scroll {
                        width: 100%;
                        height: 100%;
                        overflow-y: auto;
                    }

                    .content {
                        padding: 50px 50px;
                    }
                }

                .zoom-in-zoom-out {
                    margin-top: 108px;
                    width: 90px;
                    /* height: 50px; */
                    animation: zoom-in-zoom-out 2s ease-out infinite;
                    /* border: 1px solid #003662; */
                    z-index: 99999;
                }

                @keyframes zoom-in-zoom-out {
                    0% {
                        transform: scale(1, 1);
                    }

                    50% {
                        transform: scale(1.2, 1.2);
                    }

                    100% {
                        transform: scale(1, 1);
                    }
                }

                .scroll ul li {
                    border-bottom: 1px dotted #e1dfdf;
                    list-style: none;
                }

                .scroll ul li:hover {
                    border-bottom: 1px dotted #e1dfdf;
                    background: #e5eff7;
                }

                .scroll ul li a {
                    list-style: none;
                    transition: 0.5s;
                    padding: 4px 0px;
                    color: #ebe7e7;
                }

                .scroll ul li:last-child {
                    border-bottom: none;
                }

                .scroll ul {
                    padding: 0px;
                }

                .box {
                    border-bottom: 1px dotted #e1dfdf;
                    color: #fff;
                    transition: 0.2s;
                }

                .box:hover {
                    padding-left: 2px;
                }

                .box a {
                    color: #fff;
                    font-size: 14px;
                    transition: 0.2s;
                }

                .box:hover {
                    background: #042c4c;
                }

                .scroll ul li a:hover {
                    color: #003662 !important;
                    padding-left: 15px;
                }

                .sidebar-contact {
                    background-color: #003662;
                }

                i.fa.fa-chevron-down {
                    font-size: 10px;
                    position: relative;
                    top: -2px;
                }

                /* Card Styling */
                /* Make slides stretch so all cards equal height */
                .departmentSwiper .swiper-wrapper {
                    align-items: stretch;
                }

                .departmentSwiper .swiper-slide {
                    display: flex;
                    height: auto;
                }

                /* Card = full height of slide */
                .dept-card {
                    border: none;
                    border-radius: 20px;
                    background: #fff;
                    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
                    transition: all 0.4s ease;
                    height: 100%;
                    /* <-- fixed */
                    display: flex;
                    flex-direction: column;
                }

                .dept-card:hover {
                    transform: translateY(-8px) scale(1.03);
                    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
                    background: linear-gradient(135deg, #e1b7a0, #eb6b30);
                }

                /* Body fills remaining height; link sticks to bottom */
                .dept-card .card-body {
                    display: flex;
                    flex-direction: column;
                    flex: 1;
                }

                .dept-desc {
                    flex: 1;
                    font-size: 0.95rem;
                    color: #555;
                }

                .dept-link {
                    margin-top: auto;
                    color: #007bff;
                    transition: color .2s;
                }

                .dept-link:hover {
                    color: #0056b3;
                }

                /* Icons a bit bigger */
                .dept-icon {
                    width: 20%;
                    max-width: 120px;
                    /*height: 120px;*/
                    object-fit: contain;
                }

                /* Headings */
                .dept-title {
                    font-size: 1.3rem;
                    line-height: 1.2;
                    text-wrap: balance;
                    /* nicer wrapping (supported modern browsers) */
                    word-break: break-word;
                    /* fallback */
                    background: linear-gradient(90deg, #ff6a00, #ee0979);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }

                .dept-subtitle {
                    font-size: 1rem;
                    font-weight: 600;
                }

                /* ----grevience--- */
                .highlight-box {
                    background: #fff;
                    border-radius: 15px;
                    padding: 25px;
                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
                    transition: all 0.4s ease;
                }

                .highlight-box:hover {
                    transform: translateY(-5px);
                    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
                }

                .message-heading {
                    font-weight: 700;
                    font-size: 1.6rem;
                    background: linear-gradient(90deg, #ff6a00, #ee0979);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }

                .about-banner {
                    height: 100%;
                    min-height: 380px;
                    /* Same size as left part */
                    border-radius: 15px;
                    overflow: hidden;
                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .about-banner img {
                    object-fit: cover;
                    height: 100%;
                    width: 100%;
                    transition: transform .6s ease;
                }

                .about-banner:hover img {
                    transform: scale(1.08);
                }

                .banner-overlay {
                    position: absolute;
                    inset: 0;
                    background: rgba(0, 0, 0, 0.2);
                }

                .banner-text {
                    position: absolute;
                    bottom: 20px;
                    left: 0;
                    right: 0;
                }

                .banner-text h5 {
                    font-weight: bold;
                    font-size: 1.3rem;
                }

                /* Back to top button */
                #backToTop {
                    position: fixed;
                    bottom: 20px;
                    right: 20px;
                    z-index: 999;
                    background: #ff5722;
                    color: white;
                    border: none;
                    border-radius: 50%;
                    width: 55px;
                    height: 55px;
                    font-size: 22px;
                    cursor: pointer;
                    display: none;
                    justify-content: center;
                    align-items: center;
                    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
                    transition: all 0.3s ease;
                }

                #backToTop:hover {
                    background: #e64a19;
                    transform: scale(1.15) rotate(10deg);
                }

                #backToTop i {
                    font-size: 24px;
                }

                .modal-backdrop {
                    z-index: 1040 !important;
                }

                .modal {
                    z-index: 1050 !important;
                }
            </style>

            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
                <div class="sidebar-contact">
                    <div class="toggle zoom-in-zoom-out">
                        <img src="{{ asset('assets')}}/img/web-domain.png" class="img-fluid w-75">
                        <p class="rounded"
                            style="border: 1px solid #003662; background-color: #003662; color: #fff; line-height: 19px; font-size: 14px; padding: 2px 0px;"
                            id="">
                            Important Links
                        </p>
                    </div>
                    <div class="box">
                        <a id="ContentPlaceHolder1_LB_insta_link" href="#">Instant
                            Bill Payment</a>
                    </div>
                    <div class="box">
                        <a id="ContentPlaceHolder1_LB_insta_link1" href="#">
                            Smart Meter Consumer Dashboard</a>
                    </div>
                    <div class="box">
                        <a id="ContentPlaceHolder1_LB_insta_link2" href="#">Know
                            your New A/c Number</a>
                    </div>
                </div>
                <div class="container-fluid" style="background-color: #fddc00;">
                    <div class="row">
                        <marquee direction="left" onmouseover="this.stop();" onmouseout="this.start();">
                            <h6 class="mb-0 pt-2 pb-2 text-center">
                                Nagar Panchayat Anand Nagar welcomes you 
                                <span class="text-danger">Helpline +91 </span>
                            </h6>
                        </marquee>
                    </div>
                </div>

                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
                        class="active" aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                        aria-label="Slide 2"></button>

                </div>
                <div class="carousel-inner">
                    @foreach(slider() as $key=>$slider)
                    <div class="carousel-item {{ $key==0?'active':''}}">
                        <img src="{{ asset($slider->file) }}" class="d-block w-100" alt="{{ $slider->name }}" style="width: 100%;" />
                    </div>
                    @endforeach

                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                    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="#carouselExampleIndicators"
                    data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>

            </div>
 

            <div class="news-container">
                <div class="title">
                    <i class="fa fa-newspaper-o"></i>
                    <span class="pl-2">NOTIFICATIONS</span>
                </div>
            
                <marquee direction="left" onmouseover="this.stop();" onmouseout="this.start();">
                    <h6 class="mb-0 pt-2 pb-2 text-center">
                        @foreach(noticeboards() as $key => $noticeboard)
                            <a href="#" target="_blank" class="font-weight-bold" style="color: #000 !important;">
                                {{ $noticeboard->name }}
                                <span class="text-danger">
                                    <small>{{ date("d-m-Y h:i:s A", strtotime($noticeboard->updated_at)) }}</small>
                                </span>
                            </a>
                        @endforeach
                    </h6>
                </marquee>
            </div>

            <section class="top-destinations-1">
                <div class="container-fluid mb-3">
                    <ul class=" online-link  mb-3">
                        @foreach(officebearers() as $key=>$officebearer) 
                        <li><a href="#" rel="noopener" class="external">
                                <img src="{{ asset($officebearer->file) }}" alt="{{ $officebearer->name }}" title="{{ $officebearer->name }}">
                                <div class="text">
                                    <h6 style="font-size: 14px;">{{ $officebearer->name }}</h6>
                                    <p style="font-size: 11px;">{{ $officebearer->designation }}</p>
                                </div>
                            </a>
                        </li>
                        @endforeach 
                         
                    </ul> 
                        
                </div>
                <br>
            </section>
            <!-- About Section -->
            <section class="about-section py-5">
                <div class="container">
                    <div class="row align-items-center">
            
                        <!-- Left Content -->
                        <div class="col-lg-6 mb-4 mb-lg-0">
                            <div class="highlight-box" data-aos="fade-left" data-aos-duration="1200">
                                <h2 class="message-heading mb-4" data-aos="flip-up" data-aos-delay="200">
                                    Adarsh Nagar Panchayat – Anandnagar (Maharajganj, Uttar Pradesh)
                                </h2>
            
                                <p class="message-text" data-aos="fade-up" data-aos-delay="700">
                                    Adarsh Nagar Panchayat Anandnagar is an emerging town in the Maharajganj district of Uttar Pradesh. 
                                    It has been specially recognized by the state government as an "Adarsh Nagar Panchayat" (Model Town). 
                                    The town is becoming an example in the state for its strong administrative framework, availability of basic amenities, 
                                    cleanliness initiatives, and commitment to sustainable development.
            
                                    Anandnagar holds not only geographical and strategic importance but also has a strong identity in terms of historical, 
                                    social, and educational perspectives. The people here are educated, aware, and sensitive towards development, 
                                    consistently contributing to making the town self-reliant and progressive.
                                </p>
                            </div>
                        </div>
            
                        <!-- Right Image Banner -->
                        <div class="col-lg-6">
                            <div class="about-banner position-relative text-center text-white mx-auto">
                                <img src="{{ asset('assets')}}/img/Anand-Nagar.webp" class="img-fluid w-100 h-100"
                                    alt="About Adarsh Nagar Panchayat">
                                <div class="banner-overlay"></div>
                                <div class="banner-text">
                                    <h5 data-aos="fade-up" data-aos-delay="300" class="text-white">
                                        Adarsh Nagar Panchayat – Anandnagar
                                    </h5>
                                    <p data-aos="fade-up" data-aos-delay="500" class="text-white text-center">
                                        Maharajganj, Uttar Pradesh
                                    </p>
                                </div>
                            </div>
                        </div>
            
                    </div>
                </div>
            </section>
            <section class="top-destinations-1">
                <div class="container-fluid"> 
                    <ul class="hexagon container mx-auto"> 
                        <li>
                            <a id="ContentPlaceHolder1_Lb_Cust_Login" class="yellow external" rel="noopener" href="{{ route('user-login') }}">
                                <img src="{{ asset('assets')}}/img/login.png" alt="Icon" title="Icon 1">
                                <span>Consumer Login</span>
                            </a>
                        </li>
                    
                        <li>
                            <a id="ContentPlaceHolder1_Lb_Quick_Pay" class="cyan external" rel="noopener" href="#">
                                <img src="{{ asset('assets')}}/img/credit-card.png" alt="Icon" title="Icon 2">
                                <span>Quick Bill Payment</span>
                            </a>
                        </li>
                    
                        <li>
                            <a href="#tel:1912" role="link" class="pink external">
                                <img src="{{ asset('assets')}}/img/phone-call.png" alt="Icon" title="Icon 3">
                                <span>Toll-Free Number</span> 
                            </a>
                        </li>
                    
                        <li>
                            <a href="#mailto:info@npanandnagar.in" class="blue external">
                                <img src="{{ asset('assets')}}/img/arroba.png" alt="Icon" title="Icon 4">
                                <span>info@npanandnagar.in</span> 
                            </a>
                        </li>
                    
                    </ul> 
                </div>
            </section>


            <div class="populerarea__2 sp_top_50 sp_bottom_50" style="background: url({{ asset('assets')}}/img/sun-setting-silhouette-electricity-pylons.jpg) fixed no-repeat; background-size: cover;">
                <div class="container service__wrap__content text-center" data-aos="fade-up">
                    <h2 class="fw-bold text-danger">
                        <span class="d-block">Government Schemes</span>
                    </h2>
                    <p class="text-white text-center">
                        Adarsh Nagar Panchayat Anandnagar, Maharajganj has implemented citizen-centric initiatives focusing on the welfare and empowerment of residents.
                    </p>
            
                    <div class="row">
                        <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12 service__wrap__content"
                            data-aos="fade-up">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper">
                                    <div class="front"
                                        style="background: url({{ asset('assets')}}/img/index/Y5.jpg); background-size: cover;background-repeat: no-repeat;background-position: center;">
                                        <h1>
                                            Pradhan Mantri Awas Yojana
                                        </h1>
                                    </div>
                                    <div class="back">
                                        <h2 style="text-align: center" tabindex="0" data-swp-font-size="20px">
                                            Pradhan Mantri Awas Yojana
                                        </h2>
                                        <p><a id="ContentPlaceHolder1_LB_Smart_Meter_Prepaid_Recharge" href="#">Affordable housing for the urban poor.</a></p>
                                        <div class="mt-5">
                                            <a href="#" class="btn btn-primary read-btn">Read More →</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
            
                        <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12 service__wrap__content"
                            data-aos="fade-up">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper">
                                    <div class="front"
                                        style="background: url({{ asset('assets')}}/img/index/Y6.jpg); background-size: cover;background-repeat: no-repeat;background-position: center;">
                                        <h1>
                                            Swachh Bharat Mission
                                        </h1>
                                    </div>
                                    <div class="back">
                                        <h2 style="text-align: center" tabindex="0" data-swp-font-size="20px">
                                            Swachh Bharat Mission
                                        </h2>
                                        <p><a id="ContentPlaceHolder1_LB_Comm_less_20" href="#">Cleanliness and sanitation for all.</a></p>
                                        <div class="mt-5">
                                            <a href="#" class="btn btn-primary read-btn">Read More →</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
            
                        <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12 service__wrap__content" data-aos="fade-up">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper">
                                    <div class="front"
                                        style="background: url({{ asset('assets')}}/img/index/Y3.jpg); background-size: cover;background-repeat: no-repeat;background-position: center;">
                                        <h1>National Urban Livelihood Mission</h1>
                                    </div>
                                    <div class="back">
                                        <h2 style="text-align: center" tabindex="0" data-swp-font-size="20px">
                                            National Urban Livelihood Mission
                                        </h2>
            
                                        <p><a id="ContentPlaceHolder1_LB_Update_Mobile" href="#">Skill training and livelihood for urban poor.</a></p>
                                        <div class="mt-">
                                            <a href="#" class="btn btn-primary read-btn">Read More →</a>
                                        </div>
            
                                    </div>
                                </div>
                            </div>
                        </div>
            
                        <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12 service__wrap__content"
                            data-aos="fade-up">
                            <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
                                <div class="flipper">
                                    <div class="front"
                                        style="background: url({{ asset('assets')}}/img/index/Y4.jpg); background-size: cover;background-repeat: no-repeat;background-position: center;">
                                        <h1>
                                            Jal Jeevan Mission
                                        </h1>
                                    </div>
                                    <div class="back">
                                        <h2 style="text-align: center" tabindex="0" data-swp-font-size="20px">
                                            Jal Jeevan Mission
                                        </h2>
            
                                        <p><a id="ContentPlaceHolder1_LB_Track_Complaint" href="#">Tap water supply to every household.</a></p>
                                        <div class="mt-5">
                                            <a href="#" class="btn btn-primary read-btn">Read More →</a>
                                        </div>
            
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="gridarea__2 sp_bottom_100" data-aos="fade-up">
                <div class="container full__width__padding">
                    <div class="section__title">
                        <div class="section__title__heading mt-3 text-center">
                            <h2 class="fw-bold text-danger">
                                <span class="d-block">Our Services</span>
                            </h2>
                            <p class="text-muted text-center">
                                Adarsh Nagar Panchayat – Anandnagar, Maharajganj is committed to providing transparent and accountable services that are accessible and convenient for citizens.
                            </p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 col-12 grid-item column__custom__class">
                            <div class="gridarea__wraper">
                                <div class="gridarea__img">
                                    <img src="{{ asset('assets')}}/img/index/OS1.png" class="img-fluid" style="width: 64px;" />
                                </div>
                                <div class="gridarea__content">
                                    <div class="gridarea__heading">
                                        <h6>
                                            <a href="#">
                                                E-Tender
                                            </a>
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 col-12 grid-item column__custom__class">
                            <div class="gridarea__wraper">
                                <div class="gridarea__img">
                                    <img src="{{ asset('assets')}}/img/index/OS2.png" class="img-fluid" style="width: 64px;" />
                                </div>
                                <div class="gridarea__content">
                                    <div class="gridarea__heading">
                                        <h6>
                                            <a href="#">
                                                Public Grievance
                                            </a>
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 col-12 grid-item column__custom__class">
                            <div class="gridarea__wraper">
                                <div class="gridarea__img">
                                    <img src="{{ asset('assets')}}/img/index/OS3.png" class="img-fluid" style="width: 64px;" />
                                </div>
                                <div class="gridarea__content">
                                    <div class="gridarea__heading">
                                        <h6>
                                            <a href="#">
                                                Right to Information (RTI)
                                            </a>
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 col-12 grid-item column__custom__class">
                            <div class="gridarea__wraper">
                                <div class="gridarea__img">
                                    <img src="{{ asset('assets')}}/img/index/OS4.png" class="img-fluid" style="width: 64px;" />
                                </div>
                                <div class="gridarea__content">
                                    <div class="gridarea__heading">
                                        <h6>
                                            <a href="#">
                                                Zones / Wards
                                            </a>
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 col-12 grid-item column__custom__class">
                            <div class="gridarea__wraper">
                                <div class="gridarea__img">
                                    <img src="{{ asset('assets')}}/img/index/OS5.png" class="img-fluid" style="width: 64px;" />
                                </div>
                                <div class="gridarea__content">
                                    <div class="gridarea__heading">
                                        <h6>
                                            <a href="#">
                                                Citizen Charter
                                            </a>
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-xl-2 col-lg-2 col-md-6 col-sm-6 col-12 grid-item column__custom__class">
                            <div class="gridarea__wraper">
                                <div class="gridarea__img">
                                    <img src="{{ asset('assets')}}/img/index/OS6.png" class="img-fluid" style="width: 64px;" />
                                </div>
                                <div class="gridarea__content">
                                    <div class="gridarea__heading">
                                        <h6>
                                            <a href="#">
                                                Property Tax
                                            </a>
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="testimonialarea__3" style="background: url({{ asset('assets')}}/img/power-lines-532720_1280.jpg) fixed no-repeat; background-size: cover;">
                <div class="container text-center mb-5" data-aos="fade-left">
                    <h2 class="fw-bold text-danger">
                        <span class="d-block hindi">Departments</span>
                    </h2>
                    <p>
                        Various departments under Adarsh Nagar Panchayat – Anandnagar, Maharajganj are dedicated to providing public services and ensuring well-organized development and administration of the city.
                    </p>
                </div>
            
                <div class="container">
                    <div class="swiper departmentSwiper" data-aos="zoom-in">
                        <div class="swiper-wrapper">
                            <!-- Card 1 -->
                            <div class="swiper-slide px-1">
                                <div class="card dept-card h-100 text-center p-1">
                                    <div class="icon-wrap mb-2">
                                        <img src="{{ asset('assets')}}/img/index/D1.png" class="dept-icon" alt="PWD Icon">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h6 class="dept-subtitle mb-1">Public Works Department</h6>
                                        <p class="dept-desc mb-1 flex-grow-1">
                                            This department is responsible for road construction, building repairs, and other public construction works.
                                        </p>
                                        <a href="#" class="dept-link fw-bold text-decoration-none mt-auto">
                                            Read More
                                        </a>
                                    </div>
                                </div>
                            </div>
            
                            <!-- Card 2 -->
                            <div class="swiper-slide px-1">
                                <div class="card dept-card h-100 text-center p-1">
                                    <div class="icon-wrap mb-2">
                                        <img src="{{ asset('assets')}}/img/index/D2.png" class="dept-icon" alt="IT Icon">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h6 class="dept-subtitle mb-1">IT Department</h6>
                                        <p class="dept-desc mb-1 flex-grow-1">
                                            This department is responsible for all online services and technological development of the municipality.
                                        </p>
                                        <a href="#" class="dept-link fw-bold text-decoration-none mt-auto">
                                            Read More
                                        </a>
                                    </div>
                                </div>
                            </div>
            
                            <!-- Card 3 -->
                            <div class="swiper-slide px-1">
                                <div class="card dept-card h-100 text-center p-1">
                                    <div class="icon-wrap mb-2">
                                        <img src="{{ asset('assets')}}/img/index/D3.png" class="dept-icon" alt="Property Tax Icon">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h6 class="dept-subtitle mb-1">Property Tax Department</h6>
                                        <p class="dept-desc mb-1 flex-grow-1">
                                            This department handles property tax collection and management of related records.
                                        </p>
                                        <a href="#" class="dept-link fw-bold text-decoration-none mt-auto">Read More</a>
                                    </div>
                                </div>
                            </div>
            
                            <!-- Card 4 -->
                            <div class="swiper-slide px-1">
                                <div class="card dept-card h-100 text-center p-1">
                                    <div class="icon-wrap mb-2">
                                        <img src="{{ asset('assets')}}/img/index/D4.png" class="dept-icon" alt="Health Icon">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h6 class="dept-subtitle mb-1">Health Department</h6>
                                        <p class="dept-desc mb-1 flex-grow-1">
                                            This department monitors city sanitation, waste management, and public health services.
                                        </p>
                                        <a href="#" class="dept-link fw-bold text-decoration-none mt-auto">Read More</a>
                                    </div>
                                </div>
                            </div>
            
                            <!-- Card 5 -->
                            <div class="swiper-slide px-1">
                                <div class="card dept-card h-100 text-center p-1">
                                    <div class="icon-wrap mb-2">
                                        <img src="{{ asset('assets')}}/img/index/D5.png" class="dept-icon" alt="Street Light Icon">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h6 class="dept-subtitle mb-1">Street Light Department</h6>
                                        <p class="dept-desc mb-1 flex-grow-1">
                                            Responsible for maintaining street lighting and installing new lights.
                                        </p>
                                        <a href="#" class="dept-link fw-bold text-decoration-none mt-auto">Read More</a>
                                    </div>
                                </div>
                            </div>
            
                            <!-- Card 6 -->
                            <div class="swiper-slide px-1">
                                <div class="card dept-card h-100 text-center p-1">
                                    <div class="icon-wrap mb-2">
                                        <img src="{{ asset('assets')}}/img/index/D6.png" class="dept-icon" alt="Water Works Icon">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h6 class="dept-subtitle mb-1">Water Works Department</h6>
                                        <p class="dept-desc mb-1 flex-grow-1">
                                            This department ensures the supply of clean drinking water to citizens.
                                        </p>
                                        <a href="#" class="dept-link fw-bold text-decoration-none mt-auto">Read More</a>
                                    </div>
                                </div>
                            </div>
            
                            <!-- Card 7 -->
                            <div class="swiper-slide px-1">
                                <div class="card dept-card h-100 text-center p-1">
                                    <div class="icon-wrap mb-2">
                                        <img src="{{ asset('assets')}}/img/index/D7.png" class="dept-icon" alt="Establishment Icon">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h6 class="dept-subtitle mb-1">Establishment Department</h6>
                                        <p class="dept-desc mb-1 flex-grow-1">
                                            This department manages staff appointments, salaries, and office procedures.
                                        </p>
                                        <a href="#" class="dept-link fw-bold text-decoration-none mt-auto">Read More</a>
                                    </div>
                                </div>
                            </div>
            
                            <!-- Card 8 -->
                            <div class="swiper-slide px-1">
                                <div class="card dept-card h-100 text-center p-1">
                                    <div class="icon-wrap mb-2">
                                        <img src="{{ asset('assets')}}/img/index/D8.png" class="dept-icon" alt="Garden Icon">
                                    </div>
                                    <div class="card-body d-flex flex-column">
                                        <h6 class="dept-subtitle mb-1">Garden / Horticulture Department</h6>
                                        <p class="dept-desc mb-1 flex-grow-1">
                                            Responsible for maintenance of city gardens and enhancing greenery.
                                        </p>
                                        <a href="#" class="dept-link fw-bold text-decoration-none mt-auto">Read More</a>
                                    </div>
                                </div>
                            </div>
            
                            <!-- ... Other cards follow the same structure ... -->
            
                        </div>
            
                        <!-- Navigation arrows -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
            
            <!-- Public Grievance Section -->
            <section class="about-section py-5">
                <div class="container">
                    <div class="row align-items-center">
            
                        <!-- Left Content -->
                        <div class="col-lg-6 mb-4 mb-lg-0">
                            <div class="highlight-box" data-aos="fade-left" data-aos-duration="1200">
                                <h2 class="message-heading mb-4" data-aos="flip-up" data-aos-delay="200">
                                    Public Grievance
                                </h2>
            
                                <p class="message-text" data-aos="fade-up" data-aos-delay="700">
                                    Adarsh Nagar Panchayat, Anand Nagar is committed to addressing the concerns and grievances of its citizens. We encourage residents to report issues related to sanitation, water supply, roads, street lighting, and other civic services. Your suggestions and feedback help us improve our services. Click the button below to register your grievance.
                                </p>
            
                                <!-- Button to open modal -->
                                <div class="container my-5 text-center">
                                    <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal"
                                        data-bs-target="#grievanceModal">
                                        Submit Grievance
                                    </button>
                                </div>
            
                            </div>
                        </div>
            
                        <!-- Right Image Banner -->
                        <div class="col-lg-6" data-aos="fade-right">
                            <div class="about-banner position-relative text-center text-white mx-auto">
                                <img src="{{ asset('assets')}}/img/index/grievance.jpg" class="img-fluid w-100 h-100" alt="grievance">
                            </div>
                        </div>
            
                    </div>
                </div>
            </section> 
            

            <div class="animate__content sp_bottom_40 sp_top_40" style="background-color: #f0f8ff;">
                <div class="container-fluid full__width__padding">
                    <div class="animate__content__wrap">
                        <div class="animate__content__single">
                            <span>
                                <a href="#http://www.uppclonline.com/" target="_blank" class="thumbnail external none" rel="noopener"  >
                                    <img src="{{ asset('mis/img/about/online-pcl.png')}}" alt="www.uppclonline.com" class="bg-white" title="www.uppclonline.com" />
                                </a>
                            </span>
                        </div>
                        <div class="animate__content__single animate__content__single--2">
                            <span>
                                <a href="#https://digitalindia.gov.in/" target="_blank" class="thumbnail external none" rel="noopener" >
                                    <img src="{{ asset('mis/img/about/digital.png')}}" alt="www.digitalindia.gov.in" class="bg-white" title="www.digitalindia.gov.in" />
                                </a>
                            </span>
                        </div>
                        <div class="animate__content__single">
                            <span>
                                <a href="#http://www.uprvunl.org/" target="_blank" class="thumbnail external none" rel="noopener" >
                                    <img src="{{ asset('mis/img/about/uprvunl.png')}}" alt="www.uprvunl.org" class="bg-white" title="www.uprvunl.org" />
                                </a>
                            </span>
                        </div>
                        <div class="animate__content__single animate__content__single--2">
                            <span>
                                <a href="#http://puvvnl.up.nic.in/" target="_blank" class="thumbnail external none" rel="noopener" >
                                    <img src="{{ asset('mis/img/about/pvvnl.png')}}" alt="www.puvvnl.up.nic.in" class="bg-white" title="www.puvvnl.up.nic.in" />
                                </a>
                            </span>
                        </div>
                        <div class="animate__content__single">
                            <span>
                                <a href="#http://www.dvvnl.org/" target="_blank" class="thumbnail external none" rel="noopener" >
                                    <img src="{{ asset('mis/img/about/dvvnl.jpg')}}" alt="www.dvvnl.org" class="bg-white" title="www.dvvnl.org" />
                                </a>
                            </span>
                        </div>
                        <div class="animate__content__single animate__content__single--2">
                            <span>
                                <a href="#http://www.mvvnl.in/" target="_blank" class="thumbnail external none" rel="noopener" >
                                    <img src="{{ asset('mis/img/about/mvvnl.png')}}" alt="www.mvvnl.in" class="bg-white" title="www.mvvnl.in" />
                                </a>
                            </span>
                        </div>
                        <div class="animate__content__single animate__content__single--2">
                            <span>
                                <a href="#http://upptcl.org/" target="_blank" class="thumbnail external none" rel="noopener" >
                                    <img src="{{ asset('mis/img/about/up-ptcl.png')}}" alt="www.upptcl.org" class="bg-white" title="www.upptcl.org" />
                                </a>
                            </span>
                        </div>
                        <div class="animate__content__single">
                            <span>
                                <a href="#http://www.uppclonline.com/" target="_blank" class="thumbnail external none" rel="noopener" >
                                    <img src="{{ asset('mis/img/about/online-pcl.png')}}" alt="www.uppclonline.com" class="bg-white" title="www.uppclonline.com" />
                                </a>
                            </span>
                        </div>
                        <div class="animate__content__single animate__content__single--2">
                            <span>
                                <a href="#https://digitalindia.gov.in/" target="_blank" class="thumbnail external none" rel="noopener" >
                                    <img src="{{ asset('mis/img/about/digital.png')}}" alt="www.digitalindia.gov.in" class="bg-white" title="www.digitalindia.gov.in" />
                                </a>
                            </span>
                        </div>
                    </div>
                </div>
            </div>


             <!--<div id="myModal" class="modal fade mt-4" role="dialog">-->
            <!--    <div class="modal-dialog">-->
            <!--        <div class="modal-content">-->
            <!--            <div class="modal-header">-->
            <!--                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
            <!--            </div>-->
            <!--            <div class="modal-body text-center">-->
            <!--                <img src="{{ asset('assets')}}/img/openpop.jpg" class="img-fluid" />-->
            <!--            </div>-->
            <!--        </div>-->
            <!--    </div>-->
            <!--</div>-->
            
            
            <!-- Modal -->
            <div class="modal fade" id="grievanceModal" tabindex="-1" aria-labelledby="grievanceModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
            
                        <div class="modal-header">
                            <h5 class="modal-title" id="grievanceModalLabel">
                                Public Grievance Form
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
            
                        <div class="modal-body">
                            <form>
                                <div class="mb-3">
                                    <label class="form-label">
                                        Name
                                    </label>
                                    <input type="text" class="form-control" placeholder="Enter your name">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">
                                        Mobile
                                    </label>
                                    <input type="text" class="form-control" placeholder="Enter mobile number">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">
                                        Ward
                                    </label>
                                    <input type="text" class="form-control" placeholder="Enter ward">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">
                                        Subject
                                    </label>
                                    <input type="text" class="form-control" placeholder="Enter subject">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">
                                        Description
                                    </label>
                                    <textarea class="form-control" rows="3" placeholder="Enter description"></textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">
                                        Upload Image (optional)
                                    </label>
                                    <input type="file" class="form-control">
                                </div>
                            </form>
                        </div>
            
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success">
                                Submit
                            </button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
                                Close
                            </button>
                        </div>
            
                    </div>
                </div>
            </div>

            <!-- Back to Top Button -->
            <button id="backToTop"><i class="fas fa-arrow-up"></i></button>

            <script>
                const backToTop = document.getElementById("backToTop");

                // Scroll par show/hide
                window.onscroll = function () {
                    if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
                        backToTop.style.display = "flex";
                    } else {
                        backToTop.style.display = "none";
                    }
                };

                // Custom smooth scroll function
                function smoothScrollToTop() {
                    let scrollStep = -window.scrollY / 40; // speed control (40 steps)
                    let scrollInterval = setInterval(() => {
                        if (window.scrollY !== 0) {
                            window.scrollBy(0, scrollStep);
                        } else {
                            clearInterval(scrollInterval);
                        }
                    }, 15); // 15ms interval for smooth effect
                }

                // Button click
                backToTop.addEventListener("click", smoothScrollToTop);
            </script>
            <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>

            <script>
                AOS.init({
                    duration: 800,      // animation ka time
                    once: true,         // ek baar animate hoke visible ho jaye
                    offset: 50,         // thoda jaldi trigger ho
                    disable: function () {
                        return window.innerWidth < 768;  // phone view pe disable
                    }
                });
            </script>


    @endsection 
    @section('script') 
   <script type="text/javascript">
        function SetTarget() {

            document.forms[0].target = "_blank";
        }
        function onlyNumberKey(evt) {
            var ASCIICode = (evt.which) ? evt.which : evt.keyCode
            if (ASCIICode > 31 && (ASCIICode < 48 || ASCIICode > 57))
                return false;
            return true;
        }
        function renderTime() {
            var currentTime = new Date();
            var diem = "AM";
            var h = currentTime.getHours();
            var m = currentTime.getMinutes();
            var s = currentTime.getSeconds();
            setTimeout('renderTime()', 1000);
            if (h == 0) {
                h = 12;
            } else if (h > 12) {
                h = h - 12;
                diem = "PM";
            }
            if (h < 10) {
                h = "0" + h;
            }
            if (m < 10) {
                m = "0" + m;
            }
            if (s < 10) {
                s = "0" + s;
            }
            var myClock = document.getElementById('clockDisplay');
            myClock.textContent = h + ":" + m + ":" + s + " " + diem;
            myClock.innerText = h + ":" + m + ":" + s + " " + diem;
        }
        renderTime();
    </script>
    <script src="{{ asset('mis/js/jquery.bootstrap.newsbox.js')}}" type="text/javascript"></script>


    <script>
        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
        if (localStorage.getItem("theme-color") === "dark" || (!("theme-color" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {
            document.getElementById("light--to-dark-button")?.classList.add("dark--mode");
        }
        if (localStorage.getItem("theme-color") === "light") {
            document.getElementById("light--to-dark-button")?.classList.remove("dark--mode");
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#myModal').modal('show');
        });
    </script>
    <script type="text/javascript">
        function CallMyFunction() {
            debugger
            sweetAlert({
                icon: '',
                title: '',
                type: ''
            });
        }
    </script>


    <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".departmentSwiper", {
    loop: true,
    spaceBetween: 20,
    speed: 800,
    slidesPerView: 4, // Default (desktop)
    slidesPerGroup: 1,
    autoplay: {
        delay: 2500,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
    breakpoints: {
        320:  { slidesPerView: 1 },
        576:  { slidesPerView: 2 },
        768:  { slidesPerView: 3 },
        992:  { slidesPerView: 4 },
        1200: { slidesPerView: 4 }, // You can increase to 5+ if needed on big screens
    },
});

    </script>
    @endsection