/* Content Box + Image Block */

.content-box-image-section {
	position: relative;
	overflow: hidden;
	padding: 0!important;
	min-height: 600px;
}

.content-box-image-section.bg-dark {
	background-color: #333333;
}

.content-box-image-section.bg-white {
	background-color: #ffffff;
}

/* Content Box Column */
.content-box-column {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px;
}

.content-box-inner {
	background-color: #ffffff;
	padding: 40px 30px;
	margin-top: 68px;
	margin-bottom: 68px;
	max-width: 100%;
	width: 100%;
}

.content-box-content ul {
	list-style: none;
	padding-left: 0;
	margin-left: 15px;
}

.content-box-content ul li {
	position: relative;
	color: #666666;
}

.content-box-content ul li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #01916D;
	border: none;
}

.content-box-cta .btn {
	margin-top: 10px;
}

/* Image Box Column - Mobile (stacked) */
.image-box-column {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	margin-bottom: 0;
	padding: 0;
}

.image-box-inner {
	position: absolute;
	right: 0;
	left: auto;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.circle-background {
	position: absolute;
	width: 90%;
	height: auto;
	border-radius: 50%;
	top: 100px;
	right: -100px;
	z-index: 1;
	aspect-ratio: 1/1;
}

.image-box-inner .image-wrapper {
	position: relative;
	z-index: 2;
	max-width: 90%;
}

.image-box-inner img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* Tablet Styles */
@media (min-width: 768px) {

	.content-box-column {
		padding: 0;
		margin-bottom: 40px;
	}

	.content-box-inner {
		padding: 50px 40px;
		margin-top: 100px;
		margin-bottom: 100px;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.image-box-column {
		margin-bottom: 0;
	}

	.circle-background {
		width: 70%;
	}

	.image-box-inner .image-wrapper {
		max-width: 80%;
	}
}

/* Desktop Styles */
@media (min-width: 1200px) {

	.content-box-column {
		margin-bottom: 0;
		position: relative;
		z-index: 10;
	}

	.content-box-content h2 {
		font-size: 36px;
		padding-bottom: 20px;
	}

	/* Image Box - Absolute Positioning */
	.image-box-column {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		z-index: 1;
		margin-bottom: 0;
	}

	.image-box-inner {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.circle-background {
		position: absolute;
		width: 100%;
		border-radius: 50%;
		top: 100px;
		z-index: 1;
	}

	.image-box-inner .image-wrapper {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		height: 100%;
		width: auto;
		max-width: 80%;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.image-box-inner img {
		height: 100%;
		width: auto;
		max-width: 100%;
		object-fit: contain;
		object-position: right center;
	}

	/* Layout: Content Left, Image Right */
	.layout-left_content .content-box-inner {
		margin-right: auto;
		margin-left: 0;
	}

	.layout-left_content .image-box-column {
		right: 0;
		left: auto;
	}

	.layout-left_content .circle-background {
		right: -15%;
	}

	/* Layout: Image Left, Content Right */
	.layout-right_content .content-box-column {
		margin-left: auto;
		margin-right: 0;
	}

	.layout-right_content .content-box-inner {
		margin-left: auto;
		margin-right: 0;
	}

	.layout-right_content .image-box-column {
		right: auto;
		left: 0;
		justify-content: flex-start;
	}

	.layout-right_content .image-box-inner {
		justify-content: flex-start;
	}

	.layout-right_content .circle-background {
		right: auto;
		left: 10%;
	}

	.layout-right_content .image-box-inner .image-wrapper {
		right: auto;
		left: 0;
		justify-content: flex-start;
	}

	.layout-right_content .image-box-inner img {
		object-position: left center;
	}
}

/* Large Desktop Styles */
@media (min-width: 1500px) {

	.content-box-content h2 {
		font-size: 42px;
	}

	.circle-background {
		width: 100%;
	}

	.layout-right_content .circle-background {
		right: auto;
		left: 12%;
	}
}

/* Extra Large Desktop */
@media (min-width: 2000px) {

	.circle-background {
		width: 80%;
		padding-bottom: 80%;
		right: 16%;
	}

	.layout-right_content .circle-background {
		right: auto;
		left: 14%;
	}
}