You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
2.9 KiB
130 lines
2.9 KiB
|
|
.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;
|
|
}
|