@font-face{
    font-family: 'Barlow Bold';
    src: url('fontes/Barlow-Bold.woff')
    format('truetype');
}
@font-face{
    font-family: 'Barlow Regular';
    src: url('fontes/Barlow-Regular.woff')
    format('truetype');
}


*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    letter-spacing: 1px;
    font-family: 'Barlow Regular';
    text-decoration: none;

    
}

html{
    scroll-padding-top:15vh ;
    scroll-behavior: smooth;

}

#link-sem a{
    color:inherit;
    color: black;
    text-decoration: none;
}


/*Blog*/
/*tELA INICIAL*/
.container-home {
    width: 100%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('img/principal.webp')no-repeat center center/cover;
    color:#fff;
}
.header {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 20px 50px;
    transition: all 0.5s ease;
    z-index: 2;
    opacity: 1;
}

.header.rolagem{
    background-color: #000000c2;
    backdrop-filter: blur(15px);
    transition: .5s .1s;
    height: 100px;
}

.logo {
    display: flex;
    align-items: center;
    height: 70px;
}
.navbar-max{
    display: block;
}

.navbar-max a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-size: 22px;
    font-family: 'Barlow Bold';
}

.navbar-max a:hover{
    color:#FF8600;
    transition: 0.5s ease-in-out;

}
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 300px;
    z-index: 999; 
    background-color: rgba(0, 0, 0, 0.747);
    backdrop-filter: blur(20px);
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
    display: flex; 
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transform: translateX(100%); /* Escondida por padrão */
    transition: transform 0.5s ease-in-out;
}

.sidebar a{
    color: rgb(255, 255, 255);
    text-decoration: none;
    margin: 0 15px;
    font-size: 22px;
    font-family: 'Barlow Bold';
    margin-block:20px ;
    text-align: left;
    padding: 5px;
    border-radius: 10px;
}

.sidebar a:hover{
    color:#FF8600;
    background: #6e6e6e2d;
    width: 300px;
    transition: 0.5s ease-in-out;

}

.sidebar.active {
    transform: translateX(0);
}

.ativo{
    display: none;
}


.contact {
  
    display: flex;
    margin-top: 2px;
}
.contact p{
    margin-top: 2px;
    font-size: 22px;
    font-family: 'Barlow Bold';
    margin-left: 5px;
}
.main-text {
    font-size: 54px;
    margin-bottom: 20px;
    font-family: 'Barlow Bold';

}
.button {
    background:#FF8600;
    padding: 10px 20px;
    border-radius: 30px;
    color: white;
    font-size: 18px;
    text-decoration: none;
    font-family: 'Barlow Bold';

}
.icone{
    width: 35px;
    height:33px;
}


.conteudo-servicos{
    display: flex;
    margin-inline: 10%;
    margin-top: 100px;
    justify-content: center;

}


.cabecalho{
    width: 100%;
    height: 200px;
    background-color: #FFF9F2;
    padding-top: 120px;
    padding-left: 320px;
    font-size: 20px;
    color:#696969;
}
.cabecalho a{
    font-size: 20px;
    color:#696969;
}
.conteudo{
    max-width: 800px;
    margin-right: 30px;
    margin-bottom: 90px;
}
.conteudo img{
    width: 800px;
    object-fit: cover;
    height: 529px;
    border-radius: 30px;
    margin-bottom: 20px;
}
.conteudo h1{
    font-family: 'Barlow Bold';
    font-size: 40px;
}

.conteudo p{
    font-size: 20px;
    line-height: 30px;

}
#sub-subtitulo{
    font-family: 'Barlow Bold';
    color: #FF8600;
}
h2{
    font-family: 'Barlow Bold';
    font-size:25px ;
}
.conteudo h3{
    font-family: 'Barlow Regular';
    font-style: italic;
    font-weight:lighter;
    font-size: 20px;

}

.conteudo li{
    list-style: none;
    font-size: 20px;
    line-height: 30px;

}
.menu{
    width: 450px;
    min-height: 400px;
    height: auto;
    max-height: 500px;
    border-radius: 30px;
    background-color: #f1f1f1;
    padding: 30px;
    color:#696969;
}
.menu h3{
    font-family: 'Barlow Bold';
    font-size:25px;
    margin-bottom: 30px;
    color:#000;
}

#navegacao-menu{
    font-size: 20px;
    margin-left: 10px;
    color:#696969;
}
.menu hr{
    opacity: 0.5;margin-block: 15px;
}

/*contao*/
.quick-maintenance {
    background: #fdf6ec;
    text-align: center;
    align-items: center;
    padding-block:50px;
    width: 70%;
    border-radius: 30px;
}
.quick-maintenance-title {
    font-size: 54px;
    font-family: 'Barlow Bold';
    
}
.portifolio{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80vh;
    padding: 0 35px;
    position: relative;
}
#contato{
    margin-bottom: 100px;
}
.contato {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
.formulario {
    text-align: center;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.formulario p{
    margin-bottom: 20px;
    font-size: 25px;
}
.formulario form {
    display: flex;
    flex-direction: column;
}

.formulario input,
.formulario textarea {
    width: 100%;
    padding: 10px;
    margin: 7px 0;
    border: 1px solid #0000008a;
    border-radius: 30px;
    background-color: #ffffff;
}

textarea{
    min-height: 100px;
}
.formulario button {
    background: #FF8600;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 30px;
    cursor: pointer;
    font-family: 'Barlow Bold';
    font-size: 20px;
}
.informacoes-contato {
    background-color: #faeada;
    padding: 30px 50px;
    border-radius: 30px;
    text-align: left;
    margin-left: 50px;
    align-items: center;
}

.redes-sociais {
    width: auto;
    height: 40px;
    margin-right: 10px;
}

.informacoes-contato h3{
    font-family: 'Barlow Bold';
    color: #FF8600;
    font-size: 30px;
    margin-bottom: 20px;
}
.dados-contato{
    display: flex;
    margin-block: 20px;
    align-items: center;
}
.dados-contato img{
    height: auto;
    width: 30px;
    margin-right: 10px;
}
strong{
    font-family: 'Barlow Bold';
}

.rede{
    display: flex;
    align-items: center;
    margin-top: 30px;
}
.rede p{
    font-size: 20px;
    font-family: 'Barlow Bold';
    margin-right: 10px;
}

/* Rodapé */
footer{
    width: 100%;
    color: var(--white);
    font-family: 'Barlow Regular';
    justify-content: end;
    color: #FFF;

}
.footer_content{
    background-color: #202020;
    display:grid;
    grid-template-columns: 350px 400px 250px 250px; /* As últimas colunas ficam mais estreitas */
    padding: 1rem 2.5rem;
    align-items: center;
    justify-content: center; /* Distribui o espaço de forma equilibrada */
}

.footer_content h3{
    font-size: 20px;
    font-weight: normal;
}
#footer_contacts {
    margin-bottom: 0.5rem;
}
#telefone{
    align-items: center;
    display: flex;
}
.footer_content #logo{
    width: 20rem;
    height:auto;
}
#footer-link{
    height: 2.5rem;
    width: 2.5rem;
    margin: 0.5rem;
    gap:1rem;
    transition: all 0.4s;
    justify-content: center;

}
#footer-link:hover{
    height: 2.5rem;
    width: 2.5rem;
    opacity: 0.5;
}
.footer-list{
    text-align: left;
    gap:0.75rem;
    list-style: none;
}
#footer_copyright{
    display: flex;
    justify-content: center;
    background-color: #202020;
    font-size: 0.9rem;
    padding:1rem;
    font-weight:100;
}

/* Inicialmente, os elementos estão invisíveis */
.fade-in {
    opacity: 0;
    transform: translateY(50px); /* Começa mais abaixo */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Quando a classe 'show' é adicionada, eles aparecem */
.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

/*BOTÃO TOPO*/


.ir_topo {
    position: fixed;
    bottom: 30px;
    right: 10px;
    width: 70px;
    height: 70px;
    border-image: 50%;
    object-fit: cover;
    justify-content: center;
    align-items:center;
    text-decoration: none;
    border-radius: 50%;
    z-index: 11;
    box-shadow:5px 10px 20px rgba(0, 0, 0, 0.2);
}
.ir_topo::after {
    font-size: 32px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    transition: margin-top 250ms;
}
.ir_topo:hover::after {
    margin-top:-8px;
}
.ir_topo img{
    width: 100%;
}
.none{
    display: none;
}

/*Responsividade*/
@media screen and (max-width: 850px) {
    .header {
        justify-content: space-between;
    }
    .ativo{
        display: block;
    }
    .navbar-max{
        display: none;
    }
    .contact{
        display: none;
    }
    .main-text {
        font-size: 30px;
    }

  
    /*Manutenção*/
    .quick-maintenance{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .quick-maintenance-container{
        flex-direction: column;

    }
    .quick-maintenance-title{
        font-size: 40px;
        width: 80%;
    }


    /*Contato*/
    .contato{
        flex-direction: column;
        justify-content: center;

    }
    #contato{
        height: auto;
    }

    .informacoes-contato {
        background-color:transparent ;
        margin-left: 0;
    }
    .formulario form {
        align-items: center;

    }
    .formulario{
        justify-content: center;
        margin-bottom: 50px;
    }
    .formulario input, .formulario textarea{
        width: 300px;    
    }
    input:focus, textarea:focus {
        border-color: #FF8600;
        outline: none; /* Remove o contorno padrão do navegador */
        transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }

    .formulario button {
        width: 300px;

    }
    .none{
        display: block;
    }
 
    /*footer*/
        /* Rodapé */
        .footer_content{
            grid-template-columns: repeat(1, 3fr);
            padding: 2rem 2rem;
        }
    
       
        .footer-list{
            margin-inline: 0rem;
        }
       
}
@media screen and (max-width: 850px) {
    .conteudo-servicos{
        display: block;
    }
    .cabecalho{
        padding-left: 20px;
        font-size: 16px;
    }
    .cabecalho a{
        font-size: 16px;
    }
    .conteudo{
        text-align: center;
        margin-right: 0px;
    }
    .conteudo img{
        width: 100%;
        height: 70%;
    }
    .conteudo h1{
        font-size: 30px;
    }
    .menu{
        width:100% ;
        margin-bottom: 50px;
    }
    #navegacao-menu{
        font-size: 16px;
        margin-left: 0;
    }
    .conteudo p{
        font-size: 16px;
    }
    .conteudo li{
        font-size: 16px;
    }
}