:root {
        --color1: #bdd3e2; 
        --color2: #f2d1bf; 
        --color3: #431400; 
        --color4: #6b5f4f; 
        --color5: #a4a5b7; 
      }

      
      body {
        background-color: var(--color2);
        color: var(--color3);
        font-family: "Georgia", "Times New Roman", serif;
        overscroll-behavior: none;
      }

      
      .bg-color1 {
        background-color: var(--color1);
      }
      .bg-color2 {
        background-color: var(--color2);
      }
      .bg-color3 {
        background-color: var(--color3);
      }
      .bg-color4 {
        background-color: var(--color4);
      }
      .bg-color5 {
        background-color: var(--color5);
      }

      .text-color1 {
        color: var(--color1);
      }
      .text-color2 {
        color: var(--color2);
      }
      .text-color3 {
        color: var(--color3);
      }
      .text-color4 {
        color: var(--color4);
      }
      .text-color5 {
        color: var(--color5);
      }

      .border-color1 {
        border-color: var(--color1);
      }
      .border-color3 {
        border-color: var(--color3);
      }
      .border-color4 {
        border-color: var(--color4);
      }

      
      h1,
      h2,
      h3 {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
          sans-serif;
        font-weight: 300;
        letter-spacing: 0.5px;
      }

      

      
      .parallax-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }

      
      .fade-in {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
          transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
      }

      .fade-in.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      
      .decorative-shape {
        position: absolute;
        z-index: -1;
        background-color: var(--color5);
        opacity: 0.2;
        transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
      }

      
      .custom-list {
        counter-reset: step-counter;
        list-style: none;
        padding-left: 0;
      }
      .custom-list li {
        position: relative;
        padding-left: 80px; 
        margin-bottom: 2.5rem; 
      }
      .custom-list li::before {
        counter-increment: step-counter;
        content: "0" counter(step-counter);
        position: absolute;
        left: 0;
        top: -10px;
        font-size: 3rem; 
        font-weight: 600;
        color: var(--color5);
        opacity: 0.7;
        line-height: 1;
      }

      
      .mobile-menu {
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .mobile-menu.is-open {
        transform: translateX(0);
      }