/* import css */
@import 'global.css';

.carousel {
	width: 100vw;
	position: relative;
	overflow: hidden;
}

.slideContainer {
	width: 100%;
	position: relative; /* Changed from height: 100% */
}

.slide {
	width: 100%;
	position: relative; /* Changed from absolute to allow natural height */
	display: none; /* Hide by default instead of using opacity */
	transition: opacity 0.3s ease-in-out;
}

.slide.active {
	display: block; /* Show active slide */
}

.image {
	width: 100%;
	height: auto;
	display: block; /* Removes any extra spacing below image */
	max-height: 90vh; /* Optional: prevent images from being too tall */
}

.indicator {
	position: absolute;
	bottom: 7px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
}

.indicatorItem {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background-color: var(--color-primary);
	margin: 0 2px;
	cursor: pointer;
	transition: background-color 0.1s ease-in-out;
}

.indicatorItem.active {
	background-color: var(--color-accent);
}

.indicatorItem.active:hover {
	background-color: var(--color-accent);
}

.indicatorItem:hover {
	background-color: var(--color-secondary);
}

/* SCHEDULE */

#scheduleSection {
	border-bottom: 0;
	padding-bottom: 0;
}

/* CSS for status image */
#status {
	width: 50vw;
}

/* CSS for timer element */
#timeRemaining {
	font-size: 42px;
	font-weight: bold;
}

/* CSS for calendar element */
#calendarContainer {
	margin: 1.5rem 0rem 2rem;
	gap: 4rem;
	justify-content: center;
	align-items: flex-start;
	width: 80%;
}

#calendarContainer > div {
	width: 35%;
	text-align: center;
	padding: 0 0 1.5rem 0;
	align-items: center;
}

#calendarContainer > div > h4 {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	padding: 0.5rem;
	font-weight: bold;
	line-height: 2.5rem;
	height: 6.4rem;
	width: 100%;
}

#calendarContainer > div > h5 {
	font-size: 1.8rem;
}

/* MEDIA QUERIES */
@media (max-width: 768px) {
	section {
		padding: 2px 0;
	}
	#timeRemaining {
		font-size: 28px;
	}

	#scheduleSection > img {
		width: 90%;
	}

	#calendarContainer {
		gap: 1rem;
		width: 70%;
	}

	#calendarContainer > div {
		width: 50%;
	}

	.card > h4 {
		font-size: 1.5rem !important;
	}
	.card > h5 {
		font-size: 1.3rem !important;
	}
	.carousel .image {
		min-height: 25vw;
	}
}

@media (max-width: 568px) {
	#calendarContainer {
		gap: 0.5rem;
		width: 100%;
	}
	#calendarContainer > div {
		width: 100%;
	}

	#timeRemaining {
		text-align: center;
	}

	/* 	.carousel .image {
		min-height: 25vw;
	} */
}

/* @media (max-width: 375px) {
	.carousel .image {
		min-height: 150px;
	}
} */