:root {
	--primary-dark: #535c52;
	--primary-mid: #d1ccbd;
	--primary-mid2: #007574;
	--primary-light: #c8c8c8;
	--primary-lightest: #ffffff;

	--font-family-base: "DM Sans", sans-serif;
	--font-family-heading: "Instrument Serif", serif;
	--font-family-subheading: "Instrument Serif", serif;

	--font-weight-light: 200;
	--font-weight-regular: 300;
	--font-weight-heavy: 400;

	--font-size-base: 17px;
	--font-size-large: 23px;
	--font-size-heading: 45px;

	--border-radius: 10px;

	--font-weight-bold: 700;
	--font-weight-semibold: 600;
	--font-weight-medium: 500;

	/* Letter spacing variables for each heading */
	--letter-spacing-h1: -0.5px;
	--letter-spacing-h2: 1.5px;
	--letter-spacing-h3: 1px;
	--letter-spacing-h4: 0.8px;
	--letter-spacing-h5: 0.5px;
	--letter-spacing-h6: 0.2px;

	--letter-spacing-base: 0.2px;
	--letter-spacing-heading: 1px;
	--letter-spacing-subheading: 0.2px;

	--font-size-h1: 3rem;
	--font-size-h2: 2.5rem;
	--font-size-h3: 2rem;
	--font-size-h4: 1.5rem;
	--font-size-h5: 1.2rem;
	--font-size-h6: 1rem;
}

body {
	font-family: var(--font-family-base);
	font-optical-sizing: auto;
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-base);
	color: var(--primary-dark);
	font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	text-transform: uppercase;
	font-family: var(--font-family-heading);
	font-optical-sizing: auto;
	color: var(--primary-dark);
	font-weight: var(--font-weight-heavy);
	letter-spacing: 1px;
}

strong {
	color: var(--primary-lightest);
	font-family: var(--font-family-subheading);
	text-transform: uppercase;
	letter-spacing: 0.2px;
}

.subheading {
	font-family: var(--font-family-subheading);
	text-transform: uppercase;
	letter-spacing: 0.2px;
}

.card-img,
.card-img-top,
.gallery-item img {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	transition: 0.3s ease-in-out;
	cursor: pointer;
}

.modal-header {
	background-color: transparent;
	border-bottom: none;
}
.modal-content {
	background-color: transparent;
	border: none;
}
.modal-body img {
	background-color: #fff; /* Optional: to ensure image visibility */
	border: var(--primary-lightest) solid 5px;
}
.custom-close {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 30px;
	height: 30px;
	background-color: white;
	border: none;
	border-radius: 50%;
	opacity: 1;
	z-index: 1051; /* Ensure the close button is on top */
}

.custom-close::before {
	content: "\2715"; /* Unicode for 'x' */
	font-size: 20px;
	color: black;
	display: block;
	text-align: center;
	line-height: 30px;
}

@media (min-width: 1400px) {
	.container-xxl {
		max-width: 1600px;
	}
}

@media only screen and (min-width: 768px) {
	.container {
		padding-left: 0px;
		padding-right: 0px;
	}
}

.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}
.grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 3vw 5vw;
}

.grid-4 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 20px;
}
@media only screen and (max-width: 1399px) {
	.navbar-collapse {
		position: absolute;
		background-color: var(--primary-dark);
		top: 120px;
		right: 0;
	}

	.custom-navbar .nav-link {
		padding: 10px 30px !important;
		white-space: nowrap;
	}
}

@media only screen and (max-width: 768px) {
	.grid-3 {
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}

	.grid-2 {
		gap: 20px;
	}

	.grid-4 {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and (max-width: 768px) {
	.pb-5 {
		padding-bottom: 0rem !important;
	}

	.mt-5 {
		margin-top: 0rem !important;
	}
}

h1 {
	font-size: var(--font-size-h1);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-h1);
}
h2 {
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-h2);
}
h3 {
	font-size: var(--font-size-h3);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-h3);
}
h4 {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-h4);
}
h5 {
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-h5);
}
h6 {
	font-size: var(--font-size-h6);
	font-weight: var(--font-weight-light);
	letter-spacing: var(--letter-spacing-h6);
}

@media (max-width: 576px) {
	h1 {
		font-size: 2rem;
	}
}