body li::before {
	content: "-"; /* The dash as a bullet */
	position: absolute; /* Allows for positioning the dash */
	left: -1em; /* Position it to the left of the list item */
	color: #000; /* Optional: change the color of the dash */
}

/* General Body Styling */
body {
	background-color: #151b54; /* Dark background color */
	color: #ecf0f1; /* Light text color */
	font-family: sans-serif;
}

/* Logo Styling */
.logo-container {
	display: flex;
	align-items: center;
}
.logo-container img {
	height: 50px; /* Adjusted the size of the logo */
}
.logo-container h1 {
	font-size: 1.5rem; /* Increased font size for the text next to the logo */
	margin-left: 10px;
	color: #ecf0f1;
}

/* Navigation Styling */
nav a {
	color: #ecf0f1; /* Link color */
	font-size: 1.25rem; /* Increase font size for readability */
	font-weight: 500; /* Consistent weight */
}

nav a:hover {
	color: #3498db; /* Link hover color */
}

/* Dropdown Menu Styling */
.dropdown-menu {
	display: none;
}

/* Carousel Item Styling */
Responsive
	Carousel
	Styles /* Existing styles */
	/* Carousel Item Styling */
	/* Carousel Item Styling */
	.carousel-item {
	padding: 0 40px;
	border: none;
	border-radius: 0.1rem;
	background-color: rgba(255, 255, 255, 0.1); /* Slightly transparent white */
	color: #ecf0f1;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.carousel-item h1 {
	font-size: 1.1rem; /* Match menu font size */
	line-height: 1.2rem;
	margin-bottom: 0.5rem;
}

.carousel-item .news-subject {
	font-size: 1.1rem;
	line-height: 1.3rem;
	width: 75%;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 0;

	/* WebKit-specific */
	-webkit-line-clamp: 2;

	/* Standard property */
	line-clamp: 2;

	/* Fallback for non-supporting browsers */
	max-height: 2.6em; /* 3 lines * 1.2 line-height */
}

/* Media query for narrow screens */
@media (max-width: 480px) {
	.carousel-item {
		padding: 10px 30px;
		padding-bottom: 10px; /* Reduce horizontal padding on very narrow screens */
	}

	.carousel-item h1 {
		font-size: 1.1rem;
		line-height: 1.1rem;
		margin-bottom: 0;
	}

	.carousel-item .news-subject {
		font-size: 1.1rem;
		line-height: 1.5rem;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		max-height: 3rem; /* 2 lines * 1.2 line-height */
	}
}

.glide {
	width: 100%;
	margin: 0;
	overflow: hidden;
}

.glide__slides {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0; /* No gap between slides */
}

.glide__slide {
	flex: 1 0 auto;
	width: auto; /* Adjust based on the number of visible items */
	height: auto;
	box-sizing: border-box;
}

.glide__track {
	width: 100%;
	height: 100%;
	overflow: hidden; /* Prevent overflow */
}

/* Main Content Area Styling */
.main-content {
	background-color: #ecf0f1; /* Light background for main content area */
	color: #2c3e50; /* Dark text color */
	padding: 1rem;
	max-width: 1100px; /* Max width to limit content stretch */
	margin: 0 auto; /* Center the content */
	margin-top: 10px; /* Add top margin to create space between header and content */
}

/* Glide.js Carousel Arrows Styling */
/* Ensures that the glide slides have a fixed height and are centered vertically */
.glide__arrow {
	width: 40px;
	height: 40px; /* Make height and width equal to ensure a square */
	background-color: rgba(21, 27, 84, 0.7); /* Semi-transparent background */
	border: 0; /* Remove the border */
	color: #ecf0f1;
	display: flex;
	align-items: center; /* Center content vertically */
	justify-content: center; /* Center content horizontally */
	position: absolute;
	top: 50%; /* Position at the vertical center of the track */
	transform: translateY(-50%); /* Adjust position to center */
	z-index: 20;
	font-size: 1.5rem;
	cursor: pointer;
	transition: background-color 0.3s ease;
	padding: 0; /* Remove default padding */
	line-height: 1; /* Ensure no extra vertical space */
	text-align: center;
	text-justify: auto;
	padding-bottom: 4px;
	padding-left: 3px;
}

.glide__arrow--left {
	left: 10px;
}

.glide__arrow--right {
	right: 10px;
}

.glide__arrow:hover {
	background-color: rgba(185, 136, 23, 0.9); /* Hover state for the arrows */
}

.content-wrapper {
	padding-bottom: 0.5rem;
	transition: max-height 0.3s ease-out;
}

.expand-btn {
	margin-top: 0;
}

/* Collapsible Content Styling */
.collapsible-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

.initial-content {
	line-height: 1.2;
}

.initial-content p,
.initial-content ul {
	margin-bottom: 1rem;
}

.initial-content ul {
	padding-left: 0; /* Removes the indentation */
	list-style-type: none; /* Removes the bullet */
}

.initial-content li::before {
	content: "-"; /* The dash as a bullet */
	position: absolute; /* Allows for positioning the dash */
	left: 0; /* Position it to the left of the list item */
	color: #000; /* Optional: change the color of the dash */
	font-weight: bold; /* Optional: make the dash bold */
}

.initial-content li {
	margin-bottom: 0.25rem; /* Reduce the space between list items */
	padding-bottom: 0; /* Ensure no extra padding */
	padding-left: 1.5rem; /* Adjust space to accommodate the dash */
	position: relative; /* Required for the dash to be positioned correctly */
}

.collapsible-content.expanded {
	max-height: 1000px; /* Adjust this value as needed */
}

/* Registration Form Styling */
#applicationForm {
	background-color: #ffffff; /* Form background color */
	color: #2c3e50; /* Form text color */
	padding: 2rem;
	border-radius: 0.5rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Form Input Field Styling */
.input-field {
	width: 100%;
	padding: 0.5rem;
	margin-bottom: 1rem;
	border: 1px solid #ffffff; /* Light gray border */
	border-radius: 0.25rem;
	font-size: 1rem;
	color: #2c3e50;
}

/* Checkbox Styling */
.form-checkbox {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: inline-block;
	vertical-align: middle;
	background-origin: border-box;
	user-select: none;
	flex-shrink: 0;
	height: 1.25rem;
	width: 1.25rem;
	color: #4f46e5;
	background-color: #fff;
	border: 2px solid #d1d5db;
	border-radius: 0.25rem;
}
.form-checkbox:checked {
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a 1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
	border-color: transparent;
	background-color: currentColor;
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.form-checkbox:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(164, 202, 254, 0.45);
	border-color: #4f46e5;
}

/* Button Styling */
.btn {
	padding: 0.5rem 1rem;
	border-radius: 0.25rem;
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
}

/* Remove or modify these default styles */
.btn-prev {
	background-color: #3498db;
	color: #ffffff;
}
.btn-prev:hover {
	background-color: #2980b9;
}

/*
   Remove default green from .btn-next 
   so it doesn't override the initial disabled state
*/
.btn-next {
	color: #ffffff;
	/* no default background here */
}
.btn-next:not([disabled]) {
	background-color: #2ecc71; /* green only when enabled */
	color: #ffffff;
}
.btn-next:hover:not([disabled]) {
	background-color: #27ae60; /* hover effect when enabled */
}

/* Make disabled state stronger */
.btn-next[disabled],
button.btn-next[disabled] {
	background-color: #9ca3af !important;
	opacity: 0.5 !important;
	cursor: not-allowed !important;
}

/* Specific Section Styling */
.section {
	display: none;
}
.section.active {
	display: block;
}

/* Banner Image Styling */
.banner-container {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.banner-image {
	padding-top: 8px;
	padding-bottom: 0;
	display: block; /* Remove any potential inline spacing */
	width: 100%; /* Ensure the image takes full width */
	height: auto; /* Maintain aspect ratio */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
	.main-content {
		margin: 0;
		padding: 0rem;
	}
	.glide {
		width: 100%;
		padding: 0;
	}
	.carousel-item {
		padding: 0px;
		border: none;
	}
	.carousel-item .news-subject {
		font-size: 1.1rem;
		line-height: 1.3rem;
		width: 75%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-bottom: 10px;
		margin-bottom: 1px;

		/* WebKit-specific */
		-webkit-line-clamp: 2;

		/* Standard property */
		line-clamp: 2;

		/* Fallback for non-supporting browsers */
		max-height: 2.6em; /* 3 lines * 1.2 line-height */
	}
}

/* Dropdown Menu Styles */
.nav-menu {
	list-style: none;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
	top: 100%;
	left: 0;
}

.group:hover .group-hover\:block {
	display: block;
}

.shadow-md {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.bg-white {
	background-color: #fff;
}

.nav-link {
	display: block;
	padding: 1rem;
	color: #333;
	text-decoration: none;
}

nav a:hover {
	color: #3498db; /* Link hover color */
}

/* Dropdown Menu Container */
.dropdown-menu {
	display: none; /* Initially hidden */
	position: absolute;
	background-color: #fff;
	border: 1px solid #d1d5db;
	padding: 0.5rem 0; /* Add padding around the dropdown items */
	width: 200px; /* Adjust width based on design needs */
	z-index: 50;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for dropdown */
}

/* Show dropdown on hover */
.group:hover .dropdown-menu,
.dropdown-menu:hover {
	display: block;
}

/* Dropdown Menu Link Styling */
.dropdown-menu a {
	display: block;
	padding: 0.75rem 1rem;
	color: #2c3e50;
	text-decoration: none;
	transition: background-color 0.3s;
}

.dropdown-menu a:hover {
	background-color: #f1f1f1; /* Light gray on hover */
}

/* Ensure the submenu stays within the viewport */
.dropdown-menu {
	right: auto; /* Align dropdown to the left by default */
	left: 0; /* Adjust based on parent container */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	.dropdown-menu {
		position: static; /* Stack menus for mobile view */
		width: 100%; /* Full width on smaller screens */
		box-shadow: none; /* Remove shadow for mobile */
	}
}

/* Hide mobile menu button on desktop (using ID) */
@media (min-width: 1024px) {
	#mobile-button-container { /* Target the mobile-button-container ID */
		display: none !important;
		visibility: hidden !important;
	}
}