/*
 * Immersive Timeline for Elementor
 * Author: Pema Gyamtsho | https://360creative.studio
 */

.imet-timeline {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}

.imet-timeline * {
	box-sizing: border-box;
}

.imet-viewport {
	position: relative;
}

.imet-track {
	position: absolute;
	background-color: #e3e3e3;
	border-radius: 999px;
	overflow: hidden;
	z-index: 1;
}

.imet-track-progress {
	display: block;
	position: absolute;
	background-color: #6c5ce7;
	border-radius: 999px;
	transition: width .15s linear, height .15s linear;
}

.imet-dot {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: 3px solid #6c5ce7;
	border-radius: 50%;
	color: #6c5ce7;
	font-size: 11px;
	flex-shrink: 0;
	transition: transform .3s ease, box-shadow .3s ease;
}

.imet-card {
	background-color: #fff;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

.imet-image {
	margin: -24px -24px 16px -24px;
	overflow: hidden;
	border-radius: 12px 12px 0 0;
}

.imet-image img {
	display: block;
	width: 100%;
	height: auto;
}

.imet-dot-number {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.imet-dot svg {
	width: 55%;
	height: 55%;
}

.imet-date {
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
	color: #6c5ce7;
	margin-bottom: 8px;
	letter-spacing: -0.02em;
}

.imet-title {
	margin: 0 0 10px 0;
	font-size: 20px;
	font-weight: 700;
	color: #1e1e1e;
}

.imet-description {
	color: #6a6a6a;
	font-size: 15px;
	line-height: 1.6;
}

.imet-description p {
	margin: 0 0 .75em 0;
}

.imet-description p:last-child {
	margin-bottom: 0;
}

.imet-link {
	display: inline-block;
	margin-top: 14px;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

/* Reveal animation (JS toggles .imet-in-view) */
.imet-timeline[data-animate="yes"] .imet-item {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .6s ease, transform .6s ease;
}

.imet-timeline[data-animate="yes"] .imet-item.imet-in-view {
	opacity: 1;
	transform: translateY(0);
}

.imet-timeline[data-animate="yes"].imet-orientation-horizontal .imet-item {
	transform: translateY(20px) scale(.96);
}

.imet-timeline[data-animate="yes"].imet-orientation-horizontal .imet-item.imet-in-view {
	transform: translateY(0) scale(1);
}

.imet-item.imet-in-view .imet-dot {
	transform: scale(1.15);
	box-shadow: 0 0 0 6px rgba(108, 92, 231, 0.15);
}

/* =========================================================
   VERTICAL LAYOUT
   ========================================================= */
.imet-orientation-vertical .imet-viewport {
	padding: 10px 0;
}

.imet-orientation-vertical .imet-track {
	top: 0;
	bottom: 0;
	left: 50%;
	width: 4px;
	height: 100%;
	transform: translateX(-50%);
}

.imet-orientation-vertical .imet-track-progress {
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
}

.imet-orientation-vertical .imet-items {
	display: flex;
	flex-direction: column;
}

.imet-orientation-vertical .imet-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	width: 100%;
}

.imet-orientation-vertical .imet-item:last-child {
	margin-bottom: 0 !important;
}

.imet-orientation-vertical .imet-dot {
	position: absolute;
	left: 50%;
	top: 4px;
	transform: translateX(-50%);
}

.imet-orientation-vertical .imet-item .imet-card {
	width: calc(50% - 50px);
}

/* Alternating style (default) */
.imet-vstyle-alternate.imet-orientation-vertical .imet-side-left {
	justify-content: flex-start;
}

.imet-vstyle-alternate.imet-orientation-vertical .imet-side-right {
	justify-content: flex-end;
}

.imet-vstyle-alternate.imet-orientation-vertical .imet-side-right .imet-card {
	margin-left: auto;
}

/* Single column styles */
.imet-vstyle-left.imet-orientation-vertical .imet-item,
.imet-vstyle-right.imet-orientation-vertical .imet-item {
	justify-content: flex-start;
	padding-left: 60px;
}

.imet-vstyle-left.imet-orientation-vertical .imet-track,
.imet-vstyle-right.imet-orientation-vertical .imet-track {
	left: 10px;
}

.imet-vstyle-left.imet-orientation-vertical .imet-dot,
.imet-vstyle-right.imet-orientation-vertical .imet-dot {
	left: 10px;
}

.imet-vstyle-left.imet-orientation-vertical .imet-card,
.imet-vstyle-right.imet-orientation-vertical .imet-card {
	width: 100%;
}

/* =========================================================
   HORIZONTAL LAYOUT
   ========================================================= */
.imet-orientation-horizontal .imet-viewport {
	overflow-x: auto;
	overflow-y: visible;
	padding: 40px 40px;
	cursor: grab;
	scrollbar-width: thin;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.imet-orientation-horizontal[data-scroll-mode="drag"] .imet-viewport {
	scroll-snap-type: none;
}

.imet-orientation-horizontal[data-scroll-mode="scroll"] .imet-viewport {
	scroll-snap-type: x proximity;
}

.imet-orientation-horizontal .imet-viewport.imet-dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	user-select: none;
}

.imet-orientation-horizontal[data-scroll-mode="drag"] .imet-viewport {
	scrollbar-width: none;
}

.imet-orientation-horizontal[data-scroll-mode="drag"] .imet-viewport::-webkit-scrollbar {
	display: none;
}

/* The old global track element isn't used for horizontal layout — each item
   draws its own line segment in its marker row instead (see below), which
   guarantees the line always passes exactly through every dot. */
.imet-orientation-horizontal .imet-track {
	display: none;
}

.imet-orientation-horizontal .imet-items {
	display: inline-flex;
	align-items: flex-start;
	min-width: 100%;
	position: relative;
}

.imet-orientation-horizontal .imet-item {
	position: relative;
	flex: 0 0 auto;
	min-width: 320px;
	max-width: 320px;
	display: flex;
	flex-direction: column;
	align-items: center;
	scroll-snap-align: center;
}

.imet-orientation-horizontal .imet-item:last-child {
	margin-right: 0 !important;
}

/* Equal, fixed-height zones above and below the marker. Whichever zone
   isn't used by this item stays empty but still reserves the same space,
   so every item has identical total height and every marker row lines up. */
.imet-orientation-horizontal .imet-slot {
	width: 100%;
	height: 260px;
	display: flex;
	justify-content: center;
	overflow: visible;
}

.imet-orientation-horizontal .imet-slot-top {
	align-items: flex-end;
}

.imet-orientation-horizontal .imet-slot-bottom {
	align-items: flex-start;
}

.imet-orientation-horizontal .imet-slot-top .imet-card {
	margin-bottom: 24px;
}

.imet-orientation-horizontal .imet-slot-bottom .imet-card {
	margin-top: 24px;
}

/* Each item's own marker row: a full-width line segment with the dot
   centered directly on top of it. Because every item's marker row sits at
   the same height (thanks to the equal slot heights above), the segments
   line up end-to-end into one continuous line running through every dot. */
.imet-orientation-horizontal .imet-marker-row {
	position: relative;
	width: 100%;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.imet-orientation-horizontal .imet-line-segment {
	position: absolute;
	top: 50%;
	left: -250px;
	right: -250px;
	height: 4px;
	border-radius: 999px;
	transform: translateY(-50%);
	z-index: 1;
	transition: background-color .4s ease;
}

.imet-orientation-horizontal .imet-item:first-child .imet-line-segment {
	left: 50%;
}

.imet-orientation-horizontal .imet-item:last-child .imet-line-segment {
	right: 50%;
}

.imet-timeline[data-progress-line="yes"].imet-orientation-horizontal .imet-item.imet-in-view .imet-line-segment {
	background-color: var(--imet-progress-color, #6c5ce7);
}

.imet-orientation-horizontal .imet-dot {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
}

.imet-orientation-horizontal .imet-card {
	width: 100%;
	transition: transform .3s ease, box-shadow .3s ease;
}

.imet-orientation-horizontal .imet-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

.imet-hint {
	text-align: center;
	font-size: 13px;
	color: #9a9a9a;
	margin-top: 4px;
	letter-spacing: .02em;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 767px) {
	.imet-orientation-vertical .imet-track {
		left: 20px;
	}

	.imet-orientation-vertical .imet-dot {
		left: 20px;
	}

	.imet-orientation-vertical .imet-item,
	.imet-vstyle-alternate.imet-orientation-vertical .imet-side-left,
	.imet-vstyle-alternate.imet-orientation-vertical .imet-side-right {
		justify-content: flex-start;
		padding-left: 55px;
	}

	.imet-orientation-vertical .imet-item .imet-card,
	.imet-vstyle-alternate.imet-orientation-vertical .imet-side-right .imet-card {
		width: 100%;
		margin-left: 0;
	}

	.imet-date {
		font-size: 32px;
	}
}