/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    background: var(--paper);
    color: var(--deep-green);

    padding-top: 90px;
}


/* =========================================================
   FOOTER TOP
   ========================================================= */

.footer-top {
    display: grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr
        1.2fr;

    gap: 50px;

    padding-bottom: 60px;
}


/* =========================================================
   FOOTER BRAND
   ========================================================= */

.footer-brand .brand {
    color: var(--deep-green);

    margin-bottom: 20px;
}

.footer-brand p {
    color: var(--deep-green);

    font-size: 14px;

    max-width: 280px;

    margin-bottom: 24px;
}


/* =========================================================
   SOCIAL
   ========================================================= */

.social-row {
    display: flex;

    gap: 12px;
}

.social-row a {
    width: 36px;
    height: 36px;

    border: 1px solid rgba(243, 239, 230, .25);

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}

.social-row a:hover {
    background: var(--yallow);

    border-color: var(--yallow);

    color: var(--deep-green);
}

.social-row svg {
    width: 15px;
    height: 15px;
}


/* =========================================================
   FOOTER COLUMNS
   ========================================================= */

.footer-col h4 {
    font-family: var(--font-mono);

    font-size: 11.5px;

    text-transform: uppercase;

    letter-spacing: .1em;

    color: var(--deep-green);

    margin-bottom: 22px;
}

.footer-col ul {
    display: flex;

    flex-direction: column;

    gap: 13px;
}

.footer-col a {
    font-size: 14px;

    color: var(--deep-green);

    transition:
        color .3s ease;
}

.footer-col a:hover {
    color: var(--yallow);
}


/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.footer-bottom {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 0;

    flex-wrap: wrap;

    gap: 12px;

    font-size: 12.5px;

    color: var(--deep-green);
}

.footer-bottom .legal-links {
    display: flex;

    gap: 22px;
}

.footer-bottom .legal-links a {
    color: var(--deep-green);

    text-decoration: none;
}

.footer-bottom .legal-links a:hover {
    color: var(--yallow);
}


/* =========================================================
   FOOTER TABLET
   ========================================================= */

@media (max-width: 1080px) {

    .footer-top {
        grid-template-columns: 1fr 1fr;

        gap: 40px 30px;
    }

}


/* =========================================================
   FOOTER MOBILE
   ========================================================= */

@media (max-width: 860px) {

    .site-footer {
        padding-top: 60px;
    }

    /* মোবাইল: Explore ও Quick Links পাশাপাশি,
       Brand উপরে এবং Get in Touch নিচে মাঝখানে */
    .footer-top {
        grid-template-columns: 1fr 1fr;

        gap: 36px 20px;

        padding-bottom: 40px;
    }

    .footer-brand,
    .footer-col:last-child {
        grid-column: 1 / -1;
    }

    .footer-col {
        min-width: 0;
    }

    .footer-col a {
        overflow-wrap: anywhere;
    }

    .footer-col:last-child {
        text-align: center;
    }

    .footer-col:last-child ul {
        align-items: center;
    }

    /* Brand (লোগো, বর্ণনা, সোশ্যাল আইকন) মোবাইলে সেন্টার */
    .footer-brand {
        text-align: center;
    }

    .footer-brand p {
        max-width: 320px;

        margin-left: auto;
        margin-right: auto;
    }

    .social-row {
        justify-content: center;

        flex-wrap: wrap;
    }

    /* Copyright ও legal links মোবাইলে সেন্টার */
    .footer-bottom {
        flex-direction: column;

        align-items: center;

        text-align: center;

        gap: 16px;
    }

    .footer-bottom .legal-links {
        justify-content: center;

        flex-wrap: wrap;

        gap: 12px 20px;
    }

}