communityhallv22/target/classes/static/assets/css/home.css

	
		.book-button {
		display: block;
		margin: 0 auto;
	}

	.carousel-control-prev,
	.carousel-control-next {
	
		/* Dark background color */
		width: 5%;
		/* Adjust width as needed */
	}

	.carousel-control-prev-icon,
	.carousel-control-next-icon {
		filter: invert(1);
		/* Invert color for white arrow icon */
	}

	/* Highlight previous and next buttons on hover */
	.carousel-control-prev:hover,
	.carousel-control-next:hover {
		/*background-color: #555;*/

	}

	.custom-btn-close {
		color: white;
		font-size: 20px;
		border: none;
		background-color: transparent;
		cursor: pointer;
	}

	/* Modal Body */
	.custom-modal-body {
		background-color: #f8f9fa;
		/* Light grey background for the body */
	}

	.custom-form-group label {
		color: #333;
		/* Darker text for better readability */
	}

	.custom-input {
		border-radius: 20px;
		/* Rounded borders for input */
		border: 1px solid #ced4da;
		padding: 10px;
	}

	/* Buttons */
	.custom-btn-primary {
		background-color: #016d6f !important;
		/* Primary button color updated */
		border: none;
		border-radius: 20px;
		/* Rounded borders for buttons */
		color: white;
		padding: 10px 20px;
		margin-top: 10px;
		/* Spacing between buttons and form */
		cursor: pointer;
	}

	.custom-btn-primary:hover {
		background-color: #015a5c !important;
		/* Slightly darker shade on hover for a nice effect */
	}

	.custom-btn-secondary {
		background-color: #6c757d;
		/* Secondary button color */
		border: none;
		border-radius: 20px;
		color: white;
		padding: 10px 20px;
		cursor: pointer;
	}

	.custom-btn-secondary:hover {
		background-color: #5a6268;
		/* Darker shade on hover */
	}

	/* Adjust modal title color dynamically if needed */
	#bookingModalLabel {
		color: #fff;
		/* Ensure visibility against the header background */
	}

/* Ensure the card itself is a flex container to align the button at the bottom */
.card.gallery-desc {
    display: flex;
    flex-direction: column;
}

/* This will make the content of the card (excluding the image) a flex container */
#cardblock {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Adjust this to align items vertically (e.g., flex-start, flex-end, center) */
    align-items: center; /* This centers the content horizontally */
    text-align: center; /* This centers the text inside each block */
    flex-grow: 1; /* This makes the card-block grow to fill available space, pushing the button down */
}

/* Adjust the image container */
.masonry-media {
    width: 100%; /* Adjust this as necessary */
    display: flex;
    justify-content: center; /* Center the image container */
}

.masonry-media img {
    max-width: 100%; /* Make sure the image is responsive and fits its container */
    height: auto;
}

/* Style the button to be full width if desired */
.book-button {
    width: calc(100% - 30px); /* Adjust based on your padding and margin preferences */
    margin: 15px; /* Adjust or remove based on your design */
}

	.hidden {
		display: none;
	}