@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/Poppins-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/Poppins-Medium.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/Poppins-SemiBold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/Poppins-Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('/fonts/Poppins-ExtraBold.woff2') format('woff2');
  font-display: swap;
}
.rotate-in {
     animation: rotateIn 0.3s ease forwards;
}
 .slide-in-right {
     animation: slideInFromRight 0.3s ease forwards;
}
 .slide-down {
     animation: fadeExpand 0.4s ease forwards;
     overflow: hidden;
}
 .slide-up {
     animation: fadeCollapse 0.4s ease forwards;
     overflow: hidden;
}
 @keyframes pop {
     0% {
         transform: scale(1);
    }
     50% {
         transform: scale(0.9);
    }
     100% {
         transform: scale(1);
    }
}
 @keyframes fadeCollapse {
     0% {
         height: 220px;
         opacity: 1;
         overflow: hidden;
    }
     100% {
         height: 0;
         opacity: 0;
         overflow: hidden;
    }
}
 @keyframes fadeExpand {
     0% {
         height: 0;
         opacity: 0;
         overflow: hidden;
    }
     100% {
         height: 220px;
         opacity: 1;
         overflow: hidden;
    }
}
 @keyframes slideInFromRight {
     from {
         transform: translateX(50%);
         opacity: 0;
    }
     to {
         transform: translateX(0);
         opacity: 1;
    }
}
 @keyframes rotateIn {
     from {
         transform: rotate(-45deg);
         opacity: 0;
    }
     to {
         transform: rotate(0deg);
         opacity: 1;
    }
}
 @keyframes fadeUpIn {
     0% {
         opacity: 0.3;
         transform: translateY(30px);
    }
     100% {
         opacity: 1;
         transform: translateY(0);
    }
}