/*=================================== SECTION HERO ==================================*/

#hero {
    background-image: url('../img/contact_BG.webp');
    background-size: cover;
    background-position: center;
}

.hero__container {
    flex-direction: column;
    gap: var(--size-xl);
    width: 100%;
    color: var(--color-white);
    padding: var(--size-7xl) var(--size-5xl);
}

@media (max-width: 768px) {
    .hero__container {
        padding: var(--size-7xl) var(--size-lg);
    }
}

/*=================================== SECTION CONTACT ==================================*/

.contact__container {
    flex-direction: column;
    gap: var(--size-xl);
}