/* First Submenu Icon */

/* This will be the new container to center your submenu icons */
.center-container {
  display: flex;
  justify-content: center; /* Center items horizontally */
  align-items: center;     /* Center items vertically */
  height: 100px;           /* Fixed height (adjust as needed) */
}

/* First Submenu Icon */
.submenu-icon {
  display: inline-block;
  width: 20px; /* Adjust the width as needed */
  height: 20px; /* Adjust the height as needed */
  position: relative;
cursor: pointer
}

.horizontal-stroke {
  width: 100%;
  height: 2px; /* Adjust the thickness of the dash as needed */
  background-color: #979729; /* Adjust the color of the dash as needed */
  position: absolute;
  top: 0%;
  left: 0;
  transform: translateY(-50%);
}

.vertical-stroke {
  width: 2px; /* Adjust the width of the stroke as needed */
  height: 100%; /* Adjust the height of the stroke as needed */
  background-color: #979729; /* Adjust the color of the stroke as needed */
  position: absolute;
  top: 0;
  right: 0;
}

/* Second Submenu Icon */
.submenu-icon.second {
  display: inline-block;
  width: 20px; /* Adjust the width as needed */
  height: 20px; /* Adjust the height as needed */
  position: relative;
  transform: translate(-17px, 3px); /* Shift 3px left and 3px down */
}

.horizontal-stroke.second {
  width: 100%;
  height: 2px; /* Adjust the thickness of the dash as needed */
  background-color: #979729; /* Adjust the color of the dash as needed */
  position: absolute;
  top: 0%;
  left: 0;
  transform: translateY(-50%);
}

.vertical-stroke.second {
  width: 2px; /* Adjust the width of the stroke as needed */
  height: 100%; /* Adjust the height of the stroke as needed */
  background-color: #979729; /* Adjust the color of the stroke as needed */
  position: absolute;
  top: 0;
  right: 0;
}


 /* Add this CSS for the animation */
  .submenu-icon.second {
    display: inline-block;
    width: 20px; /* Adjust the width as needed */
    height: 20px; /* Adjust the height as needed */
    position: relative;
    transform: translate(-17px, 3px) rotateY(0deg); /* Initial position and rotation */
    transition: transform 0.5s ease-in-out; /* Add a transition for smooth animation */
  }

  /* Add this CSS for the animation when the icon is clicked */
  .submenu-icon.active.second {
    transform: translate(-40px, 0px) rotateY(180deg); /* Flipped position */
  }




/* Modify the width and height to half of the original size */
.submenu-icon,
.submenu-icon.active,
.submenu-icon.second,
.submenu-icon.active.second {
  width: 10px; /* Adjust the width as needed */
  height: 10px; /* Adjust the height as needed */
}