@keyframes opanadpackage {
    from {
        height: 0px;
        min-height: 0px;
    }

    to {
        height: 120px;
        min-height: 120px;
    }
}



  


@keyframes closeadpackage {
    from {
        height: 120px;
        min-height: 120px;
    }

    to {
        height: 0px;
        min-height: 0px;
    }
}



@keyframes gradientloader {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}





@keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }




  @keyframes popUp {
    0% {
        height: 0px;
        opacity: 0;
    }
    100% {
        height: 100vh;
        opacity: 1;
    }
}




@keyframes speechBubble {
    0% {
        top: 0%;
        opacity: 0;
    }
    100% {
        top: 32%;
        opacity: 1;
    }
}



.animate-forward {
    animation: popUp 0.5s ease-out forwards;
}

.animate-backward {
    animation: popUp 0.5s ease-out reverse forwards;
}