/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #FFF;
  /* font-family: Arial; */
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  /* padding: 14px 16px; */
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  /* overflow: hidden; */
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */

  /* color: #fff; */
  color: #4c1821;
  user-select: none;
  font-size: 1.75rem;
  font-weight: 500;
}

/* Add a red background color to navbar links on hover */
.dropdown .dropbtn:hover {
  color: #bb7608; 
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ebb8c1;
  min-width: 320px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding: 5px 2px;
  top: 32px;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  /* display: block; */
  text-align: left;
  display: flex;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  /* background-color: #ddd; */
  background-color: #ffe242;
  font-weight: 500;
  padding-left: 24px;
  transition-duration: 500ms;
}
.dropdown-content a::before {
  content: '';
  /* position: absolute; */
  /* top: calc(50% - 4px); */
  position: relative;
  left: -5px;
  top: 3px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 5px solid #373632;
  border-bottom: 5px solid transparent;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover {
  transition-duration: 500ms;
}

.dropdown-content {
    animation: rotateMenu 500ms ease-in-out forwards;
    transform-origin: top center;
}
@keyframes rotateMenu {
    0% {
        transform: rotateX(-90deg)
    }
    /* 70% {
        transform: rotateX(20deg) 
    }
    100% {
        transform: rotateX(0deg) 
    } */
}