:root {
    --primary-dark: #202226;
    --primary-mid: #767c78;
    --primary-light: #9ED7F6;
    --primary-lightest: #ffffff;

    --font-family-base: "Open Sans", sans-serif;
    --font-family-heading: "Patua One", sans-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;
}

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

    	.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;
	}

    	.gallery-item:hover, .card-img-top:hover  {
		transform: scale(1.05);
	}
	.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 only screen and (max-width: 768px) {

	h2 {
		font-size: 2rem !important;
	}
.pb-5, .py-5 {
    padding-bottom: 0rem !important;
}



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