/* ========================================
   BOOTSTRAP 5 OVERFLOW FIX
   ======================================== */

/* 
 * Fix horizontal scrollbar caused by Bootstrap's negative margins
 * This file overrides Bootstrap grid issues
 */

/* Prevent body overflow */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
	position: relative;
}

/* Fix container widths */
.container,
.container-fluid {
	max-width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

/* Fix row negative margins - the main culprit */
.row {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
	/* Removed width: 100% !important to allow proper grid behavior */
}

/* Fix Bootstrap gutters */
.g-1,
.gx-1,
.g-2,
.gx-2,
.g-3,
.gx-3,
.g-4,
.gx-4,
.g-5,
.gx-5 {
	--bs-gutter-x: 1.5rem;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Ensure columns have proper padding */
.row>* {
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	padding-right: calc(var(--bs-gutter-x) * 0.5);
	max-width: 100%;
}

/* Fix specific sections that use row */
#hero .row,
#about .row,
#blog .row,
#services .row,
#why-us .row,
#portfolio .row,
#team .row {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}

/* Prevent any section from causing overflow */
section {
	max-width: 100%;
	position: relative;
	overflow-x: hidden;
	/* Only prevent horizontal overflow, allow vertical for hover effects */
}

/* AOS Animation Constrain - Prevent elements from going outside viewport */
[data-aos] {
	max-width: 100%;
}

[data-aos="fade-left"],
[data-aos="fade-right"] {
	will-change: transform, opacity;
}

/* Constrain animated elements to viewport */
section>.container>.row>[data-aos] {
	max-width: 100%;
}

/* Ensure all containers stay within viewport */
section .container,
section .container-fluid {
	max-width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}

/* Fix for columns inside containers */
[class*="col-"] {
	max-width: 100%;
}

/* Responsive padding for containers */
@media (max-width: 768px) {

	.container,
	.container-fluid,
	section .container,
	section .container-fluid {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media (max-width: 576px) {

	.container,
	.container-fluid,
	section .container,
	section .container-fluid {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* Fix blog grid to not use Bootstrap row */
#blog .blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
	padding: 0;
	margin: 0;
	max-width: 100%;
}

/* Portfolio fix */
.portfolio-container {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Ensure images don't overflow */
img {
	max-width: 100%;
	height: auto;
}

/* Fix for any element that might overflow */
* {
	max-width: 100%;
}

*:not(html):not(body):not(section) {
	max-width: none;
}