@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    color: #204045;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif;
}
/* Events Styles */
.event-card {
    transition: all 0.3s ease;
}

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

.event-date {
    display: inline-block;
    background: #204045;
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Button styles */
.primary-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  background: #204045;
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
}
.primary-button:hover {
  background: #7e9693;
}

.nav-links a.active {
  color: #7e9693;
  font-weight: 600;
}

.nav-links a.active::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #7e9693;
}
.primary-button .button-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #204045;
  z-index: -1;
  transition: transform 0.3s ease;
}

.primary-button:hover .button-bg {
  transform: scale(1.05);
}
/* Hero Banner Section */
.relative {
    position: relative;
}

.h-\[80vh\] {
    height: 80vh;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

/* Video Section */
/* Animation classes */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

.animate-bounce {
    animation: bounce 2s infinite;
}

video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* Community Highlights */
#highlights .rounded-xl {
    transition: all 0.3s ease;
}

#highlights .rounded-xl:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

#highlights i {
    transition: transform 0.3s ease;
}

#highlights .rounded-xl:hover i {
    transform: scale(1.1);
}
/* Team Carousel */
.team-carousel {
    scroll-behavior: smooth;
    scrollbar-width: none;
    cursor: grab;
}

.team-carousel::-webkit-scrollbar {
    display: none;
}

.team-carousel:active {
    cursor: grabbing;
}

.team-member {
    transition: all 0.3s ease;
    cursor: pointer;
}
.team-member img {
    transition: transform 0.3s ease;
}

.team-member:hover img {
    transform: scale(1.05);
}

/* Directory Styles */
#directory input[type="text"] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.member-card {
    transition: all 0.3s ease;
}

.member-card:hover {
    transform: translateY(-5px);
}

.member-skill-tag {
    transition: all 0.2s ease;
}

.member-skill-tag:hover {
    background: #7e9693 !important;
}

select:focus {
    outline: none;
    box-shadow: 0 0 0 2px #7e9693;
}
/* Donation Page Styles */
.donation-option {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* CTA Section */
.bg-gradient-to-br {
    background: linear-gradient(135deg, #0f2d32 0%, #204045 100%);
}
.donation-option:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.donation-amount {
    transition: all 0.2s ease;
}

.donation-amount:hover {
    background: #204045 !important;
    color: white !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #e9e6e4;
}

::-webkit-scrollbar-thumb {
    background: #7e9693;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #204045;
}