:root {
      --sidebar-bg: #2b2b2b;
      --sidebar-link: #bbb;
      --sidebar-link-hover: #fff;
      --active-link-bg: #444;
    }

    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      background-color: #000;
    }

    /* VIDEO STYLES */
    #bg-video {
      position: fixed;
      top: 0;
      left: 0;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      z-index: -2;
      object-fit: cover;
    }

    .video-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: -1;
    }

    .layout {
      display: flex;
      min-height: 100vh;
      position: relative;
      z-index: 1;
    }

    .sidebar {
      width: 260px;
      background-color: var(--sidebar-bg);
      color: white;
      display: flex;
      flex-direction: column;
      padding: 1.5rem 1rem;
    }

    .sidebar .brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 2rem;
    }

    .sidebar .brand img {
      width: 64px;
      height: auto;
      margin-bottom: 0.5rem;
    }

    .sidebar .brand .title {
      font-size: 1.25rem;
      font-weight: 600;
    }

    .sidebar .nav-link {
      color: var(--sidebar-link);
      padding: 0.5rem 1rem;
      border-radius: 4px;
      margin-bottom: 0.5rem;
    }

    .sidebar .nav-link:hover,
    .sidebar .nav-link.active {
      background-color: var(--active-link-bg);
      color: var(--sidebar-link-hover);
    }

    .main {
      flex-grow: 1;
      padding: 2rem;
    }

.main-content {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* align content to the left */
  text-align: left;             /* align text to the left */
  color: white;
  padding-left: 4rem;           /* optional spacing for balance */
}

    .mobile-header {
      background-color: var(--sidebar-bg);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      z-index: 1055;
    }

    .lead {
      color: #ddd;
    }

    .portfolio.section-bg {
  background-color: #f0f8ff; /* Pale blue (Alice Blue) */
}

.pale-blue-box {
  background-color: #dceeff;
  padding: 3rem 2rem; /* 3rem top & bottom, 2rem left & right */
  border-radius: 12px;
  width: 100%;
  margin: 3rem 0;
  font-family: 'Merriweather', serif;
}