/* .animate class is used to get the element for animation  */
 /* .show class is used for animate the selected element */

 /* use classes
.animate_up = intial hidden state
.show_up = animation up function   */

 /* use classes
.animate_down = intial hidden state
.show_down = animation left function  */


 /* use classes
.animate_left = intial hidden state
.show_left = animation up function   */

 /* use classes
.animate_right = intial hidden state
.show_right = animation left function   */

 /* Initial hidden state */

 .animate-up {
     opacity: 0;
     transform: translateY(30px);
 }

 /* Animation */
 .show-up {
     animation: fadeUp 0.8s ease forwards;
 }

 @keyframes fadeUp {

     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }


 /* use 
.animate_down = intial hidden state
.show_down = animation left function */

 /* Initial hidden state */

 .animate-down {
     opacity: 0;
     transform: translateY(-30px);
 }

 /* Animation */
 .show-down {
     animation: fadeDown 0.8s ease forwards;
 }

 @keyframes fadeDown {
     from {
         opacity: 0;
         transform: translateY(-30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }


 /* use 
.animate_left = intial hidden state
.show_left = animation left function */

 /* Initial hidden state */

 .animate-left {
     opacity: 0;
     transform: translateX(30px);
 }

 /* Animation */
 .show-left {
     animation: fadeLeft 0.8s ease forwards;
 }

 @keyframes fadeLeft {

     from {
         opacity: 0;
         transform: translateX(30px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }


 /* use 
.animate_right = intial hidden state
.show_right = animation left function */


 /* Initial hidden state */
 .animate-right {
     opacity: 0;
     transform: translateX(-30px);
 }

 /* Animation */
 .show-right {
     animation: fadeRight 0.8s ease forwards;
 }

 @keyframes fadeRight {
     from {
         opacity: 0;
         transform: translateX(-30px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }



 /* Delay classes  */
 /* 1s = 1000ms */
 .delay-1 {
     animation-delay: 100ms !important;
 }

 .delay-2 {
     animation-delay: 200ms !important;
 }

 .delay-3 {
     animation-delay: 400ms !important;
 }

 .delay-4 {
     animation-delay: 600ms !important;
 }

 .delay-5 {
     animation-delay: 800ms !important;
 }

 .delay-6 {
     animation-delay: 1000ms !important;
 }

 .delay-7 {
     animation-delay: 1200ms !important;
 }

 .delay-8 {
     animation-delay: 1400ms !important;
 }

 .delay-9 {
     animation-delay: 1600ms !important;
 }

 .delay-10 {
     animation-delay: 1800ms !important;
 }
















 /* =============SHINY BUTTON==================== */
 .shiny-btn {
     /* position: relative; */
     display: inline-block;
     /* padding: 12px 30px; */
     /* background: #2563eb; */
     /* color: #fff;
            border: none;
            border-radius: 8px; */
     cursor: pointer;
     overflow: hidden;
     transition: all 0.3s ease;
 }

 .shiny-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 60px;
     height: 100%;
     background: linear-gradient(120deg,
             transparent,
             rgba(255, 255, 255, 0.7),
             transparent);
     transform: skewX(-25deg);
     transition: 0.7s;
 }

 .shiny-btn:hover::before {
     left: 130%;
 }

 .shiny-btn:hover {
     transform: translateY(-2px);
 }

 /* ======================================== */