.textoPrincipal {
    font-weight: bold;
    font-size: 1.5rem;
}

.principalOverlayer {
    height: 100%;
}

.w-100 {
    width: 100%;
}

.textoPrincipal,
.ParagrafoPrincipal {
    font-family: 'Inter', sans-serif;
}

.ParagrafoPrincipal {
    font-size: 1rem;
    margin: 20px 0 50px 0;
    color: var(--text-p-color)
}

.principal {
   
    background: url("./img/222.png") no-repeat;
    background-size: contain;
    background-position:right top;
    z-index: 1;
    position: relative;
    box-shadow: 3px 3px 8px 0px rgba(0, 0, 0, 0.15)
    
}

.principalBox {
    width: clamp(200px, 100%, 520px);
}

.principalOverlayer {
    background: linear-gradient(120deg, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 0) 80%, rgba(0, 212, 255, 0) 100%);
    padding: 0px 10%;

}

.principalBotoes {
    transition: all .08s linear;
    padding: 15px 40px;
    border-radius: 2px;
    color: var(--gray-color);
    border: 1px solid var(--gray-color)
}

.faleconosco {
    background: var(--primary-color);
    color: var(--white-color-inverted);
    border: none
}

.faleconosco:hover {
    opacity: .85;
}

.saibamais:hover {
    color: var(--hover-color);
    border-color: var(--hover-color);
}

/* secundaria */

.secundariaLeftground {
    background: url("./img/equipe-informal-olhando-para-camera.jpg") no-repeat;
    background-size: cover;
    background-position-x: -290px;
    width: 450px;
    height: 550px;
    margin-right: 30px;

}

.secundaria {
    height: 900px;
}

.DesejaSerUmaFintech {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #009a93;
}

.DesejaSerUmaFintech::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 2px;
    background: var(--primary-color);
    margin-top: 35px;
    margin-left: -10px;
}

.porqueNosText {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: bold;

}

.SecundariaBeneficios {
    max-width: 400px;

}

.porqueNos {
    width: 410px;
}

.secundariaPrincipalTextBox {
    padding: 20px;
}

/* tercearia */

.custom-shape-divider-top-1689967288 {
    position: absolute;

    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1689967288 svg {
    position: relative;
    display: block;
    width: calc(159% + 1.3px);
    height: 133px;
}

.custom-shape-divider-top-1689967288 .shape-fill {
    fill: #ffffff;
}

.tercearia {
    height: 120vh;
    background: var(--background-inverted-color);
    color: var(--text-color)
}

.plataformaDeCreditoText {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 30px;
    font-size: 1.3rem;


}

.plataformaDeCreditoText::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 2px;
    background: var(--primary-color);
    margin-top: -10px;
    margin-left: -10px;
}

.plataformaDeCreditoCopy {
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    font-size: 1rem;
    margin-left: 30px;
    margin-bottom: 10px;
}

.plataformaDeCreditoSubCopy {
    color: var(--text-p-color);
    margin-left: 30px;
    width: 490px;
    margin-bottom: 50px;
}

.avoidShape {

    width: 100%;
    margin: auto;
}

.plataformaDeCredito {
    width: 565px;
}


.plataformaDeCreditoFaleConoscoButton {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
    background: var(--primary-color);
    margin-left: 30px;
    padding: 10px 20px;
    width: 500px;
    transition: all .1s linear
}

.plataformaDeCreditoFaleConoscoButton:hover {
    opacity: .8;
}

.plataformaDeCreditoRightground {

    height: 100%;
    width: 500px;

}

.plataformaDeCreditoRightgroundCircle {
    fill: var(--primary-color);
}


/* quartenaria */
.quartenaria {
    padding: 0px 10%;
    margin: 160px 0 0;
}

.referenciaMedicaTexto {
    margin: 50px 0;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    font-size: 1.3rem;
    color: var(--secound-color);

}

.BoxServicosPrimaria {
    font-family: 'Inter', sans-serif;
    background: url("./img/background-img.webp") no-repeat;
    background-position-y: -200px;
    background-size: cover;
    border-radius: 4px;
    width: 360px;
    height: 470px;
    margin: 40px 10px;

}

.saibaMaisServicos {
    color: var(--primary-color);
    font-size: 1rem;
}

.TituloServicos {
    color: var(--blue-color);
    text-transform: uppercase;
    margin: 17px 0;
}

.referenciaMedicaTexto span::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 2px;
    margin-top: 36px;
    margin-left: -15px;
    background: var(--primary-color);
}

.paragrafosServicos {
    font-size: 1rem;
    color: var(--gray-color);

    text-align: center;
    width: 80%;
}

.ServicosIcon {
    fill: var(--primary-color);
    width: 50px;
    height: 50px;
    stroke: var(--primary-color);
    stroke-width: 0px;
}

.BoxServicosSecundaria {
    width: 90%;
    box-shadow: 0px 0px 20px -7px rgba(0, 0, 0, 0.75);
    height: 70%;
    align-self: flex-end;
    background: #ffffff;
    position: relative;
    left: 65px;
}

.arrow-right {
    color: var(--primary-color);
    margin-left: 7px;
    transition: all .1s linear;
}

.saibamaisspanbox {
    transition: all .1s linear;
}

.saibamaisspanbox:hover {
    margin-top: -10px;
}

.quartenaria ul {
    max-width: 1300px;

}

.TextBox h3 {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--blue-color);
    font-size: 18px;
}
.TextBox2 h3 {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--blue-color);
    font-size: 18px;
}
.TextBox3 h3 {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--blue-color);
    font-size: 18px;
}
.TextBox4 h3 {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--blue-color);
    font-size: 18px;
}


.TextBox h3::before {
    content: '';
    position: absolute;
    width: 70px;
    height: 2px;
    background: var(--primary-color);
    margin-top: 27px;
    margin-left: -10px;

}

.TextBox2 h3::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 2px;
    background: var(--primary-color);
    margin-top: 27px;
    margin-left: -10px;

}
.TextBox3 h3::before {
    content: '';
    position: absolute;
    width: 310px;
    height: 2px;
    background: var(--primary-color);
    margin-top: 27px;
    margin-left: -10px;

}

/* 5th */

.five-thBoxText1 {
    margin: 40px 0 10px 0;
}

.five-thBoxText2 {
    margin: 10px 0 30px;
}

.five-thBox {
    width: 500px;
    margin-top: 100px;

}

.five-thFirstSection {
    margin-left: 100px;
}

.SollosPayments {
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: bold;
    color: #009a93;
}

.SollosPayments::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 2px;
    background: var(--primary-color);
    margin-top: 30px;
    margin-left: -10px;

}

.five-th {
    min-height: 1000px;
    color: #505e6b;
}

.five-thBoxBackground {
    background: #ffffff;
    z-index: 4;
}

@media (max-width:1500px) {
    .five-thBoxBackground {
        flex-direction: column;
        align-items: center;
    }

    .five-thSecoundSection {
        width: auto !important;
    }
}

.five-thFaleConoscoButton {
    background: var(--primary-color);
    color: #ffffff;
    margin-top: 30px;
    padding: 10px 0px;
    width: 90%;
    transition: all .05s linear;

}

.five-thFaleConoscoButton:hover {
    opacity: .8;
}

/* 5th shape  */
.custom-shape-divider-top-1690198683 {
    position: relative;
    z-index: 1;
    transform: rotateX(180deg);
    width: 100%;
    overflow: hidden;
    line-height: 0;
    -webkit-filter: drop-shadow(22px 15px 36px rgba(0 0 0 / 16%));
    filter: drop-shadow(22px 15px 36px rgba(0 0 0 / 16%));

}

.custom-shape-divider-top-1690198683 svg {
    position: relative;
    display: block;
    width: calc(179% + 1.3px);
    height: 204px;

}

.custom-shape-divider-top-1690198683 .shape-fill {
    fill: #ffffff;

}

/* five-th Secound Section */


.five-thSecoundSection div {
    margin: 25px 0;

}

.five-thSecoundSection {
    color: #061835;
    width: 555px;
    margin: 100px 80px 0 0;
    font-family: 'Inter', sans-serif;
}

.five-thPagamentosOnline::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 2px;
    background: var(--primary-color);
    margin-top: 25px;
    margin-left: 110px;

}


.five-thPagamentosPresenciais::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 2px;
    background: var(--primary-color);
    margin-top: 26px;
    margin-left: 160px;

}

.five-thUnifiedCommerce::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 2px;
    background: var(--primary-color);
    margin-top: 29px;
    margin-left: 100px;

}

.five-thSecoundSectionSubText {
    font-size: 1rem;
    color: #505e6b;
    margin: 25px 0 0 30px;
}

.BoxServicosPrimaria2 {
    background-image: url('/global/assets/backgrounds/Reuniao_pedagogica_formativa_ou_informativa-scaled.jpg');
}

.BoxServicosPrimaria3 {
    background-image: url('/global/assets/backgrounds/255772-8-tecnicas-para-se-destacar-em-uma-reuniao-de-negocios.webp');
}

.BoxServicosPrimaria4 {
    background-image: url('/global/assets/backgrounds/Reuniao-empresarial.jpg');
}

.BoxServicosPrimaria5 {
    background-image: url('/global/assets/backgrounds/reuniao-em-empresa-848x477.webp');
}

.BoxServicosPrimaria6 {
    background-image: url('/global/assets/backgrounds/application-3426397_1920-1024x597.jpg');
}

@media (max-width:700px) {

    .DesejaSerUmaFintech {
        font-size: 1rem !important;
    }

    .secundariaPrincipalTextBox,
    .porqueNos {
        width: 90% !important;

    }

    #servicos>div.flex.justify-center.referenciaMedicaTexto>span,
    .custom-shape-divider-top-1690198683 {
        display: none;
    }

    .secundariaPrincipalTextBox {
        margin: 0 auto !important
    }

    .TextBox h3::before {
        content: '';
        position: absolute;
        width: 100px;
        height: 2px;
        background: var(--primary-color);
        margin-top: 27px;
        margin-left: -10px;
    
    }
}
@media (min-width:1000px){
    .TextBox4 h3::before {
        content: '';
        position: absolute;
        width: 100px;
        height: 2px;
        background: var(--primary-color);
        margin-top: 27px;
        margin-left: -10px;

    }
}