.features-wrapper{
    max-width:1100px;
    width:100%;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.feature-box{
    padding:20px 28px;
    border-radius:50px;
    border:3px solid #2d2d2d;
    font-weight:700;
    font-size:16px;
    color:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    cursor:pointer;
    position:relative;
    overflow:hidden;
    transition:all .35s ease;
    box-shadow:6px 6px 0px #2d2d2d;
}

/* Hover Effect */
.feature-box:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 15px 30px rgba(0,0,0,.25);
}

.feature-box::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:100%;
    height:100%;
    background:rgba(255,255,255,.35);
    transform:skewX(-25deg);
    transition:.7s;
}

.feature-box:hover::before{
    left:120%;
}

/* Colors */
.yellow{
    background:#f5efb8;
}

.green{
    background:#dff0d5;
}

.pink{
    background:#F0FFFF;
}

.blue{
    background:#d9edf8;
}

.cream{
    background:#f5eed8;
}

.purple{
    background:#e4ddf7;
}

.Wheat{
    background: #F5DEB3;
}


.Lavender{
    background: #FFF0F5;
}

.Linen{
 background: #FFEBCD;
}


.Pale{
    background: #F0F8FF;
}


/* Floating Animation */
@keyframes float {
    0%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-5px);
    }
    100%{
        transform:translateY(0);
    }
}

.feature-box{
    animation:float 4s ease-in-out infinite;
}

.feature-box:nth-child(2){
    animation-delay:.5s;
}
.feature-box:nth-child(3){
    animation-delay:1s;
}
.feature-box:nth-child(4){
    animation-delay:1.5s;
}
.feature-box:nth-child(5){
    animation-delay:2s;
}
.feature-box:nth-child(6){
    animation-delay:2.5s;
}

/* Responsive */
@media(max-width:900px){
    .feature-grid{
        grid-template-columns:1fr;
    }
}