/*==================================================
    PRODUCTS HERO SECTION
==================================================*/

.hero--products{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.hero--products .hero__bg{
    position:absolute;
    inset:0;
    z-index:-2;
}

.hero--products .hero__bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.05);
    transition:8s ease;
}

.hero--products:hover .hero__bg img{
    transform:scale(1.12);
}

.hero--products .hero__overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgb(18 24 32 / 94%) 10%, rgba(18, 24, 32, .55) 45%, rgb(18 24 32 / 35%) 100%);
    z-index:-1;
}

.hero--products .hero__content{
    /* max-width:720px; */
    color:#fff;
    padding:120px 0 80px;
}

.hero--products .badge-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 22px;
    margin-bottom:25px;
    border-radius:50px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    font-size:.95rem;
    font-weight:500;
}

.hero--products .badge-pill i{
    color:#C2A56D;
}

.hero--products .hero__title{
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 25px;
    color: #fff;
}

.hero--products .hero__title em{
    color:#C2A56D;
    font-style:normal;
}

.hero--products .hero__sub{
    max-width:620px;
    font-size:1.1rem;
    line-height:1.9;
    color:rgba(255,255,255,.85);
    margin-bottom:40px;
}

.hero--products .hero__cta{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    margin-bottom:60px;
}

/*==============================
HIGHLIGHTS
==============================*/

.hero-highlights{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:20px;
}

.highlight-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:14px 18px;
    text-align:center;
    border-radius:22px;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.15);
    transition:.35s ease;
}

.highlight-item:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,.14);
}

.highlight-item i{
    font-size:2rem;
    color:#C2A56D;
}

.highlight-item span{
    font-size:.95rem;
    color:#fff;
    font-weight:500;
}

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

@media (max-width:992px){

.hero--products{
    min-height:90vh;
}

.hero--products .hero__content{
    max-width:100%;
}

.hero--products .hero__title{
    font-size:3.4rem;
}

.hero-highlights{
    grid-template-columns:repeat(2,1fr);
}

}

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

@media (max-width:768px){

.hero--products{
    text-align:center;
    min-height:auto;
    padding:110px 0 70px;
}

.hero--products .hero__content{
    padding:0;
}

.hero--products .hero__title{
    font-size:2.6rem;
}

.hero--products .hero__sub{
    font-size:1rem;
    margin:0 auto 35px;
}

.hero--products .hero__cta{
    justify-content:center;
}

.hero-highlights{
    grid-template-columns:1fr;
    gap:15px;
}

.highlight-item{
    flex-direction:row;
    justify-content:flex-start;
    text-align:left;
    padding:18px 20px;
}

.highlight-item i{
    font-size:1.6rem;
}

}

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

@media (max-width:480px){

.hero--products .hero__title{
    font-size:2rem;
}

.hero--products .badge-pill{
    font-size:.82rem;
    padding:10px 18px;
}

.hero--products .hero__sub{
    font-size:.95rem;
}

.highlight-item{
    padding:16px;
}

}


@media (max-width: 768px){

    .hero--products{
        min-height: auto;
        padding: 120px 0 70px;
    }

    .hero--products .hero__bg img{
              height:62%;
        object-fit: cover;
        object-position: -3% center;
    }

    .hero--products .hero__content{
        padding: 0 20px;
        text-align: center;
    }

    .hero--products .hero__title{
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .hero--products .hero__sub{
        font-size: .95rem;
    }

    .hero--products .hero__cta{
        flex-direction: column;
        gap: 15px;
    }

    .hero-highlights{
        grid-template-columns: repeat(2,1fr);
        gap: 12px;
        margin-top: 30px;
    }
}