/*======== 
         RESET DA PAGINA ============*/


*{
    padding: 0;margin: 0;box-sizing: border-box;
    text-decoration: none;
}
body{
    background-color: var(--header);
}
/*========== variaveis ===========*/
:root{
    --header: #f5f5f7;
    --banner:#1a7299;
    --footer-menor:#14222f;
    --footer-maior:#182a39;
    --btn:#0062a6;
}
/*============= header ===========*/
header{
    z-index: 999;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background-color:var(--header);
    padding: 5px 50px;
    
}
/*============ header-top ========*/
.header-top{
    display: flex;
    width: 100%;
    transition: 0.3s ease;
    justify-content: space-between;
}
.header-top .brand img{
    width: 240px;
    height: 80px;
    padding: 10px;
}
.header-top .header-search{
    width:50%;
    margin: 20px 10px;
}
.header-top input{
    width:350px;
    padding: 10px;
}
.header-top .header-search button{
    width:80px;
    padding: 10px;
    font-size: 14px;
    border: none;
    background-color:blue;
    color: #fff;
    cursor: pointer;
}
/*============== header-menu =========*/

.header-menu{
    position: relative;
     display: flex;
    padding: 5px 0 40px 0;
    justify-content:space-around;
}
.header-menu .header-menu-items a{
    color:#14222f;
    position: relative;
    margin-left: 35px;
    font-size: 1.0em;
    font-weight: 700;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    transition: 0.3s ease;
}
.header-menu .header-menu-items a:before{
    content: "";
    position: absolute;
    background-color:blue;
    width: 0;
    border-radius: 50px;
    transition: 0.3s ease;
    height: 4px;
    margin-top: 5px;
    left: 0;
    bottom: 0;
}
.header-menu .header-menu-items a:hover::before{
    width: 100%;
    transition: 0.3s ease;
}
.header-menu .header-btn{
    margin-left: -15%;
}
.header-menu .header-btn button{
    border: none;
    padding: 15px;
    margin-top: -12px;
    color: #fff;
    font-size: 14px;
    background-color:blue;
}
/*============== section ============*/
.home{
    padding: 10px 50px;
    width: 100%;
    height: 600px;
    background-color:var(--banner);
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.home .content{
    z-index: 888;
    width: 70%;
    color: #fff;
    margin-top: 130px;
}

/* ------- edicação do Titulo */
.home .content h1{
    font-size: 3.5em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 900;
    line-height: 60px;
    margin-bottom: 10px;
}/* ------- edicação do titulo */
.home .content h1 span{
    font-size: 1.2em;
    font-weight: 600;
    color:yellow;

}
/* ------- edicação do paragrafo */
.home .content p{
    margin-bottom: 15px;
    width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.home .content button{
    border: none;
    padding: 15px;
    background-color:#0062a6;
    color: #fff;
    font-size: 14px;
}

/*=========== serviços =============*/
.container-servico{
    width: 100%;
    padding: 20px 10px;
/*============== container-servico text-serv ========*/
}.container-servico .text-serv{
    width: 100%;

}
.container-servico .text-serv h1{
    margin-left: 42%;
    padding: 10px;
    font-size: 2.0em;
}
.container-servico .text-serv h1 span{
    color:blue;
}
.container-servico .text-serv p{
    margin-left: 30%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.1em;
    padding-bottom: 30px;
}
/*============== itens-servicos ========*/

.itens-servicos {
    width: 100%;
    display: flex;
    gap: 50px;
    padding: 30px;
    flex-wrap: wrap;
    justify-content: center;
}
.itens-servicos .servico-itens{
    width: 250px;
    height: 350px;
    padding: 10px;
    margin-bottom: 100px;
    background-color:#fff;
    flex-wrap: wrap;
}
.itens-servicos .servico-itens img{
    width: 100%;
    height: 200px;
}
.itens-servicos .servico-itens h2{
    font-size: 1.1em;
}
.itens-servicos .servico-itens p{
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.itens-servicos .servico-itens button{
    border: none;
    margin-top: 15px;
    padding: 7px;
    color: #fff;
    background-color: #0062a6;
    cursor: pointer;
}
/*================ leia_mais do banner =========*/
.public-text-leia {
    width: 100%;
    margin-top: 10%;
    padding: 30px;
    border-radius: 30px;
    background-color: #fff;
}
.public-text-leia h2{
    margin-left: 30%;
    padding: 30px;
    font-size: 2.2em;
    color: #0062a6;
}
.public-text-leia p{
    margin-left: 100px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 15px;
    font-size: 1.2em;
    width: 75%;
    text-indent: 100px;
    text-align: justify;
}

/*=============== sobre nós =============*/
.public-text-sobre-nos{
    width: 100%;
    margin-top: 20%;
    padding: 30px;
    border-radius: 30px;
    background-color: ;
}
.public-text-sobre-nos h2{
    margin-left: 35%;
    padding: 30px;
    font-size: 2.2em;
    color: #0062a6;
}

.public-text-sobre-nos h3{
    margin-left: 20%;
    padding: 5px;
    font-size: 2.2em;
    color: #0062a6;
}
.public-text-sobre-nos p{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 8px;
    font-size: 1.2em;
    width: 90%;
    text-indent: 20px;
}
/*================ serviço ============*/


/*============banner servico ==========*/
.home-servico1{
    padding: 10px 50px;
    width: 100%;
    height: 600px;
    background: url(../css/Soldagem-industrial-confira-os-principais-tipos.jpg.png);
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.home-servico1 .content{
    z-index: 888;
    width: 70%;
    color: #fff;
    margin-top: 130px;
}

/* ------- edicação do Titulo */
.home-servico1 .content h1{
    font-size: 3.5em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 900;
    line-height: 60px;
    margin-bottom: 10px;
}/* ------- edicação do titulo */
.home-servico1 .content h1 span{
    font-size: 1.2em;
    font-weight: 600;
    color:yellow;

}
/* ------- edicação do paragrafo */
.home-servico1 .content p{
    margin-bottom: 15px;
    width: 80%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.home-servico1 .content button{
    border: none;
    padding: 15px;
    background-color:#0062a6;
    color: #fff;
    font-size: 14px;
}

/*========publicidade-servico =======*/
.publicidade .public-text-sobre-nos{
    width: 100%;
    padding: 40px;
    margin: 151px 0 40px 0;
    align-items: center;
    flex-direction: column;
    border-radius: 5px;
    justify-content: center;
}
.publicidade-servico .public-text-sobre-nos h2{
    margin-left: 20%;
    padding: 30px;
    font-size: 2.2em;
    color: #0062a6;
}
.publicidade-servico .public-text-sobre-nos p{
   margin-left: 13px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 15px;
    font-size: 15px;
    width: 95%;
    text-indent:60px;
    text-align: justify;
}
.publicidade-servico .public-text-sobre-nos h3{
   margin-left: 3%;
    padding: 5px;
    font-size: 1.4em;
    color: #0062a6;
}

/*========= container-galeria*/

.container-galeria{
    width: 100%;
    padding: 20px;
    padding: 30px;
    margin-top: 15%;
}
.container-galeria .text-serv h1{
    margin-left: 42%;
    padding: 10px;
    font-size: 2.0em;
}
.container-galeria .text-serv h1 span{
    color:blue;
}
.container-galeria .text-serv p{
    margin-left: 25%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.1em;
    padding-bottom: 30px;
}
/*============= itens-galeria ========*/

.itens-galeria {
    width: 100%;
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}
.itens-galeria .galeria-itens{
    width: 320px;
    height: 320px;
    background-color:#fff;
    flex-wrap: wrap;
}
.itens-galeria .galeria-itens img{
    width: 100%;
    height: 90%;
}


.itens-galeria .galeria-itens h2{
    font-size: 1.1em;
    margin-left: 100px;
}
/*========== contact =========*/






/*============ Publicidade ==========*/


/*============== public-itens ===========*/
.publicidade .public-itens{
    width: 100%;
    position: relative;
    flex-direction: row;
    padding: 10px;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
    flex-wrap: wrap;
    display: flex;
  
}
.public-itens-central{
    width: 100%;
    height: 500px;
    margin-bottom: 150px;
    padding: 30px;
    display: flex;
    background: url("../css/Soldagem-industrial-confira-os-principais-tipos.jpg.png");
    background-repeat: no-repeat;
    background-size: cover;
   
}
.public-itens-central .public-text{
    width: 100%;
}

.public-itens-central h2{
    width: 100%;
    font-size: 3.5em;
    color: #fff;
}
.public-itens .public-text{

    width: 60%;
    height: 300px;

}
/*========== public-items ============*/

.public-itens .public-text h2{
    font-size: 2.6em;
    margin-top: 120px;
    margin-left: 10px;
    width: 100%;
}
.public-itens .public-text p{
    margin: 10px;
    font-size: 1.3em;
    width: 90%;
}
.public-itens .publ-img{
    width: 500px;
    height: 400px;
 }
 .publ-img img{
    width: 100%;
    height: 100%;
 }

/*=========FOOTER ================*/

.footer-email{
    width: 100%;
    height: 200%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    background-color: var(--footer-menor);
}
.footer-items p{
    color: #fff;
    font-size: 1.1em;
    padding: 30px;
    font-weight: 500;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.footer-items input{
    padding: 10px;
    width: 300px;
}
.footer-items button{
    border: none;
    padding: 12px;
    background-color: #0062a6;
    color: #fff;
    cursor: pointer;
}
.footer-baixo{
    width: 100%;
    background-color: var(--footer-maior);
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 30px;
}
.footer-ultimo-logo img{
    width: 300px;
    height: 150px;
}
.footer-ultimo h3{
    color: #fff;
    font-size: 1.3em;
    margin-left: 20px;
    padding: 20px;
}
.footer-ultimo li{
    color: #fff;
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.footer-ultimo-media img{
    flex-direction: column;
    padding: 5px;
}



/*============ RESPONSIVO ===========*/
@media(max-width:1015px){
    .header-search{
        display: none;
    }   
    /*========== container-servico ======*/
    .itens-servicos {
        width: 100%;
        display: flex;
        gap: 20px;
        padding: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
.itens-servicos .servico-itens{
    width: 280px;
    height: 350px;
    margin-bottom: 100px;
    padding: 10px;
    background-color:#fff;
    flex-wrap: wrap;
}

.container-servico .text-serv{
    width: 100%;
    padding: 30px;
}


    /*========= home e content ====*/
    .home .content h1{
        font-size: 2.5em;
        letter-spacing: 1px;
    font-weight: 700;
    line-height: 50px;
    margin-bottom: 10px;
    }
    .home .content{
        z-index: 888;
        width: 100%;
        color: #fff;
        margin-top: 100px;
    }
    /*==========btn-menu ==============*/
    .btn_menu{
        background: url("../css/menu-azul.png");
        background-repeat: no-repeat;background-position: center;
        background-size: 30px;
        width: 40px;height: 40px;
        cursor: pointer;transition: 0.3s ease;
        transition: 0.3s ease;
        margin-top: 20px;
    }
    .btn_menu.actve{
        z-index: 999;
        background: url("../css/close.png");
        background-repeat: no-repeat;
        background-size: 30px;
        margin-top: 20px;
        background-position: center;
        transition: 0.3s ease;
    }
        /*========== header-menu ========*/
        header .header-menu{
            display:none;
        }
        header .header-menu.active{
            position: fixed;
            width: 100%;
            height: 100vh;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: rgba(1,1,1,0.5);
        }
        .header-menu.active .header-menu-items{
            width: 400px;
            max-width: 400px;
            background-color:#fff;
            margin: 20px;
            padding: 40px;
            display: flex;
            align-items: center;
            flex-direction: column;
            border-radius: 10px;
            box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
        }
        .header-menu .header-menu-items a{
            margin: 20px;
            color: #222;
            font-size: 1.2em;
        }
        .header-menu .header-menu-items a::before{
            background:blue;
            height: 4px;
            transition: 0.3s ease;
        }
        .header-menu .header-btn button{
            margin-left: 110px;
            cursor: pointer;
        }

        /*============= RESPONSIVO =========*/

        @media(max-width:524px){
            .public-text-sobre-nos p{
            margin-left: -7px;
            width: 100%;
            font-size: 14px;
    
            }
            .public-text-sobre-nos h2{
                margin-left: 3%;                
                font-size: 32px;
                         
        }
        .home-servico1 .content h1{
              font-size: 2.2em;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 400;
            line-height: 35px;
            margin-bottom: -60px;
        }
        .home-servico1 .content p{
             margin-top: 94px;
            width: 300px;
            
        }
        header {
            z-index: 999;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            background-color: var(--header);
            padding: 5px;
        }
        
      }





        @media(max-width:460px){
            footer .footer-email{  
                  display: flex;
                    justify-content: space-around;
                    align-items: center;
                    flex-direction: column;
                    padding: 30px;
                    background-color: var(--footer-menor);
            }

            .home-servico1 {
             padding: 10px 30px;
            }
        }
    
    /*=============== container-  servicos =============*/
    
    .container-servico .text-serv h1{
            margin-left: 301px;
    }
    
    .container-servico .text-serv p{
    
        width: 100%;
        margin-left: 150px;
    }
    .public-itens .publ-img img{
 width: 90%;
 height: 90%;
 padding: 20px;
}
/*======== publicidade central =====*/
.public-itens-central h2{

    font-size: 2em;
    width: 100px;
}
.public-itens-central h2{
    width: 100%;
    font-size: 2.3em;
    color: #fff;
}
/*=========== public-itens =========*/
.public-itens .public-text{

    width: 90%;
    height: 300px;
    

}

.public-itens .public-text h2{
    font-size: 2em;
    margin-top: 20px;
    width: 100%;
}
.public-itens .public-text p{
    margin: 10px;
    font-size: 1.1em;
    width: 100%;
}





/*========= footer ============*/

.footer-baixo{
    width: 100%;
    background-color: var(--footer-maior);
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content:center;
    align-items: center;
    padding: 60px;
}
.footer-ultimo-logo img{
    width: 350px;
    height: 150px;
}

}