<footer class="footer-dispusip">

    <div class="container">

        <div class="row align-items-start">

            <!-- ============================= -->
            <!-- KOLOM KIRI -->
            <!-- ============================= -->

            <div class="col-lg-5 col-md-6 mb-4">

                <!-- LOGO -->

                <div class="footer-logo">

                    <img
                        src="/website-dispussip/assets/img/logo%20dispussip.png"
                        alt="Logo DISPUSIP Banyuwangi">

                </div>


                <!-- DESKRIPSI -->

                <p class="footer-description">

                    Website Dinas Perpustakaan
                    dan Kearsipan Kabupaten Banyuwangi.

                </p>


                <!-- SOSIAL MEDIA -->

                <div class="footer-social">

                    <a href="https://www.facebook.com/dispusipbwi/" aria-label="Facebook">
                        <i class="bi bi-facebook"></i>
                    </a>

                    <a href="https://www.instagram.com/dispusipbanyuwangi/" aria-label="Instagram">
                        <i class="bi bi-instagram"></i>
                    </a>

                    <a href="https://www.tiktok.com/@dispusipbwi/" target="_blank" aria-label="TikTok">
                        <i class="bi bi-tiktok"></i>
                    </a>

                    <a href="https://www.youtube.com/@DispusipBanyuwangi" target="_blank" aria-label="Youtube">
                        <i class="bi bi-youtube"></i>
                    </a>

                </div>

            </div>


            <!-- ============================= -->
            <!-- KOLOM KANAN -->
            <!-- ============================= -->

            <div class="col-lg-7 col-md-6 mb-4">

                <h3 class="footer-title">

                    Hubungi Kami

                </h3>


                <!-- ALAMAT -->

                <div class="footer-contact">

                    <div class="contact-item">

                        <i class="bi bi-geo-alt-fill"></i>

                        <span>

                            Jl. Jaksa Agung Suprapto Nomor 43,
                            Penganjuran, Kabupaten Banyuwangi,
                            Jawa Timur 68416

                        </span>

                    </div>


                    <!-- TELEPON -->

                    <div class="contact-item">

                        <i class="bi bi-telephone-fill"></i>

                        <span>

                            (0333) 421197

                        </span>

                    </div>


                    <!-- EMAIL -->

                    <div class="contact-item">

                        <i class="bi bi-envelope-fill"></i>

                        <span>

                            perpusda@banyuwangikab.go.id

                        </span>

                    </div>


                    <!-- INFORMASI -->

                    <div class="contact-item">

                        <i class="bi bi-book-fill"></i>

                        <span>

                            Dinas Perpustakaan dan Kearsipan
                            Kabupaten Banyuwangi

                        </span>

                    </div>

                </div>

            </div>

        </div>


        <!-- ============================= -->
        <!-- GARIS -->
        <!-- ============================= -->

        <div class="footer-line"></div>


        <!-- ============================= -->
        <!-- COPYRIGHT -->
        <!-- ============================= -->

        <div class="footer-bottom">

            <p>

                © <?= date('Y'); ?>

                Dinas Perpustakaan dan Kearsipan
                Kabupaten Banyuwangi

            </p>

        </div>

    </div>

</footer>


<!-- BOOTSTRAP ICONS -->

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">


<style>
    /* ================================= */
    /* FOOTER UTAMA */
    /* ================================= */

    .footer-dispusip {

        margin-top: 0;

        padding: 45px 0 20px;

        background:
            linear-gradient(135deg,
                #07357e,
                #60a5fa);

        color: white;

    }


    /* ================================= */
    /* LOGO */
    /* ================================= */

    .footer-logo img {

        width: 220px;

        max-width: 100%;

        height: auto;

        object-fit: contain;

        margin-bottom: 15px;

    }


    /* ================================= */
    /* DESKRIPSI */
    /* ================================= */

    .footer-description {

        max-width: 380px;

        font-size: 15px;

        line-height: 1.6;

        margin-bottom: 20px;

    }


    /* ================================= */
    /* SOSIAL MEDIA */
    /* ================================= */

    .footer-social {

        display: flex;

        gap: 10px;

    }


    .footer-social a {

        width: 38px;

        height: 38px;

        border: 1px solid rgba(255, 255, 255, .7);

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        color: white;

        text-decoration: none;

        font-size: 17px;

        transition: .3s;

    }


    .footer-social a:hover {

        background: white;

        color: #07357e;

    }


    /* ================================= */
    /* JUDUL */
    /* ================================= */

    .footer-title {

        font-size: 24px;

        font-weight: 700;

        margin-bottom: 20px;

    }


    /* ================================= */
    /* KONTAK */
    /* ================================= */

    .footer-contact {

        display: flex;

        flex-direction: column;

        gap: 12px;

    }


    .contact-item {

        display: flex;

        align-items: flex-start;

        gap: 12px;

        font-size: 15px;

        line-height: 1.5;

    }


    .contact-item i {

        font-size: 18px;

        min-width: 22px;

    }


    /* ================================= */
    /* GARIS */
    /* ================================= */

    .footer-line {

        width: 100%;

        height: 1px;

        background: rgba(255, 255, 255, .4);

        margin-top: 20px;

        margin-bottom: 15px;

    }


    /* ================================= */
    /* COPYRIGHT */
    /* ================================= */

    .footer-bottom {

        text-align: center;

    }


    .footer-bottom p {

        margin: 0;

        font-size: 14px;

    }


    /* ================================= */
    /* RESPONSIVE */
    /* ================================= */

    @media(max-width:768px) {

        .footer-dispusip {

            padding: 35px 20px 15px;

        }


        .footer-title {

            margin-top: 25px;

            font-size: 22px;

        }


    }