@charset "utf-8";
/* CSS Document */



/* Estilos generales */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Altura mínima igual al viewport */
	background: #0a3c79;
}

/* Navbar */
        .navbar {
            background-color: #ffffff;
            padding: 1rem;
        }

        .navbar-brand {
            font-weight: bold;
            margin-right: 55px;
			font-family: "fillip", sans-serif;
            font-style: normal;
            color: #ffae00;
            font-size: 1.5rem;
		    letter-spacing:1px; 
        }  

        .navbar-nav .nav-item {
            margin-right: 25px; /* Espacio de 20px entre cada botón */
        }

        .navbar-nav .nav-item:last-child {
            margin-right: 0; /* Quitar margen derecho del último elemento */
        }

        .nav-link {
            text-decoration: none;
            padding: 10px 15px;
            color: #ffb300;
            font-weight: bold;
            transition: background-color 0.3s ease;
            font-family: "fillip", sans-serif;
            font-style: normal;
            font-size: 1.5rem;
		    letter-spacing:1px; 
        }		

        .nav-link:hover {
            background-color: #f0f0f0;
            border-radius: 5px;
        }

   .navbar-nav.ms-auto .nav-item .nav-link {
            font-family: "fillip", sans-serif;
font-weight: 700;
font-style: normal;
            color: #ffae00;
            font-size: 1.5rem;
		    letter-spacing:1px; 
        }


/* Icono de la hamburguesa en estado normal */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffb300' stroke-width='2' d='M4 7h22M4 15h22M4 23h22' /%3E%3C/svg%3E");
}

/* Cambia el color del icono a blanco en hover y focus */
.navbar-toggler:hover .navbar-toggler-icon,
.navbar-toggler:focus .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2' d='M4 7h22M4 15h22M4 23h22' /%3E%3C/svg%3E");
}

/* Cambiar el color de fondo del botón de hamburguesa */
.navbar-toggler {
    border-color: #ffb300; /* Color del borde en estado normal */
}

/* Estilo para el botón al hacer hover o estar activo */
.navbar-toggler:focus, .navbar-toggler:hover {
    background-color:  #ffb300; /* Fondo del botón en hover o foco */
    border-color: #ffb300;
}



/* Hero Section */

@media (max-width: 767px) {
  .segunda-columna {
    order: -1;	 
	  display: flex;
	  justify-content: center;
      align-items: center; /* Asegura que esté centrada verticalmente */
	  width: 100%; /* Asegura que la columna tome todo el ancho disponible */
	  height: 100%; 
	  
 
  }
}

.segunda-columna {
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
}

        .hero {
         
			background-image: url("../images/circles.svg"), radial-gradient(circle at 20% 25%, #ffffff, #2ab4e2,#008ada );
			background-position: 90% 90%;
			background-opacity: 0.5;
			background-size: cover;
			background-repeat: no-repeat;
            padding: 50px 0;
            color: #fff;
            text-align: center;
            position: relative;
        }

        .hero .container {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 20px 60px;
        }

       .text-content {
         flex: 1;
            max-width: 60%; /* Limita el ancho del texto para que no sea demasiado largo */
            padding-right: 20px;
           text-align: left; /* Alinea el texto a la izquierda */
        }

       .hero-title {
            font-size: clamp(2rem, 3vw, 6rem);

		    font-family: "marvin", sans-serif;
            font-weight: 400;
            font-style: normal;
		    color: #015597;
	
		    text-shadow: 
		3px 3px 0 white, 
        -3px 3px 0 white, 
        3px -3px 0 white, 
        -3px -3px 0 white, 
        3px 0px 0 white, 
        -3px 0px 0 white, 
        0px 3px 0 white, 
        0px -3px 0 white,
	    0px 0px 9px #000000; 
            /* Ajusta la altura de línea para distribuir mejor el texto */
           
		   text-align: left; /* Alinea el texto a la izquierda */

        }

@media (max-width:767px) { /* Adjust breakpoint as needed */
   .hero-title{
       text-align: center
    }
}

       .hero-subtitle {
          
		    text-align: left; /* Alinea el texto a la izquierda */
		   font-size: clamp(.8rem, 1vw, 1.5rem);
            line-height: 1.4; /* Ajusta la altura de línea para mejor distribución */
          
		    color: #ffffff;
		    font-family: "open-sans", sans-serif;
            font-weight: 700;
            font-style: normal;
		    max-width: 70%;
		    text-shadow: 

	    0px 0px 5px #000000; 
        }

@media (max-width:767px) { /* Adjust breakpoint as needed */
   .hero-subtitle{
       text-align: center;
		    max-width: 100%;
      }
  }	

.book-here {
	        text-align: left; /* Alinea el texto a la izquierda */
		    font-size: clamp(1rem, 1.5vw, 1.5rem);
            line-height: 1.4; /* Ajusta la altura de línea para mejor distribución */
          
		    color: #ffae00;
		    font-family: "marvin", sans-serif;
            font-weight: 700;
	        max-width: 60%;
            font-style: normal;
 text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000,
	 0px 0px 4px #000000;
	   text-decoration: none;
	
}

@media (max-width:767px) { /* Adjust breakpoint as needed */
   .book-here{
       text-align: center;
		    max-width: 100%;
	
      }
  }	
a:hover {
  text-decoration: none;
	color: #41d7dd;
}

       .logo {
            position: relative;
		    width: 30vw;
		    max-width: 90%; /*  Esto evita que el logotipo se vuelva demasiado grande y se salga de la pantalla en dispositivos más pequeños.*/
		     margin: 0 auto;
		   justify-content: flex-end;
        }

@media (max-width:767px) { /* Adjust breakpoint as needed */
    .logo {
        width: 50vw; /* Adjust width for mobile */
       
		max-height: 80%;
		max-width: 80%;
		margin: 0 auto;
		text-align: center;
		padding-bottom: 30px;
    }
}

/* Video Container */
.video-container {
    max-width: 60vw;
	 position: relative;
    margin: 70px auto 40px; /* Mantiene los márgenes superior e inferior */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

}



.splash {
  position: absolute;
 bottom: 20px; /* Espacio de 20px entre la imagen y el iframe */
  left: 50%;
  transform: translateX(-50%); /* Centra la imagen horizontalmente */
  width: 80%; /* Ajusta el ancho de la imagen al ancho del contenedor */
}

/* Footer */
      
.footer {
    background-color: #015597;
    color: #fff;
	font-size:1rem; 
    padding: 10px 0;
    width: 100%;
    text-align: center;
}

.social-icons {
	padding: 10px;
	margin-top: 10px;
}

.social-link {
    color: #fff;
    font-size: 30px;
    margin: 0 10px;
    transition: color 0.3s;
}

.social-link:hover {
    color: #ffae00; /* Cambia a tu color preferido al pasar el cursor */
}
      
    

.FAQ{
	text-align: center;
	padding-bottom: 20PX;
	
}

.question-text {
   text-align:center; /* Alinea el texto a la izquierda */
		    font-size: clamp(1rem, 1.5vw, 1.5rem);
            line-height: 1.4; /* Ajusta la altura de línea para mejor distribución */
          
		    color: #ffae00;
		    font-family: "marvin", sans-serif;
            font-weight: 700;
	       
            font-style: normal;
 text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000,
	 0px 0px 4px #000000;
	   text-decoration: none;
}

.question-text:hover{
	text-decoration: none;
	color: #41d7dd;
}

.question-text:active{
	text-decoration: none;
}

.question-text:checked{
	text-decoration: none;
}

.question-text:enabled{
	text-decoration: none;
}
.answer-text {
     
		    font-size: clamp(.8rem, 1vw, 1.5rem);
            line-height: 1.4; /* Ajusta la altura de línea para mejor distribución */
		    color: #0a3c79;
		    font-family: "open-sans", sans-serif;
            font-weight: 700;
            font-style: normal;


}
/* Estilos para el footer */


.house-container{
	width: 100vw;
}

.form-container {
    margin: 0 auto;
    background-color:rgba(255, 255, 255, 0.5); /* Fondo semitransparente */
    border-radius: 8px;
    padding: 20px;
}



.hero form {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para el formulario */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    margin: 0 auto; /* Centrar el formulario */
    width: 100%; /* Asegúrate de que el formulario use el ancho completo disponible */
    box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
}

.hero .form-group {
    margin-bottom: 1rem; /* Espaciado entre campos del formulario */
}

.hero .btn-primary {
    background-color: #008ada; /* Color del botón */
    border-color: #0077cc; /* Borde del botón */
}

.hero .btn-primary:hover {
    background-color: #0077cc; /* Color del botón al pasar el cursor */
    border-color: #005fa3; /* Borde del botón al pasar el cursor */
}

.contact-info{
	  font-size: clamp(1rem, 2vw, 1.5rem);
            line-height: 1.4; /* Ajusta la altura de línea para mejor distribución */
		    color: #0a3c79;
		    font-family: "open-sans", sans-serif;
            font-weight: 700;
            font-style: normal;

}

.contact-info h5{
	  		 text-align:center; /* Alinea el texto a la izquierda */
		    font-size: clamp(1rem, 1.5vw, 1.5rem);
            line-height: 1.4; /* Ajusta la altura de línea para mejor distribución */
          
		    color: #ffae00;
		    font-family: "marvin", sans-serif;
            font-weight: 700;
	       
            font-style: normal;
 text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000,
	 0px 0px 4px #000000;
	   text-decoration: none;
}


.form-container-form {
   color: #ffae00;
		    font-family: "marvin", sans-serif;
}

/* Ajustar el color de los textos en los labels */
.form-container-form label {
   color: #ffae00; /* Cambia el color del texto de las etiquetas (labels) */
}

/* Ajustar el color del texto en los placeholders */
.form-control-form::placeholder {
color: #0a3c79; /* Cambia el color del texto en los placeholders de los campos del formulario */
}





.aboutus {
            position: relative;
		    width: 80vw;
		    max-width: 90%; /*  Esto evita que el logotipo se vuelva demasiado grande y se salga de la pantalla en dispositivos más pequeños.*/
		     margin: 0 auto;
		   justify-content: flex-end;
        }