.hero {
    background: url(/img/hero-circles-bg.png) fixed center;
    background-color: var(--black-color);
    display: flex;
    align-items: center;
}

section.hero {
    padding: 60px 0;
    border-right: 4px solid;
    border-left: 4px solid;
    border-bottom: 4px solid;
    border-color: var(--black-color);
}

.hero-wrap {
    display: flex;
    flex-direction: column;
    ;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    z-index: 10;
}

.hero-character {
    height: 320px;
}

.hero-character-img:hover {
    transform: scale(1.02);
}

.h1-title:hover {
    transform: translate(0, -4px);
}

.hero-buttons-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.hero-second-buttons-group {
    display: flex;
    flex-direction: row;
    gap: 28px;
}

a.second-button-hero {
    border-bottom: 3px solid;
    font-weight: var(--title-weight);
}

a.second-button-hero:hover {
    color: var(--red-color);
}

.cta-button-contato {
    display: flex;
    gap: 10px;
}

svg.icon-whatsapp {
    fill: var(--white-color);
    width: 24px;
}

a.cta-button-hero {
    display: flex;
    cursor: pointer;
    gap: 10px;
    border: 6px solid var(--dark-purple-color);
    box-shadow: var(--small-box-shadow-light);
    padding: 14px 20px;
    font-size: var(--text-font-size);
    font-weight: var(--title-weight);
    color: var(--white-color);
    background: var(--light-purple-color);
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

a.cta-button-hero:hover {
    transform: var(--small-hover);
    box-shadow: var(--small-box-shadow-light-hover);
    background-color: var(--red-color);
}














/* ========== RESPONSIVO - TABLET 768+ ==========*/

@media screen and (min-width:768px) {
    .hero-character {
        height: 280px;
    }
}















/* ========== RESPONSIVO - LAPTOP 1024+ ==========*/

@media screen and (min-width:1024px) {
    .hero {
        height: 660px;
    }

    .hero-wrap {
        flex-direction: row;
        gap: 30px;
    }

    .hero-character {
        height: 500px;
    }

    .hero-text {
        min-width: 50%;
        align-items: flex-start;
        text-align: left;
    }

    .hero-buttons-wrap {
        align-items: flex-start;
    }
}














/* ========== RESPONSIVO - DESKTOP 1440+ ==========*/

@media screen and (min-width:1440px) {
    .hero {
        height: 720px;
    }
}