#preloader .progress-container {
  width: 80%;
  max-width: 300px;
  height: 10px;
  background-color: #333;
  border-radius: 5px;
  margin-top: 25px;
  overflow: hidden;
  border: 1px solid #444;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

#preloader .progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #d37c0b, #FFCD00);
  border-radius: 5px;
  transition: width 0.4s ease-out; /* Smooth animation for the bar */
}

#preloader .progress-text {
  margin-top: 15px;
  color: #FFCD00;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-shadow: 0 0 5px rgba(255, 205, 0, 0.4);
}

.form-feedback {
  width: 100%;
  padding: 15px;
  margin-top: 20px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  display: none; 
  grid-column: 1 / -1; 
}

.form-feedback.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.form-feedback.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Efecto hover para mejorar la interacción del usuario */
.contact-form select:hover {
    border-color: #d37c0b; /* Color de acento más oscuro al pasar el ratón */
}

/* Estilo para las opciones dentro del desplegable */
/* Nota: La personalización de las opciones tiene soporte limitado y puede no ser visible en todos los navegadores */
.contact-form select option {
    background: #1f1f1fd3; /* Fondo oscuro consistente con el tema */
    color: #f0f0f0;      /* Texto claro para legibilidad */
}

@media (max-width: 768px) {
    .contact-form select {
        padding: 10px 12px; /* Ajusta el padding para que sea más cómodo al tacto */
        font-size: 0.8rem;  /* Reduce ligeramente el tamaño de la fuente para que no se vea tan grande */
    }
}

/* Para teléfonos móviles en vertical */
@media (max-width: 480px) {
    .contact-form label {
        font-size: 0.8rem; /* Reduce el tamaño de la etiqueta para ahorrar espacio */
    }

    .contact-form select {
        font-size: 0.8rem; /* Asegura que el texto del select coincida con la etiqueta */
    }
}

#subject option[value="cotizacion_maquinaria"] {
    font-weight: bold;
    
    color: #ffffff;           /* Color oscuro del sitio para el texto */
}