body {
    animation: fadeInAnimation ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
nav{
    animation: 2s ease-out 0s 1 slideInLeft;
}
@keyframes slideInLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
}
#home{
    animation: 3s ease-out 0s 1 slideInTop;
}
@keyframes slideInTop {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
}

.btn:active {
    box-shadow: 0 2px 0 #a0e3ff;
    transform: translateY(3px);
}

.navbar li a{
    --b: 0.1em;   /* the thickness of the line */
  --c: #3145da; /* the color */
  text-decoration: none;
  color: #6b73ac;
  padding-block: var(--b);
  background: 
    linear-gradient(var(--c) 50%,#000 0) 0% calc(100% - var(--_p,0%))/100% 200%,
    linear-gradient(var(--c) 0 0) 0% var(--_p,0%)/var(--_p,0%) var(--b) no-repeat;
  -webkit-background-clip: text,padding-box;
          background-clip: text,padding-box;
  transition: .3s var(--_s,0s) linear,background-size .3s calc(.3s - var(--_s,0s));
  }

.navbar li a:hover {
    --_p: 100%;
  --_s: .3s;
  color: #171593;
}

.main-title {
    background-image: linear-gradient(
    -225deg,
    #1d3b76 0%,
    #496aab 29%,
    #1d3b76 67%,
    #5b78b3 100%
  );
  background-clip: text;
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: 2s anim-flipX ease infinite, textclip 1s linear infinite;
}
@keyframes anim-flipX {
    0% {
      opacity: 0;
      transform: rotateX(90def);
    }
    50% {
      opacity: 1;
      transform: rotateX(720deg);
    }
    100% {
      /* animate nothing to pause animation at the end */
      opacity: 1;
      transform: rotateX(720deg);
    }
}
@keyframes textclip {
    to {
      background-position: 200% center;
    }
}

#about h2, #services h2, #pricing h2, #testimonials h2,.form-container h3{
    text-align: center;
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 40px;
    text-transform: uppercase;
    color: #464646;
    animation-name: spin, depth;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 4.5s;
}
@keyframes spin {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(-360deg);
    }
  }
  @keyframes depth {
    0% {
      text-shadow: 0 0 #464646;
    }
    25% {
      text-shadow: 1px 0 #464646, 2px 0 #464646, 3px 0 #464646, 4px 0 #464646, 5px 0 #464646;
    }
    50% {
      text-shadow: 0 0 #464646;
    }
    75% {
      text-shadow: -1px 0 #464646, -2px 0 #464646, -3px 0 #464646, -4px 0 #464646,
        -5px 0 #464646;
    }
    100% {
      text-shadow: 0 0 #464646;
    }
  }

.about-img img, .about-img2 img{
    -webkit-transform: scale(1.2);
	transform: scale(1.2);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.about-img img:hover, .about-img2 img:hover{
    -webkit-transform: scale(1);
	transform: scale(1);
}

.pricing-container img {
	-webkit-transform: rotate(15deg) scale(1.1);
	transform: rotate(15deg) scale(1.1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.pricing-container img:hover{
	-webkit-transform: rotate(0) scale(1);
	transform: rotate(0) scale(1);
}

#footer h3{
    background-image: linear-gradient(
    -225deg,
    #030f29 0%,
    #477de9 29%,
    #2f3a4f 67%,
    #124cb8 100%
  );
  background-clip: text;
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    animation: flip 2s infinite, textclip 1s linear infinite;
    animation-delay: 0.5s;
  }
  @keyframes flip {
    0%,80% {
      transform: rotateY(360deg) 
    }
  }