@font-face {
    font-family: 'Rubik';
    src: url('fonts/Rubik-variable-font.ttf') format('truetype');
    font-weight: 100 900; /* Adjust the range as needed */
    font-style: normal; /* You can also specify italic if you have an italic version */
}

body {
    font-family: 'Rubik', sans-serif; /* Fallback to sans-serif if Rubik is not available */

}

.animated-text span {
          display: inline-block;
          opacity: 0;
          animation: fade 2.4s linear infinite;
        }

        @keyframes fade {
          0%, 100% { opacity: 0; }
          10%, 40% { opacity: 1; }
          60%, 90% { opacity: 0; }
        }

        /* Forward appear delay */
        .animated-text span:nth-child(1) { animation-delay: 0s; }
        .animated-text span:nth-child(2) { animation-delay: 0.2s; }
        .animated-text span:nth-child(3) { animation-delay: 0.4s; }
        .animated-text span:nth-child(4) { animation-delay: 0.6s; }
        .animated-text span:nth-child(5) { animation-delay: 0.8s; }
        /*.animated-text span:nth-child(6) { animation-delay: 1s; }*/

        /* Reverse disappear delay (starts after full appear) */
        .animated-text span:nth-child(6)::after {
          content: '';
          animation-delay: 1.0s;
        }

.center {
    margin: 0;
    position: absolute;
    width: 75%;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
    height: 220px;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.tagline {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
    height: 300px;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.loader {
  border: 5px solid #184A90;
  border-radius: 50%;
  border: 5px solid ;
  border-top: 5px solid #184A90;
  border-right: 5px solid white;
  border-bottom: 5px solid #184A90;
  border-left: 5px solid white;
  width: 220px;
  height: 220px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 1s infinite ease-in-out;
//  animation: dash 2s infinite ease-in-out;
  border-radius: 50%;
  border-top: 2px solid #184A90;
  display: inline-block;
    width: 220px;
    height: 220px;
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}