.ec-timeline .ec-time, .ec-timeline .ec-line {
    width: 80px;
}
.ec {
  height: 1040px;
}
.ec.ec-day-grid {
  height: 1000px;
}
@layer utilities {
    .scrollbar::-webkit-scrollbar {
      width: 12px; /* Thinner scrollbar by default */
      height: 12px;
      transition: width 0.3s ease, height 0.3s ease; /* Smooth transition */
    }
    .scrollbar::-webkit-scrollbar-track {
      border-radius: 100vh;
      background: #ebeff3;
      transition: background 0.3s ease; /* Smooth transition for track color if needed */
    }
    .scrollbar::-webkit-scrollbar-thumb {
      background: #d3dbe4;
      border-radius: 100vh;
      border: 2px solid #ebeff3;
      transition: background 0.3s ease, border 0.3s ease; /* Smooth transition for thumb background and border */
    }
    .scrollbar::-webkit-scrollbar-thumb:hover {
      background: #c1c9d2; /* Slightly darker shade on hover */
    }

    .dark .scrollbar::-webkit-scrollbar-track {
      background: #38495a;
    }
    .dark .scrollbar::-webkit-scrollbar-thumb {
      background: #15161f;
      border-radius: 100vh;
      border: 2px solid #38495a;
      transition: background 0.3s ease, border 0.3s ease; /* Smooth transition for thumb background and border */
    }
    .dark .scrollbar::-webkit-scrollbar-thumb:hover {
      background: #1e1e24; /* Slightly darker shade on hover */
    }

    .hero {
      background: radial-gradient(ellipse at top, #ffe8e1 0%, #eefffa 100%);
    }

    .dark .hero {
      background: radial-gradient(ellipse at top, #5e5768 0%, #28262b 80%);
    }
    .spotlights {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      -webkit-mask-image: radial-gradient(farthest-side at 50% 0, red 50%, transparent 90%);
      mask-image: radial-gradient(farthest-side at 50% 0, red 50%, transparent 90%);
      opacity: 1;
      transition: opacity 1.5s .5s;
    }
    .spotlight {
      position: absolute;
      z-index: -10;
      top: 100px;
      left: 50%;
      width: 400px;
      height: 700px;
      background-image: conic-gradient(from 0deg at 50% -5%, transparent 45%, rgba(255, 255, 255, 0.5) 49%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, .3) 51%, transparent 55%);
      opacity: .5;
      border-radius: 9999px;
      filter: blur(15px);
      pointer-events: none;
      transform-origin: 50% 0;
      animation: spotlight_opacity var(--duration, 5s) linear infinite alternate,
                 spotlight_scale var(--duration, 5s) infinite both,
                 spotlight_rotate var(--duration, 5s) linear infinite;
      transform: translateX(-50%) rotate(var(--rotate, 0deg)) scale(var(--scale, 1.1));
    }
    .dark .spotlight {
      background-image: conic-gradient(from 0deg at 50% -5%, transparent 45%, rgba(178, 193, 218, 0.3) 49%, rgba(124, 145, 182, .5) 50%, rgba(124, 145, 182, .3) 51%, transparent 55%);
    }
    .glow {
      position: absolute;
      z-index: -10;
      --glow-top: -75px;
      top: var(--glow-top);
      left: 50%;
      width: 200px;
      height: 200px;
      background-image: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, .3) 48%, rgba(255, 255, 255, .0) 80%);
      opacity: .5;
      border-radius: 9999px;
      filter: blur(25px);
      pointer-events: none;
      transform-origin: 50% 0;
      animation: spotlight_opacity var(--duration, 5s) linear infinite alternate,
                 spotlight_scale var(--duration, 5s) infinite both,
                 spotlight_rotate var(--duration, 5s) linear infinite;
      transform: translateX(-50%) rotate(var(--rotate, 0deg)) scale(var(--scale, 1.1));
    }
    .dark .glow {
      background-image: radial-gradient(circle, rgba(178, 193, 218, 0.4) 0%, rgba(124, 145, 182, .3) 48%, rgba(124, 145, 182, .0) 80%);
    }
    @keyframes spotlight_opacity {
      0%, 100% { opacity: .5; }
      50% { opacity: 1; }
    }

    @keyframes spotlight_scale {
      0%, 100% { transform: scale(var(--scale, 1)); }
      50% { transform: scale(calc(var(--scale, 1) * 1.7)); }
    }

    @keyframes spotlight_rotate {
      0% { transform: translateX(-50%) rotate(var(--rotate, 0deg)); }
      100% { transform: translateX(-50%) rotate(calc(var(--rotate, 0deg))); }
    }
  }


.features-gradient-2 {
  background-image: linear-gradient(107.34deg,#3d1dff 11.19%,#6147ff 26.5%,#d451ff 42.89%,#ec458d 62.48%,#ffca8b 79.58%);
}


.animated-title {
    background: linear-gradient(-45deg, #fd8e6c, #fd8e6c, #00a889, #fd8e6c);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient 8s linear infinite;
  }
  .dark .animated-title {
    background: linear-gradient(-45deg, #968fa1, #dcd8df, #5e5768, #797285);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient 8s linear infinite;
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    25% {
      background-position: 25% 25%;
    }
    50% {
      background-position: 50% 50%;
    }
    75% {
      background-position: 75% 75%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  .glowing-image {
    --line-width: 3px;
    --line-color: #fff;
    --line-opacity: 0.7;
    --duration: 8s;
    --easing: linear;
    --image-height: 50px;
    --image-width: 50px;
    all: unset;
    position: relative;
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    border-radius: 999px;
    transition: all .2s ease-out,outline 0s,outline-offset 0s;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    background: radial-gradient(31.2% 40.91% at 50% 151.14%,rgba(245, 172, 179,.08) 0,rgba(245, 172, 179,0.05) 100%),rgba(245, 172, 179,.09);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    height: var(--image-height);
    color: #fff;
    width: var(--image-width);;
  }
  .dark .glowing-image {
    --line-width: 3px;
    --line-color: #c5fff0;
    --line-opacity: 0.6;
    --duration: 8s;
    --easing: linear;
    --image-height: 50px;
    --image-width: 50px;
    box-shadow: inset 0 0 0 1px rgba(186,215,247,.02);
    background: radial-gradient(31.2% 40.91% at 50% 151.14%,rgba(178, 193, 218,.08) 0,rgba(124, 145, 182,0.05) 100%),rgba(124, 145, 182,.09);
  }
  .glowing-image .logo {
    transition: opacity 0.3s ease-in-out;
  }
  
  .dark .glowing-image .logo {
    content: url('{% static 'assets/png/logo-dark-mode.png' %}');
  }

  .glowing-image:after,.glowing-image:before {
    content: "";
    position: absolute;
    border-radius: inherit;
    z-index: 10;
    transition: opacity 1s ease-out
}

.glowing-image:after {
    inset: 0;
    background: radial-gradient(farthest-side at 50% 100%,var(--line-color),transparent);
    opacity: 0;
    mix-blend-mode: hard-light
}

.glowing-image:after {
    opacity: min(calc(var(--line-opacity) * .75),.5)
}

.glowing-image:before {
    opacity: var(--line-opacity);
    color: #ff00ff;
}
  .glowing-button {
    --line-width: 2px;
    --line-color: #c5fff0;
    --line-opacity: 0.6;
    --duration: 8s;
    --easing: linear;
    --button-height: 50px;
    --button-padding: 26px;
    all: unset;
    position: relative;
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    border-radius: 999px;
    transition: all .2s ease-out,outline 0s,outline-offset 0s;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    background: radial-gradient(31.2% 40.91% at 50% 151.14%,rgba(61,57,65,.18) 0,rgba(61,57,65,0.15) 100%),rgba(61,57,65,.19);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    height: var(--button-height);
    padding-inline: var(--button-padding);
    color: #fff;

  }
  .dark .glowing-button {
      --line-width: 1px;
      --line-color: #c5fff0;
      --line-opacity: 0.6;
      --duration: 8s;
      --easing: linear;
      box-shadow: inset 0 0 0 1px rgba(186,215,247,.12);
      background: radial-gradient(31.2% 40.91% at 50% 151.14%,rgba(186,214,247,.08) 0,rgba(186,214,247,0) 100%),rgba(186,214,247,.06);
      color: #ebeff3;
  }
  .glowing-button:before {
      inset: 2px;
      -webkit-mask-image: radial-gradient(#fff 3%,transparent 0),radial-gradient(hsla(0,0%,100%,.5) 3%,transparent 0);
      mask-image: radial-gradient(#fff 3%,transparent 0),radial-gradient(hsla(0,0%,100%,.5) 3%,transparent 0);
      -webkit-mask-position: 0 0,15px 15px;
      mask-position: 0 0,15px 15px;
      -webkit-mask-size: 30px 30px;
      mask-size: 30px 30px;
      -webkit-mask-repeat: repeat;
      mask-repeat: repeat;
      background: conic-gradient(from var(--angle),transparent 0,var(--line-color) 40%,transparent 40%);
      pointer-events: none;
      animation: glowing-button_line-anim var(--duration,6s) infinite,glowing-button_sky-anim 2s var(--easing) infinite;
      opacity: .5
  }

  .glowing-button:after,.glowing-button:before {
      content: "";
      position: absolute;
      border-radius: inherit;
      z-index: 10;
      transition: opacity 1s ease-out
  }

  .glowing-button:after {
      inset: 0;
      background: radial-gradient(farthest-side at 50% 100%,var(--line-color),transparent);
      opacity: 0;
      mix-blend-mode: hard-light
  }

  .glowing-button:hover:after {
      opacity: min(calc(var(--line-opacity) * .75),.5)
  }

  .glowing-button:hover:before {
      opacity: var(--line-opacity);
      color: #ff00ff;
  }

  .glowing-button_effect {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      filter: drop-shadow(0 0 5px var(--line-color))
  }

  .glowing-button_effect:after,.glowing-button_effect:before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: var(--line-width);
      background: conic-gradient(from var(--angle),transparent 0,var(--line-color) 40%,transparent 45%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
      mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
      mask-composite: xor;
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      animation: glowing-button_line-anim var(--duration,6s) var(--easing) infinite;
      opacity: var(--line-opacity,1)
  }

  .glowing-button_effect:before {
      filter: blur(8px);
      -webkit-mask: none;
      mask: none;
      opacity: max(calc(var(--line-opacity) * .1),.05)
  }

  @property --angle {
      syntax: "<angle>";
      inherits: false;
      initial-value: 0deg
  }
  @keyframes glowing-button_line-anim {
      to {
          --angle: 360deg
      }
  }

  @keyframes glowing-button_sky-anim {
      to {
          -webkit-mask-position: 0 -15px,15px -45px;
          mask-position: 0 -15px,15px -45px
      }
  }

.glowing-fieldo {
-webkit-animation: glowing 2s ease-in-out infinite alternate;
-moz-animation: glowing 2s ease-in-out infinite alternate;
animation: glowing 2s ease-in-out infinite alternate;
--color: #ebeff3;
}
.dark .glowing-fieldo {
-webkit-animation: glowing 2s ease-in-out infinite alternate;
-moz-animation: glowing 2s ease-in-out infinite alternate;
animation: glowing 2s ease-in-out infinite alternate;
--color: #7f9ab1;
}
@-webkit-keyframes glowing {
from {
  box-shadow: 0 0 0.5px var(--color), 0 0 1px var(--color), 0 0 1.5px var(--color), 0 0 2px var(--color), 0 0 2.5px var(--color), 0 0 3px var(--color), 0 0 3.5px var(--color);
}
to {
  box-shadow: 0 0 1px var(--color), 0 0 2px var(--color), 0 0 3px var(--color), 0 0 4px var(--color), 0 0 5px var(--color), 0 0 6px var(--color), 0 0 7px var(--color);
}
}


.glowing-field-wrapper {
position: relative;
display: inline-flex;
width: 100%;
text-align: left;
}

.glowing-field {
--line-width: 5px;
--line-color: #fff;
--line-opacity: 0.6;
--duration: 8s;
--easing: linear;
all: unset;
position: relative;
display: inline-block;
box-sizing: border-box;
font-size: 20px;
font-weight: 300;
border-radius: 999px;
transition: all .2s ease-out, outline 0s, outline-offset 0s;
cursor: text;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
background: radial-gradient(31.2% 40.91% at 50% 151.14%,rgba(255,255,255,.08) 0,rgba(255,255,255,0.05) 100%),rgba(255,255,255,.09);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
height: 64px;
padding: 10px 70px;
width: 100%;
color: #fff;
outline: none;
}

.dark .glowing-field {
--line-width: 1px;
--line-color: #bee6f9;
--line-opacity: 0.4;
--duration: 8s;
--easing: linear;
box-shadow: inset 0 0 0 1px rgba(186,215,247,.12);
background: radial-gradient(31.2% 40.91% at 50% 151.14%,rgba(186,214,247,.08) 0,rgba(186,214,247,0) 100%),rgba(186,214,247,.06);
color: #ebeff3;
}

.glowing-field_effect {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
filter: drop-shadow(0 0 5px var(--line-color));
}

.glowing-field_effect:after,
.glowing-field_effect:before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: var(--line-width);
background: conic-gradient(from var(--angle), transparent 0, var(--line-color) 40%, transparent 45%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: xor;
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: glowing-field_line-anim var(--duration, 6s) var(--easing) infinite;
opacity: var(--line-opacity, 1);
}

.glowing-field_effect:before {
filter: blur(8px);
-webkit-mask: none;
mask: none;
opacity: max(calc(var(--line-opacity) * .1), .05);
}

@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}

@keyframes glowing-field_line-anim {
to {
  --angle: 360deg;
}
}

@keyframes glowing-field_sky-anim {
to {
  -webkit-mask-position: 0 -15px, 15px -45px;
  mask-position: 0 -15px, 15px -45px;
}
}

.glowing-field:hover + .glowing-field_effect:after {
opacity: min(calc(var(--line-opacity) * .75), .5);
}

.glowing-field:hover + .glowing-field_effect:before {
opacity: var(--line-opacity);
color: #ff00ff;
}


.navbar {
transition: background-color 0.3s;
transition: box-shadow 0.6s;
}
.sticky {
background: radial-gradient(31.2% 40.91% at 50% 151.14%, rgba(255, 255, 255, 0.8) 0, rgba(255, 255, 255, 0) 100%), rgba(241, 249, 254, 0.6);
backdrop-filter: blur(10px);
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}
.dark .sticky {
background: radial-gradient(31.2% 40.91% at 50% 151.14%, rgba(15, 80, 80, 0.8) 0, rgba(255, 255, 255, 0) 100%), rgba(21, 22, 31, 0.6);
backdrop-filter: blur(10px);
box-shadow: rgba(255, 255, 255, 0.25) 40px 10px 100px 40px;
}


/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the Hippocratic License 2.1 - http://firstdonoharm.dev
 *
 * Copyright (c) 2022 Animate.css
 */
 :root {
    --animate-duration: 1s;
    --animate-delay: 1s;
    --animate-repeat: 1;
  }
  .animate__animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .animate__animated.animate__infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  .animate__animated.animate__repeat-1 {
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-iteration-count: var(--animate-repeat);
    animation-iteration-count: var(--animate-repeat);
  }
  .animate__animated.animate__repeat-2 {
    -webkit-animation-iteration-count: calc(1 * 2);
    animation-iteration-count: calc(1 * 2);
    -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
    animation-iteration-count: calc(var(--animate-repeat) * 2);
  }
  .animate__animated.animate__repeat-3 {
    -webkit-animation-iteration-count: calc(1 * 3);
    animation-iteration-count: calc(1 * 3);
    -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
    animation-iteration-count: calc(var(--animate-repeat) * 3);
  }
  .animate__animated.animate__delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: var(--animate-delay);
    animation-delay: var(--animate-delay);
  }
  .animate__animated.animate__delay-2s {
    -webkit-animation-delay: calc(1s * 2);
    animation-delay: calc(1s * 2);
    -webkit-animation-delay: calc(var(--animate-delay) * 2);
    animation-delay: calc(var(--animate-delay) * 2);
  }
  .animate__animated.animate__delay-3s {
    -webkit-animation-delay: calc(1s * 3);
    animation-delay: calc(1s * 3);
    -webkit-animation-delay: calc(var(--animate-delay) * 3);
    animation-delay: calc(var(--animate-delay) * 3);
  }
  .animate__animated.animate__delay-4s {
    -webkit-animation-delay: calc(1s * 4);
    animation-delay: calc(1s * 4);
    -webkit-animation-delay: calc(var(--animate-delay) * 4);
    animation-delay: calc(var(--animate-delay) * 4);
  }
  .animate__animated.animate__delay-5s {
    -webkit-animation-delay: calc(1s * 5);
    animation-delay: calc(1s * 5);
    -webkit-animation-delay: calc(var(--animate-delay) * 5);
    animation-delay: calc(var(--animate-delay) * 5);
  }
  .animate__animated.animate__faster {
    -webkit-animation-duration: calc(1s / 2);
    animation-duration: calc(1s / 2);
    -webkit-animation-duration: calc(var(--animate-duration) / 2);
    animation-duration: calc(var(--animate-duration) / 2);
  }
  .animate__animated.animate__fast {
    -webkit-animation-duration: calc(1s * 0.8);
    animation-duration: calc(1s * 0.8);
    -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
    animation-duration: calc(var(--animate-duration) * 0.8);
  }
  .animate__animated.animate__slow {
    -webkit-animation-duration: calc(1s * 2);
    animation-duration: calc(1s * 2);
    -webkit-animation-duration: calc(var(--animate-duration) * 2);
    animation-duration: calc(var(--animate-duration) * 2);
  }
  .animate__animated.animate__slower {
    -webkit-animation-duration: calc(1s * 3);
    animation-duration: calc(1s * 3);
    -webkit-animation-duration: calc(var(--animate-duration) * 3);
    animation-duration: calc(var(--animate-duration) * 3);
  }
  @media print, (prefers-reduced-motion: reduce) {
    .animate__animated {
      -webkit-animation-duration: 1ms !important;
      animation-duration: 1ms !important;
      -webkit-transition-duration: 1ms !important;
      transition-duration: 1ms !important;
      -webkit-animation-iteration-count: 1 !important;
      animation-iteration-count: 1 !important;
    }
  
    .animate__animated[class*='Out'] {
      opacity: 0;
    }
  }
  /* Animations  */
  @-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .animate__fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }
  
  
  @-webkit-keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  .animate__fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
  }
  
  
  @-webkit-keyframes flipInX {
    from {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }
  
    40% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
  
    60% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }
  
    80% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
  
    to {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
    }
  }
  @keyframes flipInX {
    from {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
      opacity: 0;
    }
  
    40% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      -webkit-animation-timing-function: ease-in;
      animation-timing-function: ease-in;
    }
  
    60% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      opacity: 1;
    }
  
    80% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
  
    to {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
    }
  }
  .animate__flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
  }
  
  
  /* Fading entrances  */
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  .animate__fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }
  
  
  @-webkit-keyframes shakeX {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }
  
    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }
  @keyframes shakeX {
    from,
    to {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  
    10%,
    30%,
    50%,
    70%,
    90% {
      -webkit-transform: translate3d(-10px, 0, 0);
      transform: translate3d(-10px, 0, 0);
    }
  
    20%,
    40%,
    60%,
    80% {
      -webkit-transform: translate3d(10px, 0, 0);
      transform: translate3d(10px, 0, 0);
    }
  }
  .animate__shakeX {
    -webkit-animation-name: shakeX;
    animation-name: shakeX;
  }