body {
  font-family: Arial, sans-serif;
  background-color: aqua; /* Soft gray background */
  margin: 0;
  padding: 0;
}

/* Center align heading elements */
h1, h2 {
  text-align: center;
}

/* Container for the multi-step form */
#multi-step-form-container {
  margin-top: 1rem;
  max-width:   1000px;
  margin:  auto;
  padding: 2rem;
  background-color: white; /* White background */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
}
.span{
text-align: center
}

/* Center align text elements */
.text-center {
  text-align: center;
}

/* Center align elements horizontally */
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* Remove left padding */
.pl-0 {
  padding-left: 0;
}

/* Common button styles */
.button, .submit-btn {
  padding: 1rem 3rem;
  border: none;
  background-color: #7ac7fd; /* Aqua button */
  color: white;
  border-radius: 8rem;
  cursor: pointer;
  text-align: center;
  font-size: 1.2rem;
  transition: background-color 0.3s, transform 0.2s;
}

.submit-btn {
  background-color: #71a8b2; /* Slightly darker aqua button */
  font-weight: bold;
}

.button:hover, .submit-btn:hover {
  background-color: #6a9ca5; /* Darker aqua on hover */
  transform: scale(1.05);
}

.submit-btn:active {
  background-color: #5b8c95; /* Darker aqua on active */
  transform: scale(0.98);
}

/* Add spacing at the top */
.mt-3 {
  margin-top: 5rem;
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

/* Hide element */
.d-none {
  display: none;
}

/* Container styles */
.container {
  max-width: 200px;
  margin: 0 auto;
  padding: 2rem;
  background-color: white-smoke; /* White background */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 0px;
}

/* Form header styles */
.form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.form-header h1 {
  margin: 0;
  color: #a5d1e2; /* Aqua color */
}

/* Form step styles */
.form-step {
  margin-bottom: 1rem;
  background-color: white; /* Soft gray background */
  padding: 1rem;
  border-radius: 10px;
}

.form-step h2 {
  margin-bottom: 1rem;
}

/* Styling for input fields */
.cuadros {
 width: 100%;
padding: 20px;
margin-bottom: 10px;
border: 1px solid;
border-radius: 4px;
font-size: 1.2rem;
}

/* Rating styles */

.rating {
display: flex;
justify-content: center;
}

.rating-item {
text-align: center;
margin: 10px;
}

.rating-input {
display: none;
}

.rating-input:checked + label img {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
border-radius: 50%;
animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
0% {
  transform: scale(1);
}
50% {
  transform: scale(1.1);
}
100% {
  transform: scale(1);
}
}
/* Estilo para el select */
#room {
width: 90%;
padding: 20px;
margin-bottom: 30px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1.2rem;


}

#room:hover,
#room:focus {
/* Cambio de color del borde en hover y focus */
}


/* Button container for centering */
.button-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
/* Agrega regla de medios para estilos responsivos */
@media screen and (max-width: 1318px) {
  /* Ajusta el padding del formulario en dispositivos pequeños */
   img {
  max-width: 70%;
  height: auto;
}
  #multi-step-form-container {
         margin-top: 1rem;
  max-width: 100%;
  margin:  auto;
  padding: 2rem;
  background-color: white; /* White background */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  }
  
  /* Ajusta el tamaño de fuente para pasos y botones en dispositivos pequeños */
  .form-step h2, .button, .submit-btn {
      font-size: 1rem;
  }
  
  /* Ajusta el tamaño de fuente para campos de entrada en dispositivos pequeños */
.cuadros {
 width: 90%;
padding: 5%;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1.2rem;
}
  
  /* Ajusta el tamaño de las imágenes en la evaluación en dispositivos pequeños */
  .rating-item label img {
      width: 100px;
      height: 120px;
  }
  .select {
     width: 90%;
padding: 20px;
   
  }
     #room {
     width: 90%;

  }
  
  /* Ajusta el tamaño de fuente para el select en dispositivos pequeños */
  
}

@media screen and (max-width: 600px) {
  /* Ajusta el padding del formulario en dispositivos pequeños */
   img {
  max-width: 70%;
  height: auto;
}
  #multi-step-form-container {
         margin-top: 1rem;
  max-width: 100%;
  margin:  auto;
  padding: 2rem;
  background-color: white; /* White background */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  }
  
  /* Ajusta el tamaño de fuente para pasos y botones en dispositivos pequeños */
  .form-step h2, .button, .submit-btn {
      font-size: 1rem;
  }
  
  /* Ajusta el tamaño de fuente para campos de entrada en dispositivos pequeños */
.cuadros {
 width: 90%;
padding: 5%;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1.2rem;
}
  
  /* Ajusta el tamaño de las imágenes en la evaluación en dispositivos pequeños */
  .rating-item label img {
      width: 50px;
      height: 50px;
  }
  .select {
     width: 90%;
padding: 20px;
   
  }
     #room {
     width: 90%;

  }
  
  /* Ajusta el tamaño de fuente para el select en dispositivos pequeños */
  
}