/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */


  /* Estilos del botón */
  .custom-button {
    background-color: #FFFFFF; /* Fondo blanco */
    border: 1px solid #02338A; /* Borde azul */
    color: #02338A; /* Color del texto azul */
    padding: 0 0 0 10px; /* Padding ajustado */
    border-radius: 30px; /* Bordes redondeados más suaves */
    font-size: 16px; /* Tamaño del texto */
    font-family: 'Oswald', sans-serif; /* Fuente Oswald */
    font-weight: 200; /* Extra Light */
    text-transform: uppercase; /* Letras en mayúsculas */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    display: flex;
    align-items: center;
    transition: background-color 0.3s, color 0.3s; /* Transición suave */
  }

  .custom-button .arrow-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px; /* Ancho del círculo */
    height: 24px; /* Alto del círculo */
    border-radius: 50%; /* Círculo perfecto */
    background-color: #FFFFFF; /* Fondo blanco */
    border: 1px solid #02338A; /* Borde azul */
    margin: 5px 5px 5px 100px;
  }

  .custom-button .arrow {
    font-size: 18px; /* Tamaño del icono */
    color: #02338A; /* Color de la flecha */
  }

  /* Efecto hover */
  .custom-button:hover {
    background-color: #02338A; /* Cambia el color de fondo */
    color: #FFFFFF; /* Cambia el color del texto */
  }

  /* Efecto al presionar */
  .custom-button:active {
    transform: scale(0.95); /* Disminuye ligeramente el tamaño */
  }