/* ========================================
   SERVICES SECTION GRID FIX
   ======================================== */

/*
 * This file ensures services section displays 3 columns properly
 * Override any conflicting grid/flex settings
 */

/* Force Bootstrap grid behavior */
#services .row {
	display: flex !important;
	flex-wrap: wrap !important;
	max-width: 100% !important;
	overflow: hidden;
	/* Prevent any overflow */
	/* Let Bootstrap handle column widths */
}

/* Desktop: 3 columns (col-lg-4) */
@media (min-width: 992px) {
	#services .col-lg-4 {
		flex: 0 0 auto;
		width: 33.333333%;
	}
}

/* Tablet: 2 columns (col-md-6) */
@media (min-width: 768px) and (max-width: 991px) {
	#services .col-md-6 {
		flex: 0 0 auto;
		width: 50%;
	}
}

/* Mobile: 1 column (full width) */
@media (max-width: 767px) {
	#services [class*="col-"] {
		flex: 0 0 auto;
		width: 100%;
	}
}

/* Ensure proper spacing */
#services .row.g-4 {
	--bs-gutter-x: 2.5rem;
	/* Increased from 1.5rem for wider spacing */
	--bs-gutter-y: 2rem;
	/* Increased from 1.5rem */
}

/* Column padding */
#services .row>* {
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	margin-top: var(--bs-gutter-y);
	max-width: 100%;
	overflow: hidden;
	/* Prevent card overflow */
}

/* Prevent service-box from overflowing column */
#services .service-box {
	max-width: 100%;
	contain: layout style;
	/* CSS Containment to prevent overflow */
}

/* Responsive gutter spacing */
@media (max-width: 991px) {
	#services .row.g-4 {
		--bs-gutter-x: 2rem;
		/* Slightly reduced for tablet */
		--bs-gutter-y: 1.8rem;
	}
}

@media (max-width: 767px) {
	#services .row.g-4 {
		--bs-gutter-x: 1.5rem;
		/* Reduced for mobile */
		--bs-gutter-y: 1.5rem;
	}
}

@media (max-width: 576px) {
	#services .row.g-4 {
		--bs-gutter-x: 1.25rem;
		/* Further reduced for small mobile */
		--bs-gutter-y: 1.25rem;
	}
}