/* =============================================================================
 * main.css — base element/typography rules for the map UI. Its former bare
 * element selectors were scoped under .site-main so they no longer bleed onto
 * the shared site header/footer (see the note below and issue #12 §C). Loads
 * only on /map/.
 * ============================================================================= */

html {
	/* font-size: calc(0.75em + 0.5vw); */
}

/* These were bare element selectors (body/p/h1–h5/nav/footer/a) in the ported
   map CSS. main.css only loads on /map/, but the map page still renders the
   shared site header + footer, so the unscoped rules bled onto that chrome
   (e.g. recoloring the site nav links, resizing the header). Scope them to
   .site-main — the <main> wrapping the map content — so they style the map UI
   only. The map's own nav (.navbar-map) lives inside .site-main, so it keeps
   these rules; the site header/footer navs no longer do. See issue #12 §C. */
.site-main p {
	font-family: Lexend, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.site-main h2 {
	color: var(--color-brand-black);
	font-family: Lexend, sans-serif;
	font-size: 1.5rem;
}

.site-main h1,
.site-main h3,
.site-main h4,
.site-main h5,
.site-main p {
	color: var(--color-brand-black);
	font-family: Lexend, sans-serif;
	font-size: 1rem;
}

.site-main footer {
	height: 4vh;
}

.site-main h5 {
	color: #37372d;
}

.josefin-sans-font {
	font-family: Lexend, sans-serif;

	/* font-weight: 100; */
}

.montserrat-font {
	font-family: Lexend, sans-serif;

	/* font-weight: 700; */
}

.lovelo-font {
	font-family: Lexend, sans-serif;
}

.main-container {
	/* background-color: #89845a; */
	background-color: white;
	height: auto;
	padding-top: 70px;
}

/* home page styles */
.home-img {
	display: block;
	height: 20vh;
	margin: auto;
	object-fit: cover;
	padding: auto;
	width: 20vw;
}

.home-img-l {
	display: block;
	margin: auto;
	object-fit: contain;
	padding: auto;
	width: 15vw;
}

.home-splash-img {
	margin: auto;
	object-fit: contain;
	padding: 2vw;
	width: 35vw;
}

.home-img-text {
	color: white;

	/* position: relative;
    margin-bottom: -60px; */

	/* font-size: calc(1.9rem + 1.5vw); */
	font-size: 1rem;
	left: 50%;
	margin: 0;
	position: absolute;
	top: 25%;
	transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;

	/* font-style: normal; */

	/* font-weight: 700; */

	/* font-size: 60px; */

	/* line-height: 60px; */

	/* width: 610px;
    height: 60px;
    left: 117px;
    top: 325px; */
}

.home-rec {
	border-radius: 20px;
	height: 75px;
	margin-bottom: 10px;
	width: 75px;
}

.pink-bg {
	background: #e7c7c7;
}

.pink-bg:hover {
	background: #f1d3d3;
}

.orange-bg {
	background: #e7d9ab;
}

.orange-bg:hover {
	background: #ecdeb0;
}

.blue-bg {
	background: #98c3db;
}

.blue-bg:hover {
	background: #a0cce4;
}

.green-bg {
	background: #a6da94;
}

.green-bg:hover {
	background: #b0e59e;
}

.purple-bg {
	background: #cec2f0;
}

.purple-bg:hover {
	background: #d2c6f3;
}

.lightblue-bg {
	background: #adeae6;
}

.lightblue-bg:hover {
	background: #b3eeea;
}

.section-color {
	background: rgb(217 217 217 / 0.3);
}

.modal-custom {
	background: #ececde;
	z-index: 10;
}

/* footer styles */
.site-main footer {
	border-top: solid #edebde;
}

.site-main footer a {
	color: #8a8354;
	font-family: Lexend, sans-serif;
	font-size: 0.9em;
	font-weight: 100;
	text-decoration: none;
}

.site-main footer a:hover {
	color: #6b6853;
	text-decoration: underline;
}

/* about page styles */
.abouthead-bg {
	background: rgb(180 186 141 / 0.3);
}

.img-custom {
	height: auto; /* to maintain the aspect ratio */
	object-fit: fill; /* to ensure the image covers the whole area of img tag */
	width: 80%; /* or any specific width you prefer */
}

.img-custom:hover {
	opacity: 60%;
}

.col-sm-3.text-bottom {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

@media (width <= 468px) {
	.navbar-collapse-custom {
		font-size: 1 rem;
		margin-top: 80px;
	}
}

.nav-link.active {
	font-weight: bold;
}

#sys_dataContainer ul {
	display: flex;
	flex-direction: column;
	font-size: 28px;
	gap: 60px;
}

#sys_dataContainer li {
	/* font-size: 28px; */
	color: #3e3c3c;
}