/*
paleta de colores:
dominantes: verde, blanco, amarillo
complementarios: plomo, negro
*/
:root{
    --dominante-verde-rgb: rgb(10, 121, 67);
    --dominante-blanco-rgb: rgb(255, 255, 255);
    --dominante-amarillo-rgb: rgb(235, 231, 16);

    --verde-claro-rgb: rgb(134, 233, 132);
    
}
/*estas variables se propagan en los demás archivos CSS*/


/*===fondo base para todos los modulos===*/
.fondo-base{
    /*filter: blur(5px);*/ /*difumina la imagen*/
    /*--webkit-filter: blur(5px);*/
    background-size: cover !important;
    background-position: center center !important;
    position: fixed;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    opacity:0.5;
    /*background-image: url('../../assets/img/portada/theride-1.jpg');*/
    /*background-color: #d6dcde;*/
    background-color: white;
    background-image: radial-gradient(ellipse farthest-corner at 45px 30px , #fff 70%, rgba(0, 255, 0, 0) 0%, var(--verde-claro-rgb) 50%), url('../../assets/img/bus1-verde.JPG');
    }
/*===fin fondo base para todos los modulos===*/

/*===para el icono de whatsapp===*/
.boton-whatsapp{
	position:fixed;
	width:60px;
	height:60px;
	bottom:80px;
	right:110px;
	/*background-color:#25d366;*/
	background-color:rgb(28, 199, 28);
	
	color:#FFF;
	border-radius:15px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px black;
  z-index:100;
}

.icono-whatsapp{
	margin-top:7px;
    font-size: 3rem;
}

@media (max-width:600px){ /*cambia la posición derecha cuando la ventana del navegador  es igual o menor a 768px*/
    .boton-whatsapp{
        right: 15px;
    }
}
/*====Fin para el icono de whatsapp===*/


/*====Barra de navegación====*/
.navbar{
    /*height: 60px !important;*/
    /*background-color:black !important;*/
    background-color:var(--dominante-verde-rgb) !important;
    margin-top: 0px;

    /*position: fixed !important; /*para fijar el menú de navegación*/
    position:sticky !important;  /*para fijar el menú arriba al hacer scroll*/
    top:0;/*para fijar el menú arriba al hacer scroll*/

    width: 100%;/*recuperamos la anchura maxima con "100vw" (vw=view width)*/
    opacity:0.9 !important;
    z-index:1000; /*para que se sobreponga sobre cualquier elemento (que esté por encima del HERO SECTION)*/
    /*color:orange !important;*//*no se puede cambiar de color. La estrategia es usar <span>*/
    box-shadow: 0px 0px 20px gray;/*sombra gris*/
    padding: 2px 0px !important;
    
}

/*se puede cambiar el color y el tamaño de los enlaces del navbar*/
.nav-item a{
    /*color: #00ffff !important;*/
    color: var(--dominante-blanco-rgb) !important;
    font-size: 18px !important;
}

/*hover sobre los enlaces del navbar*/
.enlace:hover{
    /*color:white;*/
    color: var(--dominante-amarillo-rgb);
    border-bottom: 4px solid var(--dominante-amarillo-rgb);
}


/*se puede modificar el borde del icono de la hamburguesa del menú. El icono es una imagen SVG. Quizas lo mejor sería usar font awesome para modificar el icono*/
.navbar-toggler{
    /*border: none !important;*/
    border-color:white !important;
    /*background-color:#637373 !important;*/
}
/* Cambia el color de las líneas del icono */
.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='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/*personalizamos el nombre*/
.navbar-brand{
    /*font-family: "oswald"; /*tipografía*/
    font-size: 18px !important; /*tamaño de fuente*/
    font-weight: 400; /*peso de la fuente*/ 
    /*color:green !important;*/
}
/*====fin Barra de navegación====*/


.destinos {
    color:black;
    font-weight: bolder;
    font-size: 34px;
}