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

.products-section{

    position:relative;

    padding:120px 0;

    background:
    linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F8FAFC 100%
    );

    overflow:hidden;

}

/*=========================================================
                    BACKGROUND GLOW
=========================================================*/

.products-section::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(29,78,216,.08),
    transparent 70%);

    top:-220px;

    left:-220px;

    pointer-events:none;

}

.products-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(0,194,255,.10),
    transparent 70%);

    right:-180px;

    bottom:-180px;

    pointer-events:none;

}

/*=========================================================
                    CONTAINER
=========================================================*/

.products-section .container{

    position:relative;

    z-index:2;

}

/*=========================================================
                    HEADER
=========================================================*/

.products-header{

    text-align:center;

    max-width:760px;

    margin:0 auto 80px;

}

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

.products-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(29,78,216,.08);

    color:#1D4ED8;

    font-size:.95rem;

    font-weight:700;

    margin-bottom:22px;

}

.products-badge i{

    color:#00C2FF;

}

/*=========================================================
                    TITLE
=========================================================*/

.products-title{

    font-size:3rem;

    font-weight:800;

    color:#0B132B;

    line-height:1.2;

    margin-bottom:18px;

}

.products-title span{
    background: linear-gradient(
        90deg,
        #1D4ED8,
        #00C2FF
    );

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

    /* WebKit */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/*=========================================================
                    DESCRIPTION
=========================================================*/

.products-description{

    max-width:700px;

    margin:auto;

    font-size:1.05rem;

    line-height:1.8;

    color:#64748B;

}


/*=========================================================
                    PRODUCTS GRID
=========================================================*/

.products-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

/*=========================================================
                    PRODUCT CARD
=========================================================*/

.product-card{

    position:relative;

    display:flex;

    flex-direction:column;

    background:#FFFFFF;

    border:1px solid rgba(226,232,240,.9);

    border-radius:28px;

    overflow:hidden;

    transition:all .45s ease;

    box-shadow:
        0 18px 45px rgba(15,23,42,.06);

}

.product-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        #1D4ED8,
        #00C2FF
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.product-card:hover::before{

    transform:scaleX(1);

}

.product-card:hover{

    transform:translateY(-12px);

    border-color:#00C2FF;

    box-shadow:
        0 35px 70px rgba(29,78,216,.18);

}

/*=========================================================
                    IMAGE AREA
=========================================================*/

.product-image{

    height:260px;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:25px;

    background:#F8FAFC;

    overflow:hidden;

}

.product-image img{

    max-width:100%;

    max-height:200px;

    object-fit:contain;

    display:block;

    transition:.5s;

}

.product-card:hover .product-image img{

    transform:scale(1.08);

}

.product-image::before{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(0,194,255,.15),

    transparent 70%);

}

.product-image img{

    position:relative;

    width:78%;

    transition:.5s ease;

    z-index:2;

}

.product-card:hover .product-image img{

    transform:

        scale(1.08)

        rotate(-2deg);

}

/*=========================================================
                    CONTENT
=========================================================*/

.product-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:30px;

}

.product-content h3{

    font-size:1.45rem;

    font-weight:700;

    color:#0B132B;

    margin-bottom:15px;

    transition:.3s;

}

.product-card:hover h3{

    color:#1D4ED8;

}

.product-content p{

    color:#64748B;

    line-height:1.8;

    margin-bottom:30px;

}

/*=========================================================
                    PRODUCT BUTTON
=========================================================*/

.product-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:auto;

    font-size:1rem;

    font-weight:700;

    color:#1D4ED8;

    text-decoration:none;

    transition:.35s ease;

}

.product-btn i{

    transition:.35s ease;

}

.product-card:hover .product-btn{

    color:#00C2FF;

}

.product-card:hover .product-btn i{

    transform:translateX(8px);

}

/*=========================================================
                    CARD GLOW
=========================================================*/

.product-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(0,194,255,.15),

    transparent 70%);

    right:-90px;

    bottom:-90px;

    opacity:0;

    transition:.5s;

}

.product-card:hover::after{

    opacity:1;

}

/*=========================================================
                    VIEW ALL BUTTON
=========================================================*/

.products-button{

    margin-top:70px;

    text-align:center;

}

.products-button .btn-primary-custom{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 36px;

    border-radius:50px;

}

.products-button i{

    transition:.35s ease;

}

.products-button .btn-primary-custom:hover i{

    transform:translateX(8px);

}

/*=========================================================
                    RESPONSIVE
=========================================================*/

@media(max-width:1200px){

    .products-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:768px){

    .products-section{

        padding:90px 0;

    }

    .products-title{

        font-size:2.2rem;

    }

    .products-grid{

        grid-template-columns:1fr;

    }

    .product-image{

        height:230px;

    }

    .product-content{

        padding:25px;

    }

}

@media(max-width:576px){

    .products-title{

        font-size:1.8rem;

    }

    .products-description{

        font-size:1rem;

    }

    .product-image{

        height:210px;

    }

    .product-content h3{

        font-size:1.25rem;

    }

}