/* ==========================================================
   Features
   ========================================================== */

.ws-features {
    padding: 5px 0;
    background: #00000008;
    z-index: 999;
    position: relative;
    width: auto;
    margin: 0 auto;
    border-radius: 15px;
}

.ws-features-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
    margin-bottom: 20px;
}

.ws-feature-card{

    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #fff;
    border: 1px solid var(--ws-border);
    border-radius: 12px;
    transition: var(--ws-transition);

}

.ws-feature-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--ws-shadow);

}

.ws-feature-icon{

    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 51px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 6%);
    color: var(--ws-primary);

}

.ws-feature-icon svg{

    width:25px;
    height:25px;

    stroke:currentColor;

}

.ws-feature-content{

    flex:1;

}

.ws-feature-content h3{

  margin-bottom: 4px;
    color: var(--ws-primary);
    font-size: 16px;
    font-weight: 900;
}

.ws-feature-content p{

    color:var(--ws-text);

    font-size:15px;

    line-height:1.6;

}



@media (max-width: 768px) {

	.ws-features-grid {
		grid-template-columns: repeat(2, 1fr);
        gap: 8px;
	}

    .ws-feature-icon {
    width: 35px;
    height: 35px;
}
.ws-feature-content h3, .ws-feature-content p {
    font-size: 12px;
    text-align: right;
}

    .ws-feature-icon svg {
    width: 22px;
    height: 22px;
}

.ws-feature-content p {
    display: none;
}

.ws-feature-card {
   display: flex;
        gap: 7px;
        padding: 8px 5px 8px 5px;
        align-items: center;
        justify-items: center;
}

.ws-features {
    padding: 4px 0;
        background: #00000008;
        width: auto;
        margin: 0;
        border-radius: 15px;
}

}