It was easy but little hard for making responsive

Te puedo sugerir que tu diseño sea el protagonista no que el dispositivo sea el protagonista, "móvil" después todo se ve muy bien saludos.

Greetings Atul

• looking good on mobile up to screen width of 420px, thereafter the presentation breaks until about 700px, but still there is a large white space that carriers on until the desktop version. Some content will be sitting on top of other content.
• img alt values must be descriptive for the benefit of assistive tech users to be able to visualize the message that is being put across. If the image is decorative use alt="". The following alt value is not beneficial to assistive tech users <img src="/images/bg-intro-desktop.svg" alt="Background_intro" id="background_home">
• the following images - the hamburger and close are acting as interactive elements to toggle the nav menu, but in there current state they cause confusion to assistive tech users as there is nothing in the code that identifies them as button. The best alternative is to make the images a child of a button .

<img src="/images/icon-hamburger.svg" alt="humburger" id="humburger">
        <img src="/images/icon-close.svg" alt="closemenu" id="close_menu">

Semantic html matters and should be used where ever possible. Here is an example that you can have a look at.

<button aria-label="open navigation menu">
    <img src="/images/icon-hamburger.svg" alt="" id="humburger">
  </button>

• duplication of the nav items to have one for mobile and another for desktop should be avoided , both layouts can be achieved with css using only one navigation . The best way to look at your html structure is to disable your css
• the best practice is to have only one h1 heading element. Heading elements must ascend in order without skipping headings. h1, h2, h3 etc
• some css chaining should be avoided , it can lead to code that is difficult to debug. Better to chain/nest pseudos

.ul_footer_1 ul li a:hover{
    color: var(--LimeGreen);
}

Happy coding