* {
    font-family: Arial, Helvetica, sans-serif;
}
body {
    margin: 0;
    padding: 0;
}
header {
    display: flex;
    justify-content: center;
    align-items: center;      
    height: 80px;
    background-color: #207136;     
}
header .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    max-width: 1130px;
}
header .logo img {
    width: 210px;
}
nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0
}
nav li {
    padding: 12px;    
}
nav a {
    text-decoration: none;
    color: #ffffff;
}
nav .active a{
    color: #ffff00;
}
nav li:hover {
    text-shadow: 2px 2px 2px #000000; 
}

#banner1 {
    height: 500px;
    background-image: url('../images/7217.jpg');
    background-position: center;
    background-size: cover;       
}
#banner1 .container {
    display: flex;
    justify-content: center;
    align-items: center; 
}
#banner1 .text_banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 500px;
    justify-content: center;    
}
#banner1 button {
    width: 200px;
    height: 60px;
    border-radius: 100px;
    margin-top: 20px;
    background-color: #207136;    
}
#banner1 button:hover {
    background-color: #006400;
    text-shadow: 2px 2px 2px #000000;
}
#banner1 button a {
    text-decoration: none;
    font-size: 20px;
    color: #ffffff;
}
#banner1 button a:hover {
    color: #ffff00;    
}

#banner1 h1 {
    text-shadow: 2px 3px 2px #000000;
    color: #ffffff;
    text-align: center;
}
#banner1 h2 {
    text-shadow: 2px 2px 2px #000000;
    color: #ffff00; 
    text-align: center;   
}

#banner2 {
    display: flex;
    justify-content: center;
    flex: 1;
    background-color: #efefef;
}
#banner2 .container {
    display: flex;
    justify-content: center;    
    width: 100%;
    max-width: 1130px;
}
#banner2 .text_banner {
    display: flex;
    flex-direction: column;    
    justify-content: center;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;    
}
#banner2 h1 {
    text-align: center;
    margin: 0;
    padding: 0;
    padding-top: 30px;
    padding-bottom: 20px;    
}
#banner2 h4 {
    color: #3a3a3a;
}
#banner3 {
    display: flex;
    justify-content: center;
    flex: 1; 
    background-color: #efefef;   
}
#banner3 .container {
    display: flex;
    justify-content: center;    
    width: 100%;
    max-width: 1130px;
}
#banner3 .text_banner {
    display: flex;
    flex-direction: column;    
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 30px;    
}
#banner3 h1, h4 {
    text-align: center;
    margin: 0;
    padding: 0;
    padding-bottom: 20px;    
}
#banner3 h4 {
    color: #3a3a3a;
}
#banner3 .balao_produtos {
    display: flex;
    justify-content: center;
}
#banner3 .balao_produtos .image1 {
    width: 200px;
    height: 200px;
    border-radius: 115px;
    border: 2px solid #000000;
    background-image: url('../images/epis.jpg');
    background-position: center;
    background-size: cover;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
}
#banner3 .balao_produtos .image2 {
    width: 200px;
    height: 200px;
    border-radius: 115px;
    border: 2px solid #000000;
    background-image: url('../images/uniformes.jpg');
    background-position: center;
    background-size: cover;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
}
#banner3 .balao_produtos .image3 {
    width: 200px;
    height: 200px;
    border-radius: 115px;
    border: 2px solid #000000;
    background-image: url('../images/kit_cargas.jpg');
    background-position: center;
    background-size: cover;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
}
#banner3 .balao_produtos .image4 {
    width: 200px;
    height: 200px;
    border-radius: 115px;
    border: 2px solid #000000;
    background-image: url('../images/sinalizacao.jpg');
    background-position: center;
    background-size: cover;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
}
#banner3 .balao_produtos {
    display: flex;    
}
#banner3 .balao_produtos h4 {
    padding-top: 20px;
}

#banner4 .container h1 {
    text-align: center;
}
.line_down {
    display: flex;
    justify-content: center;
    background-color: #efefef;
}
.line_down div {
    height: 2px;
    background-color: #3a3a3a;
    width: 100%;
    max-width: 1000px;
    margin-top: 30px;
    margin-bottom: 30px;
}
#banner4 {
    display: flex;
    justify-content: center;
    background-color: #efefef;
    padding-bottom: 30px;     
}
#banner4 .container {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;           
    width: 100%;
    max-width: 1130px;
}
#banner4 .address_mapa {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    width: 100%;
    max-width: 1130px;
}

#banner4 .address_mapa a {
    text-decoration: none;
    color: #000000;
}

#banner4 .contato_item {
    display: flex;    
}
#banner4 .whatsapp {
    height: 30px;
    line-height: 30px;
    display: flex;        
    font-size: 20px;
}
#banner4 .mapa {
    padding-top: 20px;
    padding-bottom: 20px;
}
address {
    display: flex;
    flex-direction: column;
    justify-content: space-between;    
}
address h4 {
    padding-left: 10px;    
}
footer {
    display: flex;
    justify-content: center;
    background-color: #207136; 
    height: 100px;
}
footer .container {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 1130px;
    align-items: center;
}
footer .copyright, .title {
    color: #ffffff;
}
footer .icons a {
    padding: 5px;
}

footer .redes_sociais .icons {
    display: flex;
    align-items: center;
    justify-content: center;
}
footer .horario_atendimento {
    display: flex;    
    flex-direction: column;
    align-items: center;
    padding-bottom: 10px;
    text-align: center;
    color: #ffffff;
    
}



@media (max-width: 768px) {
   header {
    height: auto;
   }
   header .container {
    justify-content: center;
    text-align: center;
    flex-direction: column; 

   }
   header .logo {
    padding-top: 10px;    
   }
 

   nav ul {
    flex-direction: column;    
   }   
   nav .active {
    border-bottom: none;    
   }

   #banner1, {
    height: auto;
   }
   section h1, h4 {
    padding-left: 15px;
    padding-right: 15px;
   }
   #banner3 .balao_produtos {
    display: flex;
    flex-flow: column;
    align-items: center;
   }
   #banner3 .balao_produtos .image1,
   #banner3 .balao_produtos .image2,
   #banner3 .balao_produtos .image3,
   #banner3 .balao_produtos .image4 {
    width: 250px;
    height: 250px;
    border-radius: 125px;    
    }
   #banner4 .container {
     flex-direction: column;
   }
   footer {
    height: auto;
    padding-top: 15px;
    padding-bottom: 15px;
   }
   footer .container {
     flex-direction: column;
   }
   footer .copyright, .redes_sociais, .horario_atendimento {
    padding-bottom: 20px;
   }
   #banner4 .address_mapa {
     flex-direction: column;
     align-items: center;
   }
}