.vector-cloud-footer {
    background-color: var(--primary-200);
    margin-top: auto;
}

.vector-cloud-footer .footer-panel {
    display: flex;
    flex-direction: column;
    padding: var(--space-10) var(--space-8) var(--space-4);
    width: 100%;
}

.vector-cloud-footer .social-title {
    color: var(--secondary-200);
    display: flex;
    justify-content: center;
    width: 100%;
}

.vector-cloud-footer .social-media {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-top: var(--space-4);
    width: 100%;
}

.vector-cloud-footer .social-media a {
    align-items: center;
    background-color: transparent;
    border: var(--border-width-thin) solid var(--secondary-200);
    border-radius: var(--radius-md);
    display: flex;
    height: 2.5rem;
    justify-content: center;
    margin: 0 var(--space-4);
    text-decoration: none;
    transition: var(--transition-interactive);
    width: 2.5rem;
}

.vector-cloud-footer .social-media i {
    color: var(--secondary-200);
    fill: currentColor;
    font-size: 1.05rem;
    height: 1.05rem;
    transition: color var(--transition-normal);
    width: 1.05rem;
}

.vector-cloud-footer .social-media a:hover {
    border-color: var(--bg-100);
    transform: translateY(var(--space-1));
}

.vector-cloud-footer .social-media a:hover i {
    color: var(--bg-100);
}

.vector-cloud-footer .terms-cond {
    color: var(--bg-100);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: var(--space-12);
}

.vector-cloud-footer .terms-cond span {
    display: flex;
    justify-content: center;
    text-align: center;
    width: 25rem;
}

.vector-cloud-footer .terms-cond a {
    color: var(--bg-100);
    text-decoration: none;
    transition: color var(--transition-normal);
}

.vector-cloud-footer .terms-cond a:hover {
    color: var(--secondary-200);
}

@media (max-width: 720px) {
    .vector-cloud-footer .footer-panel {
        padding-inline: var(--space-4);
    }

    .vector-cloud-footer .social-media a {
        height: 2.2rem;
        margin: 0 var(--space-2);
        width: 2.2rem;
    }

    .vector-cloud-footer .social-media i {
        font-size: 1.2rem;
    }

    .vector-cloud-footer .terms-cond {
        align-items: center;
        flex-direction: column;
        row-gap: var(--space-4);
        text-align: center;
    }

    .vector-cloud-footer .terms-cond span {
        max-width: 100%;
        width: auto;
    }
}