/* القائمة */
.menu{
  position: fixed;
  display:flex;
  width: 100%;
  max-width: 400px;
   background:#fff;
  gap:15px;
  padding: 50px 30px;
  border-radius: 18px;
  align-items:center;
  left:79%;
  top:350px;
  flex-direction:column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  text-align:center;
  opacity:0;
        transform:translateY(-100%);

    animation:dropMenu 0.7s ease-out forwards;


}

.menu-b{
  text-decoration:none;
  position: fixed;
  display:flex;
  gap:15px;
  align-items:right;
  left:10px;
  
}


.menu a{
  text-decoration:none;
  color:#333;
  font-weight:600;
}

.menu a:hover {
  left:79%;
  display:flex;
  background-color: #399be6;
  color: white;
  max-width: 400px;
  width: 100%;
  align-items:center;
  text-align:center;
  justify-content:center;
}

.login-btn{
  text-decoration:none;
  background:var(--primary);
  color:#fff !important;
  padding:6px 12px;
  border-radius:8px;
}
.login-btn:hover {
  background:#399be6;
  color:#fff !important;
  padding:6px 12px;
  border-radius:8px;
}



.menu_c{
  position: fixed;
  display:flex;
  width: 100%;
  max-width: 400px;
   background:#fff;
   color:#000000;
  gap:15px;
  padding: 50px 30px;
  border-radius: 18px;
  align-items:center;
  left:79%;
  top:350px;
  flex-direction:column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  text-align:center;
   font-size:20px;
    font-weight:bold;
       opacity:0;
        transform:translateY(-100%);

    animation:dropMenu 0.7s ease-out forwards;

}

@keyframes dropMenu{

    0%{
        transform:translateY(-100%);
        opacity:0;
    }

    100%{
        transform:translateY(0);
        opacity:1;
    }

}

.menu c{
  text-decoration:none;
  color:#000000;
  font-weight:bold;
   font-size:20px;
}

.menu c:hover {
  left:79%;
  color:#000000;
  display:flex;
  background-color: #399be6;
  color: white;
  max-width: 400px;
  width: 100%;
  align-items:center;
  text-align:center;
  justify-content:center;
   font-size:20px;
    font-weight:bold;
}