section.banner h1 {
    font-size: 2.3rem;
    color: #fff;
    margin: 0;
    max-width: 500px;
}

section.banner {
    background: #020c16;
    padding: 50px 0;
    background-image: url(../images/geo-para-empresas.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    margin-top: -10px;
}

.banner p {
    color: #fff;
    margin: 0;
    max-width: 450px;
    line-height: 30px;
    text-align: justify;
}

.banner h1 span {
    color: var(--secondary);
    display: block;
}

.banner-button a {
    border: solid 1px var(--secondary);
    padding: 10px 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    align-content: center;
    gap: 0.5rem;
}

section.banner .banner-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 700px;
}

.banner-button .btn-1 {
    background: var(--secondary);
    transition: ease-in-out 0.4s;
}

.banner-button .btn-1:hover {
    background: none;
    transition: ease-in-out 0.4s;
    color: #fff;
}

.banner-button .btn-2 {
    color: #fff;
    transition: ease-in-out 0.4s;
}

.banner-button .btn-2:hover {
    background: none;
    transition: ease-in-out 0.4s;
    background: var(--secondary);
    color: #000;
}

.banner-button {
    display: flex;
    gap: 2rem;
}

.banner-selos {
    display: flex;
    align-content: center;
    align-items: center;
    gap: 0.6rem;
}

.banner-selo {
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: row;
    gap: 0.5rem;
    color: #fff;
}

.banner-button .btn-1:hover svg path {
    fill: #fff;
    transition: ease-in-out 0.4s;
}

.banner-button .btn-2:hover svg path {
    fill: #000;
    transition: ease-in-out 0.4s;
}

@media screen and (max-width: 772px) {
    .banner-selos {
        align-items: flex-start;
        flex-direction: column;
    }
}