@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins: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');

:root{
    --color-header: #2F0F4E;
    --color-marketing-fundo: #2C0F39;
    --color-marketing-fonte: #E48E16;
    --color-marketing-fundoBotao: #340C43;
    --color-sobre-fundo: #F6F9F5;
    --color-ceo-fonte: #E48E16;
}

*{
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}
body{
    width: 100%;
    height: 100%;
    background-color: black;
}

/* Header com a logo e menu */
header{
    background-color: var(--color-header);
    padding: 0px 3vw;

    display: flex;
    justify-content: space-around;
    align-items: center;
}
header > h1{
    display: none;
}
header > div.menu-mobile{
    display: flex;
    align-items: center;
    height: 75.75px;
}
header > div.menu-mobile > img.logo{
    width: 175px;
}
header > nav{
    display: inline;
    cursor: pointer;
}
header > nav > a{
    font-family: 'Montserrat', sans-serif;
    color: white;
    text-decoration: none;

    margin: 0 10px;

    transition: all 0.5s ease-in-out;
}
header > nav > a:hover{
    color: var(--color-marketing-fonte);
}
/* ==================================================================== */


/* Main com marketing e sobre */
main{
    width: 100%;

    display: flex;
    flex-direction: column;
}
main > section.marketing{
    height: 760px;
    background: black url(../assets/images/marketing/background-marketing.png) center center scroll;
    background-size: cover;

    display: flex;
    align-items: center;
}
main > section.marketing > article.marketing{
    text-align: center;

    max-height: 250px;
    max-width: 700px;
    min-height: 150px;
    min-width: 350px;
    height: 100%;
    width: 100%;
    background-color: var(--color-marketing-fundo);

    margin-left: 7%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
main > section.marketing > article.marketing > h2{
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8em, 4vw, 2.5em);
    font-weight: 400;
    color: var(--color-marketing-fonte);
}
main > section.marketing > article.marketing > a.botao{
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1em, 4vw, 1.2em);
    font-weight: 450;
    text-decoration: none;
    color: var(--color-marketing-fonte);

    background-color: var(--color-marketing-fundoBotao);
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.301);

    padding: 15px;

    transition: all 1s;
}
main > section.marketing > article.marketing > a.botao:hover{ /* Dando destaque ao botão "Entre em Contato" */
    transform: scale(105%);
}
main > section.sobre{
    text-align: center;

    max-height: 538px;
    height: 100%;
    background-color: var(--color-sobre-fundo);

    display: flex;
    flex-direction: column;
    align-items: center;
}
main > section.sobre > article.sobre{
    max-width: 930px;
    width: 100%;
    margin: 50px 0px 30px 0px;
}
main > section.sobre > article.sobre > h2{
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5em, 4vw, 3.75em);
    letter-spacing: 3.5px;
    font-weight: 700;
    color: var(--color-marketing-fonte);

    margin-bottom: 45px;
}
main > section.sobre > article.sobre > p{
    font-family: "Poppins", sans-serif;
    font-size: clamp(1em, 2vw, 1.25em);
    font-weight: 250;
    line-height: 1.6;

    margin-bottom: 30px;
}
/* ==================================================================== */


/* Main com ceo/valores */
main > section.valores{
    background: gray url(../assets/images/valores/banner-desktop.png) center center scroll;
    background-size: cover;
    height: 650px;
    width: 100%;
    /* padding: 0px 10vw; */

    display: flex;
    align-items: center;
    justify-content: space-around;
}
main > section.valores > article.ceo{
    text-align: center;
    max-width: 450px;
    margin: 0 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
}
main > section.valores > article.ceo > img.ceos{
    width: 350px;
    border-radius: 20px;
    margin-top: -20px;
    margin-bottom: 20px;

    display: block;
}
main > section.valores > article.ceo > h2{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6em;
    text-shadow: 1px 1px 1px black;
    color: var(--color-ceo-fonte);

    margin-bottom: 5px;
}
main > section.valores > article.ceo > p{
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1em, 1.5vw, 1.1em);
    font-weight: 500;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    color: var(--color-ceo-fonte);
}
main > section.valores > article.valores{
    text-align: center;
    
    max-width: 688px;
    margin: 0 20px;

    display: flex;
    flex-direction: column;
}
main > section.valores > article.valores > h2{
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.5em, 1.8vw, 1.9em);
    font-weight: 700;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    color: var(--color-ceo-fonte);
}
main > section.valores > article.valores > ul > li{
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1em, 1.8vw, 1.2em);
    font-weight: 450;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    color: var(--color-ceo-fonte);

    list-style: none;
}
main > section.valores > article.valores > p{
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1em, 1.8vw, 1.2em);
    font-weight: 450;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    color: var(--color-ceo-fonte);
}
/* ==================================================================== */


/* Main com serviços, background e picture */
main > section.servicos{
    background-color: var(--color-sobre-fundo);
    width: 100%;
    height: auto;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
main > section.servicos > h2{
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5em;
    /* font-size: clamp(2em, 0.8vw, 5em); */
    font-weight: 750;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-ceo-fonte);

    margin-top: 25px;
    margin-bottom: 15px;
}
main > section.servicos > article.tipos{
    text-align: center;

    margin: 15px 0px 30px 0px;
    width: 100%;
    
    display: flex;
    flex-direction: column;
    align-items: center;
}
main > section.servicos > article.tipos > h2{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5em;
    color: var(--color-ceo-fonte);

    margin-bottom: 5px;
}
main > section.servicos > article.tipos > p{
    font-family: 'Montserrat', sans-serif;
    max-width: 870px;
    width: 100%;
    padding: 0px 1px;
}
main > section.servicos > article.tipos > div.background{
    background-color: var(--color-header);

    margin-top: 20px;
    height: 320px;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    -webkit-overflow-scrolling: touch;
}
main > section.servicos > article.tipos > div.background > div.group-pictures{
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

    overflow-x: auto;
    scrollbar-width: none;
}
@media only screen and (max-width: 1595px){
    main > section.servicos > article.tipos > div.background{
        height: 336px;
        
        cursor: grab;
        white-space: nowrap;
        user-select: none;

        transition:  1s ease;
    }
    main > section.servicos > article.tipos > div.background:active{
        cursor: grabbing;
    }
    main > section.servicos > article.tipos > div.background > div.group-pictures{
        justify-content: flex-start;
    }
    main > section.servicos > article.tipos > div.background > div.group-pictures::-webkit-scrollbar {
    display: none;
    }
    main > section.servicos > article.tipos > div.background > div.group-pictures > div.picture{
        pointer-events: none;
    }
    main > section.servicos > article.tipos > div.background > div.progresso-bar{
        background: var(--color-sobre-fundo); /* cor do track */
        border-radius: 6px;

        height: 6px;
        margin: 0px auto;
        width: calc(40% - 50px);      /* ajustável */
        max-width: 300px;   /* opcional */
        position: relative;
        
        transition: opacity 160ms ease;
        pointer-events: none;          /* não interfere com toques */
    }
    main > section.servicos > article.tipos > div.background > div.progresso-bar > div.progresso-thumb{
        background: #6c2eb9;    /* cor da bolinha — ajuste para sua paleta */
        box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
        border-radius: 50%;

        height: 14px;
        width: 14px;

        top: 50%;
        left: 0;
        transform: translate(0, -50%); /* X será ajustado via JS */
        transition: transform 80ms linear; /* suavidade */

        position: absolute;
    }
}
main > section.servicos > article.tipos > div.background > div.group-pictures > div.picture{
    background-color: var(--color-sobre-fundo);

    height: 290px;
    width: 260px;
    padding: 5px 10px 0px 10px;
    margin: 0 30px;

    display: flex;
    align-items: center;
    flex-direction: column;
}
main > section.servicos > article.tipos > div.background > div.group-pictures > div.picture > img.imagem{
    height: 250px;
    width: 250px;

    object-fit: cover; /* Ajustando a imagem para o tamanho da caixa */
}
main > section.servicos > article.tipos > div.background > div.group-pictures > div.picture > p{
    font-family: "Sriracha", cursive;
    font-size: 1.05em;

    height: 35px;
    padding: 2px 0px;
}
/* ==================================================================== */


/* Main com cliente, clientes e logos */
main > section.cliente{
    background-color: var(--color-sobre-fundo);
    padding: 10px 50px 50px 50px;

    width: 100%;
    /* max-width: 1920px; */
    height: 100%;
    max-height: 785px;
}
main > section.cliente > h2{
    font-family: 'Montserrat', sans-serif;
    font-size: 2.5em;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-ceo-fonte);
}
main > section.cliente > article.clientes{
    gap: 80px;

    margin: auto;
    width: 100%;
    max-width: 1300px;

    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-flow: row wrap;
}
main > section.cliente > article.clientes > img{
    width: clamp(50px, 15vw, 245px);
}
/* ==================================================================== */


/* main com depoimentos */
main > section.depoimento{
    background-color: var(--color-header);

    width: 100%;
    /* max-width: 1920px; */
    height: 100%;
    max-height: 540px;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    overflow: hidden;
}
main > section.depoimento > h2{
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2em, 15vw, 2.5em);
    font-weight: 400;
    text-transform: uppercase;
    color: white;

    margin-top: 25px;

    text-align: center;
}
main > section.depoimento > article.depoimentos{
    width: 100%;
    max-width: 850px;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow-x: hidden;
}
main > section.depoimento > article.depoimentos > svg.seta{
    cursor: pointer;
}
main > section.depoimento > article.depoimentos > div.box-depoimentos{
    margin: 0 50px;
    width: 100%;
    max-width: 650px;
    min-height: 330px;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;

    overflow-x: hidden;
}
main > section.depoimento > article.depoimentos > div.box-depoimentos > div.box-depoimento{
    color: white;

    margin: 0 100px;
    width: 100%;
    max-width: 490px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 0 0 450px;

    scroll-snap-align: center;
    scroll-snap-stop: normal;
}
main > section.depoimento > article.depoimentos > div.box-depoimentos > div.box-depoimento > div.texto > p{
    font-family: "Poppins", sans-serif;
    font-weight: 250;
    text-align: center;
}
main > section.depoimento > article.depoimentos > div.box-depoimentos > div.box-depoimento > div.autor{
    text-align: center;

    margin-top: 25px;
}
main > section.depoimento > article.depoimentos > div.box-depoimentos > div.box-depoimento > div.autor > p.cargo{
    font-family: "Poppins", sans-serif;
    font-weight: 450;
    color: yellow;
}
/* ==================================================================== */


/* Footer */
footer{
    background-color: #4c0494;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    height: 100%;
    max-height: 750px;
}
footer > div.bloco1{
    background-color: var(--color-header);

    padding: 0 20px;
    margin-top: 1px;

    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1 1 auto;
}
footer > div.bloco1 > div.logo-redes{
    row-gap: 70px;
    padding-left: 10px;

    height: 400px;

    display: flex;
    flex-direction: column;
    justify-content: center;    
}
footer > div.bloco1 > div.logo-redes > div.logo > img{
    cursor: pointer;

    margin: 0 0 0px 2px;
    width: 200px;

    transition: all 0.15s ease-out;
}
footer > div.bloco1 > div.logo-redes > div.logo > img:active{
    transform: scale(95%);
}
footer > div.bloco1 > div.logo-redes > div.logo > p{
    font-family: "Montserrat";
    font-size: 0.95em;
    color: white;
}
@media only screen and (max-width: 1195px){
    footer > div.bloco1 > div.logo-redes > div.logo > p{
        width: 400px;
    }
}
footer > div.bloco1 > div.logo-redes > div.redes > h3{
    font-family: 'Montserrat';
    font-weight: 450;
    color: white;
    margin-bottom: 10px;
}
footer > div.bloco1 > div.logo-redes > div.redes > a > i{
    color: white;

    transition: all .5s ease-in-out;
}
footer > div.bloco1 > div.logo-redes > div.redes > a > i:hover{
    color: var(--color-ceo-fonte);
}
footer > div.bloco1 > div.contato{
    row-gap: 25px;
    padding-right: 10px;

    display: flex;
    flex-direction: column;
}
footer > div.bloco1 > div.contato > h3{
    font-family: 'Montserrat';
    font-weight: 450;
    color: white;
}
footer > div.bloco1 > div.contato > ul{
    height: 140px;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
footer > div.bloco1 > div.contato > ul > li{
    color: white;
    list-style-type: none;

    cursor: pointer;
}
footer > div.bloco1 > div.contato > ul > li > a{
    text-decoration: none;
    color: white;
}
footer > div.bloco1 > div.contato > ul > li > a > i{
    transition: all .5s ease-in-out;
}
footer > div.bloco1 > div.contato > ul > li > i{
    transition: all .5s ease-in-out;
}
footer > div.bloco1 > div.contato > ul > li:hover > i{
    color: var(--color-ceo-fonte);
}
footer > div.bloco1 > div.contato > ul > li:hover > a > i{
    color: var(--color-ceo-fonte);
}
footer > div.bloco2{
    background-color: var(--color-header);

    margin-top: 1px;

    height: 45px;

    display: flex;
    justify-content: center;
    align-items: center;
}
footer > div.bloco2 > p{
    font-family: 'Montserrat';
    font-weight: 400;
    color: white;

}
/* ==================================================================== */


/* Implementando a bolinha flutuante do whatsapp */
div.bolha{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.5);

    display: flex;
    justify-content: end;
    align-items: center;
    position: fixed;
    
    bottom: 40px;
    left: 94%;
}
div.bolha > p{
    opacity: 0;
    visibility: hidden;
}
div.bolha:hover > p{
    background-color: white;
    color: black;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    padding: 8px;
    opacity: 1;
    visibility: visible;
    width: 219px;

    display: block;
    position: absolute;
    right: 60px;

    transition: all 0.5s ease-in-out;
}
div.bolha > a{
    height: 52px;
    width: 52px;
}
div.bolha > a > img{
    height: 100%;
    width: 52px;
}
/* ==================================================================== */
 

/* BOXS OCULTOS */
header > div.menu-mobile > i{
    display: none; /* Ocultando botão hamburguer em desktop */
}
main > section.cliente > article.clientes > img.clone1, img.clone2{
    display: none; /* Desativando imagens repetidas */
}
/* ==================================================================== */