<template>
    <div class="absolute top-[5vw] md:top-0 right-0 px-[3vw] md:px-0 md:relative ">
        <div class=" flex items-center gap-[3vw] md:gap-[0.7vw]">
            <svg
            class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
            viewBox="0 0 10 53"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
              fill="#0D3F40"
            />
          </svg>
          <span
            class="text-[4.544vw] md:text-[1.69vw] text-[#383E43] font-bold -tracking-[0.05vw]"
            >آموزش HTML رایگان مقدماتی تا پیشرفته</span
          >
        </div>

        <video controls class="mt-[4vw] md:mt-[1.8vw] w-full">
          <source src="/public/video/test.mp4" type="video/mp4" />
        </video>
        <div
          class="relative flex items-center text-[4.038vw] md:text-[1.502vw] mt-[6vw] md:mt-[1.6vw] font-semibold"
        >
          آشنایی با ساختار صفحات
          <div class="absolute gap-[2vw] flex md:hidden left-0">
            <svg
              class="h-[5.641vw] w-[5.641vw]"
              viewBox="0 0 24 22"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g clip-path="url(#clip0_1_6600)">
                <path
                  d="M16.96 5.65576C18.96 6.92993 20.34 8.95576 20.62 11.2933"
                  stroke="#878787"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M3.48999 11.3392C3.74999 9.01083 5.10999 6.98499 7.08999 5.70166"
                  stroke="#878787"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M8.19 19.1951C9.35 19.7359 10.67 20.0384 12.06 20.0384C13.4 20.0384 14.66 19.7634 15.79 19.2592"
                  stroke="#878787"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M12.06 7.05834C13.5954 7.05834 14.84 5.91741 14.84 4.51C14.84 3.1026 13.5954 1.96167 12.06 1.96167C10.5247 1.96167 9.28003 3.1026 9.28003 4.51C9.28003 5.91741 10.5247 7.05834 12.06 7.05834Z"
                  stroke="#878787"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M4.82999 18.26C6.36534 18.26 7.60999 17.1191 7.60999 15.7117C7.60999 14.3043 6.36534 13.1633 4.82999 13.1633C3.29464 13.1633 2.04999 14.3043 2.04999 15.7117C2.04999 17.1191 3.29464 18.26 4.82999 18.26Z"
                  stroke="#878787"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M19.17 18.26C20.7054 18.26 21.95 17.1191 21.95 15.7117C21.95 14.3043 20.7054 13.1633 19.17 13.1633C17.6347 13.1633 16.39 14.3043 16.39 15.7117C16.39 17.1191 17.6347 18.26 19.17 18.26Z"
                  stroke="#878787"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </g>
              <defs>
                <clipPath id="clip0_1_6600">
                  <rect width="24" height="22" fill="white" />
                </clipPath>
              </defs>
            </svg>

            <svg
              class="h-[5.641vw] w-[5.641vw]"
              viewBox="0 0 22 22"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <g clip-path="url(#clip0_1_6599)">
                <path
                  d="M8.54333 10.7068L10.89 13.0535L13.2367 10.7068"
                  stroke="#383E43"
                  stroke-width="1.5"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M10.89 3.66675V12.9892"
                  stroke="#383E43"
                  stroke-width="1.5"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M18.3334 11.165C18.3334 15.2167 15.5834 18.4984 11 18.4984C6.41669 18.4984 3.66669 15.2167 3.66669 11.165"
                  stroke="#383E43"
                  stroke-width="1.5"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </g>
              <defs>
                <clipPath id="clip0_1_6599">
                  <rect width="22" height="22" fill="white" />
                </clipPath>
              </defs>
            </svg>
          </div>
        </div>
    </div>

</template>

<style scoped>
video {
    border-radius: 0.781vw;
  }
  @media (max-width: 768px) {
    video {
      border-radius: 3.846vw;
    }
  }
</style>