@media(max-width: 1440px){
   #intro .btn{
      font-size: 1em;
      width: 200px;
      height: 50px;
   }

   #intro img#slogan{
      width: 60%;
   }


   /* #o-que-fazer */
   #o-que-fazer{
      padding: 0 50px;
   }


   /* #conheca-juquia */
   #conheca-juquia{
      padding: 0 50px;
   }



   /* onde-comer */
   #onde-comer{
      padding: 0 50px;
   }

   #onde-comer .texto{
      padding-left: 50px;
   }



   /* #onde-ficar */
   #onde-ficar{
      padding: 0 50px;
   }




   /* #localizacao */
   #localizacao .bloco svg{
      align-self: center;
      width: 8%;
   }


   


   /* #contato */
   #contato{
      padding: 0 50px;
   }

}



@media(max-width: 1200px){
   #localizacao img{
      margin-left: -50px;
   }
}




@media (max-width: 1024px){
   h2{font-size: 3em;}
   h3{font-size: 2em;}

   #intro img #slogan{
      width: 80%;
   }


   /* conheca-juquia */
   #conheca-juquia .texto{
      width: 100%;
      padding-left: 50px;
   }




   /* #onde-comer  */
   #onde-comer {
      width: 100%;
   }



   /* #onde-ficar */
   #onde-ficar{
      width: 100%;
   }


   /* #localizacao */

   #localizacao .texto{
      grid-column: 1;
      grid-row: 1;

      z-index: 1;

      width: 50%;

      padding: 0 50px;

      justify-self: self-start;
   }

   #localizacao img{
      filter: opacity(0.4);
   }

}




@media (max-width: 768px){
   .texto p{font-size: 1.2em;}
   .separador{margin: 10px 0 50px 0;}

   #conheca-juquia .texto,
   #o-que-fazer .texto,
   #onde-comer .texto,
   #onde-ficar .texto,
   #localizacao .texto
   {
      padding: 50px 0;
      width: 100%;
   }

   #localizacao{
      grid-template-columns: auto;
      padding: 0 50px;
   }
   
   #localizacao .texto{
      margin: 0;
      align-self: flex-start;
      width: 100%;
   }

   #contato form{margin: 50px 0;}

   #conheca-juquia,
   #o-que-fazer,
   #onde-comer,
   #onde-ficar,
   #contato
   {
      display: flex;
      flex-direction: column;

      justify-content: center;
   }

   #conheca-juquia img,
   #o-que-fazer img,
   #onde-comer img,
   #onde-ficar img
   {
      display: none;
   }

   #contato{
      height: 100%;
      margin: 50px 0;
   }
}




@media(max-width: 600px){
   #intro .img-bg{
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-evenly;
   }

   #intro .img-bg #slogan{
      width: 60%;

      order: 2;
   }

   #intro .img-bg a.btn{background-color: rgba(0, 0, 0, .2)}

   #intro .logos{
      display: flex;
      gap: 20px;

      justify-content: center;
      align-self: center;
   }

   #intro .logos img{
      margin: 0;
      height: 50px;
   }

   #conheca-juquia,
   #o-que-fazer,
   #onde-comer,
   #onde-ficar,
   #localizacao,
   #contato
   {
      padding: 0 30px;
   }

   #o-que-fazer{background: var(--azulClaro);}
   #o-que-fazer .texto p{color: #fff; }
   #o-que-fazer .btn{color: #fff;}

   #onde-ficar{background: var(--verde);}
   #onde-ficar .texto p{color: #fff; }
   #onde-ficar .btn{color: #fff;}


   #contato .texto{
      align-self: flex-start;
   }

   #localizacao{
      height: 100%;
   }

   #localizacao.texto{
      margin: 0;
   }
   #localizacao .bloco{
      display: flex;
      /* flex-direction: column-reverse; */
   }
   #localizacao .bloco svg {margin-bottom: 20px; width: 10%;}
   #localizacao .bloco-item-p {
      width: 100%;
   }
   
   #localizacao .bloco-item-p p{
      padding: 0;
      text-align: center;
   }



   /* #contato */
   /* #contato{background: var(--verdeClaro);} */
   #contato .texto p{color: #fff; }
   /* #contato .btn{color: #fff;} */

   input, textarea, select{
      width: 100%;
   }

   #rodape .informacoes{
      padding: 50px;
   }

   #rodape .informacoes p, #rodape .informacoes a, #rodape .informacoes span i{
      margin-top: 10px;
   }
}