.call-to-action-btn {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
}

	/* Ensure all cards have the same height and width */
    .card {
        display: flex;
        flex-direction: column;
        height: 100%; /* Makes the card stretch to the available height */
        width: 100%; /* Cards will fill the container's width */
        border: 1px solid #ddd; /* Optional, for visual clarity */
        border-radius: 8px; /* Optional, for rounded corners */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Optional, for card shadow */
    }

    /* Make sure card-body takes up remaining space */
    .card-body {
        flex-grow: 1;
    }

    /* Fix the size of each card */
    .col-md-6.col-lg-4 {
        /* Optional: Fix width of each card so all are consistent */
        max-width: 100%;
        display: flex;
        justify-content: stretch;
    }

    /* Adjust image inside card */
    .card-img-top {
        object-fit: cover; /* Ensures image does not stretch, maintains aspect ratio */
        height: 200px; /* Set a fixed height for images */
    }

    /* Ensuring card content alignment and equal height */
    .card-body {
        padding: 20px;
    }

    /* To keep consistent space between cards */
    .row {
        margin-right: -15px;
        margin-left: -15px;
    }

    .col-md-6, .col-lg-4 {
        padding-right: 15px;
        padding-left: 15px;
    }

    /* Mobile and Tablet screens */
    @media (max-width: 767px) {
        /* On mobile screens, make all cards stack vertically */
        .col-md-6 {
            flex: 0 0 100%; /* Ensure that cards take 100% of the width */
            max-width: 100%; /* Prevent overflow */
            margin-bottom: 20px; /* Add some spacing between cards */
        }

        /* Make sure the card images fit well on smaller screens */
        .card-img-top {
            height: 150px; /* Reduce image height on mobile */
        }
    }

    /* Tablet Screens (768px and above) */
    @media (min-width: 768px) and (max-width: 1024px) {
        /* For medium screens (tablets), keep the two-column layout */
        .col-md-6 {
            flex: 0 0 50%; /* Ensure each card takes 50% width on tablet */
            max-width: 50%;
        }

        /* Adjust the card images */
        .card-img-top {
            height: 175px; /* Slightly reduce image height on tablets */
        }
    }

    /* Desktop Screens */
    @media (min-width: 1025px) {
        /* For large screens (desktops), keep the three-column layout */
        .col-lg-4 {
            flex: 0 0 33.333%; /* Each card takes up 33% width on large screens */
            max-width: 33.333%; /* Prevent overflow */
        }

        /* Set a fixed image height for larger screens */
        .card-img-top {
            height: 200px; /* Standard image height on large screens */
        }
    }


/* Custom Hero Row */
.custom-hero-row {
		min-height: calc(100vh - 100px);
}

/* Custom Elements */
.custom-element-wrapper {
		position: absolute;
}

.custom-element-wrapper.custom-element-1 {
		top: 25%;
		left: 45%;
		width: 300px;
		height: 300px;
}

.custom-element-wrapper.custom-element-1 .custom-element {
		background: transparent;
		border: 3px solid var(--primary);
		opacity: 0.05;
		width: 100%;
		height: 100%;
		border-radius: 25px;
}

.custom-element-wrapper.custom-element-2 {
		top: 45%;
		left: 62%;
		width: 150px;
		height: 150px;
}

.custom-element-wrapper.custom-element-2 .custom-element {
		background: var(--primary);
		opacity: 0.05;
		width: 100%;
		height: 100%;
		border-radius: 25px;
}

.custom-element-wrapper.custom-element-3 {
		top: 57%;
		left: 70%;
		width: 100px;
		height: 100px;
}

.custom-element-wrapper.custom-element-3 .custom-element {
		background: transparent;
		border: 3px solid var(--primary);
		opacity: 0.05;
		width: 100%;
		height: 100%;
		border-radius: 25px;
}

.custom-element-wrapper.custom-element-4 {
		top: 57%;
		left: 44%;
		width: 100px;
		height: 100px;
}

.custom-element-wrapper.custom-element-4 .custom-element {
		background: var(--primary);
		opacity: 0.03;
		width: 100%;
		height: 100%;
		border-radius: 25px;
}

.custom-element-wrapper.custom-element-5 {
		top: 18%;
		left: 7%;
		width: 450px;
		height: 450px;
}

.custom-element-wrapper.custom-element-5 .custom-element {
		background: var(--secondary);
		width: 100%;
		height: 100%;
		border-radius: 25px;
}

@media (min-width: 768px) {
		.custom-element-wrapper.custom-element-5 {
				top: 18%;
				left: 15%;
		}
}

@media (min-width: 992px) {
		.custom-element-wrapper.custom-element-5 {
				top: 27%;
				left: 22%;
		}
}

@media (min-width: 1200px) {
		.custom-element-wrapper.custom-element-5 {
				top: 22%;
				left: 22%;
		}
}

@media (min-width: 1400px) {
		.custom-element-wrapper.custom-element-5 {
				top: 27%;
				left: 78%;
		}
}

.custom-element-wrapper.custom-element-6 {
		width: 160px;
		height: 160px;
		top: 22.2%;
		right: -8%;
}

.custom-element-wrapper.custom-element-7 {
		width: 160px;
		height: 160px;
		top: 58.2%;
		right: -38%;
}

.custom-element-wrapper.custom-element-8 {
		top: -5%;
		left: -6%;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 77.2% 100%, 0 54%);
						clip-path: polygon(0 0, 100% 0, 100% 100%, 77.2% 100%, 0 54%);
}

@media (min-width: 768px) {
		.custom-element-wrapper.custom-element-8 {
				top: -5%;
				left: 5%;
		}
}

@media (min-width: 992px) {
		.custom-element-wrapper.custom-element-8 {
				top: 5%;
				left: 5%;
		}
}

@media (min-width: 1200px) {
		.custom-element-wrapper.custom-element-8 {
				top: 0%;
				left: 10%;
		}
}

@media (min-width: 1400px) {
		.custom-element-wrapper.custom-element-8 {
				top: 5%;
				left: 63%;
		}
}


.custom-element-wrapper.custom-element-9 {
		width: 160px;
		height: 160px;
		top: 5%;
		left: 7%;
}

.custom-element-wrapper.custom-element-10 {
		width: 160px;
		height: 160px;
		top: 65%;
		right: 10%;
}

.custom-element-wrapper.custom-element-11 {
		display: inline-block;
}

.custom-element-wrapper.custom-element-11 img {
		border-radius: 25px;
}

.custom-element-wrapper.custom-element-11:before {
		display: block;
		content: "";
		position: absolute;
		top: 9px;
		left: -10px;
		background: var(--secondary);
		border-radius: 25px;
		width: 100%;
		height: 100%;
		z-index: -1;
}

/* Page Header */
.page-header {
		padding-top: 153px;
		padding-bottom: 0;
}

.page-header .container:before {
		content: "";
		left: 0;
		width: 100%;
		height: 1px;
		background: rgba(0, 0, 0, 0.06);
		position: absolute;
}

/* Breadcrumb */
.breadcrumb li {
		font-weight: 600;
		letter-spacing: 1px;
}

.breadcrumb > li + li:before {
		padding: 0 7px 0 7px;
}