/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* Main Hero Image Styling */
.main-hero-image {
	width: 100%;
	height: auto;
	border-radius: 1rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 
	            0 0 0 1px rgba(255, 255, 255, 0.05);
	object-fit: cover;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: block;
}

.main-hero-image:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4), 
	            0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Dark theme adjustments for main image */
.dark .main-hero-image {
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 
	            0 0 0 1px rgba(255, 255, 255, 0.08);
	filter: brightness(0.95) contrast(1.05);
}

.dark .main-hero-image:hover {
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), 
	            0 0 0 1px rgba(255, 255, 255, 0.12);
	filter: brightness(1) contrast(1.08);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.main-hero-image {
		border-radius: 0.75rem;
		margin-top: 2rem;
	}
}

/* Page Background Blending with Main Image */
body {
	position: relative;
}

body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../images/main-image.JPG');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	opacity: 0.15;
	z-index: -1;
	pointer-events: none;
}

/* Dark theme background blending */
.dark body::before {
	opacity: 0.2;
	filter: brightness(0.4) contrast(1.2);
}

/* Section background with gradient blend */
#section-about {
	position: relative;
}

.dark #section-about {
	background: linear-gradient(
		to bottom,
		rgba(33, 37, 41, 0.95) 0%,
		rgba(33, 37, 41, 0.85) 50%,
		rgba(33, 37, 41, 0.95) 100%
	);
}

body:not(.dark) #section-about {
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.85) 50%,
		rgba(255, 255, 255, 0.95) 100%
	);
}

/* Enhanced blend for content area */
.content-wrap {
	position: relative;
}

.dark .content-wrap {
	background: rgba(33, 37, 41, 0.7);
	backdrop-filter: blur(1px);
}

body:not(.dark) .content-wrap {
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(1px);
}

/* Smooth transition for background */
body,
.content-wrap,
#section-about {
	transition: background 0.5s ease;
}

/* Responsive background adjustments */
@media (max-width: 768px) {
	body::before {
		background-attachment: scroll;
		opacity: 0.1;
	}
	
	.dark body::before {
		opacity: 0.15;
	}
}