#hero {
    background: var(--ls-bg) no-repeat center;
    background-size: cover;
    min-height: 25vw;
    padding-block: 2rem;

    .container {
        max-width: 55%;
        text-align: center;
        color: var(--fore-color, var(--main-color));
    }
}

#contact-us-form {
    background: var(--ls-bg) no-repeat center;
    background-size: cover;
    padding-block: 2rem;

    .container {
        color: var(--fore-color, var(--main-color));
    }
}

#socials-container {
    .nav-link {
        font-size: 1.4em;
        width: 2em;
        aspect-ratio: 1/1;
        color: var(--main-color);
        box-shadow: var(--bs-box-shadow-sm);
        border: thin solid var(--main-color);
        transition: 300ms;
        border-radius: .3em;
        text-align: center;
        align-content: center;
        background: #ffffff;

        &:hover {
            background: var(--main-color);
            color: var(--bs-warning);
            box-shadow: var(--bs-box-shadow);
            border-color: var(--bs-warning);
        }
    }
}
.section-title{
    font-weight: bolder;
    font-size: 1.2em;
}

@media (orientation: portrait) {
    #hero {
        background: var(--pt-bg) no-repeat center;
        min-height: 75vw;
        background-size: cover;
    }
    #contact-us-form {
        background: var(--pt-bg) no-repeat center;
        background-size: cover;
    }
}

@media (max-width: 576px) {
    #hero {
        .container {
            max-width: unset;
        }
    }
}