.footer-bg {
    margin: 0 auto;
    max-width: 1212px;
}

.box-footer {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    width: 100%;
    margin: 12px auto;
    border-radius: 8px;
    height: auto;
    background-color: var(--proc);
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 12px 0px;
    gap: 32px;
    width: 90%;
    justify-content: space-between;
}


.footer-logo {
    display: flex;
    flex: 1;
    padding: 12px;
    margin: 0 12px;
    width: 200px;
    /* background-color: blueviolet; */
}

.footer-logo img {
    width: 100%;
}

.footer-nav {
    display: flex;
    flex: 6;
    justify-self: flex-end;
    margin: 0px auto;
    padding: 12px 0px;
    box-sizing: border-box;
    gap: 12px;
    width: 80%;
    max-height: 300px;
}

.footer-menu {
    margin: 0 auto;
    column-count: 2;
    text-align: left;
    padding: 0px;
    width: 100%;
    gap: 12px;
}

.footer-menu a {
    display: flex;
    padding: 12px 0px;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
}

.footer-menu a:hover {
    color: #013095;
}

.footer-copy {
    display: flex;
    margin: 8px 0px 24px 0px;
    width: 100%;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
    color: var(--procB);
    justify-content: space-around;
}


/* ----------------- MEDIA --------------------- */

@media(max-width:1234px) {
    .footer-bg {
        padding: 0px 12px;
    }
}

@media(max-width:870px) {
    .footer-menu a {
        padding: 8px 0px;
    }
}


@media(max-width:780px) {
    .footer-content {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .footer-logo {
        width: 150px;
    }

    .footer-nav {
        justify-self: center;
        padding: 12px;
        width: 100%;
    }

    .footer-menu {
        gap: 0px;
    }

}

@media(max-width:535px) {
    .footer-content {
        gap: 0px;
    }

    .footer-logo {
        width: 100px;
    }

    .footer-nav {
        justify-self: center;
        padding: 12px;
        width: 100%;
        max-height: 1000px;
    }

    .footer-menu {
        margin: 0 auto;
        column-count: 1;
    }
    
    .footer-menu a {
        text-align: center;
        margin: 0 auto;
        padding: 8px 0px;
        font-size: 0.8rem;
    }

}