@import url("../parts/solucoes-pagamento.css");
@import url("../parts/parceiros.css");

.bg-content img {
    width: 100%;
    height: auto;
}

.top-content {
}

@media (min-width: 1200px) {
    .main-hero-home .title {
        /* max-width: 540px; */
    }
}

.tag-section {
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    color: #0856C3;
    margin: 0 0 8px 0;
    margin: 0 0 8px 0;
    line-height: normal;
}

.title-section {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.description-section {
    font-weight: 400;
    font-size: 1.25rem;
    color: #021e46 !important;
    margin: 0 0 24px 0;
    line-height: 2rem;
}

.description-color {
    color: white !important;
}

.description {
    color: #021e46;
}

.banner .box-price {
    position: relative;
}

.banner .box-price::before {
    content: url("../../images/bg-banner-right.png");
    position: absolute;
    z-index: -1;
    left: calc(100% - 30px);
    top: 26px;
}

.banner .bg-banner {
    position: relative;
}

.banner .bg-banner::before {
    content: url("../../images/bg-banner-left.png");
    position: absolute;
    right: calc(100% - 50px);
    bottom: calc(100% - 50px);
}

/* .banner {
  background-image: url("../../images/bg-banner-left.png"),
    url("../../images/bg-banner-right.png");
  background-position: top left, center right;
  background-repeat: no-repeat;
} */
.bg-banner {
    border-radius: 1.5rem 7rem 1.5rem 1.5rem;
    background: var(--blue-04, #0856c3);
    padding: 2.5rem 3.125rem;
    z-index: 9;
    position: relative;
}

.content-banner .tag-section,
.content-banner .title-section,
.content-banner .description-section {
    text-align: start;
    line-height: normal;
    color: #ffffff;
}

.content-banner .tag-section {
    font-size: 1.25rem;
}

.content-banner .title-section {
    max-width: 960px;
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.content-banner .description-section {
    font-size: 1.25rem;
    line-height: 2rem;
}

.container-banner {
    padding-top: 161px;
}

.container-price {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-banner .box-price {
    padding: 2rem;
    border-radius: 3rem 3rem 3rem var(--radius-none, 0rem);
    border: 1px solid #1c74ef;
    background: linear-gradient(180deg, #1d76f2 0%, #0958c4 100%);
    width: 100%;
}


.container-banner .icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    padding: 0.5rem;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 50%;
    background-color: #ffffff;
    margin-bottom: 0.5rem;
}

.container-banner .price-text {
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
}

.container-banner .price {
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.vantagens {
    background-image: url("../../images/bg-vantagens.png");
    background-position: right top;
    background-repeat: no-repeat;
    margin-top: 159px;
}

.box-vantagens {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-bottom: 40px;
}

.box-vantagens .vantagem:nth-child(3n) {
    margin-right: 0;
}

.vantagem {
    display: flex;
    flex-direction: column;
    border-radius: 1.5rem 3rem 1.5rem 1.5rem;
    border: 1px solid #dfdfdf;
    background: #fff;
    box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    width: 100%;
    align-items: start;
    justify-content: center;
}

.vantagem .icon {
    background-color: #0860db;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    justify-content: center;
}

.vantagem p {
    color: #021E46;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
}

.cta-vantagens {
    display: flex;
    justify-content: center;
}

.app {
    margin-top: 210px;
}

.app .title-section {
    font-size: 3.5rem;
}

.app .items-justified-center {
    justify-content: center;
    align-items: center;
    display: flex;
}

.app .items-justified-center img {
    width: 100%;
    height: auto;
}

.depoimentos {
    margin-top: 160px;
}

.depoimentos-thumb-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 280px;
}

.depoimentos .destaque img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.depoimentos .destaque p {
    color: #021e46;
    font-size: 1.5rem;
    font-weight: 500;
}

.depoimentos .destaque p strong {
    color: #0860db;
    font-weight: 700;
    font-size: 1.5rem;
}

.depoimentos .descricao {
    display: flex;
    justify-content: center;
    align-items: center;
}

.depoimentos .descricao p {
    font-size: 2rem;
    font-weight: 400;
    color: #959595;
}

.depoimentos .pessoas {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 130px;
    margin-bottom: 130px;
}

.depoimentos .pessoas .pessoa {
    margin-bottom: 40px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    margin-top: 40px;
}

.depoimentos .pessoas .pessoa img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    transition: all 0.5s;
    filter: opacity(0.5);
}

.depoimentos .pessoas .pessoa {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.depoimentos .pessoas .pessoa::after {
    content: url("../../images/add.png");
    margin: 0 auto;
    width: 28px;
    height: 28px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1) !important;
    display: none;
    position: absolute;
    transition: all 0.5s;
    transform-origin: center;
}


.depoimentos .pessoas .pessoa:hover::after {
    display: block;
}

.depoimentos .pessoas .pessoa:hover {
    cursor: pointer;
}

.depoimentos .pessoas .pessoa:hover::after {
    transform: scale(1);
}

.depoimentos .pessoas .pessoa.active img,
.depoimentos .pessoas .pessoa:hover img {
    filter: opacity(1);
}

.depoimentos .pessoa:nth-child(5n) {
    margin-right: 0;
}

.relato.active {
    display: grid;
    grid-template-columns: 312px 1fr;
}

.relato {
    display: none;
}

.relato img {
    width: 312px;
    height: 312px;
    border-radius: 50%;
    object-fit: cover;
}

.relato > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 2.25rem;
}

.relato > div .dep-texto {
    position: relative;
    color: #021e46;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    max-width: 900px;
}

.relato > div .dep-texto::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="51" viewBox="0 0 64 51" fill="none"><path d="M27.264 0.183994L17.496 35.704L14.24 22.384C18.4827 22.384 21.936 23.6173 24.6 26.084C27.264 28.5507 28.596 31.9547 28.596 36.296C28.596 40.5387 27.2147 43.992 24.452 46.656C21.788 49.2213 18.4333 50.504 14.388 50.504C10.244 50.504 6.79067 49.2213 4.028 46.656C1.364 43.992 0.0320003 40.5387 0.0320003 36.296C0.0320003 35.0133 0.130667 33.78 0.328 32.596C0.525334 31.3133 0.92 29.8333 1.512 28.156C2.104 26.4787 2.94267 24.2587 4.028 21.496L12.612 0.183994H27.264ZM62.192 0.183994L52.424 35.704L49.168 22.384C53.4107 22.384 56.864 23.6173 59.528 26.084C62.192 28.5507 63.524 31.9547 63.524 36.296C63.524 40.5387 62.1427 43.992 59.38 46.656C56.716 49.2213 53.3613 50.504 49.316 50.504C45.172 50.504 41.7187 49.2213 38.956 46.656C36.292 43.992 34.96 40.5387 34.96 36.296C34.96 35.0133 35.0587 33.78 35.256 32.596C35.4533 31.3133 35.848 29.8333 36.44 28.156C37.032 26.4787 37.8707 24.2587 38.956 21.496L47.54 0.183994H62.192Z" fill="%230856C3"/></svg>');
    position: absolute;
    top: auto;
    bottom: 100%;
    left: 0;
}

.relato > div .dep-texto::after {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="51" viewBox="0 0 64 51" fill="none"><path d="M36.736 50.816L46.504 15.296L49.76 28.616C45.5173 28.616 42.064 27.3827 39.4 24.916C36.736 22.4493 35.404 19.0453 35.404 14.704C35.404 10.4613 36.7853 7.008 39.548 4.344C42.212 1.77867 45.5667 0.496001 49.612 0.496001C53.756 0.496001 57.2093 1.77867 59.972 4.344C62.636 7.008 63.968 10.4613 63.968 14.704C63.968 15.9867 63.8693 17.22 63.672 18.404C63.4747 19.6867 63.08 21.1667 62.488 22.844C61.896 24.5213 61.0573 26.7413 59.972 29.504L51.388 50.816H36.736ZM1.808 50.816L11.576 15.296L14.832 28.616C10.5893 28.616 7.136 27.3827 4.472 24.916C1.808 22.4493 0.475996 19.0453 0.475996 14.704C0.475996 10.4613 1.85733 7.008 4.62 4.344C7.284 1.77867 10.6387 0.496001 14.684 0.496001C18.828 0.496001 22.2813 1.77867 25.044 4.344C27.708 7.008 29.04 10.4613 29.04 14.704C29.04 15.9867 28.9413 17.22 28.744 18.404C28.5467 19.6867 28.152 21.1667 27.56 22.844C26.968 24.5213 26.1293 26.7413 25.044 29.504L16.46 50.816H1.808Z" fill="%230856C3"/></svg>');
    position: absolute;
    top: 100%;
    right: 0;
}

.relato > div .dep-nome {
    color: #0856c3;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

@media (max-width: 1024px) {
    .relato.active {
        display: block;
    }

    .relato img {
        width: 200px;
        height: 200px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .dep-texto {
        margin-top: 0;
    }

    .perguntas {
        flex-direction: column;
        align-items: center;
        /* margin-bottom: 100rem; */
    }

    .perguntas-banner {
        display: none;
    }

    .perguntas-banner--mobile {
        width: 330px;
    }

    .perguntas .imagem-destaque-mobile {
        width: 100%;
        max-width: 100%;
    }
}

/* @media (max-width: 828px) {
  .perguntas {
    margin-bottom: 80rem;
  }
} */

.perguntas-banner--mobile {
    display: none;
}

.perguntas {
    margin-top: 160px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-faq {
    display: flex;
    gap: 1rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0px 4px 10px 0px #0000000d;
    max-width: 100%;
    width: 100%;
    padding: 1rem;
}

.card-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.card-faq img {
    width: 32px;
    height: 32px;
}

.card-faq p {
    font-size: 1.25rem !important;
    font-weight: 600;
    color: #021e46;
}

.card-faq span {
    font-size: 0.875rem;
    font-weight: 400;
    color: #959595 !important;
}

.perguntas-banner {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.home-page .vantagens .vantagem:hover {
    border: 1px solid rgba(30, 120, 245, 0.50);
    background: rgba(30, 120, 245, 0.20);
}

.home-page .vantagens .vantagem:hover p {
    color: #064aab;
}

.home-page .solucoes-pagamento {
    padding-top: 105px;
}

@media screen and (min-width: 1920px) {
    .home-page .solucoes-pagamento {
        padding-top: 230px;
    }

}

.box-parceiros .slick-track {
    display: flex !important;
    align-items: center !important;
}

.home-page + footer .container-banner {
    margin-top: 0 !important;
}

.text-intro-depoimentos {
    color: #021E46;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.text-intro-depoimentos strong {
    color: #0860DB;
    font-weight: 700;
}

.solucoes-pagamento .title-section,
.vantagens .title-section,
.parceiros .title-section {
    font-size: 3.5rem;
    line-height: normal;
}

/* .line-home-top{
  padding-top: 7vw;
} */

.home-page .main-hero-pix {
    height: auto !important;
}

.main-hero-pix .title {
    max-width: 840px;
}

.home-page .hero-image {
    right: 0;
    left: auto;
    width: 100%;
    height: auto;
    max-height: unset !important;
    object-fit: contain;
    object-position: right top;
}

@media screen and (min-width: 990px) and (max-width: 3200px) {
    .home-page .hero-image {
        max-width: 50%;
    }
}

@media screen and (min-width: 3200px) {
    .home-page .hero-image {
        max-width: 40%;
    }
}

@media screen and (max-width: 767px) {
    .home-page .hero-image {
        left: 0 !important;
    }
}

/* @media screen and (min-width: 1920px){
  .main-hero-pix .hero-image{
    right: auto;
    left: calc(50% - 200px)
  }
} */

.solucao h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    font-style: normal;
    line-height: normal;
    color: #0860DB;
}

.solucao {
    min-height: 350px;
}

.solucao p {
    font-family: 'Montserrat', sans-serif;
    color: #021E46;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
}

.solucoes .solucao:hover {
    background-color: #0860DB;
}

.solucoes .solucao:hover h2,
.solucoes .solucao:hover p {
    color: #fff;
    border: none;
}

.solucoes .solucao:hover .icon {
    background-color: #fff;
}

.solucao .hover-layer {
    display: none;
}

.solucoes .solucao:hover .icon img:not(.hover-layer) {
    display: none;
}

.solucoes .solucao:hover .icon .hover-layer {
    display: block;
}

.header-content .bg-content img {
    max-width: 75% !important;
}

@media screen and (max-width: 767px) {
    .banner .bg-banner::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="71" height="71" viewBox="0 0 71 71" fill="none"><path d="M4.75 66.4277H66.75V4.42773C32.5083 4.42773 4.75 32.1861 4.75 66.4277Z" stroke="%2324D17A" stroke-width="8" stroke-miterlimit="10"/></svg>');
        position: absolute;
        right: calc(100% - 50px);
        bottom: calc(100% - 50px);
    }

    .banner .box-price::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="84" height="99" viewBox="0 0 84 99" fill="none"><path d="M94 94.1777H4V4.17774C53.7056 4.17774 94 44.4721 94 94.1777Z" stroke="%2324D17A" stroke-width="8" stroke-miterlimit="10"/></svg>');
        position: absolute;
        z-index: -1;
        left: calc(100% - 30px);
        bottom: -100px;
        top: auto;
    }

    .bg-banner {
        padding: 45px 24px;
    }

    .vantagem {
        max-width: 100%;
    }

    .vantagens {
        padding-left: 24px;
        padding-right: 24px;
    }

    .parceiros .parceiro {
        padding-left: 8px;
        padding-right: 8px;
    }

    .desktop {
        display: none;
    }

    .header-content .description-section {
        margin-bottom: 0 !important;
    }

    .relato > div .dep-texto {
        font-size: 1.5rem;
    }

    .depoimentos .pessoas .pessoa img {
        width: 50px;
        max-width: 50px;
        height: 50px;
    }

    .depoimentos .pessoas {
        margin-top: 40px;
        margin-bottom: 0;
    }

    .app .tag-section,
    .app .description-section,
    .app .title-section {
        text-align: center;
    }

    .home-page .depoimentos {
        margin-top: 200px;
    }

    .header-content .bg-content img {
        max-width: none !important;
    }
}