* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Roboto', sans-serif;
	color: #595959;
	background-color: #f8f9fa;
	position: relative;
}

/* Floating particles background */
.page-background {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.bg-particle {
	position: absolute;
	width: 4px;
	height: 4px;
	background: rgba(0,132,201,0.15);
	border-radius: 50%;
	animation: floatParticle 20s infinite ease-in-out;
}

.bg-particle-1 {
	top: 15%;
	left: 8%;
	animation-delay: 0s;
	animation-duration: 18s;
}

.bg-particle-2 {
	top: 45%;
	left: 15%;
	animation-delay: 3s;
	animation-duration: 22s;
}

.bg-particle-3 {
	top: 65%;
	right: 12%;
	animation-delay: 1s;
	animation-duration: 20s;
}

.bg-particle-4 {
	top: 80%;
	right: 20%;
	animation-delay: 5s;
	animation-duration: 19s;
}

@keyframes floatParticle {
	0%, 100% {
		transform: translate(0, 0) scale(1);
		opacity: 0.1;
	}
	25% {
		transform: translate(30px, -30px) scale(1.2);
		opacity: 0.2;
	}
	50% {
		transform: translate(-20px, -60px) scale(0.8);
		opacity: 0.15;
	}
	75% {
		transform: translate(-40px, -30px) scale(1.1);
		opacity: 0.18;
	}
}

/* Layout wrapper positioning */
#layout-wrapper {
	display: flex;
	max-width: 1400px;
	margin: 0 auto;
    padding: 0 30px; /* padding: 0 30px 60px 30px; */
}

/* Main content wrapper positioning */
#main-content-wrapper {
	position: relative;
	z-index: 1;
}

#main-content {
	flex: 1;
	background: transparent;
	padding-top: 0px; 
	padding-bottom: 30px;
}

@media (max-width: 1023px) {
	#layout-wrapper {
		padding: 0;
	}
	
	#main-content {
		padding: 0;
		width: 100%;
	}
}

/* Article Wrapper / Content Article Styling */
.article-wrapper {
	display: flex;
	justify-content: center;
	gap: 30px;
	padding: 30px;
	max-width: 1400px; 
	margin: 0 auto;
}

.content-article {
	flex: 1;
	min-width: 0;
	max-width: 900px;
	/* padding: 0 30px; */
}

.content-article-solo {
	max-width: 1400px;
}

@media (max-width: 1199px) {
    .content-article {
        max-width: 750px; 
    }
	
	.content-article-solo {
        max-width: 1199px; /* More room without article-sidebar */
    }
}

@media (max-width: 1023px) {
    .content-article {
        max-width: 600px; /* Sharing space with article-sidebar again */
    }
	
	.content-article-solo {
        max-width: 1023px; /* More room without article-sidebar */
    }
}

@media (max-width: 767px) {
    .article-wrapper {
		padding: 20px;
	}
	
	.content-article {
        max-width: 600px;
        margin: 0 auto;
    }
	
	.content-article-solo {
        max-width: 767px;
        margin: 0 auto;
    }
}


/* Footer */
#main-footer {
	background: #2a2a2a;
	color: white;
	margin-top: 0px;
	padding: 30px 40px; 
}

.footer-content {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer-left p {
	font-size: 14px;
	color: #b0b0b0;
	font-weight: 300;
}

.footer-right {
	display: flex;
	gap: 25px;
}

.footer-right a {
	color: #b0b0b0;
	text-decoration: none;
	font-size: 14px;
	transition: all 0.3s ease;
	font-weight: 300;
}

.footer-right a:hover {
	color: #0084c9;
	transform: translateY(-1px);
}

@media (max-width: 500px) {
	.footer-content {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}
}