@font-face {
	font-family: DBhelvethaica-ASP;
	src: url(../fonts/DB_Helvethaica.woff);
}

@font-face {
	font-family: Sukhumvit-Bold;
	src: url(../fonts/sukhumvittadmai_bol-webfont.eot);
	src:
		url(../fonts/sukhumvittadmai_bol-webfont.eot)
			format('embedded-opentype'),
		url(../fonts/sukhumvittadmai_bol-webfont.svg) format('svg'),
		url(../fonts/sukhumvittadmai_bol-webfont.woff) format('woff'),
		url(../fonts/sukhumvittadmai_bol-webfont.woff2) format('woff2'),
		url(../fonts/sukhumvittadmai_bol-webfont.ttf) format('truetype');
}

body,
.dropdown-item {
	font-family: DBhelvethaica-ASP !important;
	font-size: 23px;
}

.arcrylic-white {
	backdrop-filter: saturate(180%) blur(20px);
	background-color: rgba(255, 255, 255, 0.72);
}

.arcrylic-white-25,
.arcrylic-white-25-hover {
	backdrop-filter: saturate(180%) blur(20px);
	background-color: rgba(255, 255, 255, 0.25);
}

.arcrylic-white-25-hover:hover {
	border: 1px solid white;
	box-shadow: 0 5px 15px rgb(255 255 255 / 50%);
}

.rounded-corner {
	border-radius: 15px;
}

.arcrylic-shadow {
	box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
}

.arcrylic-text-shadow {
	text-shadow: 2px 2px 4px rgb(0 0 0 / 71%);
}

.mainButton {
	background: #08c4a0;
	border: 1px solid #08c4a0;
	color: #fff;
	padding: 5px;
	border-radius: 8px;
	width: 100%;
	text-align: center;
}

.mainButton:hover {
	text-decoration: none;
	background: rgba(8, 196, 160, 0.9);
	color: #fff;
}

.lean-pill-button {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: #00b2a9;
	padding: 8px 24px;
	border-radius: 50px;
	width: auto;
	text-align: center;
	font-weight: 500;
	font-size: 1.6rem;
	transition: all 0.3s ease;
	text-decoration: none !important;
}

.lean-pill-button:hover {
	color: #008477;
}

.lean-pill-button.active {
	background: #00b2a9;
	color: #ffffff !important;
}

.lean-pill-button.active:hover {
	background: #07b392;
	transform: translateY(-1px);
}

.menu-container {
	display: inline-flex;
	background: #f0fdfa; /* Very light teal */
	border: 1.5px solid #00b2a9;
	margin: 0 auto;
	border-radius: 50px;
	padding: 4px;
	justify-content: center;
	align-items: center;
}

@media (max-width: 991px) {
	.menu-container {
		display: flex;
		flex-wrap: wrap;
		border-radius: 20px;
	}
	.lean-pill-button {
		font-size: 1.4rem;
		padding: 6px 15px;
		width: 100%;
	}
}

.submitButton {
	background: #ffffff;
	border: 1px solid #0b1d36;
	color: #0b1d36;
	padding: 5px;
	border-radius: 8px;
	width: 100%;
	text-align: center;
}

.submitButton:hover {
	text-decoration: none;
	background: #ebebeb;
}

header {
	z-index: 9;
}

.footer-inside {
	background-color: #11285c !important;
}

.text-info {
	color: #17a2b8 !important;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link {
	color: #008477;
}

.swal2-confirm {
	border: 0 !important;
	border-color: transparent !important;
	border-radius: 0.5em !important;
	background: initial !important;
	--tw-bg-opacity: 1 !important;
	background-color: rgb(20 184 166 / var(--tw-bg-opacity)) !important;
	color: #fff !important;
	margin: 0.3125em !important;
	transition: box-shadow 0.1s !important;
	font-weight: 500 !important;
	width: 120px !important;
	border-radius: 0.5rem !important;
	font-size: 1.5rem !important;
	line-height: 2rem !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
	box-shadow:
		var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.swal2-cancel {
	border-color: transparent !important;
	border-radius: 0.5em !important;
	background-color: #e5c7c8 !important;
	border: 1px solid #e5c7c8 !important;
	color: #bb2649 !important;
	--tw-bg-opacity: 1 !important;
	margin: 0.3125em !important;
	transition: box-shadow 0.1s !important;
	font-weight: 500 !important;
	width: 120px !important;
	border-radius: 0.5rem !important;
	font-size: 1.5rem !important;
	line-height: 2rem !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
	box-shadow:
		var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.swal2-deny {
	border: 0 !important;
	border-color: transparent !important;
	border-radius: 0.5em !important;
	background: initial !important;
	--tw-bg-opacity: 1 !important;
	background-color: rgb(20 184 166 / var(--tw-bg-opacity)) !important;
	color: #fff !important;
	margin: 0.3125em !important;
	transition: box-shadow 0.1s !important;
	font-weight: 500 !important;
	width: 120px !important;
	border-radius: 0.5rem !important;
	font-size: 1.5rem !important;
	line-height: 2rem !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
	box-shadow:
		var(--tw-ring-offset-shadow, 0 0 #0000),
		var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}

.swal2-popup {
	border-radius: 0.5rem !important;
}

.swal2-icon.swal2-info {
	border-color: #9de0f6 !important;
	color: #3fc3ee;
}

.swal2-icon.swal2-success {
	border-color: #a5dc86 !important;
	color: #a5dc86;
}

.border-red-400 {
	border-color: #f87171;
}

.hidden {
	display: none;
}

.block {
	display: block;
}

.input-hidden {
	height: 0;
	width: 0;
	visibility: hidden;
	padding: 0;
	margin: 0;
	float: right;
}

.navbar-light .navbar-toggler {
	color: rgba(0, 0, 0, 0.55);
	border-color: transparent;
}

.navbar-toggler:focus {
	box-shadow: none;
}

.card-body {
	padding: 2px;
}

/* Custom styles for the responsive image handling within `<picture>` */
.picture-container {
	width: 100%;
	height: auto; /* Ensures element respects content aspect ratio */
	display: block;
}

.picture-container img,
.picture-container source {
	display: block;
	width: 100%;
	height: 100%; /* Important for object-fit */
	object-fit: cover; /* Use cover to fill the container, can be 'contain' if preferred */
}

/* Specific object-fit for specific breakpoints if needed, but Tailwind classes usually handle this */
.object-fill {
	object-fit: fill;
} /* As seen in your screenshot code */
.object-cover {
	object-fit: cover;
} /* As seen in your screenshot code */

.collapse {
	visibility: visible;
}

/* Fix navbar alignment on tablet/mobile: logo far-left, burger far-right */
@media (max-width: 991.98px) {
	.navbar > .container-fluid {
		flex-wrap: wrap;
	}

	.navbar .navbar-brand {
		order: 0;
		margin-right: auto;
	}

	.navbar .navbar-toggler {
		order: 1;
	}

	.navbar .navbar-collapse {
		order: 2;
		flex-basis: 100%;
	}
}