.diy-carousel-track {
    display: flex;
    overflow: visible; 
    scroll-snap-type: none; 
    will-change: transform;
transition: transform 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

.diy-carousel-viewport {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.diy-carousel-track::-webkit-scrollbar { display: none; }

.diy-slide-item {
    flex: 0 0 calc(100% / var(--slides-to-show));
    width: calc(100% / var(--slides-to-show));
    scroll-snap-align: center;
    box-sizing: border-box;
    padding: var(--slide-padding);
}

.carousel-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.diy-nav {
    width: 1.2vw;
    height: 1vw;
	background-color: transparent;
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.diy-nav img {
	filter: brightness(0);
	width: 100%;
}

.diy-nav[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.diy-dots {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
}

.diy-dot {
    display: inline-block;
    width: 0.3vw;
    height: 0.72vw;
    border-radius: 1vw;
    background: #000000;
    cursor: pointer;
    transition: 0.3s;
	border: none;
	outline: none;
}

.diy-dot.is-active {
    background: #46C2EE;
}

.diy-dot:hover {
    background: #46C2EE;
}

.diy-carousel-track.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none; 
}

.editor-carousel-container > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 15px;
	overflow-x: auto !important;
}

.editor-carousel-container .wp-block-diy-carousel-slide {
    flex: 0 0 auto !important;
    margin: 0 !important;
    width: 300px; 
}

.editor-slide-box {
    display: block !important;
}

.editor-carousel-container .block-list-appender {
    position: sticky !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    background: #f1f1f1 !important;
    padding: 0 !important;
    border-top: 1px solid #ddd !important;
    z-index: 10 !important;
}

.editor-carousel-container .block-editor-button-block-appender {
    width: 90% !important;
    background: #01022d !important;
    border: 1px solid #01022d !important;
    justify-content: center !important;
	height: 100% !important;
}

.editor-slide-box h3 {
    color: #111;
}

.editor-slide-box .wp-block-heading[data-empty="true"]::before {
    color: #111;
	opacity: 0.8;
}

.diy-carousel-viewport[dir="rtl"] .diy-nav img {
    transform: scalex(-1);
}

.timeline-carousel .diy-slide-item {
	position: relative;
}

.timeline-carousel .diy-slide-item h2 {
    font-family: var(--font-ExtraBold);
}

.timeline-carousel .diy-slide-item h3 {
    font-family: var(--font-ExtraBold);
}

.timeline-carousel .diy-slide-item p,
.timeline-carousel .diy-slide-item ul li {
	max-width: 80%;
	margin: auto;
}

.timeline-carousel .diy-slide-item p,
.timeline-carousel .diy-slide-item ul {
	min-height: 5.208vw;
}

.timeline-carousel .diy-carousel-track {
	padding-bottom: 50px;
}

.timeline-carousel .line-container {
	background-color: #a7ddef;
}

.timeline-carousel .diy-carousel-track {
    position: relative !important;
}

.timeline-carousel .custom-dynamic-line-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}

.timeline-carousel .line-container {
    background-color: transparent !important;
    border: none !important;
    display: block;
    position: relative;
}

.timeline-carousel .diy-slide-item {
    z-index: 5 !important;
}

html.dark .timeline-carousel .diy-slide-item h3 {
	color: #fff !important;
}

html.dark .timeline-carousel .diy-slide-item p {
	color: #fff !important;
}

html.dark .diy-dot {
	background: #fff;
}

html.dark .diy-dot.is-active,
html.dark .diy-dot:hover {
    background: #46C2EE;
}

html.dark .diy-nav img {
    filter: none;
}

@media (max-width: 1024px) {
    .diy-carousel-viewport {
        --slides-to-show: var(--slides-tablet) !important;
    }
	
	.diy-nav {
		width: 2.2vw;
		height: 2vw;
	}
	
	.diy-dot {
		width: 0.7vw;
		height: 1.7vw;
	}
}

@media (max-width: 600px) {
    .diy-carousel-viewport {
        --slides-to-show: var(--slides-mobile) !important;
    }
	
	.diy-nav {
        width: 3.2vw;
        height: 3vw;
    }
	
	.diy-dot {
        width: 1.1vw;
        height: 2.7vw;
    }
}