:root{
    --clr-000: #1E1E1E;
    --clr-111: #FFFFFF;

    --clr-01-100: #F9F9F9;
    --clr-01-200: #E9E9E9;
    --clr-01-300: #9F9F9F;
    --clr-01-400: #8D8D8D;
    --clr-01-500: #545454;

    --clr-100: #F39200;
    --clr-200: #140E49;
    --clr-300: #29235C;
    --clr-400: #7067BB;
    --clr-500: #D4CEFF;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    word-wrap: normal;
    overflow-x: hidden;
}

body, html{
    font-family: 'Lato', system-ui, -apple-system, 'Tahoma', sans-serif;
    font-display: optional;
    size-adjust: 150%;
    color: var(--clr-000);
    background-color: var(--clr-111);
}

.sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

img{
    width: 100%;
    height: auto;
}

main{
    min-height: 95vh;
}

.space{
    flex-basis: 100%;
}

/* || TITULOS */
h1{
    margin-bottom: 30px;
    font-size: 2.5em;
}
h2{
    font-size: 1.8em;
}
h2, h3{  
    text-align: center;
}
h3{
    flex-basis: 100%;
    font-size: 1.5em;
}
.h-100{
    color: var(--clr-100);
}
.h-111{
    color: var(--clr-111);
}
.h-200{
    color: var(--clr-200);
}
.h-300{
    color: var(--clr-300);
}

/* || NAVBAR */
nav {
    background: var(--clr-111);
    width: 100%;
    height: auto;
    padding: 20px 50px;
}
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.navbar .menu {
    display: flex;
    height: 100%;
}
.navbar .menu li {
    position: relative;
    list-style: none;
    padding: 5px 20px;
    height: 100%;
    white-space: nowrap;
}
.navbar .menu li a {
    color: var(--clr-000);
    text-decoration: none;
    text-transform: uppercase;
    padding: 5px 10px;
    font-weight: 600;
}
.navbar .menu li:hover a {
    color: var(--clr-100);
    transition: color 0.1s;
}
.navbar .menu li:hover {
    background-color: var(--clr-001);
    transition: background-color 0.3s;
}
.navbar .navOpen,
.navbar .navClose {
    display: none;
}
.brand img {
	width: auto;
    max-width: 100%;
	max-height: 50px;
	height: auto;
}
@media screen and (max-width: 991.98px) {
    nav {
        width: 100%;
        overflow: visible;
        text-align: right;
        padding: 20px;
        border-bottom: 5px solid var(--clr-300);
    }
    .navbar .menu {
        background-color: var(--clr-01-100);
        display: flex;
        flex-direction: column;
        position: fixed;
        height: 100vh;
        width: 100vw;
        top: 0;
        right: -100%;
        line-height: normal;
        padding: 20px;
        transition: right 0.5s ease;
        margin: 0;
    }
    .navbar .menu li {
        display: block;
        height: auto;
        line-height: 45px;
        border-bottom: 1px solid var(--clr-300);
        border-radius: 0;
    }
    .navbar .navOpen {
        padding: 5px 10px 7px 30px;
        background-color: var(--clr-111);
        border-radius: 0 0 0 50px;
        display: flex;
        align-items: center;
    }
    .navbar .navOpen,
    .navbar .navClose {
        color: var(--clr-100);
        font-size: x-large;
        span {
            font-size: large;
        }
    }
    .navbar .navOpen span {
        margin-right: 10px;
    }
    .navbar .navClose {
        margin-bottom: 50px;
        margin-right: 20px;
        display: block;
        text-align: right;
    }
}
.subNav{
    background-color: var(--clr-200);
    padding: 10px 50px;
    a{
        color: var(--clr-111);
        text-decoration: none;
        margin: 0 20px;
        float: inline-end;
        display: flex;
        align-items: center;
    }
    a:hover{
        text-decoration: underline;
    }
    svg{
        margin-right: 5px;
    }
}
@media (max-width: 767.98px){
    .subNav{
        display: none;
    }
}
@media (min-width: 768px){
    .navMobile{
        display: none;
    }
}

/* || Header */
header{
    position: sticky;
    z-index: 2;
}
.headerContent{
    background-color: var(--clr-300);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 50px 10%;
}
.headerContent img{
    max-width: 400px;
}
.headerContent div:nth-child(2){
    text-align: center;
    margin-top: 50px;
}
@media (min-width: 991.98px){
    .headerContent{
        div{
            width: 50%;
        }
    }
    .headerContent div:nth-child(2){
        margin-top: 0;
    }
}

/* || Footer */
footer{
    background-color: var(--clr-01-100);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 50px 50px 10px;
    img{
        max-width: 300px;
    }
    ul{
        color: var(--clr-01-400);
        strong{
            color: var(--clr-300);
        }
    }
    a{
        color: var(--clr-01-400);
        text-decoration: none;
    }
    a:hover{
        text-decoration: underline;
        color: var(--clr-200);
    }
}
footer.footerContato{
    padding: 10px;
    margin-top: 0;
}
.creditos{
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
    font-size: small;
    a{
        color: var(--clr-01-500);
        text-decoration: none;
    }
    a:hover{
        text-decoration: underline;
    }
}
@media (max-width: 767.98px){
    footer img{
        margin-bottom: 50px;
    }
}



/* || Botões */
.btn01{
    background-color: var(--clr-100);
    border: 2px solid var(--clr-100);
    color: var(--clr-111);
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 1.2em;
    display: flex;
    width: fit-content;
    align-items: center;
    svg{
        margin-left: 10px;
    }
}
.btn01:hover{
    background-color: var(--clr-400);
    border-color: var(--clr-400);
    transition: background-color ease .2s;
}
header .btn01{
    margin: 0 10px;
}
.btn02{
    background-color: var(--clr-400);
    color: var(--clr-111);
    text-decoration: none;
    padding: 5px 20px;
    border-radius: 30px;
    display: inline-block;
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.btn02:hover{
    background-color: var(--clr-100);
    transition: background-color ease .2s;
}
.btn03{
    background-color: var(--clr-500);
    padding: 30px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--clr-01-500);
    width: 300px;
    align-content: center;
    display: flex;
    align-items: center;
    gap: 10px;
    svg{
        min-width: 30px;
        width: 30px;
        height: 30px;
    }
}
.btn-wpp {
    background: #25d366;
    padding: 16px;
    border-radius: 50px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    svg{
        display: block;
    }
}
.btn-wpp:hover {
    background: #128c7e;
}
@media (max-width: 575.98px) {
    .btn-wpp {
        padding: 12px;
        bottom: 10px;
        right: 0;
        transform: translateX(-50%);
    }
}

/* || INICIAL */
/* Section 01 */
.introducao{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 50px;
    padding: 50px;
    h2{
        text-align: left;
        margin-bottom: 10px;
    }
    p{
        color: var(--clr-01-300);
    }
}
@media (min-width: 768px){
    .introducao div{
        max-width: 50%;
        min-width: 20%;
    }
}
.homeDiferencial{
    background-color: var(--clr-01-200);
    display: flex;
    flex-wrap: wrap;
    padding: 50px;
    justify-content: center;
    text-align: center;
    h2{
        flex-basis: 100%;
        margin-bottom: 20px;
    }
    div{
        background-color: var(--clr-111);
        border-radius: 30px;
        width: 200px;
        padding: 20px;
        margin: 20px;
        color: var(--clr-01-300);

        img{
            max-width: 50px;
            margin-bottom: 10px;
            height: auto;
        }
    }
    strong{
        color: var(--clr-100);
        line-height: 30px;
    }
}
@media (max-width: 767.98px){
    .homeDiferencial{
        padding: 50px 20px;
    }
}
.homeServicos{
    display: flex;
    flex-wrap: wrap;
    padding: 50px 20px;
    justify-content: center;
    h2{
        flex-basis: 100%;
        margin: 50px auto 20px;
    }
    .space{
        display: none;
    }
    div:not(.space){
        background-color: var(--clr-300);
        color: var(--clr-111);
        border-radius: 30px;
        width: 40%;
        padding: 50px 20px;
        margin: 50px 20px 20px;
        position: relative;
        overflow: visible;
        img{
            position: absolute;
            top: -25px;
            left: 10px;
            width: 50px;
            height: 50px;
        }
        p{
            font-size: medium;
            margin: 20px 0;
            color: var(--clr-01-200);
        }
        span{
            font-size: large;
            font-weight: 700;
        }
    }
}
iframe{
    width: 100%;
    height: auto;
    min-width: 560px;
    min-height: 315px;
}
@media (min-width: 992px){
    .homeServicos{
        padding: 50px;
        div:not(.space){
            width: 20%;
        }
        .space{
            display: block;
        }
    }
}
@media (max-width: 575.98px){
    .homeServicos{
        div:not(.space){
            width: 100%;
        }
    }
}
.cta{
    background-color: var(--clr-01-200);
    padding: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 50px;
    h2{
        text-align: left;
        margin-bottom: 30px;
        font-weight: 800;
    }
    img{
        max-width: 300px;
        width: 100%;
        height: auto;
    }
}
.cta div:nth-child(2){
    width: 30%;
}
@media (max-width: 767.98px){
    .cta div:nth-child(2){
        width: 100%;
    }
    .cta .btn01{
        margin: auto;
    }
}
.certificacoes{
    div{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        margin: 50px;
        img{
            margin: 20px;
            max-width: 200px;
        }
    }
}

/* || Sobre */
.sobre h1{
    margin-bottom: 20px;
    font-size: 2em;
}
.sobre{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    color: var(--clr-01-400);
    padding: 50px;
    img{
        width: 100%;
        height: auto;
    }
    div{
        font-size: 1.2em;
        margin-top: 30px;
    }
}
.numeros{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;

    padding: 60px;
    
    background-color: var(--clr-01-200);
    color: var(--clr-400);

    span{
        display: block;
        font-size: 2.5em;
        font-weight: 900;
    }
}
.equipe, .metodos{
    color: var(--clr-111);

    padding: 50px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 20px;

    h2{
        display: block;
        text-align: left;
        display: flex;
        gap: 10px;
        align-items: center;
        margin-bottom: 20px;
        flex-basis: 100%;
    }
    div{
        margin-top: 30px;
        font-size: 1.2em;
    }
}
.equipe{
    background-color: var(--clr-100);
}
.metodos{
    background-color: var(--clr-400);
}
@media (min-width: 768px){
    .equipe, .metodos, .sobre {
        div{
            width: 40%;
            margin-top: 0;
        }
    }
    .sobre img{
        width: 30%;
    }
    .equipe img, .metodos img{
        width: 80%;
    }
}
@media (max-width: 575.98px){
    .numeros{
        padding: 20px;
        flex-direction: column;
        div{
            margin: 20px auto;
        }
    }
}

/* || SERVIÇOS */
.servicos h1{
    text-align: center;
    margin: 50px 10px;
}
/* Acordeão */
.servicosBox{
    margin: 20px;
    p{
        margin: 20px 0;
        font-size: 1.1em;
        line-height: 1.3em;
    }
}
@media (min-width: 768px){
    .servicosBox{
        margin: 20px 10%;
    }
}
.acordeao {
    background-repeat: no-repeat;
    background-position: -10px center;
    background-size: 90px;
    background-color: var(--clr-01-200);
    color: var(--clr-200);
    cursor: pointer;
    padding: 20px 30px 20px 100px;
    width: 100%;
    text-align: left;
    font-size: 1.2em;
    font-weight: bold;
    border: 0;
    border-bottom: 5px solid var(--clr-100);
    outline: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media (max-width: 575.98px){
    .acordeao{
        padding: 20px 10px 20px 90px;
    }
}
.agua{
    background-image: url('../img/icones/icone-analise-de-agua-servicos.webp');
}
.efluentes{
    background-image: url('../img/icones/icone-efluente-servicos.webp');
}
.residuos{
    background-image: url('../img/icones/icone-residuos-solidos-servicos.webp');
}
.quimicos{
    background-image: url('../img/icones/icone-agentes-quimicos-servicos.webp');
}
.ruidos{
    background-image: url('../img/icones/icone-ruidos-servicos.webp');
}
.vibracao{
    background-image: url('../img/icones/icone-vibracao-servicos.webp');
}
.envasada{
    background-image: url('../img/icones/icone-agua-envazada-servicos.webp');
}
.calor{
    background-image: url('../img/icones/icone-calor-servicos.webp');
}
.acordeao.active, .acordeao:hover {
    background-color: var(--clr-500);
}
.panel {
    padding: 20px 30px;
    background-color:var(--clr-01-100);
    color: var(--clr-01-500);
    display: none;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease;
}

.acordeao:after {
    content: url(../img/acordeao-mais.svg);
    float: right;
  }
  
  .acordeao.active:after {
    content: url(../img/acordeao-menos.svg);
  }

/* || Clientes */
.clientesSection{
    padding: 50px 20px;
    text-align: center;
    h1{
        margin-bottom: 20px;
    }
}

.owl-carousel{
    z-index: 0!important;
    margin: 10px 0;
}
.owl-carousel img{
    width: 100%;
    max-width: 200px;
    margin: auto;
    height: auto;
}

.owl-item{
    width: fit-content;
    margin: 10px;
}

/* || Contato */
.contato{
    display: flex;
    flex-wrap: wrap;
    font-size: 1.2em;
    h2{
        text-align: left;
    }
}
.formulario, .contato .infoContato{
    width: 100%;
    padding: 50px;
}
.formulario{
    background-color: var(--clr-300);
    color: var(--clr-111);
}
@media (min-width: 768px){
    .contato{
        min-height: 95vh;
    }
    .formulario, .contato .infoContato{
        width: 50%;
        padding: 50px 100px;
    }
}

.input-field{
    margin: 20px 0;
}
input, textarea{
    width: 100%;
    line-height: 1.2em;
    outline: none;
    border: 0;
    padding: 10px;
    margin-top: 5px;
    border-radius: 30px;
}
.formulario button{
    background-color: var(--clr-100);
    color: var(--clr-111);
    border: none;
    outline: none;
    padding: 8px 20px;
    font-size: medium;
    border-radius: 30px;
    text-transform: uppercase;
    float: right;
    cursor: pointer;
}
.formulario button:hover{
    background-color: var(--clr-400);
}

.infoContato{
    ul{
        margin-top: 10px;
    }
    li{
       margin: 10px 0;
       display: flex;
       align-items: center;
       gap: 5px;
    }
    strong{
        color: var(--clr-200);
    }
}
.sociais{
    display: flex;
}
.sociais a{
    background-color: var(--clr-100);
    border-radius: 30px;
    margin: 0 5px;
}
footer .sociais a{
    padding: 5px;
}
.infoContato .sociais a{
    padding: 10px;
}
.sociais a:hover{
    text-decoration: none;
    background-color: var(--clr-300);
}
.sociais svg{
    display: block;
}

.infoContato a{
    color: var(--clr-000);
    text-decoration: none;
}
.infoContato a:hover{
    text-decoration: underline;
    color: var(--clr-200);
}

.mensagem{
    width: fit-content;
    margin: 30px auto;
    padding: 10px;
    font-size: small;
}
.mensagem .sucesso{
    color: white;
    display: none;
}
.mensagem .falha{
    color: white;
    display: none;
}