/* ==========================================================
   ZENTIOHUB
   FOOTER.CSS
   Version: 1.1
   Reconciled with index.html
   ========================================================== */


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

.footer {

    background: #111827;

    color: rgba(255,255,255,.88);

    padding-block: var(--space-8);

}


/* ==========================================================
   CONTAINER
========================================================== */

.footer .container {

    display: flex;

    flex-direction: column;

    gap: var(--space-6);

}


/* ==========================================================
   GRID
========================================================== */

.footer__grid {

    display: grid;

    grid-template-columns: 2fr 1fr 2fr;

    gap: var(--space-7);

    align-items: start;

}


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

.footer__logo {

    font-size: var(--font-size-xl);

    font-weight: var(--font-weight-bold);

    color: #ffffff;

    margin-bottom: var(--space-3);

}


/* ==========================================================
   TEXT
========================================================== */

.footer__grid p {

    color: rgba(255,255,255,.75);

    line-height: 1.7;

    margin: 0;

}


/* ==========================================================
   HEADINGS
========================================================== */

.footer__grid h4 {

    color: #ffffff;

    margin-bottom: var(--space-3);

}


/* ==========================================================
   NAVIGATION
========================================================== */

.footer__grid ul {

    display: flex;

    flex-direction: column;

    gap: var(--space-3);

    margin: 0;

    padding: 0;

}

.footer__grid li {

    margin: 0;

}

.footer__grid a {

    color: rgba(255,255,255,.75);

    transition: color var(--transition-fast);

}

.footer__grid a:hover {

    color: #ffffff;

}


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

.footer__bottom {

    padding-top: var(--space-5);

    border-top: 1px solid rgba(255,255,255,.10);

}

.footer__bottom p {

    color: rgba(255,255,255,.65);

    font-size: var(--font-size-sm);

    margin: 0;

}


/* ==========================================================
   BACK TO TOP
========================================================== */

.footer__top {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    margin-left: auto;

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

    border-radius: 50%;

    color: #ffffff;

    font-size: 1.25rem;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);

}

.footer__top:hover {

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

    border-color: rgba(255,255,255,.40);

    transform: translateY(-2px);

}


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

@media (max-width: 768px) {

    .footer__grid {

        grid-template-columns: 1fr;

        gap: var(--space-6);

        text-align: center;

    }

    .footer__top {

        margin-inline: auto;

    }

}