Things were fine when the mode was in full screen, but when I tried to make it responsive for small screens, this problem appeared.

The main section overlaps with the FAQ section. I don’t know why. I use Tailwind css and this is the code.

<section id="home" class="">
    <div class="bg-cover h-[683px]" style="background-image: url('/src/img/Waves.svg');">
      <div class="w-60 h-60 bg-purple absolute -top-8 -left-8 -z-10 blur-3xl opacity-10"></div>
      <div class="w-[488px] h-[423px] bg-purple absolute bottom-10 -right-6 -z-10 blur-3xl opacity-20 hidden md:block">
      </div>
      <div class="w-60 h-60 bg-cyan absolute bottom-10 left-10 -z-10 blur-3xl opacity-10"></div>
      <div class="container h-full ml-6 md:ml-20 text-white py-20">
        <div class="flex flex-col  md:flex-row">
          <div class="text-left mb-12 md:w-2/5 md:pr-10">
            <div>
              <h3
                class=" text-satoshi-p2 pb-2 text-white text-opacity-80 bg-[length:100%_2px] bg-gradient-to-r from-LPurple via-lighterPurple to-lightPurple  bg-no-repeat bg-bottom">
                Deep Fake Detection</h3>
            </div>
            <h1 class="text-[65px] font-bold">Uncover the altered reality of deepfakes</h1>
            <div class="flex my-10 ">
              <img src="/src/img/Star 4.svg">
              <p class="text-satoshi-p2 ml-2 text-white text-opacity-80">Reliably verify authenticity with deepfake
                detection tools</p>
            </div>
            <div class=" md:flex gap-4 m-auto">
              <button
                class="flex items-center md:mb-0 mb-4 md:px-6 py-3 pl-8 w-[200px] bg-cyan text-darkPurple rounded-md font-medium hover:bg-purple">
                Detection Now
                <svg class="ml-2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                  style="fill: rgba(0, 0, 0, 1);transform: msFilter">
                  <path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path>
                </svg>
              </button>
              <button
                class="flex text-center md:px-6 py-3 pl-12 w-[200px]  md:w-[150px] text-white border border-white border-opacity-20 rounded-md font-medium hover:bg-purple">
                <img class="mr-2" src="/src/img/compass.svg">
                About US
              </button>
            </div>
            <p class="pt-12 text-satoshi-p3">PROJECT PLATFORMS</p>
            <div class="flex gap-3">
              <div class="mt-3 border hover:bg-purple border-white border-opacity-20 rounded-md ">
                <a href="#">
                  <img class="p-3" src="/src/img/Kaggle.svg">
                </a>
              </div>
              <div class="mt-3 border hover:bg-purple border-white border-opacity-20 rounded-md ">
                <a href="#"><i class='bx bxl-github text-4xl p-2'></i></a>
              </div>
              <div class="mt-3 border hover:bg-purple border-white border-opacity-20 rounded-md ">
                <a href="#"><i class='bx bxl-discord-alt text-4xl p-2'></i></a>
              </div>
            </div>
          </div>
          <div class="flex items-center  lg:w-3/5">
            <div class="hidden md:block">
              <img class="p-3 absolute  top-0 mt-24 w-60" src="/src/img/Human.svg">
              <img class="p-3 w-44" src="/src/img/fake.svg">
            </div>
            <div>
              <img
                class="pb-2 md:absolute md:top-0 md:right-0 md:ml-60 md:mt-16 opacity-90 md:h-[580px] bg-gradient-to-l from-LPurple via-lighterPurple to-lightPurple bg-[length:100%_4px] bg-no-repeat bg-bottom"
                src="/src/img/Hero pic.svg">
              <div class="md:flex md:gap-4 items-center md:absolute md:-bottom-6  ">
                <button class="flex px-6 py-3   font-medium ">
                  <img class="p-3" src="/src/img/Graduation Project.svg">
                  <p class="mt-4">Graduation Project</p>
                </button>
                <button class="flex px-6 py-3   font-medium">
                  <img class="p-3" src="/src/img/Training and Simulation.svg">
                  <p class="mt-4">Training and Simulation</p>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

Can someone help me separate the two sections from each other using Tailwind or even find out what the problem is? I am sure that the problem is in that part of the code because I deleted the FAQ section from the code and the same problem remained and it overlapped with another section.