/*==================================================
    FEATURED PRODUCTS
==================================================*/

.featured-products{

    padding:100px 0;

    background:#f8faf7;

}

.featured-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:30px;

}

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

.featured-card{

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s;

    text-align:center;

    padding:30px;

}

.featured-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

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

.featured-main{

    grid-row:span 2;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.featured-image{

    margin-bottom:30px;

}

.featured-image img{

    width:280px;

    transition:.4s;

}

.featured-main:hover img{

    transform:scale(1.05);

}

.product-tag{

    display:inline-block;

    padding:8px 18px;

    background:#F8E8B8;

    color:#8A6500;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

}

.featured-main h3{

    font-size:32px;

    margin-bottom:15px;

    color:var(--heading);

}

.featured-main p{

    font-size:16px;

    color:#666;

    line-height:1.8;

    margin-bottom:30px;

}

/*=========================
SMALL CARDS
=========================*/

.featured-card img{

    width:150px;

    margin:auto;

    transition:.35s;

}

.featured-card:hover img{

    transform:translateY(-8px);

}

.featured-card h4{

    margin-top:20px;

    font-size:22px;

    color:var(--heading);

}

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

@media(max-width:992px){

    .featured-grid{

        grid-template-columns:1fr 1fr;

    }

    .featured-main{

        grid-column:span 2;

        grid-row:auto;

    }

}

@media(max-width:768px){

    .featured-products{

        padding:70px 0;

    }

    .featured-grid{

        grid-template-columns:1fr;

    }

    .featured-main{

        grid-column:auto;

    }

    .featured-image img{

        width:220px;

    }

    .featured-card img{

        width:120px;

    }

}
/*=========================================
ANIMATION
=========================================*/

.featured-card{

    opacity:0;

    transform:translateY(60px);

}

.featured-card.show{

    opacity:1;

    transform:translateY(0);

    transition:.8s ease;

}

/* Hover Glow */

.featured-card:hover{

    border:1px solid rgba(31,107,45,.15);

}

/* Button Animation */

.featured-main .btn{

    transition:.35s;

}

.featured-main .btn:hover{

    transform:translateY(-4px);

}