/* Division Services Carousel */
.division-services-section {
    --division-services-gap: 24px;
    --division-services-left-offset: 80px;
    --division-services-slide-width: 400px;
    --division-services-arrow-top: 200px;

    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    overflow: hidden;
}

.division-services {
    position: relative;
    width: calc(100% - var(--division-services-left-offset));
    margin-left: var(--division-services-left-offset);
}

.division-services__slide {
    position: relative;
    flex: 0 0 auto;
    width: var(--division-services-slide-width) !important;
}


/* Track */
.division-services .splide__track {
    overflow: hidden;
    cursor: grab;
}

.division-services.has-moved .splide__track {
    overflow: visible;
}

.division-services.is-dragging .splide__track {
    cursor: grabbing;
}


/* =====================================================
   VIEWPORT ENTRANCE ANIMATION
   ===================================================== */

.division-services__slide.is-enter-item {
    opacity: 0;
    transform: translateY(100px);
    will-change: opacity, transform;
}

.division-services__slide.is-enter-item.is-enter-visible {
    animation:
        division-services-fade-up
        850ms
        cubic-bezier(0.22, 1, 0.36, 1)
        var(--division-services-enter-delay, 0ms)
        forwards;
}

@keyframes division-services-fade-up {
    0% {
        opacity: 0;
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .division-services__slide.is-enter-item,
    .division-services__slide.is-enter-item.is-enter-visible {
        opacity: 1;
        transform: none;
        animation: none;
    }
}


/* Card */
.division-services__card {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}


/* Media */
.division-services__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1.1 / 1;
    overflow: hidden;
    border-radius: 11px;
    background: #e3e3e3;
}

.division-services__media img {
    transition: transform 700ms ease;
}

.division-services__media:hover img {
    transform: scale(1.025);
}

.division-services__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* Image gradient */
.division-services__gradient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 42%,
            rgba(0, 0, 0, 0.03) 50%,
            rgba(0, 0, 0, 0.18) 68%,
            rgba(0, 0, 0, 0.72) 100%
        );
}


/* Image content */
.division-services__image-content {
    position: absolute;
    z-index: 2;
    left: 24px;
    right: 24px;
    bottom: 28px;
}

.division-services__number,
.division-services__title,
.division-services__excerpt {
    font-family: "Rajdhani", sans-serif;
}

.division-services__number {
    margin: 0 0 8px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.division-services__title {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}


/* Excerpt */
.division-services__excerpt {
    width: 100%;
    padding: 22px 15px 16px 23px;
    color: #929292;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.5px;
}

.division-services__excerpt p {
    margin-top: 0;
}

.division-services__excerpt p:last-child {
    margin-bottom: 0;
}


/* Partial slide overlay */
.division-services__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;

    border-radius: 11px 11px 0 0;
    background: rgba(255, 255, 255, 0.5);

    opacity: 0;
    transition: opacity 300ms ease;
}

.division-services__slide.is-partial::after {
    opacity: 1;
}


/* Arrows */
.division-services__arrows {
    pointer-events: none;
}

.division-services__arrow {
    position: absolute;
    z-index: 40;

    top: var(--division-services-arrow-top);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;

    color: #fff;
    background: rgba(90, 90, 90, 0.68);

    cursor: pointer;
    pointer-events: auto;

    transform: translateY(-50%);

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        background-color 180ms ease;
}

.division-services__arrow svg {
    display: block;
    width: 19px;
    height: 19px;
}

.division-services__arrow:hover {
    background: rgba(55, 55, 55, 0.86);
}

.division-services__arrow--prev {
    left:
        calc(
            -1 *
            var(--division-services-left-offset)
            + 16px
        );
}

.division-services__arrow--next {
    right: 16px;
}

.division-services__arrow:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* Tablet */
@media (max-width: 1024px) {
    .division-services-section {
        --division-services-gap: 18px;
        --division-services-left-offset: 24px;
    }

    .division-services__image-content {
        left: 20px;
        right: 20px;
        bottom: 22px;
    }

    .division-services__arrow {
        width: 42px;
        height: 42px;
    }
}


/* Mobile */
@media (max-width: 767px) {
    .division-services-section {
        --division-services-gap: 14px;
        --division-services-left-offset: 12px;
    }

    .division-services__media {
        aspect-ratio: 1 / 1;
    }

    .division-services__image-content {
        left: 18px;
        right: 18px;
        bottom: 20px;
    }

    .division-services__excerpt {
        padding-top: 14px;
    }

    .division-services__arrow {
        width: 38px;
        height: 38px;
    }

    .division-services__arrow--prev {
        left:
            calc(
                -1 *
                var(--division-services-left-offset)
                + 8px
            );
    }

    .division-services__arrow--next {
        right: 8px;
    }
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .division-services__slide.is-enter-item,
    .division-services__slide.is-enter-item.is-enter-visible {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .division-services__slide::after,
    .division-services__arrow {
        transition: none;
    }
}