/*assets/css/styles_header.css*/

.hero{
    padding:155px 0 95px;

    background:#F6F3EE;
}
.hero{
    padding:135px 0 95px;
}

.hero-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;

    gap:70px;
}

.hero-content{
    padding-left:10px;
}

.eyebrow{
    display:inline-flex;

    margin-bottom:18px;

    padding:8px 14px;

    border-radius:999px;

    background:#EAE6DF;
    color:#2F5D50;

    font-size:13px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.8px;
}

.hero h1{
    color:#2F5D50;

    font-size:clamp(46px, 6vw, 82px);
    line-height:.94;

    letter-spacing:-3px;

    margin-bottom:24px;
}

.hero p{
    max-width:520px;

    color:rgba(47,93,80,.74);

    font-size:20px;
    line-height:1.6;

    margin-bottom:28px;
}

.hero-actions{
    display:flex;
    align-items:center;

    gap:14px;

    margin-top:8px;
}

.hero-image{
    position:relative;

    padding:18px;

    background:#8FAF9F;

    border-radius:34px;
}

.hero-image img{
    width:100%;
    height:520px;

    object-fit:contain;
    object-position:center;

    background:#EAE6DF;

    border-radius:24px;

    box-shadow:0 18px 45px rgba(47,93,80,.18);
}

@media(max-width:900px){

    .hero{
        padding:125px 0 70px;
    }

    .hero-grid{
        grid-template-columns:1fr;

        gap:36px;
    }

    .hero-content{
        padding-left:0;
    }

    .hero-image img{
        height:380px;
    }

}

@media(max-width:520px){

    .hero h1{
        letter-spacing:-1.5px;
    }

    .hero p{
        font-size:18px;
    }

    .hero-image{
        padding:10px;

        border-radius:24px;
    }

    .hero-image img{
        height:260px;

        border-radius:18px;
    }

}