/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #footer {
        background-color: #1a1a1a;
        padding-block: clamp(1.75rem, 4.17vw, 2.75rem);
    }

    #footer .container {
        width: 100%;
        max-width: 34.375rem;
    }

    #footer .contact {
        margin: 0;
        padding: 0;
        width: auto;
        display: flex;
        flex-direction: column;
        align-self: stretch;
        gap: 0.75rem
    }
    
    #footer .contact-li {
        list-style: none;
        margin-bottom: 0rem;
    }
    #footer .contact-link {
        display: flex;
        align-items: center;
        gap: .75rem;
        text-decoration: none;
    }

    #footer .contact-li .icon-box {
        flex-shrink: 0;
        height: 5rem;
        width: 5rem;
        background-color: var(--secondary);
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        transition: background-color 0.2s ease;
    }

    #footer .contact-li .icon-box svg {
        fill: var(--bodyTextColorWhite);
        transform: translateY(0);
        transition: fill 0.2s ease, transform 0.2s ease;
    }

    #footer .contact-li:hover .icon-box {
        background-color: var(--bodyTextColorWhite);
    }
    #footer .contact-li:hover .icon-box svg {
        transform: translateY(-5%);
        fill: var(--headerColor);
    }

    #footer .copyright{
        border-top: 1px solid var(--bodyTextColorWhite);
        margin-top: clamp(1.75rem, 4.17vw, 2.75rem);
        padding-top: calc(clamp(1.75rem, 4.17vw, 2.75rem)*0.3);
    }
    #footer .copyright a {
        text-decoration: none;
        color: var(--secondary);
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #footer .container {
        max-width: 80rem;
    }
    #footer .copyright .text {
        max-width: none;
    }
}