aw
require_once 'includes/db.php';

// Fetch published blogs
$blogs_q = mysqli_query($conn, "SELECT * FROM blogs WHERE status='Published' ORDER BY publish_date DESC, created_at DESC");

include 'includes/header.php'; 
?>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

    /* Global Variables - Government Portal Theme */
    :root {
        --govt-navy: #0f2b48;
        --govt-navy-dark: #0a1f35;
        --govt-navy-light: #1d3e61;
        --govt-saffron: #f07c16;
        --govt-saffron-light: #fbebe0;
        --govt-green: #138808;
        --govt-green-dark: #0e6506;
        --govt-gold: #b8860b;
        --govt-bg-light: #f4f7fa;
        --govt-border: #d1d5db;
        
        --text-dark: #212529;
        --text-muted: #495057;
        
        --border-radius: 4px;
        --transition: all 0.2s ease-in-out;
        --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        --box-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
        background-color: #fff;
        color: var(--text-dark);
    }
    .section-padding { padding: 60px 0; }
    
    /* Typography */
    .section-supertitle {
        color: var(--govt-saffron);
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 8px;
        display: inline-block;
    }
    .section-title {
        font-weight: 700;
        font-size: 30px;
        color: var(--govt-navy);
        line-height: 1.2;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .section-title-underline::after {
        content: '';
        display: block;
        width: 80px;
        height: 3px;
        background: var(--govt-saffron);
        margin-top: 12px;
        border-radius: 0;
    }
    .text-center .section-title-underline::after { margin-left: auto; margin-right: auto; }
    .text-muted { color: var(--text-muted) !important; font-size: 15px; line-height: 1.7; font-weight: 400; }

    /* Inner Hero */
    .inner-hero {
        position: relative;
        height: 350px;
        background: url('img/header-bg.jpg') no-repeat center center/cover;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -100px;
        z-index: 0;
    }
    .inner-hero::before {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(135deg, rgba(15, 43, 72, 0.95) 0%, rgba(10, 31, 53, 0.9) 100%);
    }
    .inner-hero-content {
        position: relative;
        z-index: 2;
        text-align: center;
        color: #fff;
        padding-top: 80px;
        width: 100%;
        max-width: 800px;
    }
    .inner-hero-title {
        font-size: 40px;
        font-weight: 800;
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .breadcrumb-custom {
        background: transparent;
        padding: 0;
        margin: 0 auto 20px;
        justify-content: center;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .breadcrumb-custom .breadcrumb-item a { color: var(--govt-saffron); text-decoration: none; }
    .breadcrumb-custom .breadcrumb-item.active { color: #fff; }
    .breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before { content: "›"; color: rgba(255,255,255,0.6); font-size: 16px; line-height: 1;}

    /* Premium Blog Cards */
    .blog-card-modern {
        background: #fff;
        border-radius: var(--border-radius);
        overflow: hidden;
        box-shadow: var(--box-shadow);
        transition: var(--transition);
        height: 100%;
        display: flex;
        flex-direction: column;
        border: 1px solid var(--govt-border);
        position: relative;
    }
    .blog-card-modern:hover {
        transform: translateY(-4px);
        box-shadow: var(--box-shadow-hover);
        border-color: var(--govt-saffron);
    }
    .bc-img-wrap {
        position: relative;
        overflow: hidden;
        height: 240px;
        width: 100%;
    }
    .bc-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: var(--transition);
    }
    .blog-card-modern:hover .bc-img-wrap img {
        transform: scale(1.04);
    }
    .bc-date-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        background: rgba(255,255,255,0.95);
        color: var(--govt-navy);
        padding: 6px 12px;
        border-radius: var(--border-radius);
        font-size: 11px;
        font-weight: 700;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        display: flex;
        align-items: center;
        gap: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border: 1px solid var(--govt-border);
    }
    .bc-content {
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    .bc-title a {
        font-weight: 700;
        color: var(--govt-navy);
        font-size: 18px;
        line-height: 1.4;
        text-decoration: none;
        transition: var(--transition);
        display: block;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .blog-card-modern:hover .bc-title a {
        color: var(--govt-saffron);
    }
    .bc-meta {
        color: var(--text-muted);
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .bc-meta i { color: var(--govt-saffron); }
    .bc-desc {
        color: var(--text-muted);
        font-size: 13px;
        line-height: 1.6;
        margin-bottom: 20px;
        flex-grow: 1;
    }
    .bc-read-more {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        color: var(--govt-green);
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none;
        transition: var(--transition);
        border-bottom: 1px solid transparent;
        padding-bottom: 2px;
        align-self: flex-start;
    }
    .blog-card-modern:hover .bc-read-more {
        color: var(--govt-green-dark);
        border-bottom-color: var(--govt-green-dark);
        text-decoration: none;
    }
    .bc-read-more i {
        margin-left: 6px;
        transition: var(--transition);
    }
    .blog-card-modern:hover .bc-read-more i {
        transform: translateX(4px);
    }

</style>

<!-- 1. Inner Hero Section -->
<section class="inner-hero">
    <div class="inner-hero-content text-center">
        <ol class="breadcrumb breadcrumb-custom">
            <li class="breadcrumb-item"><a href="index.php">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Blog</li>
        </ol>
        <h1 class="inner-hero-title">Stories From The Ground</h1>
        <p class="text-white mx-auto font-weight-light" style="font-size: 16px; max-width: 700px; opacity: 0.9;">
            Dive deep into our latest campaigns, real-life success stories, insights, and updates straight from the heart of our community work.
        </p>
    </div>
</section>

<!-- 2. Blog Cards List Section -->
<section class="section-padding bg-light">
    <div class="container">
        
        <div class="row mb-5 pb-3">
            <div class="col-lg-8">
                <span class="section-supertitle">Latest News & Articles</span>
                <h2 class="section-title section-title-underline">Our Blog Updates</h2>
            </div>
            <div class="col-lg-4 text-lg-right pt-3">
                <p class="text-muted m-0">Stay informed on how combined efforts are fundamentally altering lives.</p>
            </div>
        </div>

        <div class="row">
                            <div class="col-12 text-center py-5">
                    <div style="width: 100px; height: 100px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: var(--box-shadow); border: 1px solid var(--govt-border);">
                        <i class="fa fa-bullhorn" style="font-size: 40px; color: var(--govt-border);"></i>
                    </div>
                    <h3 style="color: var(--govt-navy); font-weight: 700; font-family: 'Plus Jakarta Sans', sans-serif;">No Publications Yet</h3>
                    <p class="text-muted">We are currently drafting inspiring stories from our recent field operations. Check back soon!</p>
                </div>
                    </div>
        
    </div>
</section>

<!-- Official Government Styled Footer -->
<style>
    .premium-footer {
        font-family: 'Plus Jakarta Sans', sans-serif;
        background: #ffffff;
        color: #495057;
        position: relative;
        border-top: 1px solid #e9ecef;
    }

    /* Top Tricolor Divider Ribbon */
    .footer-tricolor {
        display: flex;
        height: 4px;
        width: 100%;
    }
    .footer-tricolor-saffron { flex: 1; background-color: #f07c16; }
    .footer-tricolor-white { flex: 1; background-color: #ffffff; }
    .footer-tricolor-green { flex: 1; background-color: #138808; }

    /* CTA Strip */
    .footer-cta-strip {
        background-color: #f8f9fa;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding: 35px 0;
        position: relative;
        z-index: 2;
    }

    .cta-title {
        color: #0b1e33;
        font-weight: 700;
        font-size: 24px;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .cta-desc {
        color: #495057;
        font-size: 13px;
        margin: 5px 0 0;
        line-height: 1.5;
    }

    .cta-btn-group {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .cta-btn {
        display: inline-flex;
        align-items: center;
        padding: 10px 24px;
        border-radius: var(--border-radius, 4px);
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.2s ease-in-out;
        text-decoration: none !important;
        border: none;
        cursor: pointer;
    }

    .cta-btn-white {
        background: var(--govt-green, #138808);
        color: #ffffff !important;
        border: 1px solid #0e6506;
    }

    .cta-btn-white:hover {
        background: #0e6506 !important;
        transform: translateY(-1px);
    }

    .cta-btn-outline {
        background: transparent;
        color: #0b1e33 !important;
        border: 1px solid #0b1e33;
    }

    .cta-btn-outline:hover {
        border-color: #0b1e33;
        background: rgba(11, 30, 51, 0.05);
        transform: translateY(-1px);
    }

    /* Main Footer */
    .footer-main {
        padding: 60px 0 30px;
        position: relative;
        z-index: 1;
    }

    .footer-brand-logo {
        display: inline-flex;
        align-items: center;
        text-decoration: none !important;
        background: rgba(0, 0, 0, 0.02);
        padding: 10px 14px;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: 0.2s;
        margin-bottom: 20px;
    }

    .footer-brand-logo:hover {
        background: rgba(0, 0, 0, 0.04);
        border-color: rgba(0, 0, 0, 0.08);
    }

    .footer-brand-logo img {
        height: 50px;
        border-radius: 2px;
    }

    .footer-brand-name {
        color: #0b1e33;
        margin-left: 12px;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1.3;
        letter-spacing: 0.5px;
    }

    .footer-brand-name small {
        display: block;
        font-size: 9px;
        color: #f07c16;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-top: 2px;
    }

    .footer-about-text {
        font-size: 13px;
        line-height: 1.6;
        color: #495057;
        margin-bottom: 20px;
    }

    /* Social Links - Solid Sharp Official Format */
    .footer-social-links {
        display: flex;
        gap: 8px;
    }

    .footer-social-link {
        width: 32px;
        height: 32px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.03);
        color: #495057;
        font-size: 14px;
        text-decoration: none !important;
        transition: all 0.2s ease;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .footer-social-link:hover {
        transform: translateY(-1px);
        color: #ffffff !important;
    }

    .footer-social-link.fb:hover { background-color: #1877f2; border-color: #1877f2; }
    .footer-social-link.ig:hover { background: #e1306c; border-color: #e1306c; }
    .footer-social-link.yt:hover { background-color: #ff0000; border-color: #ff0000; }
    .footer-social-link.wa:hover { background-color: #25d366; border-color: #25d366; }

    /* Headings */
    .footer-heading {
        color: #0b1e33;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 20px;
        padding-bottom: 8px;
        border-bottom: 2px solid #f07c16;
        display: inline-block;
    }

    /* Links - Standard Dot Directory Format */
    .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-links a {
        color: #495057;
        text-decoration: none !important;
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        transition: all 0.2s ease;
        font-weight: 500;
    }

    .footer-links a::before {
        content: '\f105';
        font-family: 'FontAwesome';
        color: #f07c16;
        margin-right: 8px;
        font-size: 12px;
        transition: 0.2s;
    }

    .footer-links a:hover {
        color: #f07c16;
        padding-left: 4px;
    }

    /* Contact Items - Official Registry Layout */
    .footer-contact-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;
        padding: 10px 12px;
        background: rgba(0, 0, 0, 0.02);
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.04);
        transition: 0.2s;
    }

    .footer-contact-item:hover {
        background: rgba(0, 0, 0, 0.04);
        border-color: rgba(0, 0, 0, 0.08);
    }

    .footer-contact-icon {
        width: 30px;
        height: 30px;
        border-radius: 2px;
        background: rgba(240, 124, 22, 0.1);
        color: #f07c16;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .footer-contact-text {
        font-size: 12px;
        line-height: 1.5;
        color: #495057;
    }

    .footer-contact-text strong {
        display: block;
        color: #0b1e33;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    /* Bottom Compliance Bar */
    .footer-bottom {
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        background: #f8f9fa;
        padding: 20px 0;
        position: relative;
        z-index: 1;
    }

    .footer-copyright {
        font-size: 12px;
        color: #495057;
        margin: 0;
        line-height: 1.6;
    }

    .footer-copyright a {
        color: #f07c16;
        text-decoration: none !important;
        font-weight: 600;
        transition: 0.2s;
    }

    .footer-copyright a:hover {
        color: #0b1e33;
    }

    .footer-bottom-links {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .footer-bottom-links a {
        color: #495057;
        text-decoration: none !important;
        font-size: 12px;
        font-weight: 500;
        transition: 0.2s;
    }

    .footer-bottom-links a:hover {
        color: #f07c16;
        text-decoration: underline !important;
    }

    /* Scroll to top */
    .scroll-top-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 36px;
        height: 36px;
        background: #f07c16;
        color: #fff;
        border-radius: 2px;
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        text-decoration: none !important;
        box-shadow: 0 4px 10px rgba(240, 124, 22, 0.3);
        transition: 0.2s;
        z-index: 999;
        cursor: pointer;
        border: none;
    }

    .scroll-top-btn:hover {
        background: #d66b0f;
        transform: translateY(-1px);
    }

    @media (max-width: 991px) {
        .footer-cta-strip .row { text-align: center; }
        .cta-btn-group { justify-content: center; margin-top: 15px; }
        .cta-title { font-size: 20px; }
        .footer-main { padding: 40px 0 20px; }
    }

    @media (max-width: 767px) {
        .footer-bottom .row { text-align: center; }
        .footer-bottom-links { justify-content: center; margin-top: 10px; }
    }
</style>

<!-- National Tricolor Strip Separator -->
<div class="footer-tricolor">
    <div class="footer-tricolor-saffron"></div>
    <div class="footer-tricolor-white"></div>
    <div class="footer-tricolor-green"></div>
</div>

<!-- CTA Strip -->
<div class="footer-cta-strip">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-7 mb-3 mb-lg-0">
                <h3 class="cta-title">Ready to Make an Impact?</h3>
                <p class="cta-desc">Join hands with AICONZ INTERNATIONAL FOUNDATION to support registered public welfare, education, healthcare, and rural development programs.</p>
            </div>
            <div class="col-lg-5 text-lg-right">
                <div class="cta-btn-group justify-content-lg-end">
                    <a href="donate.php" class="cta-btn cta-btn-white"><i class="fa fa-heart mr-2"></i> Donate Now</a>
                    <a href="membership.php" class="cta-btn cta-btn-outline"><i class="fa fa-users mr-2"></i> Become a Member</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Main Footer -->
<footer class="premium-footer">
    <div class="footer-main">
        <div class="container">
            <div class="row">

                <!-- Brand Column -->
                <div class="col-lg-4 col-md-6 mb-5 mb-lg-0 pr-lg-4">
                    <a href="index.php" class="footer-brand-logo">
                        <img src="img/logo.jpeg" alt="Aiconz Logo">
                        <span class="footer-brand-name">
                            AICONZ INTERNATIONAL
                            <small>Ministry of Corporate Affairs Registered</small>
                        </span>
                    </a>
                    <p class="footer-about-text">
                        AICONZ INTERNATIONAL FOUNDATION is a government registered public trust and NGO dedicated to grassroots community empowerment, sustainable livelihood schemes, and literacy enhancement across India.
                    </p>
                    <div class="footer-social-links">
                        <a href="https://www.facebook.com/share/1BHHMzkAGS/" class="footer-social-link fb"><i class="fa fa-facebook"></i></a>
                        <a href="#" class="footer-social-link ig"><i class="fa fa-instagram"></i></a>
                        <a href="#" class="footer-social-link yt"><i class="fa fa-youtube-play"></i></a>
                        <a href="https://chat.whatsapp.com/CcSwfV0wv4bDMs0EM0REXT" class="footer-social-link wa"><i class="fa fa-whatsapp"></i></a>
                    </div>
                </div>

                <!-- Column 2: Government Resources -->
                <div class="col-lg-2 col-md-6 col-6 mb-5 mb-lg-0">
                    <h4 class="footer-heading">Governance Links</h4>
                    <ul class="footer-links">
                        <li><a href="index.php">Portal Directory</a></li>
                        <li><a href="about.php">Compliance Overview</a></li>
                        <li><a href="mission-vision.php">Objectives Charter</a></li>
                        <li><a href="what-we-do.php">Public Schemes</a></li>
                        <li><a href="projects.php">CSR Initiatives</a></li>
                        <li><a href="certificates.php">Audit & Trust Certificates</a></li>
                    </ul>
                </div>

                <!-- Column 3: Citizen Services -->
                <div class="col-lg-2 col-md-6 col-6 mb-5 mb-lg-0">
                    <h4 class="footer-heading">Citizen Desk</h4>
                    <ul class="footer-links">
                        <li><a href="donate.php">Online Welfare Donation</a></li>
                        <li><a href="crowd-funding.php">Direct Cause Funding</a></li>
                        <li><a href="membership.php">Apply for Member ID</a></li>
                        <li><a href="internship.php">Internship Circulars</a></li>
                        <li><a href="registration.php">Volunteer Enrollment</a></li>
                        <li><a href="contact.php">Grievance Desk</a></li>
                    </ul>
                </div>

                <!-- Column 4: Registered Contact Registry -->
                <div class="col-lg-4 col-md-6">
                    <h4 class="footer-heading">Official Contact Registry</h4>

                    <div class="footer-contact-item">
                        <div class="footer-contact-icon"><i class="fa fa-map-marker"></i></div>
                        <div class="footer-contact-text">
                            <strong>Registered Central Office</strong>
                            mohammad aslam khan, H NO 4-1-1116/12/A,<br> vazeer apartment 3rd floor bogulkunta king kothi road,<br> hyderabad telangana state 500001
                        </div>
                    </div>

                    <div class="footer-contact-item">
                        <div class="footer-contact-icon"><i class="fa fa-phone"></i></div>
                        <div class="footer-contact-text">
                            <strong>Citizen Support Registry</strong>
                            +91 90528 25410
                        </div>
                    </div>

                    <div class="footer-contact-item">
                        <div class="footer-contact-icon"><i class="fa fa-envelope"></i></div>
                        <div class="footer-contact-text">
                            <strong>Official Portal Nodal Email</strong>
                            aiconz.int.org@gmail.com
                        </div>
                    </div>
                </div>

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

    <!-- Bottom Compliance Bar -->
    <div class="footer-bottom">
        <div class="container">
            <div class="row align-items-center">
                <div class="copyright">
    © 2026 AICONZ INTERNATIONAL FOUNDATION. All Rights Reserved. |
    Designed by
    <a href="https://zdctechglobalsolutions.com/" target="_blank" rel="noopener noreferrer">
        ZDC Tech Global Solutions
    </a>
</div>
                <div class="col-md-5 text-md-right">
                    <div class="footer-bottom-links justify-content-md-end">
                        <a href="privacy-policy.php">Privacy Policy</a>
                        <a href="terms-of-use.php">Terms of Use</a>
                        <a href="refund-policy.php">Refund Policy</a>
                        <!--<a href="contact.php">Hyperlink Policy</a>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Scroll to Top Button -->
<button class="scroll-top-btn" id="scrollTopBtn" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
    <i class="fa fa-angle-up"></i>
</button>

<script>
    window.addEventListener('scroll', function () {
        var btn = document.getElementById('scrollTopBtn');
        if (window.scrollY > 400) { btn.style.display = 'flex'; }
        else { btn.style.display = 'none'; }
    });
</script>

<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
    integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
    crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/parallax.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/main.js"></script>

<!-- Select2 for searchable dropdowns -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        if ($('.searchable-select').length) {
            // Destroy niceSelect if it was applied globally by main.js
            $('.searchable-select').niceSelect('destroy');
            // Initialize Select2
            $('.searchable-select').select2({
                width: '100%'
            });
        }
    });
</script>
</body>

</html>