/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 18 2025 | 09:18:05 */
.feature-with-thumbnail {
	display: flex;
	align-items: center;

	/* Ensure columns stretch properly */
	.et_pb_column {
		flex: 1; /* Allow columns to grow and take available space */
		max-width: 50%; /* Ensure columns don’t exceed 50% width on desktop */
		margin-bottom: 0;
	}
}

.feature-with-thumbnail .feature-text {
	display: flex;
	align-items: center; /* Vertically center the text within the module */
	justify-content: center; /* Horizontally center the text (optional, since you already have text-align: center) */
	height: 100%; /* Ensure the text module takes the full height of its parent column */
	width: 100%; /* Ensure the text module takes the full width of its parent column */

	/* Target the inner text content */
	.et_pb_text_inner {
		width: 100%; /* Ensure the text takes the full width of its container */
		text-align: center; /* Keep the text centered as per your inline style */
	}

	/* Target the h2 element inside the text module */
	.et_pb_text_inner h2 {
		margin: 0;
		padding: 20px 0; /* Add some vertical padding for better spacing */
	}
}

.feature-thumbnail {
	width: 100%; /* Ensure the image module takes the full width of the column */
	max-width: 100%; /* Prevent the image from exceeding the column width */

	/* Ensure the image wrapper and the image itself stretch to full width */
	.et_pb_image_wrap, img {
		width: 100% !important; /* Force the image and its wrapper to take full width */
		height: auto; /* Maintain aspect ratio */
	}
}

@media (max-width: 980px) { 
	/* Divi's tablet breakpoint is typically 981px */
	.feature-with-thumbnail {
		gap: 36px;
	}
	/* Slightly smaller for mobile (adjust as needed) */
	.feature-with-thumbnail .feature-text {
		.et_pb_text_inner h2 {
/* 			font-size: 1.3em;  */
		}
	}
}

/* Ensure columns stack vertically on mobile */
@media (max-width: 767px) {
	.feature-with-thumbnail {
		padding-top: 0;
		flex-direction: column;
		align-items: stretch; /* Ensure columns take full width */
		gap: 0;

		.et_pb_column {
			max-width: 100% !important; /* Force full width for each column */
		}
		/* Add spacing between the image and text */
		.et_pb_column:not(:last-child) {
/* 			margin-bottom: 20px;  */
		}
		
		&.reverse {
			flex-direction: column-reverse;
		}
	}

	/* Responsive adjustments for mobile */
	.feature-with-thumbnail .feature-text {
		display: block; /* Remove flexbox to allow natural stacking */
		height: auto; /* Let the height adjust naturally */
		padding: 20px 0; /* Add some padding to the text module for spacing */

		.et_pb_text_inner h2 {
			font-size: 1.3em; /* Slightly smaller for mobile (adjust as needed) */
		}
	}
}