.swiper-why-ttec-latam,
.swiper-latam-map,
.swiper-videos {
    --swiper-navigation-size: 70px;
    
    --swiper-pagination-button-width: 40px;
    @media (min-width: 768px) {
        --swiper-pagination-button-width: 40px;
    }
    @media (min-width: 1200px) {
        --swiper-pagination-button-width: 80px;
    }

    .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal,
    .swiper-pagination-custom,
    .swiper-pagination-fraction {
        position: relative;
        bottom: 0;
        padding-top: 20px;
        text-align: left;

        .swiper-pagination-bullet {
            --swiper-pagination-color: var(--ttec-contrast-blue);
            --swiper-pagination-bullet-inactive-color: var(--ttec-dark-grey);
            --swiper-pagination-bullet-inactive-opacity: 1;
            width: var(--swiper-pagination-button-width);
            height: 12px;
            border-radius: 0;
        }
    }

    &.swiper-bullets-circle {

        .swiper-horizontal>.swiper-pagination-bullets,
        .swiper-pagination-bullets.swiper-pagination-horizontal,
        .swiper-pagination-custom,
        .swiper-pagination-fraction {
            .swiper-pagination-bullet {
                width: 20px;
                height: 20px;
                border-radius: 100px;
            }
        }
    }

    .swiper-slide {
        height: auto;
    }

    .swiper-button-next,
    .swiper-button-prev {
        --swiper-navigation-color: var(--ttec-brand-blue);
        display: none;
    }

    @media (min-width: 768px) {

        .swiper-button-next,
        .swiper-button-prev {
            display: block;
        }
    }
}

.swiper-why-ttec-latam {
    --swiper-pagination-button-width: 12px;
    @media (min-width: 768px) {
        --swiper-pagination-button-width: 40px;
    }
    @media (min-width: 1200px) {
        --swiper-pagination-button-width: 80px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: block;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        height: auto;
        width: auto;
        margin: 0;
        font-size: 38px;
        user-select: none;
        --swiper-navigation-color: var(--ttec-contrast-blue);

        &::after {
            display: none;
        }

        &:hover {
            --swiper-navigation-color: var(--ttec-neutral-blue-7);
        }
    }

    .swiper-pagination {
        width: auto;
    }
    .next-slide-text {
        font-size: 19px;
        font-weight: 600;
        text-transform: uppercase;
    }
}

.video-caption {
    display: none;

    &.active {
        display: block;
    }
}
.video-col {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;

    &.active {
        opacity: 0;
        pointer-events: none;
    }
}

.swiper-latam-map {

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
}

.flag-mexico {
    background-image: url(https://www.ttec.com/sites/default/files/2025-11/flag-mexico.webp);
    padding-left: 1.5em;
    background-repeat: no-repeat;
    background-size: 1ch auto;
    background-position: left center;
}

.flag-colombia {
    background-image: url(https://www.ttec.com/sites/default/files/2025-11/flag-colombia.webp);
    padding-left: 1.5em;
    background-repeat: no-repeat;
    background-size: 1ch auto;
    background-position: left center;
}

.flag-brazil {
    background-image: url(https://www.ttec.com/sites/default/files/2025-11/flag-brazil.webp);
    padding-left: 1.5em;
    background-repeat: no-repeat;
    background-size: 1ch auto;
    background-position: left center;
}

.gptw-award {
    width: 14%;
    position: absolute;
    top: 0;
    right: 0;

    .country-text {
        position: relative;
        opacity: 0;
        transition: all .4s ease;

        &.active {
            opacity: 1;
        }
    }
}

#map-latam {
    .st0 {
        fill: none
    }

    .st3 {
        fill: var(--ttec-contrast-blue);
    }

    .button-text {
        fill: var(--ttec-contrast-blue);
    }

    .st5 {
        fill: var(--ttec-brand-blue);
        transition: all .4s ease;
    }

    .add-stroke {
        stroke: var(--ttec-contrast-blue);
        stroke-width: 2;
    }

    .button-text {
        font-size: 33.9px;
        pointer-events: none;
    }

    .st7 {
        fill: var(--ttec-neutral-blue-1);
    }

    .map-button {
        fill: var(--ttec-light-blue-4);
        transition: all .4s ease;
    }

    .map-country {

        &:hover,
        &:focus {
            cursor: pointer;

            .map-button {
                fill: var(--ttec-light-blue-1);
            }

            .st5 {
                fill: var(--ttec-dark-blue-1);
            }
        }

        &.active {
            cursor: default;

            .map-button {
                fill: var(--ttec-contrast-green);
            }

            .st5 {
                fill: var(--ttec-contrast-blue);
            }
        }
    }
}

.video-button {
    display: block;
    background: transparent;
    border: 0;
    width: 100%;
    padding: 0;
    text-align: left;
    background-color: var(--ttec-neutral-blue-7);
    transition: all .3s ease;

    &:hover,
    &.active {
        background-color: var(--ttec-contrast-blue);
    }

    & > * {
        pointer-events: none;
    }
}