.text-sm {
    font-size: 0.625rem; /* 10px */
}

.text-base {
    font-size: 1rem; /* 16px */
}

.text-lg {
    font-size: 1.125rem; /* 18px */
}

.text-xl {
    font-size: 1.25rem; /* 20px */
}

.branding-chart svg text {
    color: white !important;
}


/* parallax */
.body-float {
  position: absolute;
  overflow: hidden; 
  width: 95%;
  height: 100vh;
}



.floating-object {
  position: absolute;
  animation-timing-function: linear;
  opacity: 0.3;
}

/* Object 1 - Small square with slow movement */
.floating-object.obj1 {
  width: 25px;
  height: 25px;
  background-color: #333; /* Dark gray for contrast */
  animation: float1 25s infinite;
  border-radius: 0%; /* Square */
}

.floating-object.obj2 {
  width: 30px;
  height: 30px;
  background-color: #555; /* Medium gray */
  animation: float2 30s infinite;
  border-radius: 5%; /* Rounded square */
}

.floating-object.obj3 {
  width: 35px;
  height: 35px;
  background-color: #777; /* Lighter gray */
  animation: float3 35s infinite;
  border-radius: 10%; /* Rounded rectangle */
}

.floating-object.obj4 {
  width: 40px;
  height: 40px;
  background-color: #999; /* Light gray */
  animation: float4 40s infinite;
  border-radius: 20%; /* Rounded rectangle */
}

.floating-object.obj5 {
  width: 45px;
  height: 45px;
  background-color: #ccc; /* Very light gray */
  animation: float5 45s infinite;
  border-radius: 50%; /* Circle */
}

.floating-object.obj6 {
  width: 30px;
  height: 30px;
  background-color: #222; /* Very dark gray */
  animation: float6 50s infinite;
  border-radius: 10px; /* Rounded square */
}

.floating-object.obj7 {
  width: 35px;
  height: 35px;
  background-color: #888; /* Light gray */
  animation: float7 55s infinite;
  border-radius: 50%; /* Circle */
}

.floating-object.obj8 {
  width: 40px;
  height: 40px;
  background-color: #444; /* Dark gray */
  animation: float8 60s infinite;
  border-radius: 5%; /* Rounded square */
}

.floating-object.obj9 {
  width: 25px;
  height: 25px;
  background-color: #bbb; /* Medium gray */
  animation: float9 65s infinite;
  border-radius: 20%; /* Rounded rectangle */
}

.floating-object.obj10 {
  width: 50px;
  height: 50px;
  background-color: #666; /* Neutral gray */
  animation: float10 70s infinite;
  border-radius: 50%; /* Circle */
}

/* Keyframes for random slow floating effects */

@keyframes float1 {
  0% {
    transform: translateX(0vw) translateY(100vh);
  }
  50% {
    transform: translateX(100vw) translateY(100vh);
  }
  100% {
    transform: translateX(0vw) translateY(0vh);
  }
}

@keyframes float2 {
  0% {
    transform: translateX(100vw) translateY(0vh);
  }
  50% {
    transform: translateX(0vw) translateY(100vh);
  }
  100% {
    transform: translateX(100vw) translateY(0vh);
  }
}

@keyframes float3 {
  0% {
    transform: translateX(0vw) translateY(0vh);
  }
  50% {
    transform: translateX(100vw) translateY(100vh);
  }
  100% {
    transform: translateX(0vw) translateY(0vh);
  }
}

@keyframes float4 {
  0% {
    transform: translateX(0vw) translateY(100vh);
  }
  50% {
    transform: translateX(50vw) translateY(50vh);
  }
  100% {
    transform: translateX(0vw) translateY(100vh);
  }
}

@keyframes float5 {
  0% {
    transform: translateX(100vw) translateY(0vh);
  }
  50% {
    transform: translateX(50vw) translateY(50vh);
  }
  100% {
    transform: translateX(100vw) translateY(0vh);
  }
}

@keyframes float6 {
  0% {
    transform: translateX(0vw) translateY(100vh);
  }
  50% {
    transform: translateX(80vw) translateY(80vh);
  }
  100% {
    transform: translateX(0vw) translateY(100vh);
  }
}

@keyframes float7 {
  0% {
    transform: translateX(100vw) translateY(0vh);
  }
  50% {
    transform: translateX(10vw) translateY(90vh);
  }
  100% {
    transform: translateX(100vw) translateY(0vh);
  }
}

@keyframes float8 {
  0% {
    transform: translateX(0vw) translateY(100vh);
  }
  50% {
    transform: translateX(100vw) translateY(0vh);
  }
  100% {
    transform: translateX(0vw) translateY(100vh);
  }
}

@keyframes float9 {
  0% {
    transform: translateX(100vw) translateY(0vh);
  }
  50% {
    transform: translateX(50vw) translateY(50vh);
  }
  100% {
    transform: translateX(100vw) translateY(0vh);
  }
}

@keyframes float10 {
  0% {
    transform: translateX(0vw) translateY(0vh);
  }
  50% {
    transform: translateX(100vw) translateY(100vh);
  }
  100% {
    transform: translateX(0vw) translateY(0vh);
  }
}

/* Adding animation delays to make objects float at different times */
.floating-object.obj1 {
  animation-delay: 0s;
}

.floating-object.obj2 {
  animation-delay: 2s;
}

.floating-object.obj3 {
  animation-delay: 4s;
}

.floating-object.obj4 {
  animation-delay: 6s;
}

.floating-object.obj5 {
  animation-delay: 8s;
}

.floating-object.obj6 {
  animation-delay: 10s;
}

.floating-object.obj7 {
  animation-delay: 12s;
}

.floating-object.obj8 {
  animation-delay: 14s;
}

.floating-object.obj9 {
  animation-delay: 16s;
}

.floating-object.obj10 {
  animation-delay: 18s;
}