.data{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: auto;

}


.box{
    width: 200px;
    height: 300px;
    align-items: center;
    text-align: center;
    margin: 0 auto;

    border-radius: 40px;
    background-image: url('../images/water.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.box1{
    width: 200px;
    height: 300px;
    align-items: center;
    text-align: center;
    margin: 0 auto;

    border-radius: 40px;
    background-image: url('../images/humidity.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.box2{
    width: 200px;
    height: 300px;
    align-items: center;
    text-align: center;
    margin: 0 auto;

    border-radius: 40px;
    background-image: url('../images/temperature.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.box3{
    width: 200px;
    height: 300px;
    align-items: center;
    text-align: center;
    margin: 0 auto;

    border-radius: 40px;
    background-image: url('../images/grass.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.box4{
    width: 200px;
    height: 300px;
    align-items: center;
    text-align: center;
    margin: 0 auto;

    border-radius: 40px;
    background-image: url('../images/light.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.box5{
    width: 200px;
    height: 300px;
    align-items: center;
    text-align: center;
    margin: 0 auto;

    border-radius: 40px;
    background-image: url('../images/notifications.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}