@charset "UTF-8";

/* -------------------------------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-------------------------------- */
.card-img-overlay h5 {
	font-size: clamp(1rem, 3vw, 3.5rem);
	max-width: 14ch;
}

.card-img-overlay p {
	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%;
}

.card-img {
	max-height: 100vh;
	object-fit: cover;
}

.text-lime {
	color: var(--lime);
}

.bg-color-darkblue {
	background-color: var(--darkest-blue);
}

@media ( min-width : 768px) {
	.card-img-overlay {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%; /* or set a specific width if you want */
		height: auto; /* optional */
		text-align: center; /* optional, for text alignment */
	}
}

#circularImageZone {
	min-height: 85vh;
	max-height: 100vh;
}
/* Tablet (768px – 991px) */
@media ( min-width : 768px) {
	#circularImageZone {
		min-height: 100vh;
		max-height: 100vh;
	}
}

#circularImageZone h5 {
	font-size: clamp(1rem, 3vw, 3.5rem);
}

#circularImageZone p {
	font-size: clamp(0.75rem, 1vw, 1.5rem);
}

.circular-img {
	width: clamp(150px, 30vw, 450px);
	height: clamp(150px, 30vw, 450px);
	border-radius: 50%;
	object-fit: cover;
}

#whyKashDiv {
	max-width: 90%;
}

#whyKashDiv h5 {
	font-size: clamp(1rem, 3vw, 3.5rem);
}

#whyKashDiv p {
	font-size: clamp(0.75rem, 1vw, 1.5rem);
}

#cardsDiv .card {
	min-height: 30vh;
}

#cardsDiv h5 {
	font-size: clamp(1rem, 1.7vw, 2.5rem);
}

#cardsDiv p {
	font-size: clamp(0.75rem, 1vw, 1.5rem);
}