/* ==================== Welcome ====================*/
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: whitesmoke ;
    font-family: 'Darker Grotesque', sans-serif;
    font-size: x-large;
}

main {
    /* flex: 1; would be enough but it looks bad in IE */
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    /*flex grow - flex shrink - flex basis*/
}
/* ==================== Footer ====================*/
footer{
    width: 100%;
    background: #202020;
    color: white;

}
/* hero-section */
.hero-section-mobile {
    background-image: url("../images/Eventos0001.jpg");
    background-size: cover;
    background-position: 20% 50%;
    min-width: 100%;
    min-height: 500px;
    margin-top: 150px;
    display: flex;
    align-items: center;
    text-align: end;
    z-index: 1;

}
.hero-section {
    background-image: url("../images/hero-section001.jpg");
    background-size: cover;
    background-position: 20% 50%;
    min-width: 100%;
    min-height: 500px;
    margin-top: 150px;
    display: flex;
    align-items: center;
    z-index: 1;
}

.hero-acueducto {
    background-image: url("../images/Galeria/Aqueducto006.jpg");
    background-size: cover;
    background-position: 20% 50%;
    min-width: 100%;
    min-height: 500px;
    margin-top: 150px;
    display: flex;
    align-items: center;
    z-index: 1;

}

.hero-section-cabana  {
    background-image: url("../images/footer001.png");
    background-size: cover;
    background-position: 20% 50%;
    min-width: 100%;
    min-height: 500px;
    margin-top: 150px;
    display: flex;
    align-items: center;
    z-index: 1;

}

.hero-exp {
    background-image: url("../images/exp02.jpg");
    background-size: cover;
    background-position: 20% 50%;
    min-width: 100%;
    min-height: 500px;
    margin-top: 150px;
    display: flex;
    align-items: center;
    z-index: 1;
}

.hero-contacto {
    background-image: url("../images/cont02.jpg");
    background-size: cover;
    background-position: 20% 50%;
    min-width: 100%;
    min-height: 500px;
    margin-top: 150px;
    display: flex;
    align-items: center;
    z-index: 1;
}


 /* ------------------Galeria--------------------*/
.img-eventos{
	max-width: 100%;
    z-index: 100;
}
.gallery{
	background-color: #ffffff;
	padding: 10px 0;
    z-index: 90;
    border-radius: 20px;
}
.gallery img{
	background-color: #ebe9e9;
	padding: 10px;
	width: 100%;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
	cursor: pointer;
    border-radius: 15px;
    z-index: 100;
}
#gallery-modal .modal-img{
	width: 100%;
    z-index: 100;
}





.container-footer-all{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 40px;
}

.container-body{
    display: flex;
    justify-content: space-between;
}

.colum1{
    max-width: 400px;
}

.colum1 p{
    color: #C7C7C7;
    margin-top: 20px;
}

.colum2{
    max-width: 400px;
    margin-left: 30px;

}

.row label{
    margin-top: 10px;
    color: #C7C7C7;
}

.colum3{
    max-width: 400px;
}

.row2{
    margin-top: 20px;
    display: flex;
}

.row2 img{
    width: 36px;
    height: 36px;
}

.row2 label{
    margin-top: 10px;
    margin-left: 10px;
    max-width: 500px;
}

.container-footer{
    width: 100%;
    background: #101010;
    display: flex;
    justify-content: center;
}

.footer{
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    padding: 20px;
}

.copyright{
    color: #C7C7C7;

}

.copyright a{
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.information a{
    text-decoration: none;
    color: #C7C7C7;
}

.fondo-footer{
        background-image:('...public/images/footer01.png');
        background-size: cover;
        object-fit: cover;
        object-position: center;
        width: 100%;
}


/* Navbar Index */

#nav-web-index .nav-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#nav-web-index.navbar-dark .navbar-nav .nav-link {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}
#nav-web-index .navbar-nav .nav-link:hover {
    color: #E6D277;
}
nav ul {
    display: flex;
    justify-content: center;
}

header nav ul li {
    margin: 1rem;
    list-style: none;
}


header nav ul li a {
    text-decoration: none;
}

header nav ul li a:hover {
    text-decoration: none;
}

.texto-bloque-4 {
text-align: center;
font-size: xx-large;
}

.texto-bloque-4-1 {
text-align: center;
}

.texto-bloque-4-2{
text-align: center;
}


/* .video{ */
/* position: relative;
padding-bottom: 56.25%; /* Proporción 16:9 (dividir 9 entre 16 y multiplicar por 100) */
/* height: 0;
overflow: hidden; */


/* .video iframe { */
/* position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; */

.video {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    width: 100%;
    height: auto;
}

.video iframe{
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
    max-width: 700px;
    padding-left: 1%;
    margin: 1rem;
}


 h1, h2, h3, h4, h5{
    font-family:'Bad Script', cursive;
 }
 h3 {
    font-size: calc(1.325rem + .9vw);
 }
/* ==================== Espacio para Carrusel ====================*/
#carousel {
    background-color: black;
    height: 100vh;
    width:  100vw;
}
#carousel h2 {
    font-size: 4rem;
}
#main-wrapper {
    width: 100%;
    min-height: 500x;
    height: auto;
    display: flex;
    flex-direction: column;
}

.texto-central{
    text-shadow: 10px 10px #212529;
    background-color: #2125296f;
    border-radius: 20px;
    padding: 15px;
}

.titulo {
    font-size: 250%;
    text-align: center;
    margin-bottom: 5%;
    padding-top: 3%;
}

.contenedor {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
}


#contenedor3 {
    text-align: center;
}
.parrafo {
    padding-left: 15%;
    padding-right: 15%;
    text-align: center;
}
/* tarjetas */
#tarjetas .card {
    width: 18rem;
    margin: 1rem;
}
#tarjetas .contenedor-cartas {
    width: 100%;
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding: 10px;
    flex-wrap: wrap;
}
#tarjetas .card-img-top {
    height: 300px;
    max-height: 300px;
    object-fit: cover;
    object-position: center;
}
/* ESPACIO PARA LOGO DE HACIENDA  */
.logo-divider {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}
.logo-divider img {
    max-width: 400px;
    width: 100%;

}

#card1 {
    padding: 1%;
}
.imagen-carrusel{
    object-fit: cover;
    object-position: center;
    height: 100vh;
}
 /* -------------------------------GALERIA------------------------------- */
 #contenedor-galeria-1{
    height: 50vh;
   justify-content: center;
   align-items: center;
   background-color: black;
 }

 .contenedor-logo-divider{
    height: 8vh;
    display: flex;
    justify-content: center;
 }

 .logo-divider-banner {
    width: 4%;
    height: 100%;
    z-index: 200;
    background-color: black;
 }

  /* ----CONTENEDOR PARA CARRUSELES---- */
 #contenedor-galeria-2{
    height: 40vh;
    display: flex;
    justify-content: space-around;
 }

 #contenedor-galeria-3{
    height: 40vh;
 }

  /* -------------------------------CABAÑAS------------------------------- */
  #banner-cabañas{
    height: 50vh;
   justify-content: center;
   align-items: center;
 }

 #contenedor-cabañas-1{
    height: 35vh;
    display: flex;
    justify-content: space-around;
 }

 #contenedor-cabañas-2{
    height: 35vh;
    display: flex;
    justify-content: space-around;
 }

 #contenedor-cabañas-3{
    height: 35vh;
    display: flex;
    justify-content: space-around;
 }

 .bloque-cabañas{
    height: 90%;
    width: 30%;
    background-color: darkgreen;

 }

 .bloque-texto-cabañas{
    height: 90%;
    width: 30%;
    color: rgb(0, 0, 0);
 }

   /* -------------------------------NOSOTROS------------------------------- */
   #banner-nosotros{
    height: 50vh;
   justify-content: center;
   align-items: center;
 }
/* ========================== Sobreescritura BS5 =========================*/
.list-group-item {
    position: relative;
    display: block;
    padding: .5rem 1rem;
    color: #212529;
    text-decoration: none;
    background-color: whitesmoke;
    border: 1px solid rgba(0,0,0,.125);
}
/* -------------------------------ANIMACION FADE IN------------------------------- */
.fade-in {
    opacity: 0;
    transition: opacity .5s ease-in;
  }

  .fade-in.appear {
    opacity: 1;
  }

  .texto-central-2 {
    text-align: center;
  }

  /*------------------------- Galeria-Eventos-------------------------------- */
  .banner-eventos {
    background-image: url("../images/hero-section001.jpg");
    background-size: cover;
    background-position: 20% 50%;
    min-width: 100%;
    min-height: 500px;
    margin-top: 150px;
    display: flex;
    align-items: center;
}

/*---------------Gallery overwrite ----------------- */
.fixed-top {
    z-index: 1000;
}


  .whatsapp-button{
      position: fixed;
      bottom: 15px;
      right: 15px;
      z-index: 99;
      background-color: #25d366;
      border-radius: 50px;
      color: #ffffff;
      text-decoration: none;
      width: 50px;
      height: 50px;
      font-size: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      -webkit-box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
      -moz-box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
      box-shadow: 0px 0px 25px -6px rgba(0,0,0,1);
  }
  .whatsapp-button:hover {
    animation: effect 20s ease-in;
}

  @keyframes effect {
      20%, 100% {
          width: 50px;
          height: 50px;
          font-size: 30px;
      }
      0%, 10%{
          width: 60px;
          height: 60px;
          font-size: 40px;
      }
      5%{
          width: 50px;
          height: 50px;
          font-size: 30px;
      }
  }


#eventos {
    display: flex;
    justify-content: center;
}









    /* -------------------------------Media Querry------------------------------- */
    /* // X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap */
@media (min-width: 200px) {
    .toplane{
        font-size: 1.40rem;

    }
    .toplanelogo{
        margin: 0%;
    }
    .bloque-1{
        text-align: center;
    }


    .footer-1 {
        font-size: medium;
    }
    #header-top{
        font-size: large;
    }
    .fondo-footer{
        font-size: medium
    }
    .video iframe{
        display: flex;
        justify-content: center;
        align-items: center;
        aspect-ratio: 16/9;
        width: 100%;
        height: auto;
        max-width: 700px;
        padding-left: 1%;
        padding-right: 5%;
     
    }
   

}

@media (max-width: 462px) {

    .numero-t{
        display: none;
    }
 


}
@media (min-width: 462px) {
        .toplane{
            font-size: .90rem;
        }
        .toplanelogo{
            margin: 0%;
        }

        .video {
            display: grid;
            grid-template-columns: 1fr;
            align-items: center;
            width: 100%;
            height: auto;
        }
        
        .video iframe{
            display: flex;
            justify-content: center;
            align-items: center;
            aspect-ratio: 16/9;
            width: 100%;
            height: auto;
            max-width: 700px;
            padding-left: 1%;
            padding-right: 5%;
         
        }
        .numero-t2{
            display: none;
        }
     
        

    }
/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 532px) {
   #header-top {
   }
   
    .toplane{
        font-size: 1.0rem;

    }
    .toplanelogo{
        margin: 0%;
    }

    .bloque-1{
        text-align: center;
    }

    .footer-1 {
        font-size: medium;
    }
    

    .numero-t2{
        display: none;
    }
 



}
/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .toplane{
        font-size: 1.5rem;
 

    }
    .toplanelogo{
        margin: 0%;
    }

    .bloque-1 {
        text-align: left;
    }

    .footer-1 {
        font-size: larger;
    }

    .video {
        grid-template-columns: 1fr 1fr;
    }





}
/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #nav-web-index {
        transition: background-color 1s;
    }
    #tarjetas .card {
        margin: 0;
    }
    #tarjetas .contenedor-cartas {
        flex-wrap: nowrap;
    }

}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    h3 {
        font-size: 2rem;
     }
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

.bg-light {
    background-color: #f8f9fabd!important;
}

nav#nav-web-index {
    height: 80px;
}