/*----------------------------------------------------------
FOOTER
----------------------------------------------------------*/
footer {
    background-image: linear-gradient(to bottom, #02567a, #046e9a);
    padding: 0.5rem var(--padding-general-left);
    font-size: 20px;
    color: var(--color-3);
}

@media screen and (max-width: 1400px) {
    footer {
        padding: 0.5rem;
    }
}

footer .top-div {
    display: flex;
    justify-content: space-between;
}

footer .top-div a {
    margin-right: 1.5rem;
}

footer .top-div .left-side {
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 600px) {
    footer .top-div .left-side {
        flex-direction: column;
    }
}

footer a {
    display: inline-block;
    text-decoration: none;
    color: var(--color-3);
    transition: all 1s;
}

footer a:hover {
    transform: scale(1.1);
    color: var(--color-3);
}

/*----------------------------------------------------------
------------------------------------------------------------
------------------------------------------------------------
MEDIA QUERIES
------------------------------------------------------------
------------------------------------------------------------
----------------------------------------------------------*/
@media screen and (max-width: 820px) {
    footer {
        padding: 1rem;
    }
    
    footer .top-div {
        flex-direction: column;
    }

    footer .top-div .left-side > a {
        display: block;
        margin: 0.25rem auto;
    }

    footer .social-media {
        margin: 0.25rem auto;
        font-size: 20px;
    }

    footer hr {
        margin: 0.5rem auto;
    }
}