* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar-area {
    width: 100%;
    height: 64px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;

}

.navbar {
    width: 65%;
    height: 55px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.nav-box-1 {
    height: 55px;
    width: 90px;
    /* background-image: url(./assets/nav-1.png);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat; */
}

.nav-box-2 {
    height: 55px;
    width: 90px;

}

.nav-box-3 {
    height: 55px;
    width: 90px;

}

.nav-box-4 {
    height: 55px;
    width: 175px;

}

.nav-box-5 {
    height: 55px;
    width: 175px;

}

.nav-box-6 {
    height: 55px;
    width: 175px;

}

.navbar-home {
    height: 90px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-item {
    height: 90px;
    width: 65%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.box-1 {
    height: 87px;
    width: 87px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.box-1 :hover {
    background-color: #999c9b;
}

.box-1 img {
    width: 50%;
    height: 50%;
}

.box-2 {
    height: 87px;
    width: 87px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-2 :hover {
    background-color: #f14d0c;
}


.box-2 img {
    /* width: 1rem;
    height: 1rem; */
    width: 2rem;
    height: 2rem;
}

.box-3 {
    height: 87px;
    width: 87px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-3 :hover {
    background-color: #e66431;
}

.box-3 img {
    /* width: 1rem;
    height: 1rem; */
    width: 2rem;
    height: 2rem;
}


.box-4 {
    height: 87px;
    width: 87px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-4 :hover {
    background-color: #e2e61c;
}

.box-4 img {
    /* width: 1rem;
    height: 1rem; */
    width: 2rem;
    height: 2rem;
}

.box-5 {
    height: 87px;
    width: 87px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-5 :hover {
    background-color: #16ce35;
}

.box-5 img {
    /* width: 1rem;
    height: 1rem; */
    width: 2rem;
    height: 2rem;
}

.box-6 {
    height: 87px;
    width: 87px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-6 img {
    /* width: 1rem;
    height: 1rem; */
    width: 2rem;
    height: 2rem;
}
.box-3 :hover {
    background-color: #1fc6f0;
}

.box-7 {
    height: 87px;
    width: 87px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-3 :hover {
    background-color: #264bf1;
}

.box-7 img {
    /* width: 1rem;
    height: 1rem; */
    width: 2rem;
    height: 2rem;
}