#breadcrumbs a,
#breadcrumbs span,
#breadcrumbs .separador {
    color: #F6F8FCC7;
}
#breadcrumbs {
    margin-bottom: 0;
}

/* BANNER */

#banner {
    width: 1851px;
    max-width: calc(100% - 34px);
    margin: 0 auto 50px;
    margin-top: 94px;
    position: relative;
    border-radius: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 230px;
    padding-bottom: 54px;
    overflow: hidden;
    background-color: black;
}

#banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.68) 6.29%, rgba(0, 0, 0, 0) 107.48%);
    z-index: 2;
    display: block;
}

#banner .container {
    width: 1646px;
    max-width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

#banner .container .titulo {
    font-weight: 400;
    font-size: 2.5rem;
    letter-spacing: 0.4px;
    color: var(--branco);
    margin-bottom: 25px;
}

#banner .container .titulo span {
    position: relative;
    font-weight: 700;
}

#banner .container .titulo span::before {
    content: '';
    width: 100%;
    height: 3px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -8px;
    background-color: var(--azul);
}

#banner .container .texto {
    font-weight: 300;
    font-size: 18px;
    line-height: 24px;
    color: var(--branco);
    width: 913px;
    max-width: 100%;
    margin-top: 35px;
}


#banner .container .texto b {
    font-weight: 700;
}

#banner .entregamos {
    position: absolute;
    z-index: 2;
    right: 30px;
    top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97.86px;
    height: 94.29px;
}

#banner .entregamos .rotativo {
    position: absolute;
    width: 97.86px;
    height: 94.29px;
    animation: girar-direita 10s linear infinite;
}

@keyframes girar-direita {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


#area-produtos {
    position: relative;
    margin-bottom: 139px;
}

#area-produtos .container {
    width: 1491px;
    max-width: 90%;
    margin: 0 auto;
}

#area-produtos .container .cima {
    width: 100%;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 45px;
}

#area-produtos .container .cima a {
    border: 1px solid #0A1D3A;
    border-radius: 11px;
    display: flex;
    padding: 19px 23px;
    column-gap: 9.6px;
    font-weight: 400;
    font-size: 15.36px;
    letter-spacing: 0.2px;
    align-items: center;
    color: #0A1D3A;
    transition: var(--transicao);
}

#area-produtos .container .cima a:hover {
    color: var(--branco);
    background-color: var(--azul);
    border: 1px solid var(--azul);
}

#area-produtos .container .area-cards {
    display: flex;
    width: 100%;
    column-gap: 1.41%;
    row-gap: 21px;
    flex-wrap: wrap;
}


#area-produtos .container .area-cards .card {
    width: 23.94%;
    height: 438px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    transition: var(--transicao);
}


#area-produtos .container .area-cards .card img {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    left: 0;
    top: 0;
}

#area-produtos .container .area-cards .card .overlay {
    background: linear-gradient(180deg, rgba(31, 35, 40, 0) 42.84%, rgba(31, 35, 40, 0.82) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#area-produtos .container .area-cards .card .infos {
    position: relative;
    z-index: 2;
    transition: var(--transicao);
    transform: translateY(34px);
}


#area-produtos .container .area-cards .card .infos .titulo {
    font-weight: 400;
    font-size: 24px;
    color: #fff;
    transition: var(--transicao);
    margin-bottom: 20px;
}

#area-produtos .container .area-cards .card .infos .ver {
    text-decoration: underline;
    color: #5EA3FF;
    display: flex;
    font-weight: 400;
    font-size: 16px;
    align-items: center;
    column-gap: 10px;
    transform: translateY(13px);
    transition: var(--transicao);
}

#aplicacao {
    position: relative;
    margin-bottom: 64px;
}

#aplicacao .container {
    width: 1491px;
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    column-gap: 30px;
    align-items: flex-start;
    position: relative;

}

#aplicacao .container .esq {
    width: 589px;
    max-width: 50%;
    position: sticky;
    top: 100px;
}

#aplicacao .container .esq .sub {
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 0.3px;
    color: var(--preto);
    margin-bottom: 15px;
    display: block;
}

#aplicacao .container .esq .titulo {
    font-weight: 400;
    font-size: 1.875rem;
    line-height: 2.375rem;
    color: var(--preto);
    margin-bottom: 26px;
}

#aplicacao .container .esq .titulo b {
    color: var(--azul);
    font-weight: 700;
    display: block;
}

#aplicacao .container .box-texto p {
    font-weight: 400;
    font-size: 16px;
    line-height: 23.7px;
    margin-bottom: 24px;
    color: var(--preto);
}

#aplicacao .container .imagem {
    max-width: 50%;
    height: auto;
    object-fit: contain;
}

#faq {
    position: relative;
    margin-bottom: 90px;
}

#faq .container {
    width: 1491px;
    max-width: 90%;
    margin: 0 auto;
}

#faq .container .topo {
    margin-bottom: 36px;
}

#faq .container .topo .sub {
    font-weight: 300;
    font-size: 15px;
    letter-spacing: 0.3px;
    color: var(--preto);
    margin-bottom: 15px;
    display: block;
}

#faq .container .topo .titulo {
    font-weight: 400;
    font-size: 1.875rem;
    line-height: 2.375rem;
    color: var(--preto);
}

#faq .container .topo .titulo b {
    font-weight: 700;
    color: var(--azul);
}

#faq .container .topo .titulo::before {
    content: '';
    width: 48px;
    height: 2px;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--laranja);
    bottom: -5px;
}

#faq .container .area-perguntas {
    width: 100%;
}

#faq .container .area-perguntas .box {
    border-bottom: 1px solid #B5B5B7;
    margin-bottom: 30px;
    padding-bottom: 30px;
}

#faq .container .area-perguntas .box .pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 20px;
    cursor: pointer;
}

#faq .container .area-perguntas .box .pergunta p {
    font-weight: 500;
    font-size: 16px;
    line-height: 23.7px;
    color: var(--preto);
    transition: var(--transicao);
}

#faq .container .area-perguntas .box .pergunta.ativa p {
    color: var(--azul);
}

#faq .container .area-perguntas .box .resposta {
    display: none;
    margin-top: 14px;
}

#faq .container .area-perguntas .box .resposta p {
    font-weight: 300;
    font-size: 16px;
    line-height: 23.7px;
    color: var(--preto);
}

#faq .container .area-perguntas .box:last-child {
    margin-bottom: 0;
    border-bottom: unset;
}

#faq .container .area-perguntas .box svg {
    color: var(--laranja);
    transition: var(--transicao);
}

#faq .container .area-perguntas .box.ativo svg {
    transform: scaleY(-1);
}


@media screen and (min-width: 1025px) {
    #area-produtos .container .area-cards .card:hover {
        transform: translateY(-10px);
        box-shadow: 0px 3px 9.2px 0px #0A1D3A66;
    }

    #area-produtos .container .area-cards .card:hover .infos {
        transform: translateY(-3px);
    }

    #area-produtos .container .area-cards .card:hover .infos .ver {
        transform: translateY(0);
    }
}

@media screen and (max-width: 1920px) {}

@media screen and (max-width: 1680px) {}

@media screen and (max-width: 1600px) {}

@media screen and (max-width: 1440px) {}

@media screen and (max-width: 1366px) {}

@media screen and (max-width: 1280px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1080px) {}

@media screen and (max-width: 1024px) {
    #banner {
        padding-top: 112px;
        padding-bottom: 25px;
    }

    #banner .overlay {
    background: #00000082;
    }

    #banner .entregamos {
        right: 13px;
        top: 13px;
    }

    #banner .container {
        max-width: 100%;
        padding: 0 30px;
    }

    #banner .entregamos .rotativo {
        width: 75px;
        height: 75px;
    }

    #banner .container .texto {
        font-size: 16px;
    }

    #projetos .container .box-cards .card {
        width: 100%;
    }

    #area-produtos .container .area-cards {
        flex-wrap: wrap;
        row-gap: 25px;
        column-gap: 2.3%;
    }

    #area-produtos .container .area-cards .card {
        width: 48.8%;
    }

    #area-produtos .container .area-cards .card .infos .ver,
    #area-produtos .container .area-cards .card .infos {
        transform: none;
    }

    #area-produtos .container .cima {
        justify-content: center;
    }

    #aplicacao .container {
        flex-direction: column;
        row-gap: 35px;
    }

    #aplicacao .container .esq {
        width: 100%;
        max-width: 100%;
        position: unset;
    }

    #aplicacao .container .imagem {
        max-width: 100%;
        width: auto;
    }
}

@media screen and (max-width: 996px) {}

@media screen and (max-width: 768px) {}

@media screen and (max-width: 600px) {
    #area-produtos .container .area-cards .card {
        width: 100%;
    }
}

@media screen and (max-width: 490px) {}

@media screen and (max-width: 460px) {}

@media screen and (max-width: 430px) {}

@media screen and (max-width: 400px) {}

@media screen and (max-width: 360px) {}

@media screen and (max-width: 330px) {}

@media screen and (max-width: 280px) {}