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

.hero{

    position:relative;

    padding:170px 0 110px;

    background:linear-gradient(
        180deg,
        #F8F4EF 0%,
        #F5F1EB 100%
    );

    overflow:hidden;

}

.hero .container{

    display:grid;

    grid-template-columns:46% 54%;

    align-items:center;

    max-width:1280px;

    margin:auto;

    gap:40px;

}

/*======================================
            CONTEÚDO
======================================*/

.hero-content{

    max-width:560px;

    position:relative;

    z-index:10;

}

.hero-content h1{

    font-family:"Cormorant Garamond",serif;

    font-size:5rem;

    line-height:.98;

    font-weight:600;

    letter-spacing:-1px;

    color:var(--text);

    margin-bottom:30px;

}

.hero-content p{

    font-size:1.18rem;

    line-height:1.9;

    color:var(--text-light);

    max-width:470px;

    margin-bottom:42px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

/*======================================
            BOTÃO
======================================*/

.hero .btn{

    padding:18px 36px;

    border-radius:18px;

    font-size:1rem;

    font-weight:500;

    box-shadow:0 16px 35px rgba(184,138,74,.22);

}

/*======================================
            IMAGEM
======================================*/

.hero-image{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

}

/* brilho atrás */

.hero-image::before{

    content:"";

    position:absolute;

    width:720px;
    height:720px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(184,138,74,.14) 0%,
    rgba(184,138,74,.05) 45%,
    transparent 75%);

    right:-120px;
    top:50%;

    transform:translateY(-50%);

}

/* círculos */

.hero-shape{

    position:absolute;

    right:-180px;

    top:50%;

    transform:translateY(-50%);

    width:620px;
    height:620px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.45);

}

.hero-shape::before,
.hero-shape::after{

    content:"";

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.45);

}

.hero-shape::before{

    width:450px;
    height:450px;

    left:84px;
    top:84px;

}

.hero-shape::after{

    width:280px;
    height:280px;

    left:170px;
    top:170px;

}

/* imagem */

.hero-image img{

    position:relative;

    z-index:5;

    width:100%;

    max-width:760px;

    object-fit:contain;

}

/*======================================
            RESPONSIVO
======================================*/

@media(max-width:992px){

    .hero{

        padding:140px 0 90px;

    }

    .hero .container{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero-content{

        max-width:700px;

        margin:auto;

    }

    .hero-content h1{

        font-size:3.9rem;

    }

    .hero-content p{

        margin:25px auto 40px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-image{

        justify-content:center;

    }

    .hero-image img{

        max-width:520px;

    }

    .hero-shape{

        display:none;

    }

    .hero-image::before{

        width:520px;
        height:520px;

        right:auto;

    }

}

@media(max-width:768px){

    .hero{

        padding:120px 0 70px;

    }

    .hero-content h1{

        font-size:3rem;

    }

    .hero-content p{

        font-size:1rem;

    }

    .hero-image img{

        max-width:400px;

    }

}

@media(max-width:576px){

    .hero{

        padding:100px 0 60px;

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .hero-image img{

        max-width:320px;

    }

}