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

.features{

    padding:40px 0;

    background:#ffffff;

}

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

.features__grid{

    display:grid;

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

    background:#ffffff;

    border:1px solid #ececec;

    border-radius:10px;

    overflow:hidden;

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

/*==================================================
    ITEM
==================================================*/

.feature{

    display:flex;

    align-items:center;

    gap:18px;

    padding:28px 24px;

    position:relative;

    transition:.3s ease;
	

}

/* Vertical Divider */

.feature:not(:last-child){

   border-right:1px solid rgba(245,181,29,.20);

}

.feature:hover{

    background:#fafafa;

}

/*==================================================
    ICON
==================================================*/

.feature__icon{

    width:58px;

    height:58px;

    flex-shrink:0;

    border-radius:50%;

    background:#F5B51D;

    color:#082C6C;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    transition:.3s;

}

.feature:hover .feature__icon{

    transform:scale(1.08);

}

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

.feature__content{

    flex:1;

}

.feature__content h3{

    margin:0 0 6px;

    color:#082C6C;

    font-size:17px;

    font-weight:700;

    text-transform:uppercase;

}

.feature__content p{

    margin:0;

    color:#666;

    font-size:15px;

    line-height:1.5;

}

/*==================================================
    FEATURES — LARGE TABLET
==================================================*/

@media (max-width:1200px){

    .feature{

        gap:14px;

        padding:24px 18px;

    }

    .feature__icon{

        width:52px;

        height:52px;

        font-size:22px;

    }

    .feature__content h3{

        font-size:15px;

    }

    .feature__content p{

        font-size:14px;

    }

}


/*==================================================
    FEATURES — TABLET
==================================================*/

@media (max-width:992px){

    .features{

        padding:30px 0;

    }

    .features__grid{

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

    }

    .feature{

        padding:24px 20px;

    }

    .feature:nth-child(2){

        border-right:none;

    }

    .feature:nth-child(-n+2){

        border-bottom:1px solid rgba(245,181,29,.20);

    }

}


/*==================================================
    FEATURES — SMALL TABLET
==================================================*/

@media (max-width:768px){

    .features{

        padding:25px 0;

    }

    .feature{

        gap:14px;

        padding:22px 16px;

    }

    .feature__icon{

        width:50px;

        height:50px;

        font-size:21px;

    }

    .feature__content h3{

        font-size:14px;

    }

    .feature__content p{

        font-size:13px;

    }

}


/*==================================================
    FEATURES — MOBILE
==================================================*/

@media (max-width:576px){

    .features{

        padding:20px 0;

    }

    .features__grid{

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

        border-radius:8px;

    }

    .feature{

        gap:12px;

        padding:20px 14px;

    }

    .feature__icon{

        width:44px;

        height:44px;

        font-size:19px;

    }

    .feature__content h3{

        font-size:13px;

        line-height:1.3;

        margin-bottom:4px;

    }

    .feature__content p{

        font-size:12px;

        line-height:1.4;

    }

}


/*==================================================
    FEATURES — SMALL MOBILE
==================================================*/

@media (max-width:400px){

    .features__grid{

        grid-template-columns:1fr;

    }

    .feature{

        padding:18px 20px;

    }

    .feature:not(:last-child){

        border-right:none;

        border-bottom:1px solid rgba(245,181,29,.20);

    }

    .feature__icon{

        width:46px;

        height:46px;

        font-size:20px;

    }

    .feature__content h3{

        font-size:14px;

    }

    .feature__content p{

        font-size:13px;

    }

}