/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

#header{
	--cnvs-primary-menu-active-color: #3e6ba2
}

p,
li {
	font-size: 0.875rem ;
  }

p.fw-semibold.text-red,
p.fw-bold.text-red {
	font-size: 1.2rem;
}

.rounded-15 {
	border-radius: 2rem;
}

.rounded-12 {
	border-radius: 1.2rem;
}

.rounded-13 {
	border-radius: 1.75rem;
}

@media (min-width: 576px) {
	.rounded-sm-13 {
		border-radius: 1.75rem;
	}
}

.bg-red {
	background-color: #3e6ba2;
}

.text-red {
	color: #3e6ba2;
}

.bg-green {
	background-color: #e39449
}

.text-green {
	color: #e39449
}

@media (min-width: 992px) {
	.px-lg-7 {
		padding-right: 6rem !important;
		padding-left: 6rem !important;
	}
}

.h-bg-green:hover {
	background-color: #e39449 !important;
}

.my-custom-select-container .bootstrap-select {
	margin: 0;
}

.my-custom-select.bootstrap-select>.btn {
	background-color: transparent;
	border: 0;
	padding-left: 19px;
}

.my-custom-select.bootstrap-select>.btn::after {
	display: none;
}

/* Estilo para quitar el contorno al hacer clic */
.my-custom-select.bootstrap-select>.btn:focus,
.my-custom-select.bootstrap-select>.btn:active,
.my-custom-select.bootstrap-select>.btn.active {
	box-shadow: none !important;
	outline: none !important;
	background-color: transparent;
}

.my-custom-select.bootstrap-select .dropdown-menu .selected {
	background-color: transparent;
}

.my-custom-select.bootstrap-select .dropdown-toggle {
	font-size: 1.5em;
}

.my-custom-select.bootstrap-select .dropdown-menu .dropdown-item .flag-icon {
	padding-left: 38px;
}

 .grid-container {
	display: grid;
  }

  @media (min-width: 1024px) {
    grid-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    grid-container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
  


.banner-container {
    width: 100vw; /* Ancho del rectángulo, ajustado al tamaño de la pantalla */
    max-width: 80rem; /* Ancho máximo del rectángulo */
    height: 0;
    padding-bottom: 4rem; /* Altura del rectángulo, como un porcentaje del ancho */
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas */
    grid-template-rows: repeat(2, 1fr); /* 2 filas */
    gap: 0;
	margin-left: auto;
	margin-right: auto;
height: fit-content;
}

.banner-square {
    padding-top: 100%; /* Altura del cuadro, como un porcentaje del ancho */
	display: flex;
    align-items: center;
    justify-content: center;
	position: relative;
}

.banner-square-content {
	width: 100%;
    height: 0;
    padding-bottom: 100%; /* Para mantener una relación de aspecto 1:1 */
    position: absolute;
    top: 0;
    left: 0;
	display: flex;
    align-items: center;
    justify-content: center;
}
.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 768px) { /* Tamaño máximo para dispositivos móviles */
	.banner-container {
	  grid-template-columns: repeat(2, 1fr); /* 2 columnas en dispositivos móviles */
	  grid-template-rows: repeat(4, 1fr); /* 4 filas en dispositivos móviles */
	}
  }

  @media (max-width: 600px) {
	.responsive-text-1 {
		font-size: 2rem;
	}
}

@media (min-width: 601px) and (max-width: 1200px) {
	.responsive-text-1 {
		font-size: 3.5rem;
	}
}

@media (min-width: 1201px) {
	.responsive-text-1 {
		font-size: 3rem;
	}
}

@media (max-width: 600px) {
	.responsive-text-2 {
		font-size: 1.5rem;
	}
}

@media (min-width: 601px) and (max-width: 1200px) {
	.responsive-text-2 {
		font-size: 3rem;
	}
}

@media (min-width: 1201px) {
	.responsive-text-2 {
		font-size: 2rem;
	}
}

@media (max-width: 600px) {
	.responsive-text-3 {
		font-size: 1rem;
	}
}

@media (min-width: 601px) and (max-width: 1200px) {
	.responsive-text-3 {
		font-size: 2rem;
	}
}

@media (min-width: 1201px) {
	.responsive-text-3 {
		font-size: 1.5rem;
	}
}

.responsive-hotel-img {
	height: 300px;
	width: 300px;
}
.responsive-hotel-img-2 {
	height: 200px;
	width: 200px;
}

	.responsive-hotel-img-3 {
	height: 300px;
	aspect-ratio: 1/1 !important;
 	}
@media (min-width: 640px) { 	
	.responsive-hotel-img {
		height: 400px;
		width: 400px;
	}
	.responsive-hotel-img-2 {
		height: 260px;
		width: 260px;
	}
	.responsive-hotel-img-3 {
	height: 460px;
	aspect-ratio: 1/1 !important; }
	}
@media (min-width: 1024px) { 

	.responsive-hotel-img-3 {
		height: 500px;
		aspect-ratio: 1/1 !important;
 	}
}

@media (min-width: 1280px) { 	
	.responsive-hotel-img-3 {
	height: 560px;
	aspect-ratio: 1/1 !important;
	
	} 
}

 .responsive-asset {
	position: relative;
	overflow: hidden;
	z-index: 10;
  }
  
  .responsive-asset::after {
	content: "";
	display: block;
	padding-bottom: 100%;
  }
  
  .responsive-asset img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
  }

  .table-padding tbody td,
  .table-padding thead th {
	padding: 1.5rem;
  }

  .fw-black {
	font-weight: 800 !important;
  }