/*==================================================
03 FEATURES
==================================================*/

.cl-features{

    background:transparent;

    padding:35px 0;

}

/*==============================
Heading
==============================*/

.cl-feature-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    background:#ffe9ee;

    color:var(--cl-primary);

    border-radius:999px;

    font-size:15px;

    font-weight:700;

    margin-bottom:18px;

}

.cl-feature-grid{

    display:grid;

    gap:22px;

    align-items:stretch;

}

/*==============================
Desktop Auto Layout
==============================*/

.cl-feature-grid.features-2{

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

}

.cl-feature-grid.features-3{

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

}

.cl-feature-grid.features-4{

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

}

.cl-feature-grid.features-grid{

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

}

/*==============================
Card
==============================*/

.cl-feature-card{

    position:relative;

    background:#fff;

    border:1px solid #f2d7df;

    border-radius:20px;

padding:28px 22px;

    text-align:center;

    transition:.35s ease;

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

    height:100%;

}

.cl-feature-card:hover{

    transform:translateY(-8px);

    border-color:#ffb8c7;

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

}

/*==============================
Icon
==============================*/

.cl-feature-icon{

    width:76px;

    height:76px;

    margin:0 auto 18px;

    border-radius:50%;

    background:#fff2f5;

    display:flex;

    align-items:center;

    justify-content:center;

}

.cl-feature-icon img{

    width:40px;

    height:40px;

    object-fit:contain;

}

/*==============================
Typography
==============================*/

.cl-feature-card h3{

    margin:0 0 16px;

    font-size:22px;

    font-weight:700;

    color:var(--cl-text);

    line-height:1.3;

}

.cl-feature-card p{

    margin:0;

    font-size:16px;

    line-height:1.8;

    color:var(--cl-muted);

}

/*==============================
Tablet
==============================*/

@media(max-width:991px){

    .cl-features{

        padding:25px 0;

    }

    .cl-feature-grid.features-2,
    .cl-feature-grid.features-3,
    .cl-feature-grid.features-4,
    .cl-feature-grid.features-grid{

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

    }

}

/*==============================
Mobile
==============================*/

@media(max-width:767px){

    .cl-features{

        padding:15px 0;

    }

    .cl-feature-grid{

        gap:16px;

    }

    .cl-feature-grid.features-2,
    .cl-feature-grid.features-3,
    .cl-feature-grid.features-4,
    .cl-feature-grid.features-grid{

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

    }

    .cl-feature-badge{

        font-size:13px;

        padding:8px 18px;

        margin-bottom:18px;

    }

    .cl-feature-card{

        padding:22px 16px;

        border-radius:20px;

    }

    .cl-feature-icon{

        width:64px;

        height:64px;

        margin-bottom:16px;

    }

    .cl-feature-icon img{

        width:34px;

        height:34px;

    }

    .cl-feature-card h3{

        font-size:17px;

        margin-bottom:10px;

    }

    .cl-feature-card p{

        font-size:13px;

        line-height:1.6;

    }

}

/*=================================
Single Card Center
=================================*/

.cl-feature-grid > .cl-feature-card:only-child{

    max-width:420px;

    width:100%;

    margin:0 auto;

}

/*=================================
5 Items
Last Card Center
=================================*/

.cl-feature-grid.features-grid > .cl-feature-card:last-child:nth-child(odd){

    grid-column:1 / -1;

    max-width:520px;

    width:100%;

    justify-self:center;

}