header {

    background: linear-gradient(199.17deg, rgba(0, 0, 0, 0.3) 4.19%, rgba(23, 28, 36, 0) 88.17%);

    border-bottom: 0.5px solid #BDFF6359;

    backdrop-filter: blur(50px);

}



#banner {

    background-color: var(--preto);

    padding-top: 255px;

    background-image: url(../../../consultoria-em-vendas/cases/sino-banner.svg);

    background-position: right top;

    background-repeat: no-repeat;

    padding-bottom: 90px;

}



#banner .container {

    width: 1440px;

    max-width: 90%;

    margin: 0 auto;

}



#banner .container .titulo {

    font-weight: 700;

    font-size: 2rem;

    line-height: 2.4rem;

    text-transform: uppercase;

    color: var(--verde);

    width: 771px;

    max-width: 100%;

    margin-bottom: 22px;

}



#banner .container .texto {

    font-weight: 400;

    font-size: 16px;

    color: #fff;

    width: 713px;

    max-width: 100%;

    margin-bottom: 53px;

}



#banner .container>.btn {

    font-weight: 700;

    font-size: 16px;

    color: #fff;

    transition: var(--transicao);

    border: 1px solid #fff;

    border-radius: 67px;

    display: inline-flex;

    column-gap: 10px;

    align-items: center;

    padding: 14px 25.5px;

}



#banner .container>.btn:hover {

    color: var(--preto);

    background-color: var(--verde);

    border: 1px solid var(--verde);

}



#cases  {

    padding-top: 60px;

    margin-bottom: 160px;

    position: relative;

}

#cases .container > .titulo {

    font-weight: 700;

    font-size: 2.25rem;

    line-height: 2.7rem;

    text-align: center;

    text-transform: uppercase;

    color: var(--azul);

    margin-bottom: 32px;

}

#cases .container .texto-topo {

    font-weight: 400;

    font-size: 18px;

    line-height: 26px;

    text-align: justify;

    color: #000;

    margin: 0 auto 59px;

    width: 668px;

    max-width: 100%;

    text-align: center;

}



#cases .container {

    width: 1440px;

    max-width: 90%;

    margin: 0 auto;

    position: relative;

    z-index: 1;

}



#cases .container .area-cards {

    display: flex;

    flex-direction: column;

    row-gap: 60px;

}





#cases .container .area-cards .card {

    padding: 35px;

    border-radius: 15px;

    display: flex;

    column-gap: 40px;

    box-shadow: 0px 0px 6.5px 1px #1717FF24;

    width: 100%;

    height: auto;

    background: #fff;

    position: relative;

}



#cases .container .area-cards .card .esq {

    min-width: 424px;

    max-width: 30%;

    height: 417px;

    border-radius: 15px;

    position: relative;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    display: flex;

    align-items: center;

    justify-content: center;

}



#cases .container .area-cards .card .esq .overlay {

    background: #0002068C;

    width: 100%;

    height: 100%;

    border-radius: 15px;

    position: absolute;



}



#cases .container .area-cards .card .esq .logo {

    position: relative;

    z-index: 1;

    max-width: 90%;

}



#cases .container .area-cards .card .dir .titulo {

    font-weight: 700;

    font-size: 2rem;

    line-height: 2.313rem;

    color: var(--preto);

    margin-bottom: 4px;

}



#cases .container .area-cards .card .dir .subtitulo {

    font-family: var(--raleway);

    font-weight: 700;

    font-size: 18px;

    line-height: 37px;

    color: var(--preto);

    margin-bottom: 18px;

}



#cases .container .area-cards .card .dir .separador {

    width: 100%;

    display: block;

    margin-bottom: 25px;

    height: 2px;

    background-color: var(--preto);

}



#cases .container .area-cards .card .dir>.texto {

    font-weight: 400;

    font-size: 14px;

    line-height: 20px;

    color: var(--preto);

    margin-bottom: 34px;

}



#cases .container .area-cards .card .dir .kpis {

    display: flex;

    column-gap: 60px;

}



#cases .container .area-cards .card .dir .kpis .kpi .cima {

    color: var(--azul);

    display: block;

}



#cases .container .area-cards .card .dir .kpis .kpi .cima .simbolo {

    margin-right: -5px;

}



#cases .container .area-cards .card .dir .kpis .kpi .cima .simbolo,

#cases .container .area-cards .card .dir .kpis .kpi .cima .numero {

    font-weight: 700;

    font-size: 2rem;

}



#cases .container .area-cards .card .dir .area-texto ul,
#cases .container .area-cards .card .dir .area-texto ol {

    list-style: none;

    display: flex;

    flex-direction: column;

    row-gap: 19px;

    margin-bottom: 10px;
}



#cases .container .area-cards .card .dir .area-texto li {

    font-family: var(--raleway);

    font-weight: 500;

    font-size: 14px;

    line-height: 20px;

    color: var(--preto);

}

#cases .container .area-cards .card .dir .area-texto p {
    font-family: var(--raleway);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--preto);
    margin-bottom: 10px;
}



#cases .container .area-cards .card .dir .area-texto b {

    color: var(--azul);

    font-weight: 700;

    font-size: 18px;

}



#cases .container .area-cards .card .dir .kpis .kpi .cima .texto {

    font-weight: 700;

    font-size: 1.375rem;

    text-transform: uppercase;

}



#cases .container .area-cards .card .dir .kpis .kpi .sub {

    font-weight: 400;

    font-size: 12px;

    text-transform: uppercase;

    color: var(--preto);

}



#cases .container .area-cards .card .dir .veja {

    font-weight: 700;

    font-size: 16px;

    color: var(--verde);

    margin-top: auto;

    transition: var(--transicao);

    background-color: var(--preto);

    width: max-content;

    font-family: var(--raleway);

    padding: 15.5px 25.5px;

    border-radius: 67px;

}



#cases .container .area-cards .card .dir .veja:hover {

    background-color: var(--azul);

    color: #fff;

}



#cases .container .area-cards .card .dir {

    flex-direction: column;

    display: flex;

}



#cases .linhas {

    position: absolute;

    width: 50%;

    top: 54%;

    display: flex;

    flex-direction: column;

    row-gap: 20px;

}



#cases .linhas .linha {

    width: 100%;

    height: 5px;

    display: block;

    background: linear-gradient(90deg, #1717FF 0%, #BDFF63 100%);

    animation: moveBackgroundHorizontal 5s ease infinite;

    background-size: 300% 100%;

}



#cases .container .area-cards .card .bolinhas {

    position: absolute;

    top: 25px;

    right: 25px;

    display: flex;

    gap: 9px;

    flex-direction: column;

}



#cases .container .area-cards .card .bolinha {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    animation: trocaCores 3s infinite;

}



#cases .container .area-cards .card .bolinha-01 {

    background-color: #BDFF63;

    /* Verde */

    animation-delay: 0s;

}



#cases .container .area-cards .card .bolinha-02 {

    background-color: var(--azul);

    /* Azul */

    animation-delay: 1s;

}



#cases .container .area-cards .card .bolinha-03 {

    background-color: var(--preto);

    /* Escuro */

    animation-delay: 2s;

}



/* Clientes */



#clientes {

    width: 100%;

    padding-top: 43px;

    padding-bottom: 168px;

    position: relative;

}



#clientes .swiper .swiper-slide {

    width: auto;

    align-content: center;

}



#clientes .swiper::before {

    content: '';

    width: 100px;

    height: 100%;

    position: absolute;

    z-index: 2;

    background: linear-gradient(90deg, #ffffff 0%, rgba(226, 228, 227, 0) 100%);

    left: 0;

    bottom: 0;

}



#clientes .swiper::after {

    content: '';

    width: 100px;

    height: 100%;

    position: absolute;

    z-index: 2;

    background: linear-gradient(270deg, #ffffff 0%, rgba(226, 228, 227, 0) 100%);

    right: 0;

    bottom: 0;

}



#clientes .swiper .swiper-slide img {

    filter: grayscale(1);

    transition: var(--transicao);

}



#clientes .swiper .swiper-slide:hover img {

    filter: none;

}



#clientes .swiper .swiper-wrapper {

    -webkit-transition-timing-function: linear;

    -o-transition-timing-function: linear;

    transition-timing-function: linear;

    align-items: center;

}



#clientes .titulo {

    font-family: var(--poppins);

    font-weight: 500;

    font-size: 18px;

    text-transform: uppercase;

    color: var(--azul);

    text-align: center;

    padding: 0 5%;

    margin-bottom: 43px;



}



#clientes .titulo b {

    font-weight: 700;

}



#clientes .bolinhas {

    position: absolute;

    top: 39px;

    left: 5%;

    display: flex;

    column-gap: 9px;

}



#clientes .bolinhas .bolinha {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    animation: trocaCores 3s infinite;

}



#clientes .bolinhas .bolinha-01 {

    background-color: #BDFF63;

    /* Verde */

    animation-delay: 0s;

}



#clientes .bolinhas .bolinha-02 {

    background-color: var(--azul);

    /* Azul */

    animation-delay: 1s;

}



#clientes .bolinhas .bolinha-03 {

    background-color: var(--preto);

    /* Escuro */

    animation-delay: 2s;

}





@keyframes moveBackgroundHorizontal {

    0% {

        background-position: 0% 0%;

    }



    50% {

        background-position: 100% 0%;

    }



    100% {

        background-position: 0% 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) {

    #banner {

    background-position: 97% 51%;

    background-size: 26%;

}

}



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



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

    #banner {

        background-image: none;

        padding-top: 150px;

    }

    #banner .container .titulo {

    font-size: 24px;

    line-height: 33px;

    }

    #cases .container .area-cards .card .bolinhas {

        display: none;

    }

        #cases .container .area-cards .card {

        flex-direction: column;

        row-gap: 30px;

    }



    #cases .container .area-cards .card .dir .veja {

        margin-top: 40px;

        margin-bottom: 0;

    }



    #cases .container .area-cards .card .dir .kpis {

        flex-wrap: wrap;

        gap: 20px;

    }



    #cases .container .area-cards .card .esq {

        min-width: unset;

        max-width: 100%;

    }



    #cases .container .area-cards .card .esq .logo {

        width: 340px;

        max-width: 90%;

    }



    #cases .container .area-cards .card .dir .subtitulo {

        font-size: 16px;

        line-height: 25px;

    }



    #cases .container .area-cards .card .dir .titulo {

        font-size: 24px;

        line-height: normal;

        margin-bottom: 16px;

    }



    #cases .container .area-cards .card .dir .kpis .kpi .cima .simbolo,

    #cases .container .area-cards .card .dir .kpis .kpi .cima .numero {

        font-size: 2rem;

        line-height: 4rem;

        display: inline-block;

    }



    #cases .container .area-cards .card .dir .kpis .kpi .cima .texto {

        font-weight: 700;

        line-height: 3.5rem;

    }



    #cases .container > .titulo {

    font-size: 22px;

    line-height: 28px;

    }



}



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



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

    #clientes {

        padding-top: 68px;

    }

}



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



@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) {}