:root {
  --bs-primary-rgb: 88, 86, 214; /* A purple/blue from the design */
  --bs-primary: #5856D6;
}

body {
  padding-top: 56px; /* Adjust for fixed navbar */
}

.hero-section {
  padding: 10rem 0;
  background: url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=2070&auto=format&fit=crop') no-repeat center center;
  background-size: cover;
  position: relative;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(22, 22, 32, 0.7);
}

/* Ensure content is above the overlay */
.hero-section .container {
  position: relative;
  z-index: 2;
}

/* Custom section separator */
.angled-separator {
  position: relative;
  height: 100px;
}

.angled-separator::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bs-primary);
  clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
}