@import './style.css';

#intro .img-bg{
   background: url('../img/o-que-fazer/cachoeiras/bg-cachoeiras.webp') center center no-repeat;
}




/* Cachoeiras */
#cachoeiras{
   padding: 0 130px;
   display: grid;
    
   grid-template-columns: 60% 40%;
   grid-template-rows: auto;
   height: 100vh;
   width: 100vw;
   max-width: 100%;

   align-content: center;
}



.cachoeira{
   display: flex;
   flex-direction: column;

   padding: 100px 130px;
   justify-content: center;
}

.cachoeira .conteudo{
   display: grid;
   grid-template-columns: 60% 40%;
}

.cachoeira .texto{
   display: flex;
   flex-direction: column;

   align-self: center;
   height: 100%;
}

.cachoeira .glass{
   backdrop-filter: blur(10px);
   border: 1px solid #fff;
   padding: 20px;
   border-radius: 10px;
}

.cachoeira .rota{
   padding: 20px;
   padding-left: 0;
   width: 90%;

   /* background-color: rgba(0, 0, 0, 0.5); */

   border-radius: 5px;
   height: 100%;
}

.cachoeira .texto .rota .descricao{
   color: #fff;
   margin: 0 0 40px 0;
}

/* .cachoeira h3{
   text-shadow: 0px 0px 10px rgba(3, 0, 0, 1);
} */

/* .cachoeira .separador{
   box-shadow: 0px 0px 10px rgba(3, 0, 0, 1);
} */

.cachoeira h3, .cachoeira .rota h4, .cachoeira .rota ol li{
   color: #fff;
}

.cachoeira .separador{
   background-color: #fff;
   margin: 0;
}

.cachoeira .rota ol {
   padding: 10px;
}

.cachoeira .rota ol li{
   position: relative;
   margin: 0;
   padding-bottom: 1em;
   padding-left: 30px;

   font-size: 1em;
}

.cachoeira .rota ol li::before{
   /* linha */
   content: '';
   background-color: #fff;
   position: absolute;
   bottom: 0;
   top: 10px;
   left: 15px;
   width: 2px;
   height: 100%;
}

.cachoeira .rota ol li.ultimo::before{
   /* linha */
   content: '';
   background-color: #fff;
   position: absolute;
   bottom: 0;
   top: 0px;
   left: 0px;
   width: 0px;
}

.cachoeira .rota ol li::after{
   /* circulo */
   content: '';
   position: absolute;
   left: 11px;
   top: 10px;
   height: 10px;
   width: 10px;
   background-color: #fff;
   border-radius: 50%;
}

.cachoeira .rota h4{
   text-transform: uppercase;
   font-weight: bold;

   font-size: 1.5em;
   margin: 10px 0;

   font-family: var(--fontOswald);

   display: flex;
   align-items: center;
}

.cachoeira .rota .material-icons{
   color: var(--azulEscuro);
   font-size: 1em;
}

.cachoeira .rota .circulo{
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: #fff;

   display: flex;
   align-items: center;
   justify-content: center;   

   margin-right: 10px;
}

.cachoeira .fotos{
   display: grid;

   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr 1fr;
   gap: 10px;

   grid-template-areas: 
      'f1 f1'
      'f2 f3'
   ;

   padding: 10px;

   /* background-color: rgba(0, 0, 0, 0.5); */
   
   height: fit-content;
   width: fit-content;

   align-self: center;
   border-radius: 5px;
}

.cachoeira .fotos a{
   line-height: 0;
}

.cachoeira .fotos img{
   border: 1px solid #fff;
   border-radius: 5px;
}



/* cachoeira-do-mirante */
#cachoeira-do-mirante{
   background: url('../img/o-que-fazer/cachoeiras/cachoeira-do-mirante-bg.webp');
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;

   height: 100vh;
   width: 100vw;
   max-width: 100%;
}

#cachoeira-do-mirante .fotos a:nth-of-type(1){
   grid-area: f1;
}

#cachoeira-do-mirante .fotos a:nth-of-type(2){
   grid-area: f2;
}

#cachoeira-do-mirante .fotos a:nth-of-type(3){
   grid-area: f3;
}




/* cachoeira-de-itaquarussu */
#cachoeira-de-itaquarussu{
   background: url('../img/o-que-fazer/cachoeiras/cachoeira-de-itaquarussu-bg.webp');
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;

   height: 100vh;
   width: 100vw;
   max-width: 100%;
}



/* cachoeira-do-curupira */
#cachoeira-do-curupira{
   background: url('../img/o-que-fazer/cachoeiras/cachoeira-do-curupira-bg.webp');
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;

   height: 100vh;
   width: 100vw;
   max-width: 100%;
}



/* cachoeira-de-cedro */
#cachoeira-de-cedro{
   background: url('../img/o-que-fazer/cachoeiras/cachoeira-de-cedro-bg.webp');
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;

   height: 100vh;
   width: 100vw;
   max-width: 100%;
}



/* cachoeira-aguas-cristalinas */
#cachoeira-aguas-cristalinas{
   background: url('../img/o-que-fazer/cachoeiras/cachoeira-aguas-cristalinas-bg.webp');
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;

   height: 100vh;
   width: 100vw;
   max-width: 100%;
}

#cachoeira-aguas-cristalinas .fotos{
   grid-template-columns: 1fr;
   grid-template-areas: 
      'f1'
      'f2'
   ;
   justify-self: center;
}




/* cachoeira-do-daime */
#cachoeira-do-daime{
   background: url('../img/o-que-fazer/cachoeiras/cachoeira-do-daime-bg.webp');
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;

   height: 100vh;
   width: 100vw;
   max-width: 100%;
}



/* cachoeira-das-flores */
#cachoeira-das-flores{
   background: url('../img/o-que-fazer/cachoeiras/cachoeira-das-flores-bg.webp');
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;

   height: 100vh;
   width: 100vw;
   max-width: 100%;
}

#cachoeira-das-flores .fotos{
   grid-template-rows: 1fr;
   grid-template-areas: 
      'f1 f2'
   ;
   justify-self: center;
}