.swiper-slide-thumb-active {
	.story-timeline__time {
		background-color: $primary;
		color: $white;
		&::after {
			border-color: $primary transparent transparent transparent;
		}
	}
}
.story-timeline {
	overflow: hidden;
	&__time {
		display: inline-block;
		padding: 0.5rem 1.5rem;
		position: relative;
		background-color: $white;
		border-radius: 0.25rem;
		text-align: center;
		font-weight: 700;
		&::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			width: 0px;
			height: 0px;
			border-style: solid;
			border-width: 10px 8px 0 8px;
			border-color: $white transparent transparent transparent;
			transform: translateX(-50%);
		}
	}
	&__dot {
		width: 1rem;
		height: 1rem;
		margin-top: 1.15rem;
		margin-bottom: 1.5rem;
		margin-inline: auto;
		border-radius: 50%;
		background-color: $primary;
		outline: 8px solid rgba($primary, 0.25);
		position: relative;
		&::before {
			content: "";
			position: absolute;
			right: 50%;
			top: 50%;
			width: 1920px;
			height: 3px;
			background-color: $white;
		}
		&::after {
			content: "";
			position: absolute;
			left: 50%;
			top: 50%;
			width: 1920px;
			height: 3px;
			background-color: $white;
		}
	}
}

.timeline-slider-nav {
	position: relative;
	isolation: isolate;
	&__prev {
		display: grid;
		place-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border-radius: 50%;
		border: none;
		background-color: $dark;
		font-size: 1.5rem;
		color: $primary;
		position: absolute;
		top: 50%;
		left: 0;
		transition: $transition-base;
        z-index: 1;
		&:hover {
			background-color: $primary;
			color: $white;
		}
	}
	&__next {
		display: grid;
		place-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border-radius: 50%;
		border: none;
		background-color: $dark;
		font-size: 1.5rem;
		color: $primary;
		position: absolute;
		top: 50%;
		right: 0;
		transition: $transition-base;
        z-index: 1;
		&:hover {
			background-color: $primary;
			color: $white;
		}
	}
}


.story-timeline-section {
    &::before {
        @include media-breakpoint-up(xxl) {
            content: url(../img/shape/vps-feature-shape.png);
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            pointer-events: none;
        }
    }
    &::after {
        @media (min-width: 1920px) {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 50%;
            background-image: url(../img/story-timeline-bg.png);
            background-size: cover;
            background-position: center bottom;
            background-repeat: no-repeat;
            z-index: -1;
            pointer-events: none;
        }
    }
}