/* Scroll Progress Bar */
.progress-container {
  width: 100%;
  height: 5px;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.progress-bar {
  height: 100%;
  background: var(--gradient);
  width: 0%;
  transition: width 0.1s ease;
}

/* Color Variables */
:root {
  --primary-color: #6a11cb;
  --secondary-color: #2575fc;
  --gradient: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
  --dark-color: #212529;
  --light-color: #f8f9fa;
}

/* Hero Section */
.hero-section {
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
              url('./images/hero-bg.jpg') no-repeat center center/cover;
  padding-top: 100px;
  min-height: 80vh;
  display: flex;
  align-items: center;
  color: white;
}

/* Facebook Embed Styling */
.facebook-embed {
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
}

/* Equal height cards */
.card {
  display: flex;
  flex-direction: column;
}
.card-body {
  flex-grow: 1;
}

/* [All CSS styles from previous response...] */
/* Animations, Cards, Buttons, Dark Mode, etc. */