/* for animate.css */
.custom-delay-0-25s {
  animation-delay: 0.25s;
}
.custom-delay-0-5s {
  animation-delay: 0.5s;
}
.custom-delay-1-25s {
  animation-delay: 1.25s;
}


.custom-delay-1-5s {
  animation-delay: 1.5s;
}
.custom-delay-1-75s {
  animation-delay: 1.75s;
}

.custom-delay-2-5s {
  animation-delay: 2.5s;
}

/* fade- */
@keyframes fade-in-left-big {
0% {
    transform: translateX(-100%);
    opacity: 0;
}
100% {
    transform: translateX(0);
    opacity: 1;
}
}

.fade-in-left-big {
animation: fade-in-left-big 0.5s ease-in 0.5s both;
}
.fade-in-left-delay-1s {
animation: fade-in-left-big 0.5s ease-in 1s both;
}
.fade-in-left-delay-1halfs {
animation: fade-in-left-big 0.5s ease-in 1.5s both;
}
.fade-in-left-delay-2s {
animation: fade-in-left-big 0.5s ease-in 2s both;
}
.fade-in-left-delay-3s {
animation: fade-in-left-big 0.5s ease-in 3s both;
}

@keyframes fade-in-left {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.fade-in-left {
animation: fade-in-left 0.5s ease-in 0.5s both;
}
.fade-in-left-delay-1s {
animation: fade-in-left 0.5s ease-in 1s both;
}
.fade-in-left-delay-1halfs {
animation: fade-in-left 0.5s ease-in 1.5s both;
}
.fade-in-left-delay-2s {
animation: fade-in-left 0.5s ease-in 2s both;
}
.fade-in-left-delay-3s {
animation: fade-in-left 0.5s ease-in 3s both;
}

@keyframes fade-in-bottom {
0% {
  transform: translateY(50px);
  opacity: 0;
}
100% {
  transform: translateY(0);
  opacity: 1;
}
}

.fade-in-bottom {
animation: fade-in-bottom 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.5s both;
}
.fade-in-bottom-delay-1s {
animation: fade-in-bottom 1.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.5s both;
}

@keyframes fade-in {
0% {
  opacity: 0;
}
100% {
  opacity: 1;
}
}
.fade-in{
  animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0s both;  
}
.fade-in-0-5-faster{
  animation: fade-in 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0s both;  
}

.fade-in-delay-1s {
animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s both;
}

.fade-in-delay-1halfs {
animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1.5s both;
}

.fade-in-delay-2s{
animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 2s both;
}

.fade-in-delay-2halfs{
animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) 2.5s both;
}

@keyframes fade-in-top {
0% {
  transform: translateY(-50px);
  opacity: 0;
}
100% {
  transform: translateY(0);
  opacity: 1;
}
}

.fade-in-top-delay-2s {
animation: fade-in-top 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 2s both;
}
.fade-in-top-delay-2halfs {
animation: fade-in-top 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) 2.5s both;
}

/* bounce-*/

@keyframes bounce-in-top {
0% {
  transform: translateY(-500px);
  animation-timing-function: ease-in;
  opacity: 0;
}
38% {
  transform: translateY(0);
  animation-timing-function: ease-out;
  opacity: 1;
}
55% {
  transform: translateY(-65px);
  animation-timing-function: ease-in;
}
72% {
  transform: translateY(0);
  animation-timing-function: ease-out;
}
81% {
  transform: translateY(-28px);
  animation-timing-function: ease-in;
}
90% {
  transform: translateY(0);
  animation-timing-function: ease-out;
}
95% {
  transform: translateY(-8px);
  animation-timing-function: ease-in;
}
100% {
  transform: translateY(0);
  animation-timing-function: ease-out;
}
}
.bounce-in-top-delay-2halfs {
animation: bounce-in-top 1s 2.5s both;
}

@keyframes bounce-top {
  0% {
    transform: translateY(-45px);
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    transform: translateY(-24px);
    animation-timing-function: ease-in;
  }
  65% {
    transform: translateY(-12px);
    animation-timing-function: ease-in;
  }
  82% {
    transform: translateY(-6px);
    animation-timing-function: ease-in;
  }
  93% {
    transform: translateY(-4px);
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translateY(0px);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  }
  .bounce-top {
  animation: bounce-top 5s forwards;
  }
  
  .bounce-top-delay-5s {
  animation: bounce-top 5s 6s forwards;
  }
  
  .bounce-top-delay-10s {
  animation: bounce-top 5s 11s forwards;
  }

/* slide- */
@keyframes slide-in-left {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left {
  animation: slide-in-left 0.5s ease-out forwards;
}


@keyframes slide-in-right {
  0% {
    transform: translateX(1000px); /* Start off-screen to the right */
    opacity: 0;
  }
  100% {
    transform: translateX(0); /* End at the original position */
    opacity: 1;
  }
}
.slide-in-right {
animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s both;
}
.slide-in-right-delay-1s {
  animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
  }


/* puff- */
@keyframes puff-in-center {
0% {
  transform: scale(2);
  filter: blur(4px);
  opacity: 0;
}
100% {
  transform: scale(1);
  filter: blur(0px);
  opacity: 1;
}
}
.puff-in-center {
animation: puff-in-center 0.5s cubic-bezier(0.470, 0.000, 0.745, 0.715) 0.5 both;
}

/* rotate- */
@keyframes rotate-center {
0% {
  transform: rotate(0);
}
100% {
  transform: rotate(360deg);
}
}
.rotate-center {
animation: rotate-center 1s ease-in-out both;
}
.rotate-center-delay-3s{
animation: rotate-center 1s ease-in-out 3s both;
}
.rotate-center-delay-5s{
animation: rotate-center 1s ease-in-out 5s both;
}
.rotate-center-delay-10s{
animation: rotate-center 1s ease-in-out 10s both;
}

/* hover- */
.hover-effect {
transition: transform 0.3s ease-in-out; /* Smooth scaling */
}

.hover-effect:hover {
transform: scale(1.1); /* Enlarge the image slightly */
}
