@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans';


}






.navbar-brand img{

max-width: 100px;

}

.ajuste{    /* esta classe está ajustando o tamanho das duas imagens, barra azul "Realize" e texto ao lado */
    width: 450px;
}

.ajustetxt{   /* está ajustando o espaçamento "top" da imagem texto ao lado da barra azul "Realize"  */
    padding-top: 07px;
    max-width: 40%;
}

.space{ /* está na div onde utilizamos para definir o espaçamento "top" das duas imagens texto ao mesmo tempo*/
    padding-top: 20px;
}

.servicos{
    max-width: 100%;
    padding-top: 25px;

}







/*........................................ FORMULARIO DE CONTATO.............................................*/

.containerform{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    
 
 }
 
 
 
 .form_box{
     display: flex;
     flex-direction: column;
     background-color: #FFFFFF;
     border-radius: 8px;
     width: 700px;
 }
 
 
 .form_box .title{
     padding: 24px 32px;
     font-size: 30px;
     border-bottom: thin solid #ccc;
 }
 
 .form_box form{
     display: flex;
     align-items: start;
     flex-wrap: wrap;
     padding: 32px;
 }
 
 
 .form_box input, 
 .form_box textarea{
     width: calc(50% - 8px);
     height: 48px;
     border-radius: 8px;
     border: thin solid #999;
     padding-left: 16px;
     margin-bottom: 16px;
     font-size: 16px;
 }
 
 
 .form_box input:first-child{
     margin-right: 16px;
 
 }
 
 
 .form_box input [name=subject]{
     width: 100%;
 
 }
 
 
 .form_box textarea{
     width: 100%;
     height: 60px;
     padding: 16px;
 }
 
 
 .form_box button{
     
     border: none;
     outline: none;
     width: 180px;
     height: 48px;
     border-radius: 8px;
     background-color:#343434;
     color: #FFFFFF;
     font-size: 16px;
     font-weight: bold;
     cursor:pointer;
     margin-left: auto; /*alinhou o botão à esquerda*/
     
     
 }
 
 
 .form_box button:hover{
     background-color: black;

     
     
 }


 #corcontato{
   font-size: 15px;
   color: #004FA3;
   font-weight: bold;
 }

 .title {
    color: #5C5C5C;
    font-weight: bold;
    
 }




 
 
 /*................................FIM FORMULARIO DE CONTATO.............................................*/
 
 





.footer{  /* esta classe era a aplicada com o asterisco "*", troquei para footer para que os estilos sejam aplicados apenas no footer */
    font-family: 'inter', sans-serif;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;  /* ver o significado*/
    letter-spacing: 1px;
    padding-top: 30px;
    width: 100%;

}


#footer_content{
    background-color: #343434 ;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    padding: 3rem 3.5rem;
}

#footer_contacts h1{
    margin-bottom: 0.75rem;
    text-decoration: none;
}

#footer_subscribe p{  /*aqui eu alinhei o "E-Mail" em cima da caixinha*/
    margin-bottom: -25px;
    font-size: small;
    padding-left: 3px;
}


#footer_contacts .footer-link {
    
    text-decoration: none;
}

#footer_contacts p{
    color: #FFFFFF;
}



#footer_social_media{
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
}

#footer_social_media .footer-link{
    display: flex;  /* este e os dois abaixo, foram criados para alinhar o fundo do ícone no centro, as cores*/
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    width: 2.5rem;
    color: #FFFFFF;
    border-radius: 50%;
    transition: all 0.4s;
}


#footer_social_media .footer-link:hover {
    opacity: 0.8;

}

#instagram{  /*Define as cores de fundo para o ícone instagram*/
    background: linear-gradient(#7f37c9, #ff2992, #ff9807);
}


#facebook{  /*cor de fundo para o ícone facebook*/
    background-color: #4267b3;
}

#whatsapp{
    background-color: #25d366;
}


.footer-list{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none; /*para tirar a bolinha que fina sinalizando a lista*/
    color: #FFFFFF;
    
}



.footer-list .footer-link{
    color: #FFFFFF;
    transition: all 0.4s;
    text-decoration: none;
}

.footer-list .footer-link:hover{
    color: #A9A9A9;
}

#footer_subscribe{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: #FFFFFF;
}

#footer_subscribe p{
    color: #FFFFFF;
}

#input_group{
    display: flex;
    align-items: center;
    background-color:#ffffff;
    border-radius: 4px;
}

#input_group input{
 all: unset;  /*para tirar toda a costumização original*/
padding: 0.75rem;
width: 100%;
}

#input_group  a, button{  
    background-color:#363a37;
    border: none;
    color: #ffffff;
    padding: 0px 1.25rem;
    font-size: 1.125rem;
    height: 100%;
    border-radius: 0px 4px 4px 0px;
    cursor: pointer;
    transition: all 0.4s;
    
}

#input_group button i{  /*cor do ícone envelope rodapé*/
    
    color: #ffffff;
   
}

#input_group button:hover {
    opacity: 0.8;
}

#footer_copyright{
    display: flex;
    justify-content: center;
    background-color: #949494;
    font-size: 8px;

}


.navbar-brand#logorodape img{  /* ajustar o tamanho da logo do rodapé */
    max-width: 160px;
}




/*Parte Skroll rolante "Serviços*/
.mobile-only {  /*classe para aparecer conteúdo somente no mobile*/
    display: none;
}

.desktop-only{  /*classe para aparecer conteúdo somente no Desktop*/
    display: block;


}





/* ......................MOBILE...................................*/

@media only screen and (max-width: 767px) {  /*todos os estilos que vão aparecer somente em telas menores, parte "Serviço"*/
    .mobile-only {
        display: block;
    }

    #caixa{   /* estilos do skroll rolante */
        width: 100%;
        height: 15rem;
        background: #D9D9D9;
        margin: 4rem auto 0 auto;
        display: flex;
        overflow-x: auto;  /*adiciona a barra de rolagem, "auto" retira a barrinha de rolagem*/
    }

    #caixa div{
        min-width: 19rem;
        max-height: 100%;
        margin-left: 2rem;
    
    }


    #caixa div img{
        max-width: 100%;
        padding-top: 50px;
     
     }

     


.paddingzero{ /*apliquei um padding zero para que o banner da concepção*/
    margin-top: -110px;
}

.background-image {
    width: 100%; /* A imagem de fundo ocupa toda a largura do contêiner */
    height: 160px; /* Mantém a proporção da imagem */
}

.logo-overlay {
    position: relative; /* Define a posição absoluta em relação ao contêiner */
    top: 20vw; /* Ajusta a posição vertical da logo */
    left: 0px; /* Ajusta a posição horizontal da logo */
    width: 35vw; /* Define o tamanho da logo */
    height: auto; /* Mantém a proporção da logo */
}

.bannermobile{
    height: 40vw;
    width: 100%;
}

.botaocontato{  /*movi o botão contato um pouco para esquerda, apenas mobile*/
    margin-left: -10px;
}




.daconcepcao {  /*aqui está sendo aplicado o overlay texto "Da concepção" apenas mobile*/
    position: relative; /* Define a posição relativa em relação ao contêiner */
    top: 10vw; /* Ajusta a posição vertical da logo */
    left: 15px; /* Ajusta a posição horizontal da logo */
    width: 30vw; /* Define o tamanho da logo */
    height: auto; /* Mantém a proporção da logo */
    z-index: 10;
    
}


.testebanner{
    position: relative;
    margin-top: -10vw;
}



.saibamaistxt{   /*SAIBA MAIS, da parte da aba de serviços, apenas mobile*/
    position: relative;
    width:100px;
    float: right;
    z-index: 5; /*isso é para a imagem sobrepor a outra, quanto maior o z-index, maior a prioridade*/
    margin-top: -235px;
    padding-right: 10px;  

}


.servicostxt{   /*texto "Serviços*/
    position: relative;
    width: 100px;
    top: -235px;
    z-index: 5;
    padding-left: 20px;
    padding-top: 3px;

}


.nossosprojetos{
    position: relative;
    top: -7vw;

}




}
/*........................FIM MOBILE....................................*/





@media only screen and (max-width: 767px) {  /*todo os estilos que vão aparecer somente em telas MAIORES, parte "Serviço"*/
    .desktop-only {
        display: none;
    }


}


/*FIM Parte Skroll rolante "Serviços*/




/*Footer*/
@media screen and (max-width: 768px){
    #footer_content{
        grid-template-columns: repeat(2,1fr);
        gap: 2rem;
    }
    
}

@media screen and (max-width: 767px){
    #footer_content{
        grid-template-columns: repeat(1,1fr);
        padding: 3rem 2rem;
    }

    #footer_contacts .navbar-brand{  /*aqui eu alinhei a logo do rodape ao centro, esta visualização vai ocorrer apenas no mobile*/
        display: flex;
        justify-content: center;
        padding-left: 15px;
     }
    

     #footer_contacts .textocentro{ /*aqui eu alinhei a texto ao centro, esta visualização vai ocorrer apenas no mobile*/
        text-align: center;
     }


     #footer_contacts #footer_social_media{ /*aqui eu alinhei ícones rede sociais ao centro, esta visualização vai ocorrer apenas no mobile*/
        display: flex;  /*transforma o elemento em um contêiner flexível.*/
        justify-content: center; /*alinha o conteúdo horizontalmente ao centro.*/
      }


      #menurodape .footer-link{  /*aqui eu alinhei o menu ao centro, esta visualização vai ocorrer apenas no mobile*/
        display: flex;
        justify-content: center;
        padding-right: 35px;
 
     }

     #footer_subscribe h5{
        display: flex;
        justify-content: center;
        margin-bottom: -5px;

    }


    #footer_subscribe p{  /*aqui eu alinhei o "E-Mail" em cima da caixinha, esta visualização vai ocorrer apenas no mobile*/
        margin-bottom: -20px;
        font-size: small;
        padding-left: 3px;
    }

}


 
@media only screen and (min-width: 768px) { /*Aqui eu alinhei o menu do rodapé junto à logo, Apenas Desktop*/
    .footer-list {
        padding-top: 50px;
        
    }

    #footer_subscribe{  /*parte do Fale Conosco*/
        padding-top: 50px;
    }
}








/*...........................Estidos da Página NOSSO PORTFÓLIO DE PROJETOS...............................................:*/

@media only screen and (max-width: 767px) {  /*todo os estilos que vão aparecer somente em telas menores, parte "Serviço"*/
    .mobile-only {
        display: block;
    }


    #nossoprotfolio{  /*Estilo*/
        max-width: 300px;
        padding-top: 20px;
    
    }

    .cabofrio{  /*classe do carrosel rolante*/
        padding-top: 25px;
        max-width: 300px;
        margin-left: 40px;
    }

    .descricaoslide{  /*classe da descrição que fica abaixo das imagens*/
        h5{
            font-weight: 900;
            font-size: 22px;
            
        }

        p{
            font-size: 13px;
        }

        margin-left: 40px;
        margin-right: 50px;
        padding-top: 10px;
        text-align: justify; /* Justifica o texto, alinhando-o à direita e à esquerda */


    }



}


/*........................Desktop only.........................*/

@media only screen and (min-width: 768px) { /*Apenas Desktop*/
    .desktop-only{  /*classe para aparecer conteúdo somente no Desktop*/
        display: block;
    
    
    }
    

    #nossoprotfoliodesktop{
        max-width: 25%;
        padding-top: 20px;
        padding-bottom: 20px;

    }


    
    .cabofriodesktop{
       /*classe do carrosel rolante*/
     
       padding-top: 25px;
       max-width: 350px;
       margin-left: 40px;
       flex: 1; /* Faz com que as divs ocupem o mesmo espaço */

    
    }




    .descricaoslidedesktop{ /*classe da descrição que fica abaixo das imagens*/

         
         h5{
            font-weight: 900;
            font-size: 22px;
            
        }

        p{
            font-size: 14px;
           
        }

        margin-left: 40px;
        margin-right: 50px;
        padding-top: 10px;
        text-align:justify /* Justifica o texto, alinhando-o à direita e à esquerda */

    }

    .container{
        display: flex; /* Define o contêiner como flexbox */
        justify-content: space-between; /* Espaça as divs uniformemente */

        

}



.nossosprojetosdesktop{  /*Parte da imagemlogo "Nossos Projetos - Saiba mais" apenas para desktop*/

    position: absolute; /* Define a posição absoluta em relação ao contêiner */
    margin-top: -20%; /* Ajusta a posição vertical da logo */
    left: 0px; /* Ajusta a posição horizontal da logo */
    width: 25vw; /* aqui, ajudou a manter a posição da "logo", conforme for diminuindo as dimensões, a logo acompanha*/
    height: auto; /* Mantém a proporção da logo */
    
}


.saibamaistxtdesktop{

    position: relative;
    width:11vw;
    float: right;
    z-index: 5; /*isso é para a imagem sobrepor a outra, quanto maior o z-index, maior a prioridade*/
    top: -21vw;
    padding-right: 10px; 

}



.daconcepcaodesktop{
    position: relative;
    width: 30vw;
    top: -23vw;
    z-index: 5;
    padding-left: 20px;
    padding-top: 3px;
}


.margindesktop{
    margin-top: -12vw;
}


}



 /*Se quiser alinhar o menu à direita no moile, é só remover os comentários*/
 /*@media (max-width: 767px) {
    .navbar-collapse {
      display: flex;
      justify-content: flex-end; /* Alinha o menu à direita */
     
   /* } 
  
    .navbar-nav {
      width: 100%;
      text-align: right; /* Alinha os links à direita */
      
   /* }
  
    .navbar-nav li {
      width: 100%;
      padding-right: 8px;
      
      
    }

   
  }
  */