.content-section {
	position: relative;
	min-height: 100vh; /* Ensure section takes full viewport height */
	display: flex;
	justify-content: center; /* Center content horizontally */
	align-items: flex-start; /* Align content to the top */
	padding: 60px 0; /* Reduced padding for less height */
	flex-direction: column; /* Stack text and image vertically */
}

.content-section .container {
	max-width: 1140px;
	width: 100%;
}

.img-block img {
	max-width: 100%;
	height: auto;
}

.txt-block {
	padding-left: 30px;
}

.txt-block h2,
.txt-block h3,
.txt-block h4 {
	font-weight: bold;
}

.compact-list .list-item {
	margin-bottom: 12px; /* Reduced margin between list items */
	font-size: 1.1rem;
	color: #000;
	display: block;
}

.compact-list .list-item strong {
	color: #f86e27;
	font-weight: 600;
}

.compact-list .list-item span {
	color: #FF6908;
	font-size: 1.8rem; /* Adjusted icon size */
	margin-right: 10px;
}

/* Ensuring responsive layout */
@media (max-width: 992px) {
	.content-section {
		flex-direction: column; /* Stack content vertically on smaller screens */
	}

	.txt-block {
		padding-left: 0;
	}

	.img-block {
		text-align: center;
		margin-top: 20px;
	}
}


/* Make the flip animation work */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out; /* Smooth flip transition */
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Hide the back side when flipped */
}

/* Front card design (Image background with overlay) */
.card-front {
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the card */
    opacity: 0.6; /* Apply opacity to image in initial state */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

.card-front .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent overlay */
    z-index: 1; /* Ensure overlay is on top of the image */
}

/* Back card design - Ensure it covers the whole card */
.card-back {
    background-color: #000; /* Black background for card-back */
    transform: rotateY(180deg); /* Initially hide the back */
    padding: 20px;
    display: flex;
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    height: 100%; /* Ensure full height of card is used */
    text-align: left; /* Align the text to the left for readability */
    box-sizing: border-box; /* Ensure padding is included in the element's width/height calculation */
}


/* Title styling (on front) */
.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #f86e27; /* Title color */
    position: absolute;
    top: 50%; /* Vertically center */
    left: 50%; /* Horizontally center */
    transform: translate(-50%, -50%); /* Ensure exact center */
    z-index: 2; /* Make sure title stays above the image */
    text-align: center; /* Center the text */
}

/* Description styling (on back) */
.card-text.description {
    font-size: 1.1rem; /* Adjust font size */
    color: #fff; /* White text for better readability */
    line-height: 1.4; /* Adjust line-height to avoid vertical stretching */
    padding: 0; /* Remove extra padding */
    text-align: justify; /* Justify the text */
    overflow: hidden; /* Ensure the text doesn't overflow */
    width: 100%; /* Ensure the text occupies the full width */
    margin: 0; /* Remove margins */
    height: auto; /* Allow height to adjust based on content */
}


.card-body {
    padding: 20px;
}

/* Ensure the section doesn't shrink */
#features-2.custom-section {
    height: auto;
    padding: 100px 20px;
}

.container {
    max-width: 1200px;
}

.text-container {
    max-width: 90%; /* Control the width of the text */
    padding: 10px; /* Add padding inside */
    text-align: justify; /* Align text inside block */
    line-height: 1.6; /* Adjust line-height for better readability */
    overflow: hidden; /* Prevent overflowing text */
    height: auto; /* Allow content to take natural height */
    display: block; /* Allow block level behavior */
    margin: 0 auto; /* Center the text block */
}