.menu-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(133, 158, 199, 0.932);
  z-index: 1000;
  overflow: hidden;
  max-height: 60px;           /* stängd höjd */
  transition: max-height 0.7s ease;
  display: block;              /* block för att underlätta vertikal meny */
}

/* Rad med hamburgare + logotyp */
.menu-header {
  display: flex;
  min-height: 60px;
  align-items: center;
}

.menylogo {
  position: fixed;
  top: 5px;      /* justera vertikalt */
  right: 20px;    /* avstånd från höger */
  height: 50px;
  width: auto;
  margin: 0;
}

.menu-dropdown.menu-active {
  height: auto;
  min-height: 60px;
  border-radius: 5px;
  max-height: 1000px; /* större än vad som behövs */
}

.menu-content {
  width: 100%;
  padding: 10px 20px 20px 20px;
  display: block;
}

.menu-content ul {
  margin: 0;
  padding: 0px;  /* 70px från toppen, resten som innan */
  list-style: none;
  text-align: left;
}

.menu-content ul li {
  
  display: block;
  margin: 2px;
  padding: 5px 0;
  font-size: 20px;
  color: rgb(31, 60, 88);
  text-align: left;      /* säkerställer vänsterställt */
}

.menu-content ul li:hover {
  color: lightsteelblue;
}

.menu-content ul li a {
  color: inherit;
  font-size: 20px; /* Adjust the font size */
  text-decoration: none;
  transition: color 0.7s ease;
}

.menu-content ul li a:hover {
  color: lightsteelblue;
}

.menu-content ul ul {
  display: none;
  padding: 2px 2px;
}

.menu-content ul li ul li a {
  color: rgb(31, 60, 88); /* Default color */
  font-size: 18px; /* Adjust the font size */
  text-decoration: none;
}                       


.con,
.special-con {
  cursor: pointer;
  display: inline-block;
  position: fixed;
  top: 12px;
  left: 29px;
}

.bar {
  display: block;
  height: 5px;
  width: 35px;
  background: rgb(31, 60, 88); /* Default color */
  margin: 6px auto;
  position: relative;
  top: 0px;
  left: 0px;
  border-radius: 5px;
}

.con {
  width: auto;
  margin: 0 auto;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

.middle {
  margin: 0 auto;
}

.bar {
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

.con.menu-active .top {
  transform: translateY(11px) rotateZ(45deg);
}

.con.menu-active .bottom {
  transform: translateY(-11px) rotateZ(-45deg);
}

.con.menu-active .middle {
  opacity: 0;
}

.hidden {
  display: none;
}