/* Define the custom accent color */
:root {
    --accent-color: #12836C; /* New accent color */
    --accent-color-light: #17a889; /* A slightly lighter shade for gradients */
}

body {
    font-family: 'Inter', sans-serif;
	background-color: #0a0a0a; /* Darker, near-black background */
	color: #d1d5db; /* Tailwind gray-300 */
	/* Smoother, more seamless gradient to prevent banding/lines */
	background-image: linear-gradient(320deg, rgba(18, 131, 108, 0.12), #0a0a0a 50%, rgba(18, 131, 108, 0.12));
	background-attachment: fixed;
}
     
/* Custom styling for accent color */
.text-accent {
	color: var(--accent-color);
}
.bg-accent {
	background-color: var(--accent-color);
}
.border-accent {
	border-color: var(--accent-color);
}

/* Gradient Text for Headings */
.gradient-text {
	background: linear-gradient(45deg, var(--accent-color), var(--accent-color-light));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	transition: text-shadow 0.3s ease; /* Transition for the glow effect */
}

/* Glow effect on hover for the name */
.gradient-text:hover {
	text-shadow: 0 0 10px rgba(23, 168, 137, 0.6);
}

/* Dynamic underline for nav links */
nav a {
	position: relative;
	padding-bottom: 4px; /* Space for the underline */
}

nav a::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--accent-color);
	transform-origin: bottom right;
	transition: transform 0.3s ease-out;
}

nav a:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

/* Animation for sections fading in on scroll */
.scroll-animate {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.visible {
	opacity: 1;
	transform: translateY(0);
}