/* section.hero_area.style_four {
	background: url(../images/home-four/slider_bg.jpg);
	height: 800px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
section.hero_area.style_four.bannner_two {
	background: url("../images/home-four/banner2.png");
} */
section.brand_area {
	padding: 50px 0 50px;
}

/* Fix for overlapping brand/group logos */
.brand_list .single-brand-item {
	padding: 10px;
	background: #fff; /* Optional: keeps a clean background */
	display: flex;
	align-items: center;
	justify-content: center;
	height: 120px; /* Set a fixed height for the row */
	overflow: hidden;
}

.brand_list .brand-thumb img {
	max-width: 100%;
	max-height: 80px; /* Force logos to fit height-wise */
	width: auto !important; /* Override owl-carousel's width:100% */
	object-fit: contain; /* Maintain logo aspect ratio */
}

.steps_icon i {
	font-size: 40px;
	color: #0c6e6d; /* BJC Theme Green */
	margin-bottom: 20px;
	display: inline-block;
}

.steps-single-item:hover .steps_icon i {
	color: #ffffff; /* Turns white on hover to match the card theme */
}

/* Initial State: White Text */
.service_single_item_home .service_content h3,
.service_single_item_home .service_content p,
.service_single_item_home .service_content ul li {
	color: #ffffff !important;
	transition: all 0.3s ease-in-out;
}

/* Hover State: Black Text */
.service_single_item_home:hover .service_content h3,
.service_single_item_home:hover .service_content p,
.service_single_item_home:hover .service_content ul li {
	color: #000000 !important;
}

/* Ensure icons also change color if needed */
.service_single_item_home .service_content ul li i {
	color: #ffffff;
	transition: all 0.3s ease-in-out;
}

.service_single_item_home:hover .service_content ul li i {
	color: #0c6e6d; /* BJC Theme Green for contrast on hover */
}

/* why choose us - about  */
/* Container setup */
.choose_thumb {
	position: relative;
	z-index: 1; /* Creates a starting point for layering */
	display: inline-block;
	border-radius: 20px; /* Rounds the container corners */
	overflow: visible; /* Allows dots to potentially hang off the edge if designed that way */
}

/* The Main Image */
.main_choose_img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 20px; /* Rounds the image itself */
	position: relative;
	z-index: 2; /* Image is on layer 2 */
}

/* The Decorative Dots */
.choose_thumb_shpae,
.choose_thumb_shpae2 {
	position: absolute;
	z-index: 5; /* Dots are on layer 5 (Higher than the image) */
	margin-right: 630px;
}

/* 3. Animation using AOS (if your template uses it) */
/* If you don't use AOS, this will provide a smooth entry effect */
.choose_thumb[data-aos="fade-left"] {
	transition-duration: 1000ms;
}

/* Ensure all service images have the same height */
.service_detailed .service_single_item .service_thumb {
	height: 250px; /* Adjust this height based on your design preference */
	width: 100%;
	overflow: hidden;
	position: relative;
	border-top-left-radius: 20px; /* Matching your rounded corners style */
	border-top-right-radius: 20px;
}

.service_detailed .service_single_item .service_thumb .thumbnail {
	width: 100%;
	height: 100%;
	object-fit: cover; /* This is the key: it crops the image to fill the container without stretching */
	display: block;
}

/* Optional: Keep the icon overlay centered and visible */
.service_detailed .service_single_item .service_thumb .service_icon {
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 5;
}