#footer .white-space {
    width: 100%;
}

.footer {
    background-color: var(--color-footer);
    width: 100%;
    padding: var(--gap-4);
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    color: var(--color-footer-t);
    margin: auto;
    max-width: 1070px;
    position: relative;
}

.footer img.bgimg {
    opacity: 1;
}

.footer div.img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.footer .left {
    display: flex;
    width: 70%;
    align-items: flex-start;
    justify-content: flex-start;
    padding-right: var(--gap);
    gap: var(--gap);
    z-index: 1;
}

.footer .left .col {
    width: 33.3%;
}

.footer .left .col .title {
    font-size: 1.5rem;
    font-weight: var(--font-title-bold);
    margin-bottom: var(--gap);
}

.footer .left .col .text p {
    font-size: var(--font-p);
    margin-bottom: var(--gap);
    color: var(--color-footer-t);
}

.footer .left .col ul {
    list-style: none;
}

.footer .left .col ul li a {
    display: inline-block;
    list-style: none;
    font-size: var(--font-p);
    margin: 3px 0;
    color: var(--color-footer-t);

}

.footer .left .col ul li a:hover {
    text-decoration: underline;
}

.footer .right {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    z-index: 1;
}

.footer .right .logof {
    width: 100%;
    max-width: 300px;
}

.footer .right .social {
    margin-top: var(--gap);
}

.footer .right .social a {
    padding-left: var(--gap-xs);
}

.footer .right .social svg {
    transition: all 100ms ease-in-out;
}

.footer .right .social svg:hover {
    transform: rotate(45deg);
}

.footer .credits a,
.footer .credits p {
    color: #FFF;
}

.footer .credits a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .footer {
        flex-direction: column;
    }

    .footer .left,
    .footer .right {
        width: 100%;
        padding: var(--gap);
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer .left {
        width: 100%;
        padding: var(--gap);
        padding-bottom: var(--gap-5);
    }

    .footer .left .col {
        width: auto;
    }
}