Text interfering with the navbar when scrolling down

function navSlide() {
    const burger = document.querySelector(".burger");
    const nav = document.querySelector(".nav-links");
    const navLinks = document.querySelectorAll(".nav-links li");
    
    burger.addEventListener("click", () => {
        //Toggle Nav
        nav.classList.toggle("nav-active");
        
        //Animate Links
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = ""
            } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;b
            }
        });
        //Burger Animation
        burger.classList.toggle("toggle");
    });
    
}

navSlide();

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
.background{
    width: 100%;
    height: 100vh;
 background-image:
    linear-gradient(0deg, rgba(93,73,84,0.5), rgba(93,73,85,0.2)),
    url(/images/beachpic.jpeg);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}
.nav{
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5D4954;
    font-family: "Poppins", sans-serif;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
    font-family: 'Poppins', sans-serif;;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: rgb(226, 226, 226);
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

.burger {
    display: none;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
    .nav-links {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .nav-links {
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #5D4954;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    
    .nav-links li {
        opacity: 0;
    }
    
    .burger {
        display: block;
        cursor: pointer;
    }
}

.nav-active {
        transform: translateX(0%);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}
.logo{
    position: relative;
    height: 70px;
}
.link::after{
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #fbfcfd;
    transition: width .3s;
}
.link:hover::after{
    width: 100%;
    transition: width .3s;
}
.header{
    width: 100%;
    background-color:rgba(0, 0, 0,0.5)
}
.header ul{
    text-align: center;
}
.header ul li{
    list-style: none;
    display: inline-block;
}
.header ul li a{
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    color:white;
    font-size: 100%;
    letter-spacing: 2px;
    font-weight: 600;
    padding: 25px;
    transition: width .3s;
}
.content{
    color: #fbfcfd;
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    z-index: 2;
}
.heading1{
    font-size: 70px;
    margin-bottom: 10px 0 30px;
    background:transparent;
    position: relative;
    animation: text 5s 1;
}
@keyframes text{
    0%{
        color: transparent;
        margin-bottom: -40px;
    }
    30%{
        letter-spacing: 4px;
        margin-bottom: -40px;
    }
    85%{
        letter-spacing: 3px%;
        margin-bottom: -40px;
    }
}

.welcome{
    font-size: 30px;
    position: relative;
}

 <head>
        <link rel="stylesheet" href="home.css">
    </head>
    <header class="site-header"></header>
    <div class="background">
        <div class="nav">
        <img src="/images/logo.png" alt="" class="logo">
        <ul class="nav-links">
            <li><a href="about.html"class="link">About</a></li>
            <li><a href="#"class="link">Work</a></li>
            <li><a href="#"class="link">Projects</a></li>
        </ul>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </div>
    </nav>
    <p style="font-size: 1px;">قيل قديقال</p>
    <div class="content">
        <small class="welcome">Welcome to</small>
        <h1 class="heading1">H2O <br>Tech<br>Solutions</h1>

    </div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    
    <p style="font-size: 1px;">قيل قديقال</p>
    <div class="container">
        <h1>About Us</h1>
        <p class="text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima nisi placeat nihil labore, in quis dolor rem asperiores id ex, perspiciatis facilis tempora dolores rerum odit quidem ut, nesciunt quibusdam adipisci quod unde modi! Dolore incidunt libero ipsam ipsum doloribus.</p>
    </div>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus, exercitationem!</p>
    <script src="script.js"></script>