@import './style.css';

section{
   height: 100vh;
   width: 100%;
   max-width: 100%;
}

#intro .img-bg{
   background: url('../img/home/bg-home.webp');
   background-position: center center;
   background-repeat: no-repeat;

   height: 100vh;
   width: 100vw;

   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-template-rows: 1fr;
}

#intro .btn{
   color: var(--branco);
   margin: 10px;
   height: 50px;
   width: 200px;
   font-size: 1em;
   text-shadow: 0px 0px 10px rgba(3, 0, 0, 1);
}

#intro .btn::before{
   border-top-color: var(--branco);
	border-bottom-color: var(--branco);
}

#intro img{
   display: flex;
   grid-column: 2;
   grid-row: 1/3;

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

#intro .logos{
   grid-column: 1/3;
   grid-row: 2;

   display: grid;
   justify-content: flex-end;

   padding: 20px;
   
   width: fit-content;
   justify-self: end;
   gap: 20px;
   margin: 20px;
   border: 1px solid rgba(255,255,255,0.8);
   border-radius: 5px;
}

#intro .logos img:nth-of-type(1){
   grid-column: 1;
   grid-row: 1;
   z-index: 2;
}

#intro .logos img:nth-of-type(2){
   grid-column: 2;
   grid-row: 1;
   z-index: 2;
}

#intro .logos img:nth-of-type(3){
   grid-column: 3;
   grid-row: 1;
   z-index: 2;
}

#intro .logos img{
   height: 70px;
}





/* Conheça Juquiá */
#conheca-juquia{
   padding: 0 130px;

   display: grid;
   grid-template-columns: 40% 60%;
   grid-template-rows: 1fr;
}

#conheca-juquia img{
   display: grid;
   grid-row: 1;
   grid-column: 1;

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

#conheca-juquia .texto{
   grid-row: 1;
   grid-column: 2;

   align-self: center;
   width: 90%;

   padding-left: 50px;
}






/* #o-que-fazer */
#o-que-fazer{
   padding: 0 130px;
   display: grid;
   grid-template-columns: 60% 40%;
   grid-template-rows: auto;

   background: var(--verdeClaro)
}

#o-que-fazer .texto{
   grid-column: 1;
   grid-row: 1;

   align-self: center;
   width: 90%;
}

#o-que-fazer img{
   grid-column: 2;
   grid-row: 1;

   display: grid;
   align-self: center;
}

#o-que-fazer .btn{
   margin-top: 60px;
}





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

   display: grid;
   grid-template-columns: 40% 60%;
   grid-template-rows: 1fr;
}

#onde-comer img{
   grid-column: 1;
   grid-row: 1;

   display: grid;
 
   align-self: center;
}

#onde-comer .texto{
   grid-column: 2;
   grid-row: 1;
   align-self: center;
   width: 90%;

   padding-left: 50px;
}

#onde-comer .btn{
   margin-top: 60px;
}




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

   display: grid;
   grid-template-columns: 60% 40%;
   grid-template-rows: 1fr;

   background: var(--verdeClaro);
}

#onde-ficar .texto{
   grid-column: 1;
   grid-row: 1;
   align-self: center;
   width: 90%;
}

#onde-ficar .btn{
   margin-top: 60px;
}

#onde-ficar img{
   grid-column: 2;
   grid-row: 1;

   display: grid;
   align-self: center;
}




/* localizacao */
#localizacao{
   display: grid;
   grid-template-columns: max-content 1fr;
}

#localizacao img{
   grid-column: 1;
   grid-row: 1;

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

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

   width: 80%;

   text-align: left;

   align-self: center;
   justify-self: end;
   margin-right: 100px;
}

#localizacao .bloco{
   display: flex;
   justify-content: flex-end;
   align-items: center;
   margin-top: 10px;
}

#localizacao .bloco svg{
   align-self: center;
   width: 5%;
}

#localizacao .bloco-item-p{
   width: 100%;
}

#localizacao .bloco p{
   font-size: 1em;

   text-align: right;
   margin: 0;
   padding-right: 20px;
}






/* #contato */
#contato{
   padding: 0 130px;
   
   display: grid;
   grid-template-columns: 40% 60%;
   grid-template-rows: auto;
}

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

   align-self: center;
   width: 90%;
}

#contato form{
   align-self: center;
   display: flex;

   flex-direction: column;
   justify-self: center;
}

#contato form div{
   display: flex;
}

#contato form div select{
   width: 20%;
   margin-left: 20px;
}

#contato form div input{
   width: 80%;
}

#contato .form-controle{
   visibility: hidden;
   position: absolute;
   height: 0;
}

input, textarea, select{
   width: 500px;
   height: 40px;

   padding: 5px;
   margin: 10px 0;
   
   box-sizing: border-box;

   font-family: inherit;
   font-size: 100%;

   border: 1px var(--azulEscuro50) solid;
}

input:hover, textarea:hover, select:hover{
   border-color: var(--branco);
   outline: 1px solid var(--amarelo);
}

textarea{
   height: 100px;
}

#contato .btn{
   margin-top: 20px;
}

#contato #form-contato #form-erro, #contato #form-contato #form-sucesso{
   display: block;
}

#contato #form-contato #form-erro h4{
   color: #c21212;
   font-size: 1.3em;
}

#contato #form-contato #form-sucesso h4{
   color:  var(--amarelo);
   font-size: 1.3em;
}