nav {
  display: flex;


}

.logo {padding-left:1em;
 width:300px;}

.logo a {
  font-size: 24px;
  font-weight: bold;
  color: #FF69B4;
 line-height: 1.4;
}

.logo a span {
  color: #8739fa;
}



.menu a {
  display: block;
  height: 40px;
  line-height: 40px;
  max-width:13em;

  padding: 7px 15px;
  font-size: 17px;
  font-weight: 500;
  transition: 0.2s all ease-in-out;
  color: #FF69B4;
 line-height: 1.6;
}

.menu:hover a {
  opacity: 0.9;
}

.menu a:hover {
  opacity: 0.9;
  color: #8739fa;
}

.menu-icon {
  display: none;
}

#menu-toggle {
  display: none;

}

#menu-toggle:checked ~ .menu {
  transform: scale(1, 1);
}


@media only screen and (min-width: 951px) {
  .menu {
display: flex;
  flex-direction:row;}



}

@media only screen and (max-width: 950px) {
  .menu {
display: flex;
  flex-direction:row;

    
    background-color: #ffffff;
   
    top: 50px;
    left: 0;
    
    z-index: 1;
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 0.3s ease-in-out;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  } 

  .menu a {
    margin-left: 12px;
  }

nav{display: flex;
  flex-direction: column;}

.menu ul li {
display: flex;
  flex-direction: column;}
  

  .menu li {
    margin-bottom: 10px;
  }

  .menu-icon {
 position: absolute;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    right: 0.2rem;
    top: 0.2rem;
    

    display: block;
    color: #8739fa;
    font-size: 28px;
    cursor: pointer;
  }

}


.nav a:hover, .nav-item .active {color:#8739fa;}


.menu .active a{color:#8739fa;}






.dropdown-menu {display: none;padding: 1em; list-style:none;}
.dropdown:hover .dropdown-menu {z-index: 999;display:block;position:absolute;background:#f3f3f3;top: 31px;}
.dropdown:hover .dropdown-menu a{color: #FF69B4;}
.dropdown:hover .dropdown-menu a:hover, .dropdown:hover .dropdown-menu .active a{color:#8739fa;}