@charset "utf-8";
/* CSS Document
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Bebas Neue';
  font-family: 'Montserrat', sans-serif;
  font-family: 'Nanum Gothic', sans-serif;

	Color wall  theme:  
	////////////////////// 
dark turqueise #002F2F
meddle turqueise #008080
light turquese #00c0c0
*/ 
   * {
      box-sizing: border-box;
    }
html{
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	
	scroll-behavior: smooth;
}
body{
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	scroll-behavior: smooth;
	overflow-x: hidden;
}

/* Estilo para Webkit (Chrome, Safari) */
html::-webkit-scrollbar {
  display: none
}
html::-webkit-scrollbar-track {
    background: transparent; /* Color del fondo de la scrollbar */
}
html::-webkit-scrollbar-thumb {
    background: #fff; /* Color del "pulgar" de la scrollbar */
    border-radius: 6px; /* Bordes redondeados */
	box-shadow: 0px 0px 0px 0px #aaa;
	transition: 1s ease;
}
html::-webkit-scrollbar-thumb:hover {
    background: #eee; /* Color cuando se pasa el ratón */
} 
 
/*████ keyframes for moves ████████████████████████████████████████████████████████*/
@keyframes x {
  0% {
	 opacity: 0;
	  margin-top: 33px;
  }  
  100%{ 
	  opacity: 1;
	  margin-top: 0;
  }
}
@keyframes sideNavAnimation{
	0%{ 
		margin-left: 0vw; 
	} 
	100%{ 
		 margin-left: 100vw;  
	}
}
@keyframes sideNavContentAnimation{
	0%{ 
		opacity: 0; 
	}
	70%{ 
		  opacity: 0;  
	} 
	100%{ 
		  opacity: 1;  
	}
}
.SEO{
	display: none;
	height: 0px;
}

/*████ Start Desktop version  █████████████████████████████████████████████████████*/
/*##########################################################
 0.0 header
##########################################################*/ 
#header {
            position: fixed; /* Make the header fixed */
            top: -10vh; /* Start off-screen (hidden) */
            left: 0;
            right: 0;
            height: 10vh;
            background-color: #fff;
			border-bottom: 1px solid #eee; 
            transition: top 0.3s; /* Smooth transition for the header */
			z-index: 2;
			padding: 0 10vw;
	display: inline-flex;
	box-shadow: 1px 1px 121px 3px #ddd;
        }
.logotype{
	display: inline-flex; 
	height: 10vh;
	width: auto;
	margin: 0;
	padding: 0 13px;
}
.imgLogotype{
	width: 6vh;
	height: 6vh;  
	border-radius: 8px; 
	margin: 2vh 13px 2vh 0;
}
.nameLogotype{ 
	font-family: "Rubik";
	color: #002F2F;
	font-size: 33px;
	margin: auto 0;
}

/*##########################################################
 0.0 Top
##########################################################*/ 
 
#sideNav{ 
		display: none; 
	}	 
#top{
	width: 100%;
	height: auto;   
}
.topHeader{
	margin: 0 10%;
	width: 80%;
	height: auto; 
	display: block;
}
.topHeaderItem{
	width: auto;
	height: auto;
	display: inline-flex;
	padding: 8px;
	float: right;
	text-decoration: none;
	background-color: #fff;
	border-radius: 13px;
	margin: 1vh 3px;
	box-shadow: 1px 1px 5px 1px #ccc;
}
.topHeaderItem img{
	width: 21px;
	height: 21px;
	margin: 5px;
}
.topHeaderItem p{
	margin: 5px;
	color: #333;
}
.bottomHeader{
	margin: 0 0% 0 0%;
	width: 100%;
	height: auto;  
	display: inline-flex;
	
	
}  
.desktopMenu{ 
	width: auto;
	height: auto; 
	position: relative;
	float: right;
	display: inline-flex; 
	margin: auto 0 auto auto;  
	}
a.dropbtn{ 
	transform: scale(1,1);
	font-family: 'Rubik';
	letter-spacing: 1px; 
	font-size: 17px;
	font-weight: 500;
	color:  #002F2F;
	height:40px;
	margin:  5px 21px;
	padding: 5px 0px;
	text-decoration: none;
	width: auto;
	}
.dropbtn{
	display: inline-flex;
}
.dropbtn p{  
	margin: auto;
	padding: auto;
	}
.dropbtn img{ 
	width: 21px;
	height:21px;
	margin: auto 5px;
	padding: auto;
	}
.dropdown-content{
	text-align: left; 
	display: none;
	position: absolute;
	height: auto;
	background-color: #fff; 
	left: -8px;
	top: 3px;
	animation: 0.5s ease x;
	z-index: 1;
}
.dropdown-content a{  
	margin: 13px;
	padding: 8px 3px 0px 3px;
	width: auto;
	height: 30px; 
	text-align: left;
	text-decoration: none;
	color: #000;
	transition: .5s ease;   
	animation: zoom 1s ease;
	border-bottom: 1px solid #fff;
	display: inline-flex;
}
.dropdown-content a:hover{
	background-color: #eee;
	border-bottom: 1px solid #008080;
} 
.dropdown-content img{
	width: 33px;
	height: 21px;
	margin: 0 5px;
}
.dropdown-content p{
	margin: 0 auto 20px auto;
	font-size: 17px;
}
.dropbtn:hover + .dropdown-content {
  display: inline-grid;
}
.dropdown-content:hover{
	 display: inline-grid
} 
#mobileMenu{
	display: none;
}	 
/* menu icons */
.menuIcons{
	width: 80%;
	height: auto;
	margin: auto; 
	display: inline-flex;
}  
.menuIconsBox{
	width: auto;
	height: auto;
	display: inline-flex; 
}
a.menuIconsItem{
	width: auto;
	height: auto; 
	margin: 0px 8px;
	text-align: center;
	text-decoration: none; 
	color: #fff;
	font-family: "Rubik";
	padding: 3px 13px;
}
a.menuIconsItem:hover{
	text-decoration: none;
	color: gold;
	background-color: #111;
	border-radius: 13px;
}
.menuIconsItem img{
	width: 6vh;
	height: 6vh;
}



/*##########################################################*/
 /*   0.1 index  */
.video-container {
  position: relative;
  width: 100vw;
  height: 100vh;
	margin-top: -21vh;
  overflow: hidden;
	z-index: -3;
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* asegura que el video llene toda la pantalla */
}
.video-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5); /* capa oscura encima */
 
}
#title{
	position: relative; 
	color: white; 
	margin: 0 10%; 
	font-size: 5em;
}
.logo{ 
	width: 133px;
	height: 133px;
	margin: 8% 25% 0 25%;
	position: relative;
}
 


/*##########################################################*/
 /*   0.3 abboutUs */
/*##########################################################*/
.aboutUs{
	width: 100%;
	height: auto;
	background-color: #fff;
	display: flex;
}
.aboutUsItem{
	width: 50%;
	height: 100%;
	text-align: center;
	padding: 5%;
}
.medio-circulo {
	margin: auto;
  width: 300px;   /* Ajusta al tamaño que necesites */
  height: 150px;  /* Mitad de la altura para simular el medio círculo */
  overflow: hidden;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.medio-circulo img {
  width: 100%;
  height: auto;
  display: block;
}
.aboutUsTitle{
	color: #008080;
	font-size: 1.3em;
	font-family: "Rubik";
}
.aboutUsText{
	color: #000;
	font-size: 1.1em;
	font-weight: 900;
}

/*##########################################################*/
 /*   0.3 parnetship */
/*##########################################################*/
.partnerships{
	width: 100%;
	height: auto;
	background-color: #fff;
	display: grid;
	text-align: center;
}
.partnershipsTitle{
	color: #008080;
	font-size: 1.5em;
	font-family: "Rubik";
}
.partnershipsInside{ 
	width: 60%;
	margin: 0 20%;
	height: auto;
	text-align: center;  
	display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columnas */
  gap: auto; /* espacio entre imágenes */
}
.partnershipsInside img{
	width: 133px;
	height: 133px; 
}

/*##########################################################*/
 /*   0.3 familiy */
/*##########################################################*/
.family{
	width:100%;
	height: 50vh;
	background-color: #008080;
	display: flex;
}
.familyImg{
	width: 233px;
	height: 233px;
	border-radius: 133px;
	position: relative;
	left: 10vw;
	top: -3vh;
}
.familyText{
	color: #fff;
	font-size: 1.8em;
	font-family: "Rubik";
	width: 40%;
	margin-left: 15%;
}
.familyLogo{
	width: 233px;
	height: 233px;
	border-radius: 133px;
	position: relative;
	right: 0vw;
	bottom: -20vh;
}

/*##########################################################*/
 /*   0.3 .icons */
/*##########################################################*/
.icons{
	width: 100%;
	height: auto;
	display: flex;
	padding:  5%;
}
.iconsItem{
	width: 30%;
	margin: 0 1.5%;
	text-align: center;
}
.iconsItem img{
	width: 133px;
	height: 133px;
}
.iconsItem p{
	color: #111;
	font-size: 1.1em; 
	font-weight: 900;

}

/*##########################################################*/
 /*   0.3 alltours */
/*##########################################################*/		
.allTours{
  position: relative;
  width: 100vw;
  height: 100vh; 
  overflow: hidden;
	z-index: 1;
	background-image: url("../img.jpg");
	background-size: 100% 120%; 
}
.allTours .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5); /* capa oscura encima */
	
 
}
#titleTours{
	position: relative;
	padding-top: 21vh;
	color: #111; 
	margin: 0 10%; 
	font-size: 2.5em;
	font-weight: 900;
}
#text{ 
	position: relative; 
	color: #111; 
	margin: 0 10%; 
	font-weight: 900;
	font-size: 1.5em;
}
#btn{
	text-decoration: none;
	position: relative;
	color: #666; 
	background-color: #ddd;
	box-shadow: 0 0 21px 3px #333;
	margin: 0 10%; 
	font-size: 1.3em;
	padding: 21px;
	border-radius: 33px;
  font-family: 'Nanum Gothic', sans-serif;
	transition: all ease 1s;
}
#btn:hover{
	color: #ddd; 
	background-color: #666;
}


/*##########################################################*/
 /*   0.1 Footer  */
/*##########################################################*/		
.footer{  
		width: 97vw;
		height: auto; 
		background-color: #EDF4F4;	
	margin: 1vh 1vw;
	border-radius: 13px;
	}		
.box_footer_son {
		margin-top: 13px; 
	}
.box_footer_son a{
	margin: 5px 0;
	color: blue;
		text-decoration: none;
	}
.title{
	color: #000;
	font-family: "Rubik";
}
.box_footer_son img{
	width: 233px;
	height: 233px;
	}
.box_footer_father{
	display: inline-flex;
	width: 100%;
	height: auto;
		}
.box_footer_son{
	display: inline-grid;
	width: 20%;
	margin: 2.5%;
	height: auto;
		}
.div-flex{
	display: inline-flex;
}
.flex{
	display: inline-flex;
}
.div-flex img{
	width: 36px;
	height: 36px;
	margin: 1px;
}
.div-flex a{ 
	text-decoration: none;
	margin: 8px  ;
}

/*##########################################################*/
 /*   0.1 Bottoms  */
/*##########################################################*/	
.bottom{ 
	border-top: 2px solid  #D5E5E5;
	width: 80vw;
	height: auto;
	margin: 0 10vw;
	text-align: center;
	padding: 13px;
}
 



/*##########################################################*/
 /*   0.1 Cart  */
/*##########################################################*/	
.cart{
	width: 100px;
	height: 100px;
	position: fixed;
	background-image: linear-gradient(#00c0c0,#008080);
	bottom: 10%;
	right: 0;
	z-index: 99;
	text-decoration: none;
	border-bottom-left-radius: 13px;
	border-top-left-radius: 13px;
	text-align: center; 
}
.count{
	font-size: 21px;
	font-weight: 900; 
	margin-left: 45px;
	margin-top: 35px;
	position: absolute;
	color: goldenrod;
}
.cart img{
	width: 55px;
	height: 55px;
	margin-top: 21%;
}






/*##########################################################*/
 /*   0.0 recomendation  */
/*##########################################################*/	
.recomendation{
	width: 100%;
	height: 100%; 
	padding: 1px 10%;
}
.recomendation p{
	font-family: "Rubik";
	font-size: 33px;
	color: #333;
	font-weight: 100;
}
/*##########################################################*/
 /*   0.0 products  */
/*##########################################################*/	
.products{
	width: 100vw; 
	height: auto; 
	display: grid;
}
.productsInside{
	width: 80vw; 
	height: auto; 
	margin: 0vh 10vw;  
	
	display: flex;
    flex-wrap: wrap; /* Permite que los elementos envuelvan hacia abajo */
    max-width: 100%; /* Ancho máximo del contenedor */
    gap: 0px; /* Espacio entre los elementos */
}
.item1 { 
	background-color: #fff; 
	margin: 0px 0px;
	height: 300px;
    width: 250px; /* Ancho de cada item */
    padding: 10px;  
	display: block;
	text-decoration: none;
	
            flex: 3 3 calc(33% - 10px); /* Cada elemento ocupará el 50% del ancho menos el espacio del gap */
            box-sizing: border-box; /* Incluye el padding y el borde dentro del ancho */
            text-align: center; /* Centra el texto */
	 
}
.item1 img{ 
	height: 100%;
    width: 100%;   border-radius: 13px;
}
.item1 p{  
	color: #fff;
	font-weight: 100;
	font-family: "Rubik";
	font-size: 27px;
	margin: -5% 1% auto 1%;
	z-index: 0;
	position: absolute;
	background-color: rgba(0,0,0,0.30);
	padding: 3px;
	border-radius: 13px;
}





/* Mobile V 0.0.1  */
@media (max-width: 767px){
/*##########################################################
 0.0 header
##########################################################*/ 
#header {
            position: fixed; /* Make the header fixed */
            top: -10vh; /* Start off-screen (hidden) */
            left: 0;
            right: 0;
            height: 10vh;
            background-color: #fff;
			border-bottom: 1px solid #eee; 
            transition: top 0.3s; /* Smooth transition for the header */
		 
			padding: 0 0vw;
			display: inline-flex;
        }
 
/*##########################################################
 0.0 top
##########################################################*/ 
#top{
	width: 100%;
	height: auto;
	padding: 13px 0 0 0 ;
	border-bottom: 1px solid #eee;
}
.topHeader{
	width: 100%;
	height: 10vh;
	margin: 0; 
	border-bottom: 1px solid #eee;
	display: inline-flex;
	background-color: #fff;
	position: absolute;
	top: 0; 
	
}
.topHeaderItem{
		display: none;
	height: 0;
	}	
.bottomHeader{
	margin: 0 0% 0 0%;
	width: 100%;
	height: 100%; 
	display: inline-flex; 
	overflow-x: hidden;
}	
.desktopMenu{  
	display:none;  
}	  
#mobileMenu{  
	display: flex;
	margin: auto 1% auto auto;
	padding: 0;
	text-decoration: none;
	position: absolute; 
	right: 2vw;
	top: 1vh;
	width: 8vh;
	height: 8vh;
}	
#menu{
	border-radius: 5px;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	}	
	
/* menu icons */
.menuIcons{
	width: 95%;
	height: auto;
	margin: auto;  
	padding-top: 13px;
	margin-top: 6vh;
	padding-bottom: -5vh;
	overflow-x: scroll;
	display: inline-flex;  
} 
/* Estilo para Webkit (Chrome, Safari) */
.menuIcons::-webkit-scrollbar {
    height:0px;
}
.menuIcons::-webkit-scrollbar-track {
    background: transparent; /* Color del fondo de la scrollbar */
}
.menuIcons::-webkit-scrollbar-thumb {
    background: #fff; /* Color del "pulgar" de la scrollbar */
    border-radius: 6px; /* Bordes redondeados */
	box-shadow: 0px 0px 0px 0px #aaa;
	transition: 1s ease;
	width: 0px;
}
.menuIcons::-webkit-scrollbar-thumb:hover {
    background: #eee; /* Color cuando se pasa el ratón */
} 		
.menuIconsBox{
	width: 100%;
	height: auto;
} 
a.menuIconsItem{
	width: 25%;
	height: auto; 
	margin: 5px 8px;
	text-align: center;
	text-decoration: none;  
	padding:  3px;
}
a.menuIconsItem:hover{
	text-decoration: none;
	color: #00c0c0;
	background-color: #eee;
	border-radius: 13px;
}	
a.menuIconsItem p{ 
	margin: 0px ; 
	padding: 0px;
	
font-family: 'Lato', sans-serif; 
}
.menuIconsItem img{
	width: 3vh;
	height: 3vh;
	margin: 5px 0 0 0;
	}
 	
/*SIDENAV for mobile*/	
#sideNav{
		width: 100%;
		height: 100%; 
		display: block;
		position: fixed; 
		top: 0;
	    transition:  0.3s ease;
		background-color: #fff;
	   margin-left: 100vw;
	}	
#sideNavContent{
		width: 100%;
		height: 100%;   
		background-color: transparent; 
	}
.sideNavInside{
		width: 100%;
		height: 100%;
		margin: 0; 
		overflow: hidden; 
		background-color: transparent;
	}
.sideNavTop{
		width: 100%;
		height: auto;
		background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1));
		backdrop-filter: blur(2px);
		overflow-y: hidden;
	}
.sideNavTopBar{
		width: auto;
		height: auto; 
		margin: 8px;
		float: right;
		overflow-y: hidden;
		display: inline-flex;
	}
.sideNavTopBarBall{
		width: 33px;
		height: 33px;
		float: right;
		background-image: linear-gradient(0rad,#ccc,#eee);
		border-radius: 50%;
		margin: 5px;
	}
.sideNavTopBarCloseBall{
		margin: 8px 5px 5px 5px;
		width: 33px;
		height: 33px;
		float: right;
		background-image: linear-gradient(45rad,#c90000,#d90000);
		border-radius: 5px;
		text-decoration: none;
	display: flex;
	}
.sideNavTopBarCloseBall p{ 
		margin: 1px auto auto auto;
	 	color: white;
		display: block;
	    font-size: 1.5em;
		font-weight: 600;	
	}	
.sideNavBody{ 
	width: 200%;
		height: auto;
		background-color: transparent;
		display:inline-flex;
		border-top: 1px solid #ddd;
		overflow-y: hidden; 
	}
.sideNavimg{
		width: 30vh;
		height:30vh;
	margin: 8px auto 0 auto;
	} 	
#sideNaveFirstMenu{
		width: 100%;
		height:100vh;
		background-color: #eee; 
		position: relative;
		overflow: hidden;
	}
.sideNavItem{  
		height: 60px;
		display: flex;
		text-decoration: none; 
		overflow-y: hidden; 
	margin:  5px 21px;
	padding: 0px;
	}
.sideNavItem img{
		overflow-y: hidden;
		width: 5vh;
		height: 5vh;
		padding: 5px 5px;
	}
.sideNavItem p{
		margin-top: 8px;
		overflow-y: hidden;
		color: #666;
		padding: -1px 5px 0px 5px;
		font-weight: 700;
		font-size: 17px;
		font-family: 'Rubik', sans-serif;
	} 
.sideNavActualItem{
		width: 99%; 
		height: 50px;
		display: inline-flex;
		margin: 3px 0px;
		padding: 5px;
		background-color: white;
		text-decoration: none; 
		overflow-y: hidden;
		border-radius: 8px;
	}
.sideNavActualItem img{
		overflow-y: hidden;
		width: 33px;
		height: 33px;
		padding: 5px 5px;
	}
.sideNavActualItem p{	
		margin-top: 8px;
		overflow-y: hidden;
		color: #333;
		padding: -1px 5px 0px 5px;
		font-weight: 700;
		font-size: 21px;
		font-family: 'Rubik', sans-serif;
	} 
.sideNavActualItem p:hover{
		color: green;
		transition: ease 1s; 
	}
.sideNavItem p:hover{
		color: #999; 
		transition: ease 1s;
	}
/*   Sub Menu */
#sideNavSecondMenu{ 
		width: 100%;
		height:100vh;
		background-color: #fff; 
		position: relative;
		left: 0%;
		transition: 0.15s ease;
		overflow: hidden;
	}
#sideNavSecondMenuInsideOne{
			width: 100%;  
		height: auto;
		display: none;
		margin: 0px;
		text-decoration: none; 
		overflow: hidden;  
	} 
#sideNavSecondMenuInsideTwo{
			width: 100%;  
		height: auto;
		display: none;
		margin: 0px;
		text-decoration: none; 
		overflow: hidden; 
	} 
#sideNavSecondMenuInsideThree{
			width: 100%;  
		height: auto;
		display: none;
		margin: 0px;
		text-decoration: none; 
		overflow: hidden; 
	} 
/* ##### */
.sideNavSecondMenuItem{
		margin: 0;
		background-color: #eee;
		height: auto;
		width: 100%; 
		padding: 3px; 
		overflow-y: hidden;
		display: inline-flex;
		text-decoration: none;
		border-bottom: 1px #ddd solid;
	} 
.icon{
		width: auto; 
		height: auto; 
		padding: 0;
	}
.icon img{  
		width: 33px;
		height: 33px;
		display: block;
		margin: auto auto auto auto;
		
	}
.sideNavSecondMenuItem img{
		  width: 33px;
	 	 height: 33px;
		 margin: 8px;
	}
.sideNavSecondMenuItem h4{ 
		 color: #777;
		 margin: auto 13px;
		 padding-left: 1px;
		 font-weight: 700;
		 font-size: 21px;
	}
.option{ 
		 color: #777;
		 margin: auto 13px;
		 padding-left: 1px;
		 font-weight: 700;
		 font-size: 21px;
	}
.sideNavSecondMenuActualItem{
		margin: auto 0; 
		height: auto;
		width: 100%; 
		padding:13px 8px; 
		overflow-y: hidden;
		display: inline-flex;
		text-decoration: none;
		border-bottom: 1px #ddd solid; 
	} 
.sideNavSecondMenuActualItem img{
		  width: 33px;
	 	 height: 33px;
		 margin: 8px;
	}
.sideNavSecondMenuActualItem h4{ 
		 color: #777;
		 margin: auto 13px;
		 padding-left: 1px;
		 font-weight: 700;
		 font-size: 21px;
	} 
/* Language */	
a.dropbtn{ 
	transform: scale(1,1);
	font-family: 'Rubik';
	letter-spacing: 1px; 
	font-size: 17px;
	font-weight: 500;
	color:  #002F2F;
	height:40px;
	margin:  5px 21px;
	padding: 5px 0px;
	text-decoration: none;
	width: auto;
	}
.languaje{
	width: 100vw; 
	}	
.dropbtn{
	display: inline-flex;
	width: 100vw; 
}
.dropbtn p{  
	margin: auto;
	padding: auto;
	}
.dropbtn img{ 
	width: 21px;
	height:21px;
	margin: auto 5px;
	padding: auto;
	}
.dropdown-content{
	text-align: left; 
	display: none;
	position: absolute;
	height: auto;
	width: 75%;
	background-color: #fefefe;
	border-radius: 21px;
	left: 13px;
	top: 233px;
	animation: 0.5s ease x;
	z-index: 1;
}
.dropdown-content a{  
	margin: 13px;
	padding: 8px 3px 0px 3px;
	width: auto;
	height: 30px; 
	text-align: left;
	text-decoration: none;
	color: #000;
	transition: .5s ease;   
	animation: zoom 1s ease;
	border-bottom: 1px solid #ddd;
	display: inline-flex;
}
.dropdown-content a:hover{
	background-color: #eee;
	border-bottom: 1px solid #008080;
} 
.dropdown-content img{
	width: 33px;
	height: 21px;
	margin: 0 5px;
}
.dropdown-content p{
	margin: auto 0px;
	font-size: 17px;
}
.dropbtn:hover + .dropdown-content {
  display: inline-grid;
}
.dropdown-content:hover{
	 display: inline-grid
} 	



/*##########################################################*/
 /*   0.1 index  */
.video-container {
  position: relative;
  width: 100vw;
  height: 75vh;
	margin-top: -21vh;
  overflow: hidden;
	z-index: -3;
}
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* asegura que el video llene toda la pantalla */
}
.video-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5); /* capa oscura encima */
 
}
#title{
	position: relative; 
	color: white; 
	margin: 0 10%; 
	font-size: 2em;
}
.logo{ 
	width: 133px;
	height: 133px;
	margin: 33% 25% 0 25%;
	position: relative;
}
 
 
/*##########################################################*/
 /*   0.3 parnetship */
/*##########################################################*/
.partnerships{
	width: 100%;
	height: auto;
	background-color: #fff;
	display: grid;
	text-align: center;
}
.partnershipsTitle{
	color: #008080;
	font-size: 1.5em;
	font-family: "Rubik";
}
.partnershipsInside{ 
	width: 70%;
	margin: 0 20%;
	height: auto;
	text-align: center;  
	display: grid;
  grid-template-columns: repeat(3, 1fr); /* 4 columnas */
  gap: auto; /* espacio entre imágenes */
}
.partnershipsInside img{
	width: 55px;
	height: 55px; 
}

/*##########################################################*/
 /*   0.3 abboutUs */
/*##########################################################*/
.aboutUs{
	width: 100%;
	height: auto;
	background-color: #eee;
	display: grid;
}
.aboutUsItem{
	width: 100%;
	height: 50%;
	text-align: center;
	padding: 5%;
}
.medio-circulo {
	margin: auto;
  width: 300px;   /* Ajusta al tamaño que necesites */
  height: 150px;  /* Mitad de la altura para simular el medio círculo */
  overflow: hidden;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.medio-circulo img {
  width: 100%;
  height: auto;
  display: block;
}
.aboutUsTitle{
	color: #008080;
	font-size: 1.3em;
	font-family: "Rubik";
}
.aboutUsText{
	color: #000;
	font-size: 1.1em;
	font-weight: 900;
}
	
/*##########################################################*/
 /*   0.3 familiy */
/*##########################################################*/
.family{
	width:100%;
	height: 50vh;
	background-color: #008080;
	display: flex;
}
.familyImg{
	width: 133px;
	height: 133px;
	border-radius: 133px;
	position: relative;
	left: 2vw;
	top: -3vh;
}
.familyText{
	color: #fff;
	font-size: 1.3em;
	font-family: "Rubik";
	width: 100%;
	margin-left: 5%;
	margin-top: 15%;
}
.familyLogo{
	width: 163px;
	height: 163px;
	border-radius: 133px;
	position: relative;
	right: 0vw;
	bottom: -20vh;
}
	
	/*##########################################################*/
 /*   0.3 .icons */
/*##########################################################*/
.icons{
	width: 100%;
	height: auto;
	display: grid;
	padding:  5% 0;
}
.iconsItem{
	width: 97%;
	margin: 0 1.5%;
	text-align: center;
}
.iconsItem img{
	width: 133px;
	height: 133px;
}
.iconsItem p{
	color: #111;
	font-size: 1.1em; 
	font-weight: 900;

}

/*##########################################################*/
 /*   0.3 alltours */
/*##########################################################*/		
.allTours{
  position: relative;
  width: 100vw;
  height: 100vh; 
  overflow: hidden;
	z-index: 1;
	background-image: url("../img.jpg");
	background-size: 100% 120%; 
}
.allTours .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5); /* capa oscura encima */
	
 
}
#titleTours{
	position: relative;
	padding-top: 8vh; 
	margin: 0 10%; 
	font-size: 1.7em;
	font-weight: 900;
}
#text{ 
	position: relative;  
	margin: 0 10%; 
	font-size: 1.3em;
	font-weight: 900;
}
#btn{
	text-decoration: none;
	position: relative;
	color: #666; 
	background-color: #ddd;
	box-shadow: 0 0 21px 3px #333;
	margin: 0 10%; 
	font-size: 1.1em;
	padding: 21px;
	border-radius: 33px;
  font-family: 'Nanum Gothic', sans-serif;
	transition: all ease 1s;
}
#btn:hover{
	color: #ddd; 
	background-color: #666;
}

	
	
	
/*██████████████████████████████████████████████████████████*/
 /*   0.0 Footer  */
/*██████████████████████████████████████████████████████████*/
.footer{ 
		width: 96vw;
		height: auto; 
		background-color: #EDF4F4;	
	margin: 1vh 1vw;
	border-radius: 13px;
	}		
	.box_footer_father{
	display: inline-grid;
	width: 100%;
	height: auto;
		padding: 1% 10%;
		}
	.box_footer_son{
	display: inline-grid;
	width: 100%;
	margin: 0%;
	height: auto;
		}			
	.box_footer_son a{
	margin: 8px;
		font-size: 18px;
	}
	/*##########################################################*/
 /*   0.1 Bottoms  */
/*##########################################################*/	
.bottom{ 
	border-top: 2px solid  #D5E5E5;
	width: 85%;
	height: auto;
	margin: 0 5%;
	text-align: center;
	padding: 13px;
}
 
 
/*##########################################################*/
 /*   0.1 Cart  */
/*##########################################################*/	
.cart{
	width: 80px;
	height: 80px;
	position: fixed;
	background-image: linear-gradient(#00c0c0,#008080);
	bottom: 0%;
	right: 0;
	z-index: 99;
	text-decoration: none;
	border-bottom-left-radius: 0px;
	border-top-left-radius: 13px;
	border-top-right-radius: 0px;
	text-align: center; 
}
.count{
	font-size: 21px;
	font-weight: 900; 
	margin-left: 35px;
	margin-top: 30px;
	position: absolute;
	color: goldenrod;
}
.cart img{
	width: 55px;
	height: 55px;
	margin-top: 21%;
}

 



/*##########################################################*/
 /*   0.0 recomendation  */
/*##########################################################*/	
.recomendation{
	width: 100%;
	height: 100%; 
	padding: 3% 3% 0 3%;
}
.recomendation p{
	font-family: "Rubik";
	font-size: 23px;
	color: #333;
	font-weight: 100;
}


/*##########################################################*/
 /*   0.0 products  */
/*##########################################################*/	
.products{
	width: 100vw; 
	height: auto; 
	display: grid;
}
.productsInside{
	width: 100vw; 
	height: auto; 
	margin: 0vh 0vw;  
	
	display: flex;
    flex-wrap: wrap; /* Permite que los elementos envuelvan hacia abajo */
    max-width: 100%; /* Ancho máximo del contenedor */
    gap: 0px; /* Espacio entre los elementos */
}
.item1 { 
	background-color: #fff; 
	margin: 0px 0px;
	height: 150px;
    width: 250px; /* Ancho de cada item */
    padding: 0px;  
	display: block;
	text-decoration: none;
	  
            flex: 2 2 calc(50% - 10px); /* Cada elemento ocupará el 50% del ancho menos el espacio del gap */
            box-sizing: border-box; /* Incluye el padding y el borde dentro del ancho */
            text-align: center; /* Centra el texto */
	 
}
.item1 img{ 
	height: 100%;
    width: 100%; 
	border-radius: 0;
}
.item1 p{  
	color: #008080;
	font-weight: 100;
	font-family: "Rubik";
	font-size: 17px;
	margin: -55px 0% auto 0%;
	z-index: 0;
	position: relative;
	background-color: rgba(255,255,255,0.8);
	padding: 3px 0;
	width: 100%;
	border-radius: 0px;
}	

	

}