@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

/* Estilos para el logo en la barra de navegación */
header {
	position: fixed;
	top: 0;
	width: 100%;
	left: 0;
	right: 0;
	height: 145px;
	color: #fff;
	z-index: 999;
	background-color: #fff;
}

body {
	margin-top: 160px;
	font-family: 'Roboto', sans-serif;
}

h2 {
	font-size: 0.8rem;
}

p {
	text-align: justify;
}

.navbar-brand {
	font-size: 24px;
	font-weight: bold;
	align-items: center;
	display: block;
	margin-bottom: 15px;
}

nav {
	background: #193863;
	position: fixed;
}

.container-dolar {
	display: flex;
	justify-content: center;
}

.iframe-container {
	margin: 10px;
}

.iframe-style {
	width: 320px;
	height: 260px;
	border-radius: 10px;
	box-shadow: 2px 4px 4px rgba(252, 123, 3, 0.967);
	display: flex;
	justify-content: center;
	border: 1px solid #FF5722;
}

/* Estilos para os elementos div dentro do container-pai */
.container-dolar>div {
	margin: 10px;
	/* Adicione margens para espaçamento entre os iframes */
}


/* Estilos para el enlace del logotipo */
.navbar-brand:hover {
	color: #193863;
	text-decoration: none;
}

.navbar-nav .nav-link {
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	/* Color del texto del enlace */
}

/* Estilos para el enlace del menú de navegación */
.navbar-nav .nav-link:hover {
	background-color: #FF9800;
	color: #fff;
	/* Cambia el color del texto en el hover */
}

.box {
	background-color: #fff;
	border-radius: 25px;
	line-height: 1.2;
	height: auto;
	padding: 20px;
	width: calc(50% - 25px);
	/* Calculamos el ancho de la caja para que sean 4 en una fila */
	border: 1px solid #385276;
	/* Agregamos un borde de 2px */
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	box-shadow: 2px 4px 4px rgba(252, 123, 3, 0.967);

}

.box-servicios {
	background-color: #fff;
	border-radius: 25px;
	line-height: 1;
	height: auto;
	padding: 20px;
	width: 100%;
	max-width: calc(25% - 10px);
	/* Calculamos el ancho de la caja para que sean 4 en una fila */
	border: 1px solid #385276;
	/* Agregamos un borde de 2px */
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	box-shadow: 2px 4px 4px rgba(252, 123, 3, 0.967);
}

.box-servicios li {
	font-size: 0.8rem;
}

.box-servicios h1 {
	font-size: 1.2rem;
}

.box-servicios h2 {
	font-size: 1rem;
}

.box-servicios.expandido {
	width: 100%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	padding: 20px;
	max-width: 70%;
	/* Defina a largura máxima para a janela flutuante */
	max-height: 100%;
	/* Defina a altura máxima para a janela flutuante */
	overflow-y: auto;
	/* Adiciona uma barra de rolagem vertical se o conteúdo for muito longo */
	box-shadow: 0px 0px 150px 150px rgb(90, 97, 130);

}

.box-servicios .image-container {
	max-width: 100%;
	border-radius: 20px;
	height: auto;
	display: block;
	overflow: hidden;
}

.box-servicios.expandido .image-container {
	display: none;
}

.box-servicios.expandido li {
	font-size: 1.2rem;
}

.box-servicios.expandido h1 {
	font-size: 1.6rem;
}

.box-servicios.expandido h2 {
	font-size: 1.4rem;
}

.negrito {
	font-weight: bold;
	text-decoration: underline;
}

.box-alojamiento {
	width: calc(33.33% - 10px);
	/* Calculamos el ancho de la caja para que sean 3 en una fila */
}

/* Estilos para las imágenes dentro del contenido */
.container img {
	max-width: 100%;
}

.boton-container {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

.boton-mas-informacion,
.boton-contratar,
.boton-cerrar {
	background-color: #337ab7;
	color: #ffffff;
	padding: 10px 20px;
	border-radius: 5px;
	font-weight: bold;
	text-decoration: none;
}

.boton-contratar {
	background-color: #ff9900;
}

.boton-cerrar {
	background-color: red;
}

.boton-mas-informacion:hover,
.boton-contratar:hover {
	opacity: 0.5;
	text-decoration: none;
}

/* Estilos para el enlace de inicio de sesión y registro en el hover */
.login-link {
	position: fixed;
	top: 20px;
	right: 20px;
	font-size: 18px;
	display: inline-block;
}

.login-link div {
	display: inline-block;
}

.login-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f5d09a;
	color: #193863;
	border-radius: 30px;
	padding: 10px 20px;
	margin-bottom: 6px;
	margin-top: -3px;
	text-decoration: none;
	transition: all 0.5s ease-in-out;
	border: 1px;
}

.login-link a:hover {
	background-color: #FF9800;
	color: #fff;
}

.login-link a i {
	margin-right: 10px;
	font-size: 16px;
}

.titulo-principal {
	font-size: 1.2rem;
	color: #FF5722;
	align-items: center;
}

.titulo-secundario {
	font-size: 1rem;
	color: #ff9e22;
	align-items: center;
}

.centrar-titulo {
	margin-top: 4%;
	margin-bottom: 0%;
	height: 4vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.titulo {
	font-size: 1.4rem;
	color: #FF5722;
	margin-top: 10px;
	display: block;
	text-align: center;
	font-weight: bold;
}

.custom-border {
	border-color: #193863;
	border-width: 2px;
	margin-top: 5px;
	margin-bottom: 5px;

}

.list-style {
	list-style-image: url('../img/check.png');
	margin-left: 10px;
}

.list-style li {
	margin-bottom: 7px;
}

.text-color-ad {
	color: #FF5722;
}

.tam li {
	font-size: 1.2rem;
}

.navbar-toggler {
	color: #ffffff;
	border-color: #ffffff;
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='%23ffffff'%3e%3cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22m-22 8h22'/%3e%3c/svg%3e");
}

.img-container img {
	max-width: 70%;
	height: auto;
}

.img-container {
	display: flex;
	justify-content: center;
}

.img-container .row {
	text-align: center;
}

@media (min-width: 350px) and (max-width: 692px) {
	body {
		margin-top: 210px;
	}

	nav {
		background: #193863;
		width: 100%;
	}

	.navbar-nav .nav-link {
		font-size: 18px;
		font-weight: bold;
		color: #fff;
		margin: 10px;
		padding: 10px;
	}

	.navbar-nav .nav-link:hover {
		margin: 10px;
		padding: 10px;
	}

	.ocultar-mobile {
		display: none;
	}

	.box,
	.box-alojamiento,
	.box-servicios,
	.box-servicios.expandido {
		max-width: 95%;
		width: 95%;
	}

	.img-container img {
		max-width: 100%;
		height: auto;
	}

	.navbar-nav li.nav-item:not(:last-child) {
		border-bottom: 1.5px solid #ddd;
		padding-bottom: 0px;
		margin-bottom: 0px;
	}

	.container-dolar {
		flex-direction: column;
	}
}

/* Estilos para el enlace del menú de navegación en tablets */
@media (min-width: 692px) and (max-width: 3024px) {
	nav {
		background: #193863;
		height: 45px;
	}

	.ocultar-desktop {
		display: none;
		width: 100%;
	}

	.navbar-collapse {
		display: none !important;
	}

	/* Estilos para el menú de navegación */
	.navbar-nav .nav-item {
		margin-left: 20px;
	}

	.container-dolar {
		flex-direction: row;
	}

}