.form-control-dark {
  border-color: var(--bs-gray);
}
.form-control-dark:focus {
  border-color: #fff;
  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
}

.text-small {
  font-size: 85%;
}

.dropdown-toggle:not(:focus) {
  outline: 0;
}

.custom-btn {
  background-color: #FBCEB1 !important;
  color: #ffffff !important;
}

.custom-btn:hover {
  background-color: #ff8583 !important;  /* Cambia a tu color de hover deseado */
  color: hsla(0, 0%, 96%, 0.842) !important;
}

.nav-item a:hover {
  color: #FBCEB1 ; /* Cambia a tu color preferido */
}


.header {
  height: 60px;
  /* Otros estilos del navbar... */
}

.navbar-container {
  height: 60px;  /* o cualquier altura que desees */
  overflow: hidden;  /* para evitar que el contenido exceda el contenedor */
}








/* circle animation */

.animation-container {
  position: relative;
  width: 350px;
  height: 50px;
  overflow: hidden;
}

.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  left: 0;
  animation: moveCircle 1.25s linear infinite;  /* Duración cambiada a 10s */
}

@keyframes moveCircle {
  0%, 100% { left: 0; }  /* Inicia y termina en la posición inicial */
  80% { left: 300px; }   /* Se mueve hasta el final en el 80% del tiempo */
}




/* Estilo que define que los enlaces y los SVG dentro del nav tendrán color negro */
.dark-theme-nav .nav-link, 
.dark-theme-nav .nav-link svg {
    color: black !important;
}




.custom-dropdown:hover {
  color: #FBCEB1 !important;
}

.custom-dropdown:active {
  color: #FBCEB1 !important;
}

.custom-dropdown:active, .custom-dropdown:focus {
  color: #FBCEB1 !important;
}

.dropdown-item:active{
  background-color: #1a1a1a19;
}