/* logo header*/
/* Wrapper to align the image and text side-by-side */
.header-logo-wrapper a {
	display: flex;
	align-items: center;
	gap: 10px; /* Space between the image and text */
	text-decoration: none;
}

/* Make sure the logo image isn't too large if text is next to it */
.header-logo-wrapper img {
	max-height: 50px; /* Adjust this value based on your actual image size */
	width: auto;
}

/* Styling and animating the Huda text */
.animated-logo-text {
	font-family: "Open Sans", sans-serif;
	font-weight: 700; /* Bold */
	font-style: italic; /* Italic */
	color: #29277b; /* The requested blue color */
	font-size: 22px; /* Adjust size to fit your header */
	line-height: 1.2;

	/* Animation setup */
	display: inline-block;
	opacity: 0; /* Starts hidden for the fade-in */
	animation: slideInFade 1s ease-out 0.2s forwards; /* Runs on load */
	transition:
		transform 0.3s ease,
		text-shadow 0.3s ease; /* Smooth hover transition */
}

/* Subtle hover effect */
.header-logo-wrapper a:hover .animated-logo-text {
	transform: scale(1.03);
	text-shadow: 2px 2px 5px rgba(41, 39, 123, 0.2);
}

/* Keyframes for the load animation */
@keyframes slideInFade {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
/* logo header*/
/* --------------------------------------------------------------------------- */
/* Index about  */
/* Styling and Animation for the About Section Image */
.rounded-animated-img {
	border-radius: 20px; /* Gives the image smooth rounded edges */
	box-shadow: 0 15px 35px rgba(41, 39, 123, 0.15); /* Adds a soft drop shadow using your brand's blue */
	animation: floatImage 4s ease-in-out infinite; /* Triggers the floating animation */
	transition: transform 0.3s ease; /* Smooth transition for the hover effect */
	max-width: 100%;
	height: auto;
}

/* Optional: Slight zoom when the user hovers over the image */
.rounded-animated-img:hover {
	transform: scale(1.02);
	cursor: pointer;
}

/* Keyframes for the continuous floating effect */
@keyframes floatImage {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-15px); /* Moves the image up slightly */
	}
	100% {
		transform: translateY(0px);
	}
}
/* ----  */
/* Custom Industry Box Base Styles */
.custom-industry-box {
	display: flex;
	flex-direction: column;
	height: 100%; /* Ensures all boxes share the exact same height */
	background: #ffffff;
	border-radius: 20px; /* Makes the box edges fully rounded */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Adds the required box shadow */
	transition:
		transform 0.4s ease,
		background-color 0.4s ease,
		box-shadow 0.4s ease; /* Smooth animations */
	overflow: hidden;
}

/* Rounded image inside the box */
.custom-industry-box .service-thumb img.rounded-img {
	border-radius: 20px 20px 0 0; /* Rounds only the top corners of the image to fit the box */
	width: 100%;
	height: 220px;
	object-fit: cover; /* Prevents image stretching */
}

/* Inner Text Area */
.custom-industry-box .service-inner-text {
	padding: 30px 25px;
	text-align: center; /* Centers all text as requested */
	flex-grow: 1; /* Pushes content evenly so shorter text doesn't break the layout */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* Icon Styles */
.custom-industry-box .service_icon i {
	/* font-size: 40px; */
	color: #29277b;
	transition: color 0.3s ease;
}

/* Typography transitions */
.custom-industry-box .title h2,
.custom-industry-box p {
	transition: color 0.3s ease;
}
.custom-industry-box .title h2 {
	font-size: 22px;
	margin-bottom: 15px;
	color: #333;
}
.custom-industry-box p {
	color: #666;
	margin-bottom: 0;
	line-height: 1.6;
}

/* Hover Animations */
.custom-industry-box:hover {
	transform: translateY(-15px); /* Floating lift animation on hover */
	background-color: #29277b; /* Background changes to brand blue so white text is readable */
	box-shadow: 0 20px 40px rgba(41, 39, 123, 0.25); /* Deepens shadow on hover */
}

/* Changes all text and icons to white on hover */
.custom-industry-box:hover .title h2,
.custom-industry-box:hover p,
.custom-industry-box:hover .service_icon i {
	color: #ffffff !important;
}
/* Index about  */