/* Gallery Container Overrides for Porto Theme Compatibility */
/* This file ensures gallery works properly with Porto's container system */

/* Porto theme handles container widths automatically */
/* We only need to ensure proper padding and no conflicts */

/* Fix any row negative margins that might cause overflow */
#gallery .row {
	margin-left: -15px;
	margin-right: -15px;
}

#gallery .row > * {
	padding-left: 15px;
	padding-right: 15px;
}

/* Ensure gallery container doesn't add extra padding */
.gallery-container {
	/* Remove any padding that conflicts with Bootstrap grid */
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Fix section padding to match other sections */
#gallery.section.py-5 {
	padding-top: 5rem !important;
	padding-bottom: 5rem !important;
}

#gallery .container.py-5 {
	padding-top: 5rem !important;
	padding-bottom: 5rem !important;
}

/* Mobile fixes */
@media (max-width: 767px) {
	#gallery .container {
		padding-left: 15px;
		padding-right: 15px;
	}
	
	#gallery .row {
		margin-left: -15px;
		margin-right: -15px;
	}
}

/* Tablet fixes */
@media (min-width: 768px) and (max-width: 991px) {
	#gallery .container {
		max-width: 720px;
	}
}

/* Desktop fixes */
@media (min-width: 992px) and (max-width: 1199px) {
	#gallery .container {
		max-width: 960px;
	}
}

@media (min-width: 1200px) {
	#gallery .container {
		max-width: 1140px;
	}
}

/* Ensure gallery items don't overflow */
.gallery-item {
	box-sizing: border-box;
}

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

/* Fix any Bootstrap img-fluid conflicts */
.before-image,
.after-image {
	max-width: none !important;
	width: 50% !important;
}