how do i get the lines to transform as stated in the css when the button is nav toggle is clicked and the menu is open: Nav.jsx: import Link from "next/link";
import { usePathname } from "next/navigation";
import React, { useState } from 'react';
// icons
import { GrBusinessService } from "react-icons/gr"; 
import { BsPersonWorkspace } from "react-icons/bs";
import { HiHomeModern } from "react-icons/hi2";
import { SiAffinitydesigner } from "react-icons/si"; 
import { BsFillChatLeftHeartFill } from "react-icons/bs";
import { GrMail } from "react-icons/gr";

// nav data
export const navData = [
  { name: "home", path: "/", Icon: HiHomeModern },
  { name: "about", path: "/about", Icon: BsPersonWorkspace },
  { name: "services", path: "/services", Icon: GrBusinessService },
  { name: "designs", path: "/designs", Icon: SiAffinitydesigner },
  {
    name: "testimonials",
    path: "/testimonials",
    Icon: BsFillChatLeftHeartFill,
  },
  {
    name: "contact",
    path: "/contact",
    Icon: GrMail,
  },
];

const Nav = () => {
  const pathname = usePathname();
  const [isNavVisible, setIsNavVisible] = useState(false);
  const toggleNav = () => {
    setIsNavVisible(!isNavVisible);
  };

  return (
    <>
    <button
        className="hamburger-btn" // Add your styles or classes here
        onClick={toggleNav} // Attach the toggle function
        aria-label="Toggle navigation"
      >
        <div class="icon-wrapper">
          <label class="hamburger">
              <span class="hamburger-line first"></span>
              <span class="hamburger-line second"></span>
              <span class="hamburger-line third"></span>
          </label>
        </div>
    </button>
    {isNavVisible && (
      <nav className="flex flex-col items-center xl:justify-center gap-y-4 fixed h-max bottom-0 mt-auto xl:right-[2%] z-50 top-0 w-full xl:w-16 xl:max-w-md xl:h-screen">
        <div className="flex w-full xl:flex-col items-center justify-between xl:justify-center gap-y-10 px-4 md:px-40 xl:px-0 h-[80px] xl:h-max py-8 bg-white/10 backdrop-blur-sm text-3xl xl:text-xl xl:rounded-full">
          {navData.map((link, i) => (
            <Link
              className={`${
                link.path === pathname && "text-accent"
              } relative flex items-center group hover:text-accent transition-all duration-300`}
              href={link.path}
              key={i}
            >
              {/* tolltip */}
              <div
                role="tooltip"
                className="absolute pr-14 right-0 hidden xl:group-hover:flex"
              >
                <div className="bg-[#f13024] border-1 border-red relative flex text-primary items-center p-[8px] rounded-[5px]">
                  <div className="text-[14px] leading-none font-semibold text-white capitalize">
                    {link.name}
                  </div>

                  {/* triangle */}
                  <div
                    className="border-solid border-l-[#f13024] border-l-8 border-y-transparent border-y-[6px] border-r-0 absolute -right-2"
                    aria-hidden
                  />
                </div>
              </div>

              {/* icon */}
              <div>
                <link.Icon aria-hidden />
              </div>
            </Link>
          ))}
        </div>
      </nav>
    )
  }
    </>
  );
};

export default Nav;
 globals.css:@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "Elianto";
  src: url("../fonts/Manrope-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

.translate-z-0 {
  transform: translateZ(0px);
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
  .swiper-pagination-bullet {
  background-color: #f13024;
}

.swiper-button-next:after,
.swiper-button-prev:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  color: #f13024;
}

@layer base {
  body {
    @apply bg-secondary overflow-hidden leading-relaxed;
  }
  .page {
    @apply w-full h-screen overflow-hidden;
  }
  .h1 {
    @apply text-[35px] leading-tight md:text-[30px] md:leading-[1.3] mb-8 font-semibold;
  }
  .h2 {
    @apply text-[35px] leading-tight md:text-[30px] md:leading-[1.3] mb-4 font-semibold;
  }
  p {
    @apply leading-[1.8] text-white/60 font-light;
  }
  .btn,
  .input {
    @apply h-[52px];
  }
  .input {
    @apply w-full h-[52px] rounded-lg pl-6;
  }
  .input,
  .textarea {
    @apply bg-transparent outline-none focus:ring-1 focus:ring-accent border border-white/20 placeholder:text-white/30 placeholder:font-light;
  }
  .textarea {
    @apply w-full h-[180px] p-6 rounded-lg resize-none;
  }
}

.projContainer {
  display: flex;
  justify-content: space-between;
  flex-direction: row;  
  padding: 5%;
  width: 100%;
  height: 100px;
  padding-top: 18%;
}

.projContainer1 {
  font-size: 17px;
  font-weight: bold;
}

.projContainer2 {
  font-size: 12px;
}

.hideOnDesktop {
  display: none;
}

@media (max-width: 999px) {
	.mrgnt {
  margin-top: 27rem;
}
}

.typewriter::after {
  content: "|";
  display: inline-block;
  margin-left: 5px;
  animation: cursor 0.7s infinite;
  color: white;
}

@keyframes cursor {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.bold-label {
    font-weight: bold;
}

.bg-pr {
  background-color: #000011;
}

.p {
  font-size: 1rem;
}

.swiper-pagination-bullet {
  width: 16px; /* Increase width */
  height: 16px; /* Increase height */
  margin: 0 4px; /* Optional: Adjust spacing between bullets */
  opacity: 0.7; /* Optional: Adjust non-active bullets transparency */
}

.swiper-pagination-bullet-active {
  opacity: 1; /* Optional: Active bullet opacity */
}

.custom-tooltip {
  background-color: transparent !important;
  font-size: 0.7rem !important;
  border-radius: 15px !important;
}

.hamburger-btn {
  display: none; /* Hide on larger screens */
  position: fixed; /* Fixed at the top or as per your design */
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  z-index: 51; /* Higher than the nav's z-index to be clickable */
}

/* This media query will apply styles for screens smaller than 1024px */
@media (max-width: 1024px) {
  .hamburger-btn {
    display: block; /* Show the button */
  }

  /* Create hamburger lines in the button */
  .hamburger-btn::before,
  .hamburger-btn::after,
  .hamburger-btn span {
    height: 3px;
    width: 30px;
    margin: 5px auto;
  }
}

.hamburger-line {
    width: 100%;
    background: #f13024;
    height: 2px;
    display: block;
    border-radius: 6px;
    transition: transform 0.4s cubic-bezier(0.54, -0.81, 0.57, 0.57);
    position: relative;
    
    &.first,
    &.third {
      width: 50%;
    }
    
    &.third {
      margin-left: 50%;
      transform-origin: left;
    }
  }

  .hamburger-line.toggled.first {
  transform: translateX(2px) translateY(8px) rotate(-135deg);
}

.hamburger-line.toggled.third {
  transform: translateX(11px) translateY(-3px) rotate(-135deg);
}

.hamburger-line.toggled.second {
  display: none;
}