/*=============================================
=                   Footer                    =
=============================================*/
.site-footer {
    background: linear-gradient(180deg, var(--neutral-very-dark-blue), var(--neutral-dark-color));
}

.footer-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    color: var(--neutral-pure-color);
}

.footer-container > p {
    width: 100%;
    margin: 0 auto;
    line-height: var(--line-height-md);
    padding: var(--spacing-md);
    border-top: 1px solid var(--neutral-pure-color);
    text-align: center;
    
}

.footer-columns {
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    gap: var(--spacing-md);
}

.about-khansia, .contact-khansia, .navigation {
    flex: 1 1 33.33%;
    display: flex;
    flex-direction: column;
}

.about-khansia {
    gap: var(--spacing-sm);
    /* justify-content: center; */
    align-items: center;
    text-align: center;
}

.footer-logo-images {
    width: 70%;
    height: auto;
    object-fit: contain;
}

.about-khansia > strong {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
}

.social-media-icons {
    display: flex;
    gap: var(--spacing-md);
    font-size: 2.8rem;
    justify-content: center;
    align-items: center;
}

.social-media-icons > a {
    color: var(--neutral-pure-color);
}

.social-media-icons > a:hover {
    color: var(--secondary-color);
    scale: 1.2; 
}

.contact-khansia {
    gap: var(--spacing-sm);
}

.contact-khansia > strong {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.contact-info-title {
    font-weight: var(--font-weight-bold);
}

.navigation {
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.navigation > strong {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
}

.navigation > a {
    display: inline;
    width: auto;
    color: var(--neutral-pure-color);
    text-decoration: none;
}

.navigation > a:hover {
    color: var(--secondary-color);
}

/*=============================================
=               Responsive Design             =
=============================================*/
@media (max-width: 992px) {
    .about-khansia{
        flex: 1 1 100%;
    }
    
    .contact-khansia, .navigation {
        flex: 1 1 50%;
    }
    .footer-container > p {
        width: 80%;
    }
}

@media (max-width: 768px) {
    .footer-columns {
        gap: var(--spacing-md);
    }
}

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

    .contact-khansia, .navigation {
        padding: 0 var(--spacing-md);
    }

    .navigation {
        gap: var(--spacing-sm);
    }
}