/* General Reset and Box-Sizing */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Basic Body Styling */
body {
  font-size: 14px;
}

.main-title{
  text-align: center;
}

.background-container {
  background: linear-gradient(rgba(131, 87, 242, 1), rgba(75, 50, 140, 1));
  padding-left: 30px;
  position: relative;
}

.background-container img {
  width: 308px;
  height: auto;
  margin: 0 auto; /* Center horizontally */
  max-width: 100%; /* Ensure responsiveness */
}

/* Clase para aumentar el tamaño del texto */
.text-large {
  font-size: 1.2em; /* Ajusta el tamaño del texto según tus necesidades */
  /* Opcional: puedes añadir otras propiedades como color, peso de fuente, etc. */
  /* color: #333; */
  /* font-weight: bold; */
}
/* Estilo del botón personalizado */
.btn-custom {
  background-color: #7750E1;
  color: #fff;
  padding: 8px 18px;
  border: 2px solid #ad97ee;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1em;
  width: auto; /* Ancho automático del botón */
  transition: background-color 0.3s ease; /* Transición suave para el efecto hover del botón */
}

.btn-custom:hover {
  background-color: #4D3689;
  color: #f0f0f0;
}


/* Centrar las etiquetas del place holder */
::placeholder {
  text-align: center; /* Centra el texto del placeholder */
  font-size: 1rem; /* Asegúrate de que coincida con el tamaño de fuente del campo de entrada */
}

/* Ajusta el tamaño de la fuente para la etiqueta */
label[for="phone"] {
  font-size: 1.1rem; /* Puedes ajustar este valor según tu preferencia */
}

.center-div {
  display: flex;
  justify-content: center;
  align-items: center;
}

#mensaje {
    background-color: #e6dcff; /* Morado pastel */
    color: #000000; /* Color del texto negro */
    padding: 15px; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    border: 1px solid #000000; /* Borde morado pastel */
    margin: 20px 0; /* Espaciado arriba y abajo del contenedor */
    font-size: 1.2em; /* Tamaño del texto */
    text-align: center; /* Centrar el texto */
    /* font-weight: bold;  Texto en negrita */
}

/* centrar form */
.custom-width-container {
  max-width: 500px; /* Ajusta el ancho máximo del contenedor según lo necesites */
  margin: 0 auto; /* Centra el contenedor horizontalmente */
  text-align: center;
}

.form-control {
  text-align: center; /* Centra el texto dentro del campo de entrada */
}


/* Contenedor de los botones */
.btn-container {
  display: flex; /* Usa Flexbox */
  justify-content: space-around; /* Centra los botones horizontalmente */
}


/* Ocultar flechas en Firefox */
input[type="number"] {
  -moz-appearance: textfield; /* Oculta las flechas en Firefox */
}

/* Ocultar flechas en Chrome, Safari y Edge (Chromium) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; /* Oculta las flechas en WebKit y Blink */
  margin: 0; /* Opcional: Elimina el margen */
}

/* Compatibilidad con versiones antiguas de Edge */
input[type="number"] {
  -ms-appearance: none; /* Puede no ser necesario para versiones modernas */
}