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

.cp-hero{

    padding:90px 0;

}

.cp-hero-content{

    max-width:640px;

}

.cp-hero-content h1{

    font-family:var(--cp-font-heading);

    font-size:4rem;

    font-weight:700;

    line-height:1.15;

    color:var(--cp-color-primary);

    margin-bottom:1.5rem;

}

.cp-hero-content p{

    font-size:1.20rem;

    line-height:1.8;

    color:var(--cp-text-secondary);

    margin-bottom:2rem;

}

/*=========================================================
BADGE
=========================================================*/

.cp-badge{

    display:inline-flex;

    align-items:center;

    gap:.6rem;

    padding:.60rem 1rem;

    margin-bottom:1.5rem;

    border-radius:999px;

    background:#FDECEC;

    color:var(--cp-color-primary);

    font-size:.95rem;

    font-weight:600;

}

/*=========================================================
OVERLINE
=========================================================*/

.cp-hero-overline{

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.30rem;

    color:var(--cp-color-primary);

    margin-bottom:1rem;

}

.cp-badge i{

    font-size:1rem;

}

.cp-hero-buttons{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

}

.cp-hero-image{

    display:flex;

    justify-content:center;

}

.cp-hero-image img{

    width:100%;

    max-width:650px;

    border-radius:24px;

    box-shadow:0 30px 60px rgba(0,0,0,.15);

    transition:transform .35s ease,
               box-shadow .35s ease;

}

.cp-hero-image img:hover{

    transform:scale(1.02);

    box-shadow:0 40px 80px rgba(0,0,0,.22);

}