.product-menu-container {
width: 100%;
background: #ffffff;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
height: 0vmax;
position: absolute;
top: 100%;
z-index: 1;
border-top: 1px solid #b3b3b3b3;
/* transition: height 0.2s linear; */
overflow: hidden;
}
.product-menu-inner-container {
display: flex;
flex-wrap: wrap;
margin-left: 30%;
width: 40%;
height: 75%;
opacity: 1;
/* border: 1px black solid; */
}
.menu-container-animation {
animation: menucontaineranimation 0.1s linear 1 alternate;
animation-fill-mode: forwards;
}
.product-menu-container:hover .home-navbar-link > li > a {
width: 100%;
}
@keyframes menucontaineranimation {
0% {
height: 10vmax;
opacity: 0.2;
}
30% {
height: 13vmax;
opacity: 0.5;
}
60% {
height: 16vmax;
opacity: 0.8;
}
100% {
height: 20vmax;
opacity: 1;
}
}
.menu-animation {
animation: menuanimation 0.3s linear 1 alternate;
animation-fill-mode: forwards;
}
@keyframes menuanimation {
0% {
opacity: 0.1;
}
30% {
opacity: 0.2;
}
60% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
.individual-product-menu-card {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 1rem;
align-items: center;
width: 25%;
height: 50%;
flex-wrap: wrap;
}
.individual-product-menu-card > img {
width: 20%;
}
.individual-product-menu-image-specialcase {
width: 25% !important;
}
.individual-product-menu-label {
font-weight: 300;
color: #7a8082;
}
.individual-product-menu-card:hover .individual-product-menu-label {
color: var(--blue-color);
}

/*--------------------mobile navbar----------------*/
.mobile-navbar {
display: none;
order: 4;
width: 85%;
flex-direction: column;
justify-content: start;
align-items: center;
/* background: beige; */
height: 150vh;
transition: all 0.3s ease-in-out;
z-index: 10000;
position: absolute;
top: 5rem;
left: 15%;
background: white;
gap: 3rem;
}
.dimensionless-logo-contianer {
width: 100%;
}
.dimensionless-logo-contianer > img {
width: 50%;
display: block;
margin: 0 auto;
}

.navbar-inner-tab {
width: 80%;
height: 100%;
display: flex;
flex-direction: column;
gap: 0rem;
}
.individual-nav-tab {
padding: 1rem;
display: flex;
align-items: center;
/* border: 1px solid black; */
border-radius: 10px;
gap: 1rem;
position: relative;
}
.individual-nav-tab > img {
width: 8%;
}
.individual-nav-tab > a {
font-size: 1.2rem;
line-height: 24px;
/* font-weight: 600; */
letter-spacing: -0.01em;
color: rgb(134, 131, 128);
text-decoration: none;
/* color: var(--blue-color); */
}
.individual-inner-nav-container {
width: 90%;
height: 100%;
display: flex;
align-items: center;
gap: 1rem;
}
.individual-inner-nav-container > img {
width: 10%;
}
.individual-inner-nav-container > a {
font-size: 1.2rem;
line-height: 24px;
/* font-weight: 600; */
letter-spacing: -0.01em;
color: rgb(134, 131, 128);
text-decoration: none;
}
.product-dropdown {
width: 100%;
background: white;
height: auto;
position: absolute;
top: 100%;
z-index: 2;
display: none;
box-shadow: rgb(128 128 128 / 58%) 0px 1px 7px;
border-radius: 7px;
left: 1%;
/* border: 1px solid black; */
}
/* .product-dropdown-arrow {
 
} */
.product-dropdown-tab {
padding: 1rem;
width: 100%;
}
.product-dropdown-tab > a {
font-size: 1.2rem;
text-decoration: none;
color: rgb(134, 131, 128);
/* font-weight: 500; */
}
.border-product-tab {
border-bottom: 1px solid rgb(134, 131, 128);
}

.product-dropdown-arrow {
width: 6% !important;
transition: transform 0.2s;
}
/*--------------------------------------------------*/

@media only screen and (max-width: 768px) {
.product-menu-container {
display: none;
}
}