:root {
	--primary: #663399;
	--primary-light: #8a2be2;
	--primary-dark: #4B0082;
	--secondary: #FF6B6B;
	--accent: #FFD166;
	--light: #F5F5F5;
	--dark: #333333;
	--gray: #6B7280;
	--light-gray: #E5E7EB;
	--success: #06D6A0;
	--error: #EF476F;
}

body {
	font-family: 'Poppins', sans-serif;
	color: var(--dark);
	background-color: var(--light);
}

.hero-gradient {
	background: linear-gradient(90deg, rgba(102,51,153,0.9) 0%, rgba(138,43,226,0.8) 100%);
}

.violet-gradient {
	background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
}

.violet-light {
	background-color: #e6e0ed;
}

.btn-primary {
	background-color: var(--primary);
	color: white;
	transition: all 0.3s ease;
}

.btn-primary:hover {
	background-color: var(--primary-light);
	transform: translateY(-2px);
}

.btn-outline {
	background-color: transparent;
	border: 2px solid var(--primary);
	color: var(--primary);
	transition: all 0.3s ease;
}

.btn-outline:hover {
	background-color: var(--primary);
	color: white;
	transform: translateY(-2px);
}

.parallax {
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.nav-link {
	position: relative;
}

.nav-link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--primary);
	transition: width 0.3s;
}

.nav-link:hover::after {
	width: 100%;
}

.card {
	transition: all 0.3s ease;
}

.card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.section-title {
	position: relative;
	display: inline-block;
	margin-bottom: 2rem;
}

.section-title::after {
	content: '';
	position: absolute;
	width: 60%;
	height: 4px;
	background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
	bottom: -10px;
	left: 20%;
	border-radius: 2px;
}

/* Custom animations */
@keyframes float {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-10px); }
	100% { transform: translateY(0px); }
}

.animate-float {
	animation: float 3s ease-in-out infinite;
}

/* Responsive utilities */
@media (max-width: 768px) {
	.section-padding {
		padding: 3rem 0;
	}
	
	.section-title {
		font-size: 1.75rem;
	}
}

/* Navigation styling */
.main-nav-link {
	position: relative;
	height: 40px;
	display: flex;
	align-items: center;
}

.main-nav-link::after {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--primary);
	transition: width 0.3s;
}

.main-nav-link:hover::after {
	width: 100%;
}

/* Dropdown styling */
.dropdown-wrapper {
	position: relative;
	height: 40px;
	display: flex;
	align-items: center;
}

.dropdown-wrapper .fas.fa-chevron-down {
	transition: transform 0.3s;
}

.dropdown-wrapper:hover .fas.fa-chevron-down {
	transform: rotate(180deg);
}

.dropdown-menu {
	position: absolute;
	top: 40px;
	left: 0;
	width: 256px;
	background-color: white;
	border-radius: 0.5rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
	z-index: 50;
}

.dropdown-wrapper:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Ensure hover area between nav item and dropdown */
.dropdown-wrapper::after {
	content: '';
	position: absolute;
	height: 15px;
	width: 100%;
	left: 0;
	top: 100%;
	z-index: 49;
}

.dropdown-item {
	display: flex;
	align-items: center;
	padding: 0.5rem 1.5rem;
	color: #4B5563;
	transition: background-color 0.3s, color 0.3s;
}

.dropdown-item:first-child {
	border-top-left-radius: 0.5rem;
	border-top-right-radius: 0.5rem;
}

.dropdown-item:last-child {
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}

.dropdown-item:hover {
	background-color: #F3F4F6;
	color: var(--primary);
}

#main-header {
	padding-top:0;
	margin-top:0;
}

section-divider {
	position: relative;
	height: 4rem;
}
.section-divider svg {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.program-card:hover .overlay {
	opacity: 1;
}
.method-icon {
	transition: all 0.3s ease;
}
.method-card:hover .method-icon {
	transform: scale(1.2);
}
.impact-bar {
	height: 8px;
	border-radius: 4px;
	background: #E5E7EB;
	overflow: hidden;
	position: relative;
}
.impact-bar-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(90deg, #8B5CF6 0%, #6366F1 100%);
	border-radius: 4px;
}
.project-card:hover .card-overlay {
	opacity: 1;
}
.project-card:hover img {
	transform: scale(1.05);
}
.progress-bar {
	height: 8px;
	border-radius: 4px;
	background: #E5E7EB;
	overflow: hidden;
	position: relative;
}
.progress-bar-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(90deg, #8B5CF6 0%, #6366F1 100%);
	border-radius: 4px;
}
.impact-counter {
	transition: all 0.5s ease;
}
.impact-counter:hover {
	transform: translateY(-5px);
}
.story-card:hover .card-overlay {
	opacity: 1;
}
.story-card:hover img {
	transform: scale(1.05);
}
.progress-bar {
	height: 8px;
	border-radius: 4px;
	background: #E5E7EB;
	overflow: hidden;
	position: relative;
}
.progress-bar-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: linear-gradient(90deg, #8B5CF6 0%, #6366F1 100%);
	border-radius: 4px;
}
.quote-mark {
	font-size: 6rem;
	line-height: 1;
	position: absolute;
	top: -1rem;
	left: -1rem;
	opacity: 0.1;
}
.timeline-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #8A2BE2;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateX(-50%);
}
.timeline-card {
	position: relative;
	padding-left: 2rem;
	border-left: 2px solid #E5E7EB;
}
.timeline-card::before {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #8A2BE2;
	position: absolute;
	left: -9px;
	top: 1.25rem;
}
.volunteer-box {
	transition: all 0.3s ease;
}
.volunteer-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.volunteer-option {
	transition: all 0.3s ease;
}
.volunteer-option:hover {
	background-color: #F5F3FF;
	border-color: #8B5CF6;
}
.testimonial-card {
	transition: all 0.3s ease;
}
.testimonial-card:hover {
	transform: translateY(-5px);
}
.testimonial-slider {
	scroll-behavior: smooth;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
	border-color: #8B5CF6;
	box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}