:root {
  /* Rhodium Brand Colors (from logo) */
  --rhodium-indigo: #332A75;
  --rhodium-blue: #8D95A3;
  --rhodium-cyan: #32A3B7;
  --rhodium-blue1: #2596be;
  --rhodium-light: #F8FAFC;
  --rhodium-white: #FEFEFE;
  --rhodium-light-black : #060606;

   

}
html, body {
  height: 100%;
}
/* Text Colors */
.text-brand-primary {
  color: var(--rhodium-indigo);
}

.text-brand-secondary {
  color: var(--rhodium-light-black);
}

.text-brand-secondary2 {
  color: var(--rhodium-blue);
}

/* Background Colors */
.bg-brand-primary {
  background-color: var(--rhodium-indigo);
}

.bg-brand-cyan {
  background-color: var(--rhodium-indigo);
}

.bg-brand-blue1 {
  background-color: var(--rhodium-blue1);
}

.bg-brand-secondary {
  background-color: var(--rhodium-blue);
}

.bg-brand-gradient {
  background: linear-gradient(
    90deg,
    var(--rhodium-indigo),
    var(--rhodium-cyan)
  );
}

/* Hover */
.hover-brand:hover {
  color: var(--rhodium-indigo);
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOnceRTL {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-60%);
  }
}

.auto-slide-once {
  animation: slideOnceRTL 12s ease-out forwards;
}