/* ============================================================
   CUSTOM SERVICES CAROUSEL
   STABLE TRANSITION / CLONE MANAGEMENT
   ============================================================ */


/* ============================================================
   SECTION
   ============================================================ */

.custom-services-carousel-section {

    --custom-active-color: #91D52A;

    position: relative;

    width: 100%;

    padding-top: 90px;
    padding-bottom: 60px;

    /* background-color: #151b25; */
    background-color: #fff;

    /*
     * Evita que elementos escapem horizontalmente
     * da seção.
     *
     * O stage, por sua vez, pode ultrapassar
     * verticalmente para acomodar o card central.
     */

    overflow: hidden;

}


/* ============================================================
   WRAPPER
   ============================================================ */

.custom-services-carousel-wrapper {

    position: relative;

    width: 100%;

    max-width: 1380px;

    margin: 0 auto;

    padding-left: 60px;
    padding-right: 60px;

}


/* ============================================================
   CAROUSEL
   ============================================================ */

.custom-services-carousel {

    position: relative;

    width: 100%;

}


/*
 * Não cortar verticalmente o card central.
 *
 * O card central possui scale maior que os demais.
 */

.custom-services-carousel .owl-stage-outer {

    overflow: visible !important;

}


/*
 * Stage alinhado verticalmente.
 */

.custom-services-carousel .owl-stage {

    display: flex;

    align-items: center;

}


/* ============================================================
   OWL ITEM
   ============================================================ */


/*
 * POR PADRÃO TODOS OS ITEMS FICAM INVISÍVEIS.
 *
 * O JavaScript irá mostrar somente:
 *
 * - left-far
 * - left-near
 * - center
 * - right-near
 * - right-far
 *
 * Isso impede clones do Owl de aparecerem
 * nas laterais durante a transição.
 */

.custom-services-carousel .owl-item {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    visibility: hidden;

    pointer-events: none;

}


/* ============================================================
   SOMENTE AS CINCO POSIÇÕES VISUAIS FICAM VISÍVEIS
   ============================================================ */

.custom-services-carousel .owl-item.custom-position-center,
.custom-services-carousel .owl-item.custom-position-left-near,
.custom-services-carousel .owl-item.custom-position-left-far,
.custom-services-carousel .owl-item.custom-position-right-near,
.custom-services-carousel .owl-item.custom-position-right-far {

    visibility: visible;

    pointer-events: auto;

}


/* ============================================================
   ITEM INTERNO
   ============================================================ */

.custom-services-carousel-item {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* ============================================================
   CARD BASE
   ============================================================ */


/*
 * TODOS OS CARDS POSSUEM A MESMA DIMENSÃO BASE.
 *
 * Não alteramos width / height conforme
 * o item muda de posição.
 *
 * A diferença visual é criada apenas
 * por transform: scale().
 */

.custom-services-carousel-card {

    --custom-card-color: #91D52A;

    position: relative;

    width: 300px;

    height: 380px;

    flex: 0 0 300px;

    box-sizing: border-box;

    padding: 34px 28px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    /* background-color: #1e2530; */
    background-color: #fff;

    /* border: 1px solid rgba(90, 115, 145, .34); */
    border: 1px solid #fff;

    border-radius: 14px;

    overflow: hidden;

    transform-origin: center center;

    /*
     * Transições somente visuais.
     *
     * Não existe transição de width/height.
     */

    transition:

        transform .45s cubic-bezier(.22, .61, .36, 1),



        filter .40s ease,

        background-color .45s ease,

        border-color .45s ease,

        box-shadow .45s ease;

}


/* ============================================================
   CARD CENTRAL
   ============================================================ */

.custom-services-carousel .custom-position-center {

    z-index: 100;

    opacity: 1;

    filter: none;

}


.custom-services-carousel .custom-position-center .custom-services-carousel-card {

    transform:
        translateX(0) scale(1.10);

    background-color:
        var(--custom-card-color);

    border-color:
        var(--custom-card-color);

    box-shadow:

        0 28px 65px rgba(0, 0, 0, .38),

        0 12px 28px rgba(0, 0, 0, .22);

}


/* ============================================================
   CARD IMEDIATAMENTE À ESQUERDA
   ============================================================ */

.custom-services-carousel .custom-position-left-near {

    z-index: 40;

    /* opacity: .80;

    filter:
        brightness(.86) saturate(.78); */

}


.custom-services-carousel .custom-position-left-near .custom-services-carousel-card {

    transform:
        translateX(-25px) scale(.92);

    box-shadow:
        0 16px 32px rgba(0, 0, 0, .22);

}


/* ============================================================
   CARD IMEDIATAMENTE À DIREITA
   ============================================================ */

.custom-services-carousel .custom-position-right-near {

    z-index: 40;

    /* opacity: .80;

    filter:
        brightness(.86) saturate(.78); */

}


.custom-services-carousel .custom-position-right-near .custom-services-carousel-card {

    transform:
        translateX(24px) scale(.92);

    box-shadow:
        0 16px 32px rgba(0, 0, 0, .22);

}


/* ============================================================
   CARD DISTANTE À ESQUERDA
   ============================================================ */

.custom-services-carousel .custom-position-left-far {

    z-index: 20;

    /* opacity: .55;

    filter:
        brightness(.67) saturate(.58); */

}


.custom-services-carousel .custom-position-left-far .custom-services-carousel-card {

    transform:
        translateX(-4px) scale(.82);

    box-shadow:
        0 10px 22px rgba(0, 0, 0, .15);

}


/* ============================================================
   CARD DISTANTE À DIREITA
   ============================================================ */

.custom-services-carousel .custom-position-right-far {

    z-index: 20;

    /* opacity: .55;

    filter:
        brightness(.67) saturate(.58); */

}


.custom-services-carousel .custom-position-right-far .custom-services-carousel-card {

    transform:
        translateX(2px) scale(.82);

    box-shadow:
        0 10px 22px rgba(0, 0, 0, .15);

}


/* ============================================================
   LOGO
   ============================================================ */

.custom-services-carousel-logo {

    width: 150px;

    height: 80px;

    margin-bottom: 24px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}


.custom-services-carousel-logo img {

    display: block;

    width: auto;

    height: auto;

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}


/* ============================================================
   LOGO DO CARD CENTRAL
   ============================================================ */

.custom-services-carousel .custom-position-center .custom-services-carousel-logo {

    width: 180px;

    height: 95px;

    margin-bottom: 30px;

}


.custom-services-carousel .custom-position-center .custom-services-carousel-logo img {

    transform: scale(1.04);

}


/* ============================================================
   CONTENT
   ============================================================ */

.custom-services-carousel-content {

    width: 100%;

}


/* ============================================================
   TÍTULO NORMAL
   ============================================================ */

.custom-services-carousel-content h3 {

    margin: 0 0 3px;

    padding: 0;

    color: #292d48;

    font-size: 24px;

    line-height: 1.2;

    font-weight: 600;

}


/* ============================================================
   DESCRIÇÃO NORMAL
   ============================================================ */

.custom-services-carousel-content p {

    margin: 0;

    padding: 0;

    color:#5c7a87;

    font-size: 17px;

    line-height: 1.3;
    font-weight: 600;

}

.custom-services-carousel-content a {

    margin: 0;

    padding: 0;

    color:#0082b9;

    font-size: 14px;

    line-height: 1.3;
    font-weight: 600;

}

.custom-services-carousel-content a:hover {

    margin: 0;

    padding: 0;

    color:#5fcfff;

    font-size: 14px;

    line-height: 1.3;
    font-weight: 600;

}


/* ============================================================
   TÍTULO CENTRAL
   ============================================================ */

.custom-services-carousel .custom-position-center .custom-services-carousel-content h3 {

    font-size: 32px;

    color: #ffffff;

}


/* ============================================================
   DESCRIÇÃO CENTRAL
   ============================================================ */

.custom-services-carousel .custom-position-center .custom-services-carousel-content p {

    font-size: 16px;

    line-height: 1.5;
    font-weight: 300;
    color: rgba(255, 255, 255, .92);

}

.custom-services-carousel .custom-position-center .custom-services-carousel-content a {

    font-size: 14px;

    line-height: 1.5;

    color: rgba(255, 255, 255, .92) !important;

}

.custom-services-carousel .custom-position-center .custom-services-carousel-content a:hover {

    font-size: 14px;

    line-height: 1.5;

    color: rgba(213, 213, 213, 0.92) !important;
}


/* ============================================================
   ARROWS
   ============================================================ */

.custom-services-carousel-arrow {

    position: absolute;

    top: 50%;

    z-index: 500;

    width: 50px;

    height: 50px;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: translateY(-50%);

    border: 1px solid rgba(255, 255, 255, .18);

    border-radius: 50%;

    background-color: rgba(255, 255, 255, .08);

    color: #034a68;

    cursor: pointer;

    outline: none;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, .20);

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;

}


/* ============================================================
   ARROWS HOVER
   ============================================================ */

.custom-services-carousel-arrow:hover {

    background-color:
        #D6D6D6;

    border-color:
        rgba(255, 255, 255, .35);

    color: #ffffff;

    transform:
        translateY(-50%) scale(1.08);

}


/* ============================================================
   ARROWS FOCUS
   ============================================================ */

.custom-services-carousel-arrow:focus {

    outline: none;

}


/* ============================================================
   ÍCONE DAS SETAS
   ============================================================ */

.custom-services-carousel-arrow i {

    font-size: 13px;

}


/* ============================================================
   SETA ESQUERDA
   ============================================================ */

.custom-services-carousel-prev {

    left: 0;

}


/* ============================================================
   SETA DIREITA
   ============================================================ */

.custom-services-carousel-next {

    right: 0;

}


/* ============================================================
   DOTS
   ============================================================ */

.custom-services-carousel .owl-dots {

    display: block !important;

    width: 100%;

    margin-top: 36px;

    margin-bottom: 0;

    padding: 0;

    text-align: center;

}


/* ============================================================
   DOT
   ============================================================ */

.custom-services-carousel .owl-dot {

    display: inline-block !important;

    width: auto !important;

    height: auto !important;

    margin: 0 4px !important;

    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;

}


/* ============================================================
   DOT SPAN
   ============================================================ */

.custom-services-carousel .owl-dot span {

    display: block;

    width: 8px !important;

    height: 5px !important;

    margin: 0 !important;

    padding: 0 !important;

    border-radius: 5px !important;

    background-color:
        #b3c7cf !important;

    transition:
        width .35s ease,
        background-color .4s ease !important;

}


/* ============================================================
   DOT ATIVO
   ============================================================ */

.custom-services-carousel .owl-dot.active span {

    width: 28px !important;

    background-color:
        var(--custom-active-color) !important;

}


/* ============================================================
   REMOVE NAVEGAÇÃO PADRÃO DO OWL
   ============================================================ */

.custom-services-carousel .owl-nav {

    display: none !important;

}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 991px) {

    .custom-services-carousel-section {

        padding-top: 75px;

        padding-bottom: 55px;

    }


    .custom-services-carousel-wrapper {

        max-width: 850px;

        padding-left: 45px;

        padding-right: 45px;

    }


    .custom-services-carousel-card {

        width: 280px;

        height: 355px;

        flex-basis: 280px;

    }


    .custom-services-carousel-arrow {

        width: 44px;

        height: 44px;

    }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .custom-services-carousel-section {

        padding-top: 55px;

        padding-bottom: 45px;

    }


    .custom-services-carousel-wrapper {

        max-width: 420px;

        padding-left: 40px;

        padding-right: 40px;

    }


    .custom-services-carousel-card {

        width: 280px;

        height: 360px;

        flex-basis: 280px;

    }


    /*
     * No mobile mantemos somente o center
     * visualmente destacado.
     */

    .custom-services-carousel .custom-position-left-near,
    .custom-services-carousel .custom-position-right-near {

        z-index: 20;

        opacity: .25;

    }


    .custom-services-carousel .custom-position-left-far,
    .custom-services-carousel .custom-position-right-far {

        z-index: 10;

        opacity: .15;

    }


    .custom-services-carousel .custom-position-center .custom-services-carousel-card {

        transform:
            translateX(0) scale(1);

    }


    .custom-services-carousel-arrow {

        width: 40px;

        height: 40px;

    }


    .custom-services-carousel-arrow i {

        font-size: 12px;

    }


    .custom-services-carousel-prev {

        left: 0;

    }


    .custom-services-carousel-next {

        right: 0;

    }

}


/* ============================================================
   RESPONSIVE — SMALL MOBILE
   ============================================================ */

@media (max-width: 479px) {

    .custom-services-carousel-wrapper {

        padding-left: 32px;

        padding-right: 32px;

    }


    .custom-services-carousel-card {

        width: 265px;

        height: 350px;

        flex-basis: 265px;

    }

}