:root {
      --color-grey: #252424;
      --color-accent: #2BAAAB;
      --color-bg: #E8E8E6;
      --color-section: #f0f1ed;
    }

    body {
      background-color: var(--color-section);
    }

    .header-wrapper {
      width: 100%;
      box-shadow: 0px 16px 13px -19px rgba(37, 36, 36, 1);
      position: relative;
      z-index: 10;

    }

    .nav-link {
      all: unset;
      color: grey;
      font-size: 20px;
      font-weight: 400;
      cursor: pointer;
    }

    .nav-link:hover {
      color: #252424;
      font-weight: 600;
    }

    .nav-link:active {
      color: #252424;
      font-weight: 600;
      text-decoration: underline solid var(--color-accent);
    }

    .nav-link.active {
      color: #252424;
      font-weight: 600;
      text-decoration: underline solid var(--color-accent) 3px;
    }

    .my-btn {
      font-weight: 600;
      border: 2px solid  var(--color-accent);
      padding: 0.5em 0.9em;
      font-size: 1rem;
      cursor: pointer;
      background-color: transparent;
      color:  var(--color-accent);
      transition: background-color 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
      border-radius: 4px;
      user-select: none;
    }

    .my-btn:hover {
      background-color:  var(--color-accent);
      color: var(--color-bg);
      border-color: #1b6d68;
    }

    .my-btn:active,
    .my-btn.active {
      background-color: #238985 !important;
      border-color: #1b6d68 !important;
      color: var(--color-bg);
      box-shadow: 0 0 6px #1b6d68;
      outline: none;
    }


    .main-content {
      background-image: url('img/main-content.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      min-height: 100vh;
      width: 100%;
      margin: 0;
      padding: 0;
      position: relative;
      z-index: 1;
    }

    .bg-overlay {
      background-color: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(3px);
    }

    .btn-about {
      border-radius: 20px;
    }

    .ab-title {
      font-size: 2rem;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: underline solid  var(--color-accent);
    }

    .bg-accent {
      background-color:  var(--color-accent);
    }

    .accent-line {
      border-left: 3px solid  var(--color-accent);
      width: 100%;
      margin: 20px 0;
    }

    .cv-year {
      color:  var(--color-accent);
    }

    .bg-section {
      background-color: var(--color-section);
    }

    .card-3d {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border-radius: 0.75rem;
      perspective: 1000px;
      cursor: pointer;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      height: 100%;

    }

    .card-3d:hover {
      transform: translateY(-16px) rotateX(2deg) rotateY(1deg);
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
    }

    .card-body {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
    }



    .bi {
      font-size: 1.25rem;
      display: inline-block;
      color:  var(--color-accent) !important;
      transition: color 0.3s ease;
    }

    .bi:hover {
      color: blue !important;
      transform: scale(1.2);
    }