.testimonial-block .testi-overlay {
	background-color: #00000080;
}
.testimonial-block {
	background-image: url(../components/images/utilities/2.jpg);
}
/* banner block*/
.banner-block {
	/* Smooth linear gradient using your exact logo colors */
	background: linear-gradient(135deg, #ff0000 0%, #00bfff 100%);
	padding: 50px 0px;
	position: relative;
	/* Optional: Adds a subtle shadow to separate the banner from other sections */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Forces the heading text to be white for perfect readability */
.banner-block .head-title-1 {
	color: #ffffff !important;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

/* Custom styling for the button so it stands out against the gradient */
.banner-block .custom-banner-btn {
	background-color: #ffffff;
	color: #ff0000; /* Red text to tie back to the brand */
	border: 2px solid #ffffff;
	padding: 15px 30px;
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	border-radius: 4px;
	transition: all 0.3s ease;
	display: inline-block;
	text-decoration: none;
}

/* Hover effect: Inverts the button colors */
.banner-block .custom-banner-btn:hover {
	background-color: transparent;
	color: #ffffff;
}

/* Responsive alignment fix for smaller screens */
@media (max-width: 768px) {
	.banner-block .banner-text {
		text-align: center !important;
		margin-bottom: 20px;
	}
	.banner-block .head-title-1 {
		font-size: 26px;
	}
}

/* background overlay  */
.background-overlay {
	background-color: #000000;
	opacity: 0.2;
	transition:
		background 0.3s,
		border-radius 0.3s,
		opacity 0.3s;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
}

.header-style-1 {
	/* background-color: transparent; */
	background-color: #00000000;
	z-index: 101;
	position: absolute;
	right: 0;
	left: 0;
	padding-top: 20px;
	padding-bottom: 20px;
	/* padding-top: 50px; */
	/* padding-bottom: 50px; */
	-webkit-transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}