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

.cl-hero{

    background:transparent;

    padding:35px 0 35px;

}

.cl-hero-grid{

    display:grid;

    grid-template-columns:58% 42%;

    grid-template-areas:
        "left right"
        "bottom right";

    align-items:center;

    gap:40px;

}

.cl-hero-left{

    grid-area:left;

}

.cl-hero-right{

    grid-area:right;

    display:flex;

    justify-content:center;

    align-items:center;

}

.cl-hero-bottom{

    grid-area:bottom;

}

.cl-hero-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    background:#ffe4ed;

    color:#ff3b63;

    border-radius:999px;

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;

}

.cl-hero-title{

    font-size:66px;

    font-weight:800;

    line-height:1.05;

    color:#E53935;

    margin:0;

}

.cl-hero-subtitle{

    font-size:36px;

    font-weight:700;

    line-height:1.3;

    color:#F0625D;

    margin:12px 0 26px;

}

.cl-hero-desc{

    max-width:700px;

    font-size:20px;

    line-height:1.8;

    color:#5f6675;

    margin-bottom:34px;

}

.cl-hero-price{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:34px;

}

.cl-old-price{

    font-size:28px;

    color:#9ca3af;

    text-decoration:line-through;

}

.cl-new-price{

    font-size:52px;

    color:#ff3b63;

    font-weight:800;

}

.cl-save-badge{

    background:#dcfce7;

    color:#15803d;

    padding:8px 14px;

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}

.cl-hero-buttons{

    display:flex;

    gap:16px;

    margin-bottom:34px;

}

.cl-hero-buttons .cl-btn{

    min-width:220px;

}

.cl-hero-tags{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.cl-hero-tags span{

    display:flex;

    align-items:center;

    padding:12px 18px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:999px;

    font-weight:600;

}

.cl-hero-image{

    width:100%;

    max-width:620px;

    border-radius:28px;

    overflow:hidden;

    background:#fff;

    padding:12px;

    box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.cl-hero-image img{

    width:100%;

    display:block;

    border-radius:20px;

}

/*==============================
TABLET
==============================*/

@media(max-width:991px){

    .cl-hero-grid{

        grid-template-columns:1fr;

        grid-template-areas:

        "left"

        "right"

        "bottom";

    }

    .cl-hero-left,

    .cl-hero-bottom{

        text-align:center;

    }

    .cl-hero-price,

    .cl-hero-buttons,

    .cl-hero-tags{

        justify-content:center;

    }

    .cl-hero-title{

        font-size:42px;

    }

    .cl-hero-subtitle{

    font-size:28px;

}

}

/*==============================
MOBILE
==============================*/

@media(max-width:767px){

    .cl-hero{

    padding:15px 0 15px;

}

    .cl-hero-image{

        max-width:420px;

        margin:auto;

    }

    .cl-hero-desc{

        font-size:17px;

    }

    .cl-hero-price{

        flex-wrap:wrap;

    }

    .cl-hero-buttons{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:12px;

    }

    .cl-hero-buttons .cl-btn{

        min-width:0;

        width:100%;

        padding:0 10px;

    }

    .cl-hero-tags{

        gap:10px;

    }

    .cl-hero-tags span{

        flex:1 1 calc(50% - 10px);

        justify-content:center;

    }

}

@media(max-width:480px){

    .cl-hero-title{

        font-size:34px;

    }

    .cl-hero-subtitle{

    font-size:22px;

}

    .cl-new-price{

        font-size:38px;

    }

}