.container-section-events {
	max-width: 1000px;
	margin: 0 auto;
}

.section-3-columns-events {
	padding: 0px;
}

.grid-container-form-3-columns-events {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 100px;
	padding: 50px;
	margin: auto;
	justify-content: center; /* Menyelaraskan item di tengah */
}

.container-events {
	position: relative;
	width: 240px; /* Increased width to accommodate both boxes */
	height: 220px; /* Increased height to accommodate both boxes */
}

.box1-events, .box2-events {
	position: absolute;
	width: 240px;
	height: 175px;
	padding: 10px; /* Add some padding for better text layout */
	box-sizing: border-box;
	border: 1px solid #000; /* Menambahkan garis pada setiap kotak */
}

.box1-events {
	background-color: #F9F9F9;
	top: 0px;
	left: 0px;
}

.box2-events {
	background-color: #F9F9F9;
	top: 10px; /* Adjust as needed to control overlap */
	left: 10px; /* Adjust as needed to control overlap */
	z-index: 1; /* Ensures box2 is on top */
	color: #3C3E3D; /* Text color */
	overflow: visible; /* Allow overflow for the image */
}

.title-events {
	font-weight: bold;
	font-size: 0.9em;
}

.subtitle-events {
	font-weight: normal;
	font-size: 0.6em;
	margin-top: 5px;
}

.description-events {
	font-size: 0.6em;
	margin-top: 10px;
	color: #B2B2B2;
}

.read-more-events {
	position: absolute;
	bottom: 10px;
	left: 10px;
	font-size: 0.6em;
	color: #F33304;
	text-decoration: none; /* Remove underline */
	font-weight: bold;
}

.read-more-events:hover {
	text-decoration: underline; /* Add underline on hover */
}

.image-container-events {
	position: absolute;
	bottom: -30px; /* Adjust as needed to control overlap */
	right: -30px; /* Adjust as needed to control overlap */
	width: 100px; /* Set desired width */
	height: 100px; /* Set desired height */
	border-radius: 50%; /* Make the container oval */
	overflow: hidden; /* Hide overflow for oval effect */
	z-index: 2; /* Ensure the image container is on top of box2 */
}

.image1-events {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Ensure the image covers the element */
}

.image2-events {
	position: absolute;
	top: 50%; /* Center the second image vertically */
	left: 50%; /* Center the second image horizontally */
	width: 65%; /* Adjust the size of the second image */
	height: 65%; /* Adjust the size of the second image */
	transform: translate(-50%, -50%); /* Center the second image */
	object-fit: cover; /* Ensure the image covers the element */
	z-index: -1; /* Ensure image2 is below image1 */
}

/* Media query untuk tampilan mobile, tablet, dan perangkat lainnya */
@media screen and (max-width: 1023px) {
	.grid-container-form-3-columns-events {
		grid-template-columns: 1fr;
		gap: 80px;
		padding: 30px;
	}
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 991px) {
	.grid-container-form-3-columns-events {
		grid-template-columns: 1fr;
		gap: 80px;
		padding: 30px;
	}
}

/* Mobile Devices */
@media screen and (max-width: 767px) {
	.grid-container-form-3-columns-events {
		grid-template-columns: 1fr;
		gap: 80px;
		padding: 30px;
	}
}