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

.products-section{

    position: relative;

    padding: 120px 0;

    background: #F8FAFC;

    overflow: hidden;

}

.products-section .container{

    position: relative;

    z-index: 2;

}

.section-header{

    max-width: 760px;

    margin: 0 auto 80px;

    text-align: center;

}

.section-tag{

    display: inline-block;

    padding: 10px 24px;

    border-radius: 50px;

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

    color: #1D4ED8;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 20px;

}

.section-title{

    font-size: clamp(2.5rem,5vw,4rem);

    font-weight: 800;

    color: #0B132B;

    margin-bottom: 20px;

}

.section-title span{

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

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

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

}

.section-description{

    color:#64748B;

    line-height:1.8;

    font-size:1.05rem;

}

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

.products-grid{

    display:grid;

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

    gap:30px;

}

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

.product-card{

    background:#FFFFFF;

    border:1px solid #E2E8F0;

    border-radius:24px;

    overflow:hidden;

    transition:.4s ease;

    box-shadow:0 12px 30px rgba(15,23,42,.05);

    display:flex;

    flex-direction:column;

}

.product-card:hover{

    transform: translateY(-12px);

    border-color: #38BDF8;

    box-shadow:

        0 30px 60px rgba(15,23,42,.10),

        0 10px 25px rgba(0,194,255,.12);

}




.product-image{

    height:240px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#F8FAFC;

    padding:30px;

    overflow:hidden;

}

.product-image img{

    max-width:100%;

    max-height:170px;

    transition:.4s ease;

}

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

    transform:scale(1.08);

}

.product-content{

    padding:30px;

    text-align:center;

}

.product-content h3{

    font-size:1.35rem;

    color:#0B132B;

    margin-bottom:12px;

    font-weight:700;

}

.product-content p{

    color:#64748B;

    line-height:1.8;

    margin-bottom:25px;

}


.product-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:12px 26px;

    border-radius:50px;

    background:#1D4ED8;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.product-btn:hover{

    background:#00C2FF;

    color:#fff;

}

.product-btn i{

    transition:.35s;

}

.product-btn:hover i{

    transform:translateX(6px);

}


@media(max-width:1200px){

    .products-grid{

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

    }

}

@media(max-width:992px){

    .products-grid{

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

    }

}

@media(max-width:576px){

    .products-grid{

        grid-template-columns:1fr;

    }

}

/*==========================================================
                PREMIUM TOP BORDER
==========================================================*/

.product-card{

    position: relative;

}

.product-card::before{

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

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

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .45s ease;

}

.product-card:hover::before{

    transform: scaleX(1);

}

.product-image{

    position: relative;

    height: 240px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 30px;

    background: linear-gradient(

        180deg,

        #FFFFFF,

        #F8FAFC

    );

    overflow: hidden;

}

.product-image::before{

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    border-radius: 50%;

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

    transition: .45s;

}

.product-image img{

    position: relative;

    z-index: 2;

    max-width: 100%;

    max-height: 170px;

    transition: .45s ease;

}

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

    transform:

        scale(1.08)

        rotate(-3deg);

}

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

    transform: scale(1.2);

}

.product-content h3{

    font-size: 1.35rem;

    font-weight: 700;

    color: #0B132B;

    margin-bottom: 12px;

    transition: .35s;

}

.product-card:hover h3{

    color: #1D4ED8;

}

.product-btn{

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 13px 26px;

    border-radius: 50px;

    background: linear-gradient(

        135deg,

        #1D4ED8,

        #123A8D

    );

    color: #fff;

    font-weight: 600;

    text-decoration: none;

    transition: .35s;

}

.product-btn:hover{

    background: linear-gradient(

        135deg,

        #00C2FF,

        #1D4ED8

    );

    color: #fff;

}

.product-btn i{

    transition: .35s;

}

.product-btn:hover i{

    transform: translateX(6px);

}