/* ===============================
	INTRO SECTION
================================ */
#intro-section {
	padding: 3rem 0;
	background: linear-gradient(135deg, #e4ecf2, #d5dfe7);
}

#intro-section .row {
	max-width: 1250px;
	align-items: center;
	gap: 2rem;
	width: 90%;
	margin: auto;
}

.intro-col {
	flex-basis: 50%;
	margin: 0 1rem;
}

#intro-section h1::before {
	content: ''; 
	width: 20%;
	height: 6px;
	background: #3498DB;
	display: block;
	margin-bottom: 1.5rem;
}

#intro-section h1 {
	margin-bottom: 1.5rem;
}

#intro-section p {
	margin-bottom: 2rem;
	line-height: 1.6;
}

.intro-col img {
	width: 100%;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.05); /* very faint border */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* soft shadow */
	margin: 1.5rem 0;
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media(max-width: 800px) {
	#intro-section {
		padding: 6rem 0 5rem;
	}

	#intro-section h1 {
		margin-bottom: 1rem;
	}

	#intro-section p {
		margin-bottom: 0;
		line-height: 1.6;
	}

	.intro-col img {
		margin-top: 1rem;
	}
}

/* ===============================
	SERVICE SECTION
================================ */
#service-section {
	padding: 7rem 0 3rem;
	width: 90%;
	max-width: 1250px;
	margin: auto;
}

.service-container {
	display: flex;
	gap: 1rem;
	flex-direction: row;
}

.service-col {
	padding: 1rem 0;
	flex: 1 1 50%; 			/* makes each col take equal space */
	display: flex; 			/* makes two side by side cols */
	flex-direction: column; /* stacks children vertically */
}

/* desktop ver's left col */
#service-section .left-text {
	padding: 1rem 0;
	line-height: 1.8;
}

.iframe-container {
	position: relative;
	display: block;
	flex-grow: 1; /* stretch vertically within flex container */
	width: 100%;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* Make iframe fill the container */
.iframe-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	object-fit: cover; /* simulated via full size */
}

/* desktop ver's right col */
#service-section .right-text p {
	padding: 2rem 0.5rem 1rem;
}

.service-points li {
	margin: 0 3rem 0.5rem;
}

.service-points li::marker {
	color: #3498DB;
}

.right-img {
	flex-grow: 1; 		 /* to stretch vertically */
	object-fit: cover; 	 /* or 'contain' if you don't want cropping */
	width: 100%;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.05); 		 /* very faint border */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); 	/* soft shadow */
}

/* --------------------------------
	FOR MOBILE VERSION
---------------------------------- */
.service-text-mobile {
	display: none; /* while on larger screens */
	margin-bottom: 0.5rem;
}

.service-col.mobile-only, .iframe-container.mobile-only {
	display: none;
	gap: 1rem;
}

.iframe-container.mobile-only {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
	height: 0;
	overflow: hidden;
	background: #000;
	border-radius: 5px;
}

.iframe-container.mobile-only iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.mobile-img {
	overflow: hidden;
	width: 100%;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.05); 		/* very faint border */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); 	/* soft shadow */
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media(max-width: 800px) {
	.service-col.desktop-only, .right-img, .left-text, .iframe-container { /* removes items that are only for desktop ver */
		display: none;
	}

	/* adds items only for mobile */
	.service-col.mobile-only, .iframe-container.mobile-only {
		display: flex; /* needed for gap to work */
	}
	
	.service-container {
		justify-content: center;
		align-items: center;
	}

	.service-text-mobile {
		display: block;
	}

	/* general edits for mobile ver */
	#service-section {
		padding-top: 5rem;
	}

	#service-section h2 {
		margin-bottom: 1rem;
	}

	#service-section .left-text {
		padding: 1rem 0;
		line-height: 1.6;
	}

	#service-section .right-text p {
		padding: 1rem 0.5rem 0.5rem;
		line-height: 1.3;
		margin: 0 0 1rem;
	}

	.service-col li {
		margin-bottom: 1rem;
		margin-left: 2rem;
		margin-right: 0;
	}
}

@media(max-width: 700px) {
	.service-container {
		flex-direction: column-reverse;
	}

	.service-col li {
		margin-bottom: 0;
	}
}

/* ===============================
	TEACHING SECTION
================================ */
.background {
	background: linear-gradient(135deg, #3498DB, #5dade2);
	padding: 7rem 1.5rem;
	border-radius: 5px;
}

#teaching-section {
	padding: 3rem 0;
	width: 90%;
	margin: auto;
	max-width: 1250px;
}

#teaching-section h2 {
	color: #fff;
	text-align: center;
	margin-bottom: 0.5rem;
}

.teaching-subtext {
	color: #fff;
	text-align: center;
	padding: 1rem 5rem 2rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}

/* --------------------------------
	CAROUSEL
---------------------------------- */
.carousel {
	grid-auto-columns: calc((100% / 3) - 12px); /* 3 cards per slide by default */
}

.card {
	background: #fff;
	padding: 1.5rem 1.2rem 2rem;
}

.card img {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	cursor: zoom-in;
	transition: transform 0.3s ease;
}

.card img:hover {
	transform: scale(1.05); /* slightly enlarge the image */
}

.card p {
	margin: 1.5rem 0 1rem;
	text-align: center;
}

.carousel-dot.active {
	background-color: #002182;
}

/* --------------------------------
	L & R ARROW ICONS
---------------------------------- */
.carousel-container i {
	color: #fff;
	font-size: 1.8rem;
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media(max-width: 900px) {
	.background {
		padding: 5rem 1.5rem;
	}

	.carousel { /* show 2 cards at a time for smaller screen */
		grid-auto-columns: calc((100% / 2) - 12px);
	}
	
	.teaching-subtext {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

@media(max-width: 800px) {
	.teaching-subtext {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media(max-width: 600px) {
	.carousel { /* show 1 card at a time for smaller screen */
		grid-auto-columns: calc(100% - 12px);
	}
}

/* ===============================
	MAP SECTION
================================ */
#map-section {
	padding: 5rem 0 10rem;
	width: 90%;
	max-width: 1250px;
	margin: auto;
}

#map-section h2 {
	text-align: center;
	margin: 1rem 0;
	padding: 0 1rem;
}

#map-section p {
	text-align: center;
	margin-bottom: 2rem;
}

#map-section .row {
	gap: 1.5rem;
}

.map-col {
	min-width: 0; /* prevents overflow issues */
}

.map-col:first-child { /* map svg */
	flex: 80%;
}

.map-col:last-child { /* list */
	flex: 20%;
}

/* --------------------------------
	MAP
---------------------------------- */
#map-container {
	width: 100%;
	height: auto;
	overflow: hidden;
}

#map-container svg {
	width: 100%;
	height: auto;
	display: block;
}

.location {
	fill: #ccc; /* base color for all countries */
	transition: fill 0.3s ease;
	cursor: pointer;
}

.location.available { /* for active locations in MAP */
	fill: #002182;
}

.location.highlight { /* for selected locations in MAP */
	fill: #3498db;
}

/* --------------------------------
	LIST OF LOCATIONS
---------------------------------- */
.locations-list { /* to make list scrollable */
	max-height: 600px;
	overflow-y: auto;      							/* add vertical scrollbar */
	padding-right: 0.5rem; 							/* prevents content from hiding under the scrollbar */
	border: 1px solid rgba(0, 0, 0, 0.05); 		/* very faint border */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); 	/* soft shadow */
	border-radius: 5px;
}

.locations-list li {
	text-align: left;
	font-size: 1rem;
	padding: 0.75rem 1rem;
	list-style: none;
	border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

.locations-list li:hover {
	background-color: #3498DB;
}

.locations-list li:first-child {
	margin-top: 0.5rem;
}

.locations-list li:last-child {
	border-bottom: none; /* removes line after last item */
	margin-bottom: 0.5rem;
}

.locations-list li.active { /* for selected locations in LIST from map*/
	background: #3498db;
	color: white;
}

/* --------------------------------
	ADJUSTING FOR SMALLER SCREENS
---------------------------------- */
@media(max-width: 1000px) {
	#map-section {
		padding-top: 3rem;
	}

	#map-section .row {
		flex-direction: column;
	}
}

@media(max-width: 900px) {
	.locations-list {
		max-height: 300px;
	}
}