footer {

    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    
    background-color: var(--color-text-3);
    
    scroll-margin-top: var(--menu-height);
}

.footer-container {

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xl);

    min-height: calc(var(--section-min-height) - var(--footer-end-min-height));

}   

.footer-logo-wrapper {

    width: 80%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);

}

.footer-image {

    width: calc(2 * var(--font-size-xl));
    fill: var(--color-text);

}

.footer-button-1  {

    background-color: var(--color-secondary);
    color: var(--color-text);

}

.footer-buttons-wrap {

    width: 80%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);

}

.footer-button-2 {
    
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center; 
    gap: var(--space-md);
    
    
    background-color: var(--color-text-3);
    padding: var(--space-sm) var(--space-md);
    border: solid var(--border-md) var(--color-secondary);
    border-radius: var(--radius-md);

    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-lg);
    color: var(--color-secondary);

    cursor: pointer;

}

.footer-icon {

    font-size: var(--font-size-md);
    color: var(--color-secondary);
    
}

.footer-button-map {
    
    width: 80%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    gap: var(--space-md);

    background-color: var(--color-text-3);
    padding: var(--space-sm) var(--space-md);
    border: solid var(--border-md) var(--color-secondary);
    border-radius: var(--radius-md);

    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-lg);
    color: var(--color-secondary);

    overflow: hidden;

    cursor: pointer;

}

.footer-map-title {
    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm); 

    font-family: var(--font-family);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-lg);
    color: var(--color-secondary);

}

.footer-map {

    width: 100%;
    height: 160px;

    display: block;

    border: none;
    border-radius: var(--radius-md);

}

.footer-end-wrapper {

    width: 100%;
    background-color: var(--color-text-3);

}

.footer-end {

    width: 100%;
    min-height: var(--footer-end-min-height);
    
    text-align: center;

    padding: var(--space-sm);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-text);
    
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-md);
    color: var(--color-bg-2);

}


/*=====[MEDIA QUERY]=====*/
@media (min-width: 1024px) {

    .footer-container {

        flex-direction: row;

    } 

    .footer-logo-wrapper {

        width: auto;

    }

    .footer-button-map,
    .footer-buttons-wrap {

        width: 30%;

    }

    .footer-buttons-wrap {

        align-items: start;

    }

    .footer-button-2 {

        width: 100%;

    }
}