BiohazardWeb/
├─ index.html
├─ css
│  ├─ styles.css
├─ fonts/
├─ images/
├─ js
│  ├─ main.js
├─ projects/
│  ├─ 01_PROJ/
│  │  ├─ Videos/
│  │  ├─ thumbnail.jpg
│  │  ├─ info.txt
│  │  ├─ credits.txt
├─ reel/
│  ├─ Reel_July_2025.mp4
├─ written/
│  ├─ about_us.txt

A few notes: 
1. The blurring on the header looks weird, maybe add a black gradient to it so things fade as it scrolls past them?
1.1 the inversion of the text looks weird
2. when I hover over the projects I'd like if the text on them transformed with them
2.2 the counter is offset, there are only two projects  on the page currently and its starting at 02 and skipping 03 and going straight to 04 for the second One
3. I'd like if the about section had more room on the left and right
3.1 the old about is still at the bottom of the page and needs to be removed
4. I'd like to add a case studies section (added to nav as well)
4.1 I had a case studies section at one point, you can get an idea of it from this: 

HTML
 /*==================================================
      CASE STUDIES
    ==================================================*/
    #case-studies { 
      text-align: center; 
      padding-bottom: 1rem; 
    }
    .case-studies-container {
      display: flex; 
      gap: 2.5rem; 
      justify-content: center; 
      flex-wrap: wrap;
    }
    .case-study {
      flex: 0 0 404px; 
      background: var(--box-bg);
      border: none; /* Remove border for minimalism */
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      padding: 1rem; 
      border-radius: 8px; 
      transition: transform 0.3s ease, box-shadow 0.3s ease; 
      aspect-ratio: 404 / 316;
    }
    .case-study:hover {
      transform: translateY(-8px) scale(1.02); /* Slight zoom */
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
    }

    <!-- CASE STUDIES -->
    <section id="case-studies" class="section">
      <h2>CASE STUDIES</h2>
      <div class="case-studies-container">
        <div class="case-study">
          <iframe src="https://www.behance.net/embed/project/211902289?ilo0=1" height="316" width="404" allowfullscreen lazyload frameborder="0" allow="clipboard-write" refererPolicy="strict-origin-when-cross-origin"></iframe>
        </div>
        <div class="case-study">
          <iframe src="https://www.behance.net/embed/project/207065443?ilo0=1" height="316" width="404" allowfullscreen lazyload frameborder="0" allow="clipboard-write" refererPolicy="strict-origin-when-cross-origin"></iframe>
        </div>
        <div class="case-study">
          <iframe src="https://www.behance.net/embed/project/214528309?ilo0=1" height="316" width="404" allowfullscreen lazyload frameborder="0" allow="clipboard-write" refererPolicy="strict-origin-when-cross-origin"></iframe>
        </div>
      </div>
    </section>

5. I think it would also be nice to have a section dedicated to the founders, I had a previous version on an older version of the sight, 
it would look good right above contact, heres an example: 

/*==================================================
      THE CREW
    ==================================================*/
    #team { 
      max-width: 1200px; 
      margin: 0 auto 12rem; 
      text-align: center; 
    }
    .team-container {
      display: flex; 
      gap: 2rem; 
      justify-content: space-evenly; 
      align-items: center;
    }
    #team .team-container a.portrait {
      display: block;
      width: 350px;
      height: 400px;
      text-decoration: none;
      color: inherit;
      background: var(--box-bg);
      padding: 1rem;
      border-radius: 8px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    #team .team-container a.portrait:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    #team .team-container a.portrait img {
      width: 200px;
      height: 200px;
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: 1rem;
      border: 3px solid var(--accent);
      transition: border-color 0.3s ease;
    }
    #team .team-container a.portrait:hover img {
      border-color: var(--hover-accent); /* Change border on hover */
    }
    #team .team-container a.portrait h3 { 
      font-size: 1.6rem; 
      font-weight: 700; 
      margin-bottom: 0.75rem; 
      color: var(--accent); 
    }
    #team .team-container a.portrait p { 
      font-size: 1rem; 
      font-style: italic; 
      opacity: 0.85; 
    }

<!-- THE CREW -->
    <section id="team" class="section">
      <h2>THE CREW</h2>
      <div class="team-container">
        <a class="portrait" href="https://www.instagram.com/nicholai.exe/" target="_blank">
          <img src="assets/nicholai.jpg" alt="Nicholai Vogel" />
          <h3>Nicholai Vogel</h3>
          <p>Founder & CEO<br>VFX Supervisor & Lead Generalist (9 yrs)</p>
        </a>
        <a class="portrait" href="https://www.instagram.com/nuke_fx/" target="_blank">
          <img src="assets/parth.jpg" alt="Parth Gupta" />
          <h3>Parth Gupta</h3>
          <p>Head of Production<br>Lead Compositor & Coordinator<br><em>(Partner, 3 yrs)</em></p>
        </a>
        <a class="portrait" href="https://www.instagram.com/davaneh/" target="_blank">
          <img src="assets/davane.jpg" alt="Davane" />
          <h3>Davane</h3>
          <p>Executive Producer<br>Compositor<br><em>(Partner, 1 yr)</em></p>
        </a>
      </div>
    </section>

6. I think it would also be good to revamp the contact section, right now its too barebones, something like this would be cool but maybe as its own separate page actually, I don't want this one to get too long.
HTML
 /*==================================================
      CONTACT SECTION
    ==================================================*/
    #contact { text-align: center; }
    #contact form {
      max-width: 700px; 
      margin: 0 auto; 
      display: flex; 
      flex-direction: column;
    }
    #contact label { 
      margin-bottom: 0.75rem; 
      font-weight: 700; 
      font-size: 1.1rem; 
      text-align: left;
    }
    #contact input,
    #contact textarea {
      padding: 1rem; 
      margin-bottom: 1.75rem; 
      border: none;
      background: var(--contact-bg); 
      color: #FFFFFF; 
      border-radius: 4px; 
      font-size: 1rem;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    #contact input:focus,
    #contact textarea:focus { 
      background: var(--contact-focus-bg); 
      box-shadow: 0 0 5px var(--accent); /* Glow effect */
      outline: none; 
    }
    #contact input[type="submit"] {
      cursor: pointer; 
      background: var(--accent); 
      font-weight: 700;
      text-transform: uppercase; 
      letter-spacing: 1px; 
      transition: background 0.3s ease;
    }
    #contact input[type="submit"]:hover { 
      background: var(--contact-hover-bg); 
    }
    .social-bar { 
      margin-top: 2.5rem; 
      font-size: 1rem; 
    }
    .social-bar a {
      color: #FFFFFF; 
      text-decoration: none; 
      margin: 0 15px; 
      font-weight: 700;
      transition: color 0.3s ease;
    }
    .social-bar a:hover { 
      color: var(--accent); 
    }

  <!-- CONTACT SECTION -->
    <section id="contact" class="section">
      <h2>CONNECT</h2>
      <form>
        <label for="name">Name</label>
        <input type="text" id="name" placeholder="Your Name" />
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="Your Email" />
        <label for="message">Message</label>
        <textarea id="message" rows="6" placeholder="Yap yap yap... spit your truth, we're all ears."></textarea>
        <input type="submit" value="Send Message" />
      </form>
      <div class="social-bar">
        <a href="https://www.instagram.com/biohazardvfx/" target="_blank">Instagram</a>
        <a href="https://vimeo.com/" target="_blank">Vimeo</a>
        <a href="https://youtube.com/" target="_blank">YouTube</a>
        <a href="https://www.behance.net/" target="_blank">Behance</a>
      </div>
    </section>

7. Lastly, I think we should add a nice little footer.
HTML: 
    /*==================================================
      FOOTER
    ==================================================*/
    footer { 
      text-align: center; 
      padding: 3rem 1rem; 
      font-size: 0.95rem; 
      opacity: 0.7; 
    }    /*==================================================
      FOOTER
    ==================================================*/
    footer { 
      text-align: center; 
      padding: 3rem 1rem; 
      font-size: 0.95rem; 
      opacity: 0.7; 
    }

    <!-- FOOTER -->
    <footer>
      <p>© 2025 Biohazard VFX. All Rights Reserved.</p>
    </footer>
  </div>