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

.products-hero{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:120px 0 80px;

    background:linear-gradient(

        135deg,

        #081120 0%,

        #0B132B 30%,

        #123A8D 70%,

        #1D4ED8 100%

    );

    background-size:300% 300%;

    animation:heroGradient 15s ease infinite;

}

.products-hero::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    top:-250px;

    right:-250px;

    border-radius:50%;

    background:rgba(0,194,255,.12);

    filter:blur(90px);

    animation:floatBlob 12s ease-in-out infinite;

}

.products-hero::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-180px;

    bottom:-180px;

    border-radius:50%;

    background:rgba(56,189,248,.08);

    filter:blur(80px);

    animation:floatBlobReverse 14s ease-in-out infinite;

}

.products-wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.products-content{

    color:#ffffff;

}

.products-title{

    font-size:clamp(3rem,6vw,4.8rem);

    font-weight:800;

    line-height:1.15;

    margin:30px 0;

    color:#ffffff;

}

.products-title span{

    background:linear-gradient(

        90deg,

        #00C2FF,

        #38BDF8

    );

    /* Standard */
    background-clip: text;
    color: transparent;

    /* Chrome, Edge, Safari */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.products-description{

    max-width:620px;

    color:#CBD5E1;

    font-size:1.1rem;

    line-height:1.9;

    margin-bottom:40px;

}

.products-image{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.products-image img{

    width:100%;

    max-width:620px;

    animation:floatImage 6s ease-in-out infinite;

    filter:drop-shadow(

        0 40px 60px rgba(0,0,0,.35)

    );

}

.hero-features{

    display:flex;

    gap:30px;

    margin-top:45px;

    flex-wrap:wrap;

}

.hero-features div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#E2E8F0;

    font-weight:600;

}

.hero-features i{

    color:#00C2FF;

}

@keyframes heroGradient{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

@keyframes floatBlob{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(40px);

    }

}

@keyframes floatBlobReverse{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-40px);

    }

}

@keyframes floatImage{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

@media(max-width:991px){

    .products-wrapper{

        grid-template-columns:1fr;

        text-align:center;

    }

    .products-description{

        margin-inline:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        justify-content:center;

    }

    .products-image{

        margin-top:50px;

    }

}

@media(max-width:768px){

    .products-hero{

        padding:100px 0 60px;

    }

    .products-title{

        font-size:2.6rem;

    }

    .products-description{

        font-size:1rem;

    }

}