/**
  * Main page template which is used on all the main links in the menu.
  * This template is used for the following pages:
  * - /corporate-deliveries/
  * - /events/
  * - /weddings/
  * - /about-us/
  *
  * @package Hello Elementor Child
*/

.main-page-image-box-container .main-image-box-element img {
	width: 100%;
	object-fit: cover;
	height: 380px;
}

/* I need to ensure that the heights of heach title in the image box are the some height, no matter the text length
All titles should have the same height as the tallest title.
*/

.main-page-image-box-container .main-image-box-element .elementor-image-box-title,
.main-page-image-box-container .elementor-widget-container,
.main-page-image-box-container,
.main-page-image-box-container .main-image-box-element,
.main-page-image-box-container .main-image-box-element .elementor-image-box-content {
	height: 100%;
}

.main-page-image-box-container .elementor-image-box-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.main-page-image-box-container .elementor-image-box-wrapper .elementor-image-box-title,
.main-page-image-box-container .main-image-box-element .elementor-image-box-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width: 1024px) {
	.main-page-image-box-container .main-image-box-element img {
		max-height: 280px;
	}
}

@media screen and (max-width: 767px) {
	.offers-image-box .elementor-image-box-img img {
		max-height: 225px;
	}
}