@import url("https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap");

/* Largura de smartphones atuais 180px  */
/* Largura da tela do iPhone 12> 1170px */
/* Largura da tela do iPhone 11 828px   */
@media screen and (max-width: 1170px) and (orientation: portrait) {
    #legend {
        display: none !important;
    }

    .navBar {
        width: 100vw;
        padding: 0 !important;
    }

    .navBar_lista {
        margin: 0 !important;
        justify-content: space-evenly !important;
        flex-wrap: wrap;
    }

    .navItem {
        padding: 0.1rem 1rem;
        margin: 0 !important;
        text-wrap: wrap;
    }

    .logoLivee {
        display: none;
    }

    .textoCentral {
        width: 95% !important;
    }

    .textoCentral h1 {
        font-size: 3rem !important;
    }

    .botao-hero {
        top: 9rem !important;
        z-index: 1;
    }

    #homemContainer {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: inherit !important;
        height: inherit !important;
        top: 13rem !important;
    }

    .fotoHomem {
        width: inherit !important;
    }

    #homemContainer button {
        left: inherit !important;
        font-size: inherit !important;
        padding: 0.5rem 0.75rem !important;
    }

    .computadores {
        align-items: flex-end;
        position: inherit !important;
        height: 100%;
    }

    .computadorEsquerda,
    .computadorDireita {
        height: 30rem !important;
    }

    .FolhaUm_container {
        z-index: 0;
    }

    .FolhaDois_container {
        z-index: 1;
    }

    .FolhaTres_container {
        z-index: 1;
    }

    .folhasUm {
        top: 36% !important;
        left: 17%;
        right: inherit !important;
        width: 20%;
    }

    .folhasDois {
        width: 25%;
    }

    .folhasTres {
        width: 20%;
        top: 85% !important;
        right: 67% !important;
    }
    
    #mainContent-quemSomos {
        gap: 4rem !important;
    }

    #rightSide-quemSomos {
        width: 80% !important;
        heigth: inherit !important;
    }

    #sectionServicos {
        text-align: -webkit-center;
        gap: 2rem !important;
    }

    .main_container {
        align-items: center;
        gap: 2rem !important;
        flex-wrap: wrap;
        padding-bottom: 0 !important;
    }

    .container1,
    .container2 {
        align-items: center !important;
        gap: 2rem !important;
        width: 95% !important;
    }

    #servicesMan {
        display: none;
    }

    .blocoTextoServicos {
        width: 100% !important;
    }

    .botõesServicos_container {
        gap: 2rem;
        width: inherit !important;
    }

    .LinhaBaixo {
        flex-direction: column !important;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .linhaBaixo_individual {
        width: 90% !important;
    }

    /* Depoimentos */
    #depoimentos {
        height: inherit !important;
    }

    #titleDepoimento {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
    }

    #textoDepoimento {
        width: 90% !important;
    }

    #mainContentDepoimentos {
        width: inherit !important;
        height: inherit !important;
        margin: 3.312rem auto 5rem;
    }

    #sectionContentDepoimentos {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem !important;
    }

    /* Blog */
    #blog {
        height: 130vh !important;
        background-size: 100vw 130vh !important;
    }

    #blog-content {
        flex-direction: column;
        align-items: center;
    }

    #leftside-blog-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #cards-blog-content {
        flex-wrap: wrap;
    }

    #paginacao {

        margin-bottom: 5% !important;
    }

    .input_grupo {
        flex-wrap: wrap;
    }

    #parceiros {
        background-size: 100% 14.7% !important;
        height: inherit !important;
    }

    #parceiros-header {
        flex-wrap: wrap;
    }

    #parceiros-header h1 {
        color: #033249 !important;
    }

    #parceiros-header span {
        color: #00B4B0 !important;
    }

    #grid-parceiros {
        flex-wrap: wrap;
    }

    #paginacao-parceiros {
        padding: 1rem;
    }

    .footer_container {
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .footer_lista,
    .footer_section {
        display: none !important;

    }
}

* {
    font-family: "Gabarito", sans-serif;
    font-optical-sizing: auto;
    /* font-size -> 1rem = 16px */

    box-sizing: border-box;

    border: 0 solid #e5e7eb;

    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

    list-style: none;
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
p {
    color: #fbfbfb;
}

span {
    color: #00B4B0;
    font-weight: 700;
}

img,
video {
    max-width: 100%;
    height: auto
}

a:focus {
    color: #00b4b0;
}

/* View starts from here... */
#backToTop {
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 1%;
    right: 1%;

}

#legend {
    display: none;
    color: #fbfbfb;
    font-size: 0.8rem;

}


#backToTop:hover #legend {
    display: block;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 1rem;
    padding: 0.3rem;
}


.navBar {
    padding: 0.45rem 0 0 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.7);
}

.navBar_lista {
    text-wrap: nowrap;
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 0 1%;
    padding: 0;
}

.navItem {
    font-size: 1rem;
    font-weight: 400;
}

.navItem {
    margin: 0 1.5rem;
    color: #7a8b9c
}

#hero-container {
    position: relative;
    margin: 0;
    background: url('/_next/assets/hero-section/bg-hero.png') no-repeat top;
    background-size: 100vw 100vh;
    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.logoLivee {
    position: absolute;
    top: 2.375rem;
    left: 4rem;
}

#homemContainer {
    position: absolute;
    top: 11rem;
    z-index: 1;
    width: 34.788rem;
    height: 38.415rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fotoHomem {
    width: 34.788rem;
    height: 50.00rem;
}

.textoCentral {
    width: 43.937rem;
    height: 12rem;
    position: absolute;
    top: 4rem;
    z-index: 2;
}

.textoCentral h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 0,5;
    text-align: center;
    color: #033249;
    
}

.botao-hero {
    background-color: #00b4b0;
     background-color: #00b4b0;
    color: #fff;
    border-radius: 1rem;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1.25rem;
    cursor: pointer;
    font-weight: 500;
    text-align: center
}

.folhasUm {
    position: absolute
}

.folhasUm {
    position: absolute;
    top: 30%;
    right: 75%
}

.folhasDois {
    position: absolute;
    top: 70%;
    right: 27%
}

.folhasTres {
    position: absolute;
    top: 93%;
    right: 60%
}

.computadores {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0
}


/* Quem Somos */
#quemSomos {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mainContent-quemSomos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7rem;
    flex-wrap: wrap;
    margin: 0 auto;
}

#rightSide-quemSomos {
    width: 26.312rem;
    height: 18.375rem;
}

#rightSide-quemSomos>h2 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.4rem;
    color: #033249;
    text-align: justify;
}

#rightSide-quemSomos>p {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: #7A8B9C;
    margin: 1rem 0;
    text-align: justify;
}

#rightSide-quemSomos p~p {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: #7A8B9C;
}

#rightSide-quemSomos p~p span {
    color: #033249 !important;
}

/* Serviços */
.servicos {
    background: url('/_next/assets/nossos-serviços/bg-servico.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tituloServicos_container {
    display: flex;
    justify-content: center;
    text-align: center;
    padding-top: 10rem;
    padding: 3rem 0;
}

.tituloServicos {
    font-size: 2.5rem;
    font-weight: 400;
    color: #7a8b9c
}

.corTituloServicos {
    color: #00b4b0;
    font-weight: 700
}

#sectionServicos {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    width: 95%;
    margin-bottom: 4rem;
}

.main_container {
    display: flex;
    gap: 4rem;
    flex-direction: column;
    position: relative;
}

.container1,
.container2 {
    display: flex;
    gap: 4rem;
    flex-wrap: wrap;
}

.blocoTextoServicos {
    width: 30%;
}

#servicesMan {
    width: 18.562rem;
    position: absolute;
    bottom: -4rem;
    right: 0rem;
}

.LinhaBaixo {
    display: flex;
    flex-direction: row;
    gap: 4rem;
}

.linhaBaixo_individual {
    width: 30%;
}

.botõesServicos_container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 30%;
}

.textoPrincipalServicos {
    color: #033249;
    font-family: Gabarito;
    font-weight: 700;
    font-size: 1.5rem
}

.textoSecundarioServicos {
    color: #7a8b9c;
    font-weight: 400;
    font-size: .875rem;
    font-family: Gabarito;
    text-align: justify;
}

.botãoNossoServico {
    background-color: #033249;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    font-size: .875rem;
    font-weight: 400;
    font-family: Gabarito;
    text-align: center;
    color: #fbfbfb !important;
}

/* Depoimentos */
#depoimentos {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#mainContentDepoimentos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3.75rem;
    width: 54.125rem;
    /* height: 26.687rem; */
    /* margin: 3.312rem auto 5rem; */
}

#titleContentDepoimentos {
    text-align: center;
    font-size: 3.125rem;
    font-weight: 400;
    line-height: 3rem;
    color: #7A8B9C;
}

#sectionContentDepoimentos {
    display: flex;
    gap: 4.375rem;
}

#titleDepoimento p {
    color: #00B4B0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-align: left;
    /* width: 42.83rem; */
}

#titleDepoimento h2 {
    color: #033249;
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.4rem;
    text-align: left;
    height: 4.75rem;
    width: 16.062rem;

}

#titleDepoimento button {
    background: #00B4B0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    color: #FBFBFB;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5rem;
    text-align: center;
    margin: 2rem 0;

}

#textoDepoimento {
    width: 33.312rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#textoDepoimento h3 {
    color: #033249;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5rem;

}

#textoDepoimento p {
    text-align: justify;
}

#textoDepoimento img {
    max-width: 1.375rem;
    max-height: 1.83rem;
}

#textoDepoimento img~img {
    left: 96%;
    position: relative;
}

#contentDepoimentoImg {
    position: relative;
}

/* Parceiros */
#parceiros {
    height: 100vh;
    background: url('/_next/assets/parceiros/bg-parceios-header.png');
    background-repeat: no-repeat;
    background-size: 100vw 13.65rem;
}

#parceiros-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3.5rem;
}

#parceiros-header h1,
#parceiros-header span {
    font-size: 2.5rem;
    line-height: 3rem;
    text-align: left;
    color: #fbfbfb;
}

#grid-parceiros {
    display: flex;
    justify-content: center;
    gap: 1.5625rem;
    flex-wrap: wrap;
    margin: 2.5rem auto;
}

.parceiro-container {
    background: #E4ECEC;
    width: 15.875rem;
    height: 9.937rem;
    border-radius: 1rem;
}

#paginacao-parceiros {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
}

/* Blog */
#blog {
    background: url('/_next/assets/blog/bg-blog.png') no-repeat;
    background-size: 100vw 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.187rem;
}

#blog-content {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    width: 90%;
    margin: 0 auto
}


#leftside-blog-container {
    width: 19.375rem;
}

#title-blog-content h1 {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 3rem;
    text-align: left;
}

#title-blog-content span {
    color: #FBFBFB;
}

#text-blog-content {
    margin: 1rem 0 1.5rem;
}

#text-blog-content p {
    font-size: 0.875rem;
    font-weight: 400;
    /* line-height: 1.25rem; */
    text-align: justify;
}

#button-blog-content button {
    padding: 1rem 1.5rem;
    border-radius: 1rem;

    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.5rem;
    text-align: center;
    background-color: #fbfbfb;
    color: #00b4b0;
}

#cards-blog-content {
    display: flex;
    justify-content: space-evenly;
    gap: 1.5rem;
}

.cards-blog {
    display: flex;
    width: 20.125rem;
    height: 18.125rem;
    background: #068784;
    border-radius: 1rem;
}

.content-card {
    width: 20.125rem;
    height: 9.5625rem;
    position: relative;
    top: 8.562rem;
    background-color: #fbfbfb;
    border-radius: 1rem;
    padding: 1rem;
    text-align: justify;
}

.content-card h2 {
    color: #033249;
    margin: 0.1rem 0;
}

.content-card p {
    color: #7A8B9C;
}

#paginacao {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    width: 90%;
    margin: 0;
}

#botoes-seta {
    display: flex;
    gap: 1rem;
}

#botoes-paginas {
    display: flex;
    gap: 16px;
}

/* Contato */
.faleConosco_bg {
    display: flex;
    justify-content: center;
    background-image: url('/_next/assets/fale-conosco/bg-fale-conosco.png');
    background-size: cover;
    background-repeat: no-repeat
}

.faleConosco {
    background-color: #033249;
    padding: 2rem;
    border-radius: .5rem;
    max-width: 42.5rem;
    width: 100%;
    margin: 1rem
}

.form {
    display: flex;
    flex-direction: column
}

.nomeForm {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 2rem;
    font-family: Gabarito;
    color: #fbfbfb !important;
}

.input_grupo {
    display: flex;
    justify-content: space-between;
    gap: 1rem
}

.input_item {
    width: 100%
}

.input_item,
.input_item_full {
    display: flex;
    flex-direction: column
}

.input_item_full {
    margin-top: 1rem
}

label {
    margin-bottom: .5rem;
    color: #00b4b0;
    font-weight: 500;
    font-size: 1.25rem
}

.styleinput_grupo {
    padding: 1rem 2rem;
    border: 1px solid;
    font-size: 1rem;
    background: #E4ECEC;
    color: #7A8B9C;
    width: 19rem;
}

.styleinput_grupo,
textarea {
    margin-bottom: 1rem;
    border-radius: 1rem
}

textarea {
    padding: 2rem;
    background: #E4ECEC;
    color: #7A8B9C;
}


.botao_container {
    display: flex;
    justify-content: flex-end
}


.footer_container {
    background-color: #00b4b0;
    display: flex;
    justify-content: space-around;
    padding: 2rem;
    align-items: center
}

.footer_lista {
    font-family: Gabarito;
    font-size: .875rem;
    font-weight: 400;
    color: #fbfbfb !important;
}

.footer_icones,
.footer_lista {
    display: flex;
    gap: 1rem
}

.footer_copyright_container {
    /* background-color: #068784; */
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 0 0.813rem 3.75rem 0 #0006;
}

.footer_copyright_texto {
    font-weight: 700;
    font-size: .75rem;
    color: #fbfbfb !important;
}

.footer_copyright_texto2 {
    font-weight: 400;
    font-size: .75rem;
    color: #fbfbfb !important;
}