.animate-top{
    animation:appear linear ;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;

  }
  @keyframes appear{
    from{
        opacity: 0;
        scale: 0.5;
    }
    to{
        opacity: 1;
        scale: 1;
    }
  }
  .animate-left{
    animation:appear-left linear ;
    transition: 5s;
    animation-timeline: view();
    animation-range: entry 0 cover 40%;

  }
  @keyframes appear-left{
    from{
        opacity: 0;
      transform: translateX(-100%);
     
    }
    to{
        opacity: 1;
        transform: translateX(0%);
      
    }
  }

/* Hide dropdown initially */
.nav-item .dropdown-menu {
  display: none;
  opacity: 0;
  transform: translateY(-10px); /* Start position */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show dropdown on hover */
.nav-item:hover .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0); /* Moves dropdown into place */
}



/* Style for + icon */
.plus-icon {
  font-size: 18px;
  font-weight: bold;
  margin-left: 5px;
  display: inline-block;
  transition: transform 0.3s ease-in-out;
}

/* Rotate + icon on hover */
.nav-item:hover .plus-icon {
  transform: rotate(45deg);
}


.scale-in-ver-top {
	-webkit-animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-ver-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

 @-webkit-keyframes scale-in-ver-top {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-ver-top {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
}