:root {
	--bg-color: #0b0f19;
	--card-bg: #111625;
	--text-main: #fff;
	--text-muted: #e2e8f0;
	--about-accent: #fff;
	--accent-glow: linear-gradient(90deg, #ff6a00 0%, #ff2d2d 35%);
	--line-color: linear-gradient(90deg, #ff6a00 0%, #ff2d2d 35%);
}

/* correction css */
.our-feature {
	padding: 50px 0;
}
#ourJourney {
	background: #16213e;
}
#ourJourney .intro {
	height: 50vh;
	min-height: 300px; /* Ensure minimum height */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	background: #16213e;
	backdrop-filter: blur(10px);
}

.intro-text {
	max-width: 800px;
	font-size: clamp(1.2rem, 3vw, 2rem);
	font-weight: 300;
	line-height: 1.5;
	opacity: 0; /* Hidden for JS reveal */
	transform: translateY(30px);
}

.highlight {
	color: var(--about-accent);
	font-weight: 600;
}

/* Timeline Container */
.timeline-container {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 3rem 1rem 6rem; /* More balanced padding */
}

/* The Central Line */
.timeline-line {
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #fff;
	transform: translateX(-50%);
	z-index: 1;
}

.timeline-progress {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0%; /* JS will animate this */
	background: linear-gradient(
		280deg,
		#ff6a00 0%,
		#ff2d2d 35%,
		#0a2a66 70%,
		#0f4c81 100%
	);
	box-shadow: 0 0 12px var(--accent-glow);
}

/* Timeline Item */
.timeline-item {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
	perspective: 1000px;
}

/* Icon in Center */
.timeline-icon {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: clamp(50px, 5vw, 60px); /* Responsive size */
	height: clamp(50px, 5vw, 60px);
	background: var(--card-bg);
	border: 2px solid var(--about-accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	box-shadow: 0 0 15px var(--bg-color);
	font-size: clamp(20px, 2.5vw, 24px); /* Responsive icon size */
	color: #fff;
	transition: transform 0.3s ease; /* Smooth hover */
}

.timeline-item:hover .timeline-icon {
	transform: translateX(-50%) scale(1.1);
}

/* Content Card */
.timeline-content {
	width: 45%;
	background:#fff;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 20px;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
	opacity: 0; /* Hidden for JS */
	transition: all 0.3s ease;
}

.timeline-content:hover {
	border-color: var(--about-accent);
	box-shadow: 0 0 20px var(--accent-glow);
	transform: translateY(-5px); /* Subtle lift on hover */
}

/* Alternating Sides */
.timeline-item:nth-child(odd) {
	flex-direction: row-reverse;
}

.timeline-item:nth-child(odd) .timeline-content {
	margin-left: auto; /* Push to right relative to flex */
	transform-origin: left center;
}

.timeline-item:nth-child(even) .timeline-content {
	margin-right: auto;
	transform-origin: right center;
}

/* Date Marker */
.date-marker {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: clamp(2.5rem, 10vw, 4rem); /* Responsive size */
	font-weight: 800;
	color: #fff;
   /* background: var(--accent-gradient);
    background-clip: text;
    -webkit-text-fill-color: transparent; */
	z-index: -1;
	white-space: nowrap;
}

.timeline-item:nth-child(odd) .date-marker {
	left: 20%;
}
.timeline-item:nth-child(even) .date-marker {
	right: 20%;
}

/* Image Styling */
.card-image-wrapper {
	width: 100%;
	height: clamp(120px, 20vw, 240px); /* Responsive height */
	overflow: hidden;
	position: relative;
}

#ourJourney .card-image {
	width: 100%;
	object-fit: cover;
	transform: scale(1.1); /* Zoomed in slightly for parallax */
	object-fit: cover;
	transform: scale(1.05); /* Slight zoom for dynamism */
	transition: transform 0.5s ease; /* Smooth zoom on hover */
}
.timeline-content:hover .card-image {
	transform: scale(1.1);
}

/* Text Content */
#ourJourney .card-body {
	padding: clamp(1rem, 3vw, 1.5rem); /* Responsive padding */
}

.card-header {
	color:var(--accent-secondary-color);
	font-size: clamp(1rem, 2.5vw, 1.3rem); /* Responsive font */
	font-weight: 700;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#ourJourney .card-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

#ourJourney .card-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	color: #111625;
	font-size: clamp(0.85rem, 2vw, 0.95rem); /* Responsive text */
	line-height: 1.6;
}

/* Updated Bullet Icon Style */
.bullet-icon {
	color: var(--accent-secondary-color);
	font-size: 0.9rem;
	margin-top: 0.3rem;
	min-width: 1rem;
}

/* Enhanced Responsiveness */
@media (max-width: 1024px) {
	.timeline-content {
		width: 48%; /* Slightly wider for tablets */
	}

	.timeline-container {
		padding: 3rem 1rem 6rem;
	}
	.date-marker {
		font-size: 3rem; /* Smaller on tablets */
	}
}

@media (max-width: 768px) {
	.intro {
		height: auto; /* Auto height for mobile */
		padding: 3rem 1rem;
	}

	.timeline-line {
		left: 1.5rem; /* Adjusted for smaller screens */
	}

	.timeline-item {
		flex-direction: column !important;
		align-items: flex-start;
		margin-left: 3rem; /* Better alignment */
		margin-bottom: 3rem;
	}

	.timeline-icon {
		left: -2.5rem;
		width: 45px;
		height: 45px;
		font-size: 20px;
	}

	.timeline-content {
		width: 80%;

		border-radius: 16px; /* Slightly smaller radius */
	}

	.date-marker {
		display: none; /* Hide on mobile as before */
	}

	.card-image-wrapper {
		height: 140px; /* Fixed for consistency */
	}
}

@media (max-width: 480px) {
	.intro-text {
		font-size: clamp(1rem, 5vw, 1.8rem);
	}

	#ourJourney .card-body {
		padding: 1rem;
	}

	.card-header {
		font-size: 1.1rem;
	}

	#ourJourney .card-list li {
		font-size: 0.85rem;
		gap: 0.5rem;
	}
}