@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Literata:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat: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');

@font-face {
    font-family: "Metropolis ExtraBold";
    src: url('fonts/Metropolis-ExtraBold.otf');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #152e4bb4;
    ;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #3d648aab;
    ;
}

::-webkit-scrollbar-thumb:active {
    background-color: #534b04a8;
}

::selection {
    background-color: rgba(146, 118, 24, 0.5);
}

.bg-pDark {
    background-color: #1f2124;
}

header>nav>a>img#hLogotipo {
    width: 10vw;
    min-width: 100px;
    max-width: 130px;
}

main {
    margin: auto;
    max-width: 950px;
}

#home #bContainer {
    padding-top: 50px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.315) 30%, rgb(255, 255, 255) 85%), url('../img/pic07.jpeg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center right;
}

#home .title {
    padding: 0px 0px 20px 0px;
}

#home .title h2 {
    padding: 0px 20px;
    color: white;
    font: bolder 2.8em 'Cinzel', serif;
    text-align: center;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.8);
}

#home #homeImage {
    text-align: center;
    padding: 15px;
}


#home #homeImage img {
    max-width: 250px;
    width: 50%;
    -webkit-filter: drop-shadow(5px 5px 5px rgba(34, 34, 34, 0.25));
    filter: drop-shadow(5px 5px 5px rgba(34, 34, 34, 0.25));
}

#home #apresentacao {
    width: 90%;
    margin: auto;
    padding: 25px;
}

#home #apresentacao p {
    text-align: justify;
    font: 1.3em 'Literata', serif;
}

#home .destaque {
    font-weight: bold;
}

#home h3 {
    font: 1.6em "Metropolis ExtraBold";
    text-align: center;
    margin-top: 10px;
}

#home #homeServices {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: auto;
}

#home #homeServices .service {
    width: 250px;
    margin: 20px;
}

#home #homeServices .service p {
    text-align: center;
    font: bold 1.1em 'Quicksand', sans-serif;
}

#home #homeServices .service img {
    max-height: 80px;
    display: block;
    margin: auto;
}

#home #divAgendeAgora {
    text-align: center;
    padding: 40px 0px;
    margin-bottom: 10px;
}

#home #divAgendeAgora a {
    font-weight: bolder;
    font-size: 1.7em;
    color: #3862aa !important;
    transition: 0.2s;
}

#home #divAgendeAgora a:hover {
    text-decoration: none;
    font-size: 1.85em;
    color: #3aa2f7 !important;
    transition: 0.2s;
}

section#nossaEquipe h2 {
    padding-top: 40px;
    font: 2.6em "Metropolis ExtraBold";
    text-align: center;
}

section#nossaEquipe .apresentacao {
    margin: 10px 0px;
}

.specialty {
    font: 1.1em "Metropolis ExtraBold", sans-serif;
    text-align: center;
}

.personalPic img {
    border-radius: 5% 10%;
    -webkit-filter: drop-shadow(5px 5px 5px rgba(34, 34, 34, 0.25));
    filter: drop-shadow(5px 5px 5px rgba(34, 34, 34, 0.25));
    max-width: 300px;
    width: 50vw;
    display: block;
    margin: auto;
}

.fourxthree {
    max-width: 550px !important;
    min-width: 300px !important;
}

.oab {
    font: 0.9em 'Mulish', sans-serif;
    text-align: center;
    color: var(--gray0);
    padding-top: 10px;
}

.description {
    text-indent: 2em;
    padding: 25px;
    font-size: 1.1em;
    color: #707070;
    text-align: justify;
    font: 1.1em 'Mulish', sans-serif;
}

.name {
    font: 2.3em 'Marcellus SC', serif;
    text-align: center;
    color: var(--yellow0);
    padding: 13px;
}

section#quemSomos {
    padding: 40px;
}

section#quemSomos h2 {
    font: 2.3em "Metropolis ExtraBold";
    text-align: center;
}

section#quemSomos .line {
    margin-bottom: 20px;
}

section#quemSomos p {
    text-indent: 2em;
    font: 1.1em 'Mulish', sans-serif;
    text-align: justify;
}

section#servicos>h2 {
    font: 2.3em "Metropolis ExtraBold";
    text-align: center;
}

section#servicos>h3 {
    font: 1.2em 'Montserrat', sans-serif;
    text-align: center;
}

section#servicos #carouselExampleIndicators {
    box-shadow: 5px 4px 20px 2px rgba(0, 28, 104, 0.25);
    background-image: url(../img/backgrounds/background-blue.jpg);
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    border-radius: 30px 0px 10px 0px;
    margin: 30px;
    transition: 0.2s;
    height: 600px;
}

section#servicos .menuLogo {
    position: absolute;
    left: 10px;
    top: 10px;
}

section#servicos .menuLogo img {
    max-width: 100px;
}

section#servicos .topT {
    position: absolute;
    right: 0px;
}

section#servicos .topT img {
    max-width: 70px;
}

section#servicos .bottomT {
    position: absolute;
    bottom: 0px;
}

section#servicos .bottomT img {
    max-width: 70px;
}

section#servicos .balanceIco {
    position: absolute;
    bottom: 10px;
    right: 20px;
}

section#servicos .balanceIco img {
    max-width: 50px;
}

section#servicos .carousel-item h3 {
    font-family: 'Montserrat', sans-serif;
    padding-top: 30px;
    text-align: center;
    color: white;
}

section#servicos .carousel-item .asideLinks {
    color: white;
    text-align: center;
    font: 1.05em 'Montserrat', sans-serif;
    font-weight: 300;
}

section#servicos ul {
    color: #ecbf2b;
    list-style-type: none;
    list-style-position: inside;
    columns: 2;
    max-width: 800px;
    margin: 0px 50px;
    padding: 0px 0px 50px 20px;
}

section#servicos li {
    padding: 10px;
    font: 1.25em 'Mulish', sans-serif;
    display: flex;
    align-items: center;
}

section#servicos li::before {
    content: '➤  ';
    position: relative;
    right: 5px;
}

ul#ulPrev {
    max-width: 600px;
    columns: 1 !important;
}

section#servicos ul a {
    text-decoration: none;
    color: white;
    font-size: 0.8em;
}

section#servicos ul a:hover {
    text-decoration: underline;
}

.sublistLi {
    align-items: flex-start !important;
}

.sublistLi a {
    width: 200px;
}

.sublist {
    display: flex;
    flex-direction: column;
    list-style-type: circle;
    padding-left: 0px;
    width: 500px;
    margin: 0px !important;
    font-size: 0.7em;
    columns: 1;
}

.carousel-indicators li {
    width: 10px;
    border-radius: 10px;
    margin: 10px;
}

section#nossaLocalizacao article#localizacao h2 {
    font: 2.3em "Metropolis ExtraBold";
    text-align: center;
}

iframe#mapa {
    padding: 30px 0px;
    display: block;
    margin: auto;
    max-width: 900px !important;
}

footer {
    width: 100%;
    font: 1.1em 'Quicksand', sans-serif;
}

.footer {
    background: #1f2124;
    color: white;
}

.footerLogo {
    position: relative;
    padding: 10px;
}

.footerLogo img {
    position: absolute;
    top: -20px;
    right: 10px;
    max-width: 80px;
}

.about-company i {
    font-size: 37px;
}

.about-company a {
    color: white;
    transition: color .2s;
}

.about-company a:hover {
    color: #4180CB
}

.location i {
    font-size: 18px;
}

.location a {
    color: white;
}

.copyright p {
    border-top: 1px solid rgba(255, 255, 255, .1);
    text-align: center;
}

@media screen and (max-width: 640px) {
    .title {
        font-size: 0.57em;
        padding: 0px;
    }

    #homeImage img {
        min-width: 170px;
    }

    #home #apresentacao {
        width: 100%;
    }

    #home #apresentacao p {
        font-size: 1.7em;
    }

    #home #homeServices .service {
        width: 100px;
        margin: 10px;
    }

    #home #homeServices .service img {
        max-height: 60px;
    }

    #home h3 {
        font-size: 2.3em;
    }

    #home #divAgendeAgora a {
        font-size: 2.05em;
    }

    #home #divAgendeAgora a:hover {
        font-size: 2.1em;
    }

    section#nossaEquipe h2 {
        font-size: 2em;
    }

    .name {
        font-size: 1.6em;
    }

    .personalPic img {
        width: 65vw;
    }

    section#quemSomos h2 {
        font-size: 1.6em;
    }

    section#quemSomos p {
        font-size: 1em;
    }

    section#servicos>h2 {
        font-size: 1.8em;
    }

    section#servicos>h3 {
        padding: 0px 5px;
        font-size: 1.1em;
    }

    section#servicos #carouselExampleIndicators {
        position: relative;
        margin: 20px 15px;
        background-position: center bottom;
        height: 940px;
    }

    section#nossaLocalizacao article#localizacao h2 {
        font-size: 1.8em;
    }

    .carousel-control-next-icon, .carousel-control-prev-icon {
        top: 350px;
        position: absolute;
    }

    section#servicos .menuLogo img {
        max-width: 75px;
    }

    section#servicos .carousel-item h3 {
        margin-top: 80px;
        font-size: 1.7em;
    }

    section#servicos .carousel-item .asideLinks {
        font-size: 0.95em;
    }

    section#servicos ul {
        columns: 1;
        padding: 10px 0px 90px 0px;
    }

    .sublistLi {
        align-items: flex-start !important;
    }
    
    .sublistLi a {
        width: auto;
    }

    .sublist {
        position: relative;
        left: 20px;
    }
}

@media screen and (max-width: 360px) {
    .bottomT, .balanceIco, .carousel-indicators {
        display: none;
    }

    #carouselExampleIndicators {
        overflow-y: scroll;
    }
}

/*   Botão flutuante Whatsapp   */

.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #21c42e9d;
    z-index: 100;
    transition: 0.2s;
}

.float:hover {
    height: 65px;
    width: 65px;
    transition: 0.2s;
    padding: 3px;
}

.my-float {
    margin-top: 16px;
}

a.float:hover {
    color: white;
}

/*   Lines   */

.line {
    height: 5px;
    width: 50px;
    background-color: black;
    margin: auto;
    position: relative;
    border-radius: 5px;
}

.bigline {
    height: 2px;
    width: 35%;
    background-color: rgba(0, 0, 0, 0.2);
    border: 5px;
    margin: 50px auto;
    position: relative;
    top: 20px;
}

/*  Animação Reveal */

@keyframes fade-bottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-left {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-right {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.reveal {
    opacity: 0;
    transition: 1s all ease;
    position: relative;
    transform: translateY(150px);
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

.active.fade-bottom {
    animation: fade-bottom 1s ease-in;
}

.active.fade-left {
    animation: fade-left 0.5s ease-in;
}

.active.fade-right {
    animation: fade-right 0.5s ease-in;
}