@charset "UTF-8";

/* -------------------------------CAROUSEL-------------------------------- */
.carousel-click-zone {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 30%; /* click zone width */
	cursor: pointer;
	z-index: 10;
}

.carousel-click-zone.prev {
	left: 0;
}

.carousel-click-zone.next {
	right: 0;
}

.carousel-indicators button {
	width: 12px !important;
	height: 12px !important;
	border-radius: 50% !important; /* makes it a circle */
	background-color: var(--blue-gray) !important;
	border: none !important;
	padding: 0 !important; /* remove default padding */
	margin: 0 5px;
	transition: all 0.3s ease;
	box-sizing: content-box; /* ensures width/height are exact */
}

.carousel-indicators .active {
	width: 30px !important; /* pill width */
	height: 12px !important; /* same height as inactive */
	border-radius: 10px !important; /* oval shape */
	background-color: var(--blue-gray) !important;
}

.carousel-caption {
	left: 40%;
	top: 30%;
}

.carousel-caption h5 {
	font-size: clamp(1rem, 3vw, 3.5rem);
	font-weight: bold;
	color: var(--white);
	max-width: 17ch;
}

.carousel-caption p {
	font-size: clamp(0.75rem, 1vw, 1.5rem);
	color: var(--white);
	max-width: 100%;
}
/* Tablet (768px – 991px) */
@media ( min-width : 768px) and (max-width: 991px) {
	.carousel-caption {
		max-width: 50%;
		left: 40%;
		top: 45%;
	}
}

/* Desktop (992px and up) */
@media ( min-width : 992px) {
	.carousel-caption {
		max-width: 40%;
		left: 45%;
		top: 45%;
	}
}

/* -------------------------------ACCORDEON-------------------------------- */
.accordion-button {
	background-color: #f8f9fa; /* light gray background */
	color: var(--black); /* dark text */
	border-radius: 0.5rem; /* rounded corners */
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	font-size: clamp(0.75rem, 1vw, 1.5rem);
	font-weight: bold;
}

.accordion-button:focus {
	box-shadow: none;
}

/* -------------------------------MAIN CONTENT-------------------------------- */
.main-content-title-text-size {
	font-size: clamp(1rem, 2vw, 2.5rem);
}

.main-content-text-size {
	font-size: clamp(0.75rem, 1vw, 1.5rem);
}

#bubbleText {
	background-color: var(--light-gray);
	border-radius: 12px;
	padding: 20px;
}

.tall-box {
	min-height: clamp(50vh, 50vw, 100vh); /* smaller height on mobile */
}

.card-text {
	max-width: 80%;
	font-size: clamp(0.75rem, 1.2vw, 2rem);
	line-height: 150%;
}

.text-lime {
	color: var(--lime);
}
.bg-color-darkblue {
	background-color: var(--darkest-blue);
}
/* Tablet (768px – 991px) */
@media ( min-width : 768px) and (max-width: 991px) {
	.card-img-overlay {
		max-width: 65%;
		padding-left: 3rem;
		padding-top: 3rem;
	}
}

/* Desktop (992px and up) */
@media ( min-width : 992px) {
	.card-img-overlay {
		max-width: 50%;
		padding-left: 3rem;
		padding-top: 3rem;
	}
}