:root {
  --content-font: "Josefin Sans";
  /* --title-font: "Fira Sans", sans-serif; */
  --title-font: "Raleway", sans-serif;
  --blue-color: #16549D;
  --blue-dark-color: #083d7b;
  --green-color: #8bad3d;
}

@keyframes zoomInfinite {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.animate-zoomInfinite {
  animation: zoomInfinite 10s ease-in-out infinite;
}

/* animation css */
@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.float-y {
  animation: floatY 2.5s ease-in-out infinite;
}

.flip-image-box {
  /* width: 18px;
  height: 18px; */
  /* margin: 100px auto; */
  perspective: 1000px;
}

.flip-image-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform-style: preserve-3d;
  animation: flipAllDirections 6s linear infinite;
}

@keyframes flipAllDirections {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateX(180deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(180deg) rotateY(180deg);
  }
  75% {
    transform: rotateX(0deg) rotateY(180deg);
  }
  100% {
    transform: rotateX(0deg) rotateY(0deg);
  }
}

@keyframes shine {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.3;
  }
}

/* @keyframes shine {
  0% {
    background-position-x: -500%;
  }
  100% {
    background-position-x: 500%;
  }
} */

.animate-shine {
  animation: shine 2s infinite ease-in-out;
}

.cube-loader {
  position: relative;
  width: 42px;
  height: 42px;
  margin: auto;
}

.cube {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #15539c;
  border: 2px solid #fff;
  animation: foldCube 2.4s infinite linear;
}

/* Individual cube positioning */
.cube1 {
  top: 0;
  left: 0;
  transform-origin: 100% 100%;
}
.cube2 {
  top: 0;
  right: 0;
  transform-origin: 0 100%;
}
.cube3 {
  bottom: 0;
  right: 0;
  transform-origin: 0 0;
}
.cube4 {
  bottom: 0;
  left: 0;
  transform-origin: 100% 0;
}

/* Keyframes for the folding animation */
@keyframes foldCube {
  0%,
  10% {
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%,
  75% {
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%,
  100% {
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

/* Animation delay for each cube */
.cube1 {
  animation-delay: 0.3s;
}
.cube2 {
  animation-delay: 0.6s;
}
.cube3 {
  animation-delay: 0.9s;
}
.cube4 {
  animation-delay: 1.2s;
}


/* .loader-title {
  text-align: center;
  font-size: 15px;
  font-family: Hack, sans-serif;
  text-transform: uppercase;
  background: var(--green-color);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-repeat: no-repeat;
  background-size: 100%;
  animation: shine 5s linear infinite;
  position: relative;
} */

#checkbox {
  display: none;
}

.toggle {
  position: relative;
  width: 40px;
  cursor: pointer;
  margin: auto;
  display: block;
  height: calc(4px * 3 + 11px * 2);
}

.bar {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: calc(4px / 2);
  background: var(--blue-dark-color);
  color: inherit;
  opacity: 1;
  transition: none 0.35s cubic-bezier(.5,-0.35,.35,1.5) 0s;
}

/***** Tornado Animation *****/

.bar--top {
  bottom: calc(50% + 11px + 4px/ 2);
  transition-property: bottom,transform;
  transition-delay: calc(0s + 0.35s) * .6;
}

.bar--middle {
  top: calc(50% - 4px/ 2);
  transition-property: opacity,transform;
  transition-delay: calc(0s + 0.35s * .3);
}

.bar--bottom {
  top: calc(50% + 11px + 4px/ 2);
  transition-property: top,transform;
  transition-delay: 0s;
}

#checkbox:checked + .toggle .bar--top {
  transform: rotate(-135deg);
  transition-delay: 0s;
  bottom: calc(50% - 4px/ 2);
}

#checkbox:checked + .toggle .bar--middle {
  opacity: 0;
  transform: rotate(-135deg);
  transition-delay: calc(0s + 0.35s * .3);
}

#checkbox:checked + .toggle .bar--bottom {
  top: calc(50% - 4px/ 2);
  transform: rotate(-225deg);
  transition-delay: calc(0s + 0.35s * .6);
}