/*==========================================================
 PRODUCTS SECTION
 Trade by Ray
==========================================================*/

.products-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:#ffffff;

}

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

.products-section::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    left:-250px;

    top:-250px;

    background:rgba(15,81,50,.05);

    filter:blur(90px);

}

.products-section::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    right:-180px;

    bottom:-180px;

    background:rgba(212,175,55,.08);

    filter:blur(90px);

}

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

.products-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:35px;

}

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

.product-card{

    background:#ffffff;

    border-radius:26px;

    overflow:hidden;

    border:1px solid rgba(15,81,50,.08);

    box-shadow:

        0 18px 45px rgba(0,0,0,.05);

    transition:.4s;

}

.product-card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 35px 80px rgba(0,0,0,.12);

}

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

.product-image{

    position:relative;

    overflow:hidden;

    height:280px;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.product-card:hover img{

    transform:scale(1.08);

}

/*========================================
LABEL
========================================*/

.product-label{

    position:absolute;

    top:20px;

    left:20px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        var(--secondary),
        #f2ca57
    );

    color:#ffffff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

}

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

.product-content{

    padding:35px;

}

.product-content h3{

    font-size:26px;

    color:var(--primary);

    margin-bottom:18px;

    font-weight:700;

}

.product-content p{

    color:var(--text-light);

    line-height:1.9;

    margin-bottom:25px;

    font-size:15px;

}

/*========================================
SPECIFICATION
========================================*/

.product-spec{

    margin:0 0 30px;

    padding:0;

    list-style:none;

}

.product-spec li{

    display:flex;

    align-items:center;

    padding:10px 0;

    color:var(--text);

    font-size:15px;

    border-bottom:1px solid #eeeeee;

}

.product-spec li:last-child{

    border-bottom:none;

}

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

.product-content .btn{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    height:56px;

    border-radius:50px;

    text-decoration:none;

    background:linear-gradient(

        135deg,

        var(--primary),

        #1d6d45

    );

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    transition:.35s;

}

.product-content .btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 20px 40px rgba(15,81,50,.25);

}

/*========================================
CARD BORDER EFFECT
========================================*/

.product-card::before{

    content:"";

    display:block;

    width:100%;

    height:5px;

    background:linear-gradient(

        90deg,

        var(--primary),

        var(--secondary)

    );

}

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

@media(max-width:1100px){

.products-grid{

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

gap:25px;

}

.product-content{

padding:28px;

}

.product-content h3{

font-size:22px;

}

}

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

@media(max-width:768px){

.products-section{

padding:80px 0;

}

.products-grid{

grid-template-columns:1fr;

gap:25px;

}

.product-image{

height:240px;

}

.product-content{

padding:24px;

}

.product-content h3{

font-size:22px;

}

.product-content p{

font-size:14px;

}

.product-spec li{

font-size:14px;

}

.product-content .btn{

height:52px;

}

}