@import url(//db.onlinewebfonts.com/c/45ba45997328d4fd11a97a6a6ea3a8b3?family=Etelka+Medium+Pro);

@font-face {
    font-family: "Etelka";
    src: url("//db.onlinewebfonts.com/t/45ba45997328d4fd11a97a6a6ea3a8b3.eot");
    src: url("//db.onlinewebfonts.com/t/45ba45997328d4fd11a97a6a6ea3a8b3.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/45ba45997328d4fd11a97a6a6ea3a8b3.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/45ba45997328d4fd11a97a6a6ea3a8b3.woff") format("woff"), url("//db.onlinewebfonts.com/t/45ba45997328d4fd11a97a6a6ea3a8b3.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/45ba45997328d4fd11a97a6a6ea3a8b3.svg#Etelka Medium Pro") format("svg");
}

@font-face {
    font-family: "Etelka-Light";
    src: url("../assets/fonts/EtelkaLightPro/EtelkaLightPro.ttf");
    src: url("../assets/fonts/EtelkaLightPro/EtelkaLightPro.woff2") format("woff2"), url("assets/fonts/EtelkaLightPro/EtelkaLightPro.woff") format("woff")
}

@font-face {
    font-family: Ichiji-One;
    src: url(../assets/fonts/IchiFont/Ichiji-One.otf);
}

@font-face {
    font-family: Ichiji-Two;
    src: url(../assets/fonts/IchiFont/Ichiji-Two.otf);
}

@font-face {
    font-family: Avenir;
    src: url(../assets/fonts/avenir_ff/AvenirLTProHeavy.otf);
}

body {
    overflow-x: hidden;
}

.bg-image.row {
    background-image: url('../assets/images/Retângulo 17.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 500px;
}

@media only screen and (max-width: 1200px) {
    .k-word-left, .k-word-right {
        display: none;
    }
}

.k-word {
    display: flex;
    align-items: baseline;
}

 .k-word-right {
    font: normal normal normal 15.625rem/22.9375rem Ichiji-One;
    color: #00D095;
    position: absolute;
    z-index: 0;
    right: -51px;
    top: -62px;
}

.k-word-left {
    font: normal normal normal 15.625rem/22.9375rem Ichiji-One;
    color: #00D095;
    position: absolute;
    z-index: 0;
    transform: matrix(-1, 0, 0, -1, 0, 0);
    left: -57px;
    top: 192px;
}

button.btn {
    background-color: #00CC99;
    font: normal normal normal 1.12rem/1.75rem Pridi;
    color: #FFFFFF;
}

button.btn.button-header:hover {
    background-color: #00BB99;
    color: #FFFFFF;
    transition: 1s !important;
}

.text-header-1 {
    font: normal normal bold 16px/22px OpenSans;
    color: #FFFFFF;
    position: relative;
}

.text-header-2 {
    font: normal normal normal 40px/40px Etelka;
    color: #FFFFFF;
    opacity: 1;
    letter-spacing: 0px;
    position: relative;    
}

@media(max-width: 768px) {
    .bg-image.row {
        background-image: url(../assets/images/Retângulo\ 17.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: -300px;
    }
}

.nav-row {
    background-color: #16425B;
}

.nav-bar-row {
    background-color: #16425B;
}

#logo {
    font: normal normal normal 64px/67px Ichiji-One;
    color: #FFFFFF;
}

#logo:hover {
    color: #FFFFFF;
}

a#logo span {
    color: #00CC99;
}

div ul {
    text-align: end;
}

#instagramLogo {
    width: 1.5rem
}

.nav-item {
    color: #00CC99;
    font: normal normal 900 1rem/22px Avenir;
    padding: 1rem;
}

ul.nav-ul-list {
    padding-left: 2rem;
}

li.nav-item {
    padding-left: 2rem;
}

.nav-item a {
    color: #00CC99;
}

.nav-item a:hover {
    transition: 0.5s;
    color: #00CC77;
}

@media (min-width: 768px) {
    .nav-item a img#instagramLogo {
        margin-right: 3rem;
    }
}

.title-text {
    font: normal normal bold 40px/48px Etelka;
    opacity: 1;
    color: #707070;
}

.text-explanatory {
    font: normal normal normal 16px/28px Open Sans;
    color: #707070;
}

button.button-cadastre {
    margin-top: 2.68rem;
    padding-top: 0.93rem;
    padding-bottom: 0.93rem;
    background-color: #00CC99 !important;
    border: none !important;
    font: normal normal 600 18px/24px Open Sans !important;
    color: #FFFFFF !important;
}

button.button-cadastre:hover {
    transition: 0.5s;
    color: #FFFFDD;
}

@media (max-width: 575px) {
    div button.button-cadastre {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }


    /* div img.screen-computer {
        margin-right: 5rem;
        margin-top: 3rem;
    } */
}

div.container-fluid.mid-color {
    width: 100%;
    background-image: linear-gradient(to bottom, #D9DCD6 50%, #FFFFFF 50%);
}

div.card {
    background-color: #16425B;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 3.5rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

div.card img.card-img-top.icons {
    width: 3.56rem;
    height: 3.12rem;
}

div.card div.card-body h5.card-title {
    text-align: center;
    padding-top: 2rem;
    font: normal normal normal 2rem/2rem Etelka-Light;
    color: #FFFFFF;
}

div.card div.card-body p.card-text {
    font: normal normal normal 1rem/1.5rem Open Sans;
    text-align: center;
    color: #FFFFFF;
    padding-top: 1rem;
    padding-bottom: 4.75rem;
}

#nosso-sistema {
    background-color: #FFFFFF
}

#system {
    padding-top: 6rem;
}

p.text-system {
    font: normal normal bold 1rem/1.375rem Open Sans;
    color: #969696;
}

p.text-tecnology {
    font: normal normal 2.5rem/3rem Etelka;
    color: #707070
}

@media (max-width: 575px) {
    img.logo-ark {
        display: none;
    }
}

@media (min-width: 800px) {
    img.logo-ark {
        padding-top: 12rem;
        padding-bottom: 8.5rem;
    }
}

div.accordion .accordion-item {
    border: none;
    border-top: 1px solid #D9DCD6;
}

.accordion .accordion-item button {
    font: normal normal normal 2rem/2.3rem Etelka-Light !important;
    color: #707070 !important;
}

.accordion .accordion-body {
    font: normal normal normal 1rem/1.375rem Open Sans !important;
    color: #959595 !important;
    letter-spacing: 0px;
}

.clients .p-client {
    font: normal normal bold 1rem/1.375rem Open Sans;
    color: #969696;
}

.clients .h2-client {
    font: normal normal 2.5rem/3rem Etelka;
    color: #707070;
}

#nossos-clientes {
    margin-bottom: 1rem;
}

.grid-tamplate {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
}

@media (max-width: 800px) {
   .grid-tamplate {
        grid-template-columns: 1fr;
    }
}

#singUp {
    padding-top: 4.18rem;
}

p.p-singUp {
    font: normal normal 600 1rem/1.375rem Open Sans;
    color: #969696;
    text-align: center;
}

h3.h3-singUp {
    font: normal normal normal 2.5rem/3rem Etelka;
    color: #FFFFFF;
    text-align: center;
}

@media (max-width: 575px) {
    h3.h3-singUp {
        font: normal normal normal 1.5rem/2.3rem Etelka;
        width: 318px;
    }
}

div.email-col, div.whats-col {
    padding: 0;
    font: normal normal normal 1rem/1.5rem Open Sans;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.email-col button.button-email,
div.whats-col button.button-whats {
    width: 15.75rem;
}

.img-contact {
    padding-bottom: 0.2rem;
    padding-right: 0.5rem;
}

@media (max-width: 575px) {
    div.email-col button.button-email,
    div.whats-col button.button-whats {
        width: 18rem;
    }
}

.address {
    font: normal normal normal 1rem/2rem Asap;
    color: #FFFFFF;
}

/* Estiliza a barra de rolagem */
::-webkit-scrollbar {
    position: sticky;
    z-index: 9;
    width: 0.1rem;
    background-color: transparent;
}

::-webkit-scrollbar-track {
    background: black;
    border-radius:  0.25rem;
}

/* Estiliza o polegar (thumb) da barra de rolagem */
::-webkit-scrollbar-thumb {
    background: #16425B;
    border-radius: 0.25rem;
    border: none;
}