diff --git a/images/pVideo2.png b/images/pVideo2.png
new file mode 100644
index 0000000..e32a85d
Binary files /dev/null and b/images/pVideo2.png differ
diff --git a/index.html b/index.html
index d3c1f87..c2d8e08 100644
--- a/index.html
+++ b/index.html
@@ -21,11 +21,15 @@
     <!-- header part start -->
     <section>
       <header>
-        <div class="bg-[#050111] lg:py-4 py-6 ">
+        <div class="bg-[#050111] lg:py-4 py-6">
           <div class="max-w-container mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex flex-row items-center gap-y-3 justify-between">
               <div class="flex sm:justify-center lg:justify-start">
-                <img src="images/logo.png" alt="logo.png" class="lg:w-full w-[60%]"/>
+                <img
+                  src="images/logo.png"
+                  alt="logo.png"
+                  class="lg:w-full w-[60%]"
+                />
               </div>
               <!-- Mobile icon -->
               <div
@@ -37,7 +41,7 @@
               <!-- Mobile icon -->
               <nav class="sm:mx-auto lg:mx-0 hidden lg:block">
                 <ul
-                  class="flex flex-col sm:flex-col gap-x-10 lg:flex-row gap-y-4 text-white text-base font-semibold font-roboto lg:py-5 "
+                  class="flex flex-col sm:flex-col gap-x-10 lg:flex-row gap-y-4 text-white text-base font-semibold font-roboto lg:py-5"
                 >
                   <li><a href="#">Home</a></li>
                   <li><a href="#">About</a></li>
@@ -46,9 +50,18 @@
                   <li><a href="#">Blog</a></li>
                 </ul>
               </nav>
-              <button class="relative px-4 py-2.5 rounded-[10px] border border-[#7451FD] overflow-hidden group cursor-pointer hidden lg:block">
-                <span class="absolute inset-0 bg-gradientNew opacity-0 group-hover:opacity-100 transition-opacity duration-300">
-                </span> <p class="relative z-10 font-medium font-roboto text-base text-white">Get Enroll <i class="fa-solid fa-arrow-right-long"></i></p>
+              <button
+                class="relative px-4 py-2.5 rounded-[10px] border border-[#7451FD] overflow-hidden group cursor-pointer hidden lg:block"
+              >
+                <span
+                  class="absolute inset-0 bg-gradientNew opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                >
+                </span>
+                <p
+                  class="relative z-10 font-medium font-roboto text-base text-white"
+                >
+                  Get Enroll <i class="fa-solid fa-arrow-right-long"></i>
+                </p>
               </button>
             </div>
             <!-- Mobile Device -->
@@ -56,7 +69,7 @@
               class="absolute left-1/2 -translate-x-1/2 top-20 opacity-0 scale-95 pointer-events-none transition-all duration-300 ease-out origin-top lg:hidden flex-col items-center text-center gap-y-3 py-6 mt-5 mx-auto rounded-xl bg-[#1D1E4F]/80 shadow-xl backdrop-blur-xl border border-white/20 w-full justify-center z-99 lg:z-0"
               id="mobile-menu"
             >
-              <nav class="sm:mx-auto lg:mx-0 ">
+              <nav class="sm:mx-auto lg:mx-0">
                 <ul
                   class="flex flex-col sm:flex-col gap-x-10 lg:flex-row gap-y-10 text-white text-base font-semibold font-roboto lg:py-5"
                 >
@@ -67,19 +80,19 @@
                   <li><a href="#">Blog</a></li>
                 </ul>
               </nav>
-                  <button
-                    class="relative px-4 py-2.5 rounded-[10px] border border-[#7451FD] overflow-hidden group cursor-pointer mt-8"
-                  >
-                    <span
-                      class="absolute inset-0 bg-gradientNew opacity-0 group-hover:opacity-100 transition-opacity duration-300"
-                    >
-                    </span>
-                    <p
-                      class="relative z-10 font-medium font-roboto text-[18px] text-white"
-                    >
-                      Get Enroll<i class="fa-solid fa-arrow-right-long ml-2"></i>
-                    </p>
-                  </button>
+              <button
+                class="relative px-4 py-2.5 rounded-[10px] border border-[#7451FD] overflow-hidden group cursor-pointer mt-8"
+              >
+                <span
+                  class="absolute inset-0 bg-gradientNew opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+                >
+                </span>
+                <p
+                  class="relative z-10 font-medium font-roboto text-[18px] text-white"
+                >
+                  Get Enroll<i class="fa-solid fa-arrow-right-long ml-2"></i>
+                </p>
+              </button>
             </div>
             <!-- Mobile Device -->
           </div>
@@ -108,7 +121,6 @@
               </div>
               <!-- badge -->
               <!-- heading text -->
-              <!-- heading text -->
               <div class="pt-2">
                 <h1
                   class="lg:text-[72px] text-[35px] text-white font-extrabold font-inter lg:w-151.75 w-full text-center lg:text-left"
@@ -199,11 +211,9 @@
             <div class="right">
               <!-- input field -->
               <div
-                class="relative p-0.75 w-full rounded-[10px] overflow-hidden  shadow-newShadow"
+                class="relative p-0.75 w-full rounded-[10px] overflow-hidden shadow-newShadow"
               >
-                <div
-                  class="absolute inset-0 linearInput"
-                ></div>
+                <div class="absolute inset-0 linearInput"></div>
                 <div class="relative bg-[#050111] rounded-[9px] p-6 z-10">
                   <div class="text text-white pb-8">
                     <h3
@@ -320,42 +330,63 @@
 
     <!-- Promotion Video -->
     <section class="pt-15 pb-30 bg-[#050111]">
-      <div class="xl:bg-[url('/images/pVideo.png')] bg-no-repeat bg-center ">
+      <div
+        class="bg-[url('/images/pVideo2.png')] bg-no-repeat bg-center bg-contain"
+      >
         <div class="max-w-container mx-auto px-3">
-          
-          <h3 class="lg:text-[56px] text-[35px] font-extrabold text-center text-white leading-[130%] font-inter">
+          <h3
+            class="lg:text-[56px] text-[35px] font-extrabold text-center text-white leading-[130%] font-inter"
+          >
             Here Will Be
-            <span class="bg-linear-to-r from-[#4E95FF] to-[#7F5CFF] bg-clip-text text-transparent italic">
+            <span
+              class="bg-linear-to-r from-[#4E95FF] to-[#7F5CFF] bg-clip-text text-transparent italic"
+            >
               Promotion Video
             </span>
           </h3>
-          <p class="text-[#A9B0B8] lg:text-[18px] text-sm leading-[150%] text-center lg:w-202.5 w-full mx-auto pt-4 pb-10 font-roboto">
+          <p
+            class="text-[#A9B0B8] lg:text-[18px] text-sm leading-[150%] text-center lg:w-202.5 w-full mx-auto pt-4 pb-10 font-roboto"
+          >
             Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt eu
             est at non suscipit. Felis posuere maecenas interdum sit cras.
             Egestas sed nunc sodales arcu mi ut volutpat lobortis.
           </p>
 
-          <div class="relative p-2 rounded-2xl bg-linear-to-r from-[#4E95FF] to-[#7F5CFF] mx-auto w-fit">
-            
+          <div
+            class="relative p-2 rounded-2xl bg-linear-to-r from-[#4E95FF] to-[#7F5CFF] mx-auto lg:w-fit w-[80%]"
+          >
             <div class="relative rounded-2xl overflow-hidden bg-[#050111]">
-              <img src="images/pv.png" class="mx-auto block" alt="Promotion Video" />
-              
-              <a href="https://www.youtube.com/watch?v=TD_N2VR3P1s" target="_blank"
+              <img
+                src="images/pv.png"
+                class="mx-auto block"
+                alt="Promotion Video"
+              />
+
+              <a
+                href="https://www.youtube.com/watch?v=TD_N2VR3P1s"
+                target="_blank"
                 class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-16 h-16 lg:w-20 lg:h-20"
               >
-                <span class="absolute inline-flex h-full w-full rounded-full bg-white/70 animate-ping"></span>
-                <div class="relative z-10 w-full h-full bg-white rounded-full flex items-center justify-center shadow-[0_0_15px_rgba(0,0,0,0.5)] hover:scale-105 transition-transform duration-300">
-                  <svg class="lg:w-15 lg:h-15 w-10 h-10 text-[#E50914] ml-1" fill="currentColor" viewBox="0 0 24 24">
+                <span
+                  class="absolute inline-flex h-full w-full rounded-full bg-white/70 animate-ping"
+                ></span>
+                <div
+                  class="relative z-10 w-full h-full bg-white rounded-full flex items-center justify-center shadow-[0_0_15px_rgba(0,0,0,0.5)] hover:scale-105 transition-transform duration-300"
+                >
+                  <svg
+                    class="lg:w-15 lg:h-15 w-10 h-10 text-[#E50914] ml-1"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                  >
                     <path d="M8 5v14l11-7z" />
                   </svg>
                 </div>
               </a>
             </div>
-            
           </div>
           <div class="flex flex-col lg:flex-row gap-y-5 justify-between mt-8">
             <div class="font-roboto">
-              <h5 class="text-white text-xl font-semibold">
+              <h5 class="text-white text-xl font-semibold pb-2">
                 Some text will be here
               </h5>
               <p class="text-[#A9B0B8] text-sm leading-[150%] lg:w-82 w-full">
@@ -365,7 +396,7 @@ <h5 class="text-white text-xl font-semibold">
               </p>
             </div>
             <div class="font-roboto">
-              <h5 class="text-white text-xl font-semibold">
+              <h5 class="text-white text-xl font-semibold pb-2">
                 Some text will be here
               </h5>
               <p class="text-[#A9B0B8] text-sm leading-[150%] lg:w-82 w-full">
@@ -375,7 +406,7 @@ <h5 class="text-white text-xl font-semibold">
               </p>
             </div>
             <div class="font-roboto">
-              <h5 class="text-white text-xl font-semibold">
+              <h5 class="text-white text-xl font-semibold pb-2">
                 Some text will be here
               </h5>
               <p class="text-[#A9B0B8] text-sm leading-[150%] lg:w-82 w-full">
@@ -385,7 +416,6 @@ <h5 class="text-white text-xl font-semibold">
               </p>
             </div>
           </div>
-          
         </div>
       </div>
     </section>
@@ -393,168 +423,304 @@ <h5 class="text-white text-xl font-semibold">
 
     <!-- course module -->
     <section class="bg-[#050111]">
-      <div class="bg-[url('/images/coursemodulBg.png')] bg-no-repeat bg-center bg-cover pt-16 md:pt-20 lg:pt-26 pb-20 md:pb-24 lg:pb-32">
+      <div
+        class="bg-[url('/images/coursemodulBg.png')] bg-no-repeat bg-center bg-cover pt-16 md:pt-20 lg:pt-26 pb-20 md:pb-24 lg:pb-32"
+      >
         <div class="max-w-container w-full mx-auto px-4 md:px-8">
           <div class="text-center">
-            <h2 class="font-inter font-extrabold lg:text-[56px] md:text-[45px] text-[35px] text-white leading-[120%] pb-4 capitalize">
+            <h3
+              class="font-inter font-extrabold lg:text-[56px] md:text-[45px] text-[35px] text-white leading-[120%] pb-4 capitalize"
+            >
               Here will be
-              <span class="bg-linear-to-r from-[#7F5CFF] to-[#4E95FF] bg-clip-text text-transparent italic">
+              <span
+                class="bg-linear-to-r from-[#7F5CFF] to-[#4E95FF] bg-clip-text text-transparent italic"
+              >
                 Course Module
               </span>
-            </h2>
-            <p class="font-roboto lg:text-[18px] text-sm text-[#A9B0B8] leading-[150%] max-w-200 w-full mx-auto">
+            </h3>
+            <p
+              class="font-roboto lg:text-[18px] text-sm text-[#A9B0B8] leading-[150%] max-w-200 w-full mx-auto"
+            >
               Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt eu
               est at non suscipit. Felis posuere maecenas interdum sit cras.
               Egestas sed nunc sodales arcu mi ut volutpat lobortis.
             </p>
           </div>
-          
-          <div class="my-8 md:my-12 grid lg:grid-cols-2 grid-cols-1 gap-6 md:gap-8">
+
+          <div
+            class="my-8 md:my-12 grid lg:grid-cols-2 grid-cols-1 gap-6 md:gap-8"
+          >
             <div class="space-y-6">
-              <div class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300">
+              <div
+                class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300"
+              >
                 <div class="flex gap-3 mb-2">
                   <div class="bg-[#FBFF8D] p-1 rounded-[5px] shrink-0 h-fit">
-                    <img src="/images/courseModuleElement.png" alt="courseModuleElement" class="w-6 h-6 object-contain" />
+                    <img
+                      src="/images/courseModuleElement.png"
+                      alt="courseModuleElement"
+                      class="w-6 h-6 object-contain"
+                    />
                   </div>
                   <div class="flex items-center justify-between w-full">
-                    <h5 class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2">
+                    <h5
+                      class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2"
+                    >
                       Module title will be here
                     </h5>
                     <i class="fa-solid fa-angle-down text-[#A9B0B8]"></i>
                   </div>
                 </div>
-                <p class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11">
-                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis adipiscing sed mauris sapien. Lacus tempus nec sit nec facilisis velit. Et egestas arcu nibh in pulvinar sit. Ullamcorper turpis laoreet in ultricies at pretium ullamcorper aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut nisl faucibus mattis est et. 
+                <p
+                  class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11"
+                >
+                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis
+                  adipiscing sed mauris sapien. Lacus tempus nec sit nec
+                  facilisis velit. Et egestas arcu nibh in pulvinar sit.
+                  Ullamcorper turpis laoreet in ultricies at pretium ullamcorper
+                  aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut
+                  nisl faucibus mattis est et.
                 </p>
               </div>
 
-              <div class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300">
+              <div
+                class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300"
+              >
                 <div class="flex gap-3 mb-2">
                   <div class="bg-[#EDB5FF] p-1 rounded-[5px] shrink-0 h-fit">
-                    <img src="/images/courseModuleElement.png" alt="courseModuleElement" class="w-6 h-6 object-contain" />
+                    <img
+                      src="/images/courseModuleElement.png"
+                      alt="courseModuleElement"
+                      class="w-6 h-6 object-contain"
+                    />
                   </div>
                   <div class="flex items-center justify-between w-full">
-                    <h5 class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2">
+                    <h5
+                      class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2"
+                    >
                       Module title will be here
                     </h5>
                     <i class="fa-solid fa-angle-down text-[#A9B0B8]"></i>
                   </div>
                 </div>
-                <p class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11">
-                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis adipiscing sed mauris sapien. Lacus tempus nec sit nec facilisis velit. Et egestas arcu nibh in pulvinar sit. Ullamcorper turpis laoreet in ultricies at pretium ullamcorper aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut nisl faucibus mattis est et. 
+                <p
+                  class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11"
+                >
+                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis
+                  adipiscing sed mauris sapien. Lacus tempus nec sit nec
+                  facilisis velit. Et egestas arcu nibh in pulvinar sit.
+                  Ullamcorper turpis laoreet in ultricies at pretium ullamcorper
+                  aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut
+                  nisl faucibus mattis est et.
                 </p>
               </div>
 
-              <div class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300">
+              <div
+                class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300"
+              >
                 <div class="flex gap-3 mb-2">
                   <div class="bg-[#7DD8FF] p-1 rounded-[5px] shrink-0 h-fit">
-                    <img src="/images/courseModuleElement.png" alt="courseModuleElement" class="w-6 h-6 object-contain" />
+                    <img
+                      src="/images/courseModuleElement.png"
+                      alt="courseModuleElement"
+                      class="w-6 h-6 object-contain"
+                    />
                   </div>
                   <div class="flex items-center justify-between w-full">
-                    <h5 class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2">
+                    <h5
+                      class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2"
+                    >
                       Module title will be here
                     </h5>
                     <i class="fa-solid fa-angle-down text-[#A9B0B8]"></i>
                   </div>
                 </div>
-                <p class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11">
-                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis adipiscing sed mauris sapien. Lacus tempus nec sit nec facilisis velit. Et egestas arcu nibh in pulvinar sit. Ullamcorper turpis laoreet in ultricies at pretium ullamcorper aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut nisl faucibus mattis est et. 
+                <p
+                  class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11"
+                >
+                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis
+                  adipiscing sed mauris sapien. Lacus tempus nec sit nec
+                  facilisis velit. Et egestas arcu nibh in pulvinar sit.
+                  Ullamcorper turpis laoreet in ultricies at pretium ullamcorper
+                  aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut
+                  nisl faucibus mattis est et.
                 </p>
               </div>
 
-              <div class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300">
+              <div
+                class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300"
+              >
                 <div class="flex gap-3 mb-2">
                   <div class="bg-[#A5D0B4] p-1 rounded-[5px] shrink-0 h-fit">
-                    <img src="/images/courseModuleElement.png" alt="courseModuleElement" class="w-6 h-6 object-contain" />
+                    <img
+                      src="/images/courseModuleElement.png"
+                      alt="courseModuleElement"
+                      class="w-6 h-6 object-contain"
+                    />
                   </div>
                   <div class="flex items-center justify-between w-full">
-                    <h5 class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2">
+                    <h5
+                      class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2"
+                    >
                       Module title will be here
                     </h5>
                     <i class="fa-solid fa-angle-down text-[#A9B0B8]"></i>
                   </div>
                 </div>
-                <p class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11">
-                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis adipiscing sed mauris sapien. Lacus tempus nec sit nec facilisis velit. Et egestas arcu nibh in pulvinar sit. Ullamcorper turpis laoreet in ultricies at pretium ullamcorper aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut nisl faucibus mattis est et. 
+                <p
+                  class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11"
+                >
+                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis
+                  adipiscing sed mauris sapien. Lacus tempus nec sit nec
+                  facilisis velit. Et egestas arcu nibh in pulvinar sit.
+                  Ullamcorper turpis laoreet in ultricies at pretium ullamcorper
+                  aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut
+                  nisl faucibus mattis est et.
                 </p>
               </div>
             </div>
 
             <div class="space-y-6">
-              <div class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300">
+              <div
+                class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300"
+              >
                 <div class="flex gap-3 mb-2">
                   <div class="bg-[#96FFA2] p-1 rounded-[5px] shrink-0 h-fit">
-                    <img src="/images/courseModuleElement.png" alt="courseModuleElement" class="w-6 h-6 object-contain" />
+                    <img
+                      src="/images/courseModuleElement.png"
+                      alt="courseModuleElement"
+                      class="w-6 h-6 object-contain"
+                    />
                   </div>
                   <div class="flex items-center justify-between w-full">
-                    <h5 class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2">
+                    <h5
+                      class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2"
+                    >
                       Module title will be here
                     </h5>
                     <i class="fa-solid fa-angle-down text-[#A9B0B8]"></i>
                   </div>
                 </div>
-                <p class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11">
-                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis adipiscing sed mauris sapien. Lacus tempus nec sit nec facilisis velit. Et egestas arcu nibh in pulvinar sit. Ullamcorper turpis laoreet in ultricies at pretium ullamcorper aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut nisl faucibus mattis est et. 
+                <p
+                  class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11"
+                >
+                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis
+                  adipiscing sed mauris sapien. Lacus tempus nec sit nec
+                  facilisis velit. Et egestas arcu nibh in pulvinar sit.
+                  Ullamcorper turpis laoreet in ultricies at pretium ullamcorper
+                  aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut
+                  nisl faucibus mattis est et.
                 </p>
               </div>
 
-              <div class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300">
+              <div
+                class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300"
+              >
                 <div class="flex gap-3 mb-2">
                   <div class="bg-[#FFC081] p-1 rounded-[5px] shrink-0 h-fit">
-                    <img src="/images/courseModuleElement.png" alt="courseModuleElement" class="w-6 h-6 object-contain" />
+                    <img
+                      src="/images/courseModuleElement.png"
+                      alt="courseModuleElement"
+                      class="w-6 h-6 object-contain"
+                    />
                   </div>
                   <div class="flex items-center justify-between w-full">
-                    <h5 class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2">
+                    <h5
+                      class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2"
+                    >
                       Module title will be here
                     </h5>
                     <i class="fa-solid fa-angle-down text-[#A9B0B8]"></i>
                   </div>
                 </div>
-                <p class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11">
-                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis adipiscing sed mauris sapien. Lacus tempus nec sit nec facilisis velit. Et egestas arcu nibh in pulvinar sit. Ullamcorper turpis laoreet in ultricies at pretium ullamcorper aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut nisl faucibus mattis est et. 
+                <p
+                  class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11"
+                >
+                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis
+                  adipiscing sed mauris sapien. Lacus tempus nec sit nec
+                  facilisis velit. Et egestas arcu nibh in pulvinar sit.
+                  Ullamcorper turpis laoreet in ultricies at pretium ullamcorper
+                  aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut
+                  nisl faucibus mattis est et.
                 </p>
               </div>
 
-              <div class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300">
+              <div
+                class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300"
+              >
                 <div class="flex gap-3 mb-2">
                   <div class="bg-[#ABBED0] p-1 rounded-[5px] shrink-0 h-fit">
-                    <img src="/images/courseModuleElement.png" alt="courseModuleElement" class="w-6 h-6 object-contain" />
+                    <img
+                      src="/images/courseModuleElement.png"
+                      alt="courseModuleElement"
+                      class="w-6 h-6 object-contain"
+                    />
                   </div>
                   <div class="flex items-center justify-between w-full">
-                    <h5 class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2">
+                    <h5
+                      class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2"
+                    >
                       Module title will be here
                     </h5>
                     <i class="fa-solid fa-angle-down text-[#A9B0B8]"></i>
                   </div>
                 </div>
-                <p class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11">
-                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis adipiscing sed mauris sapien. Lacus tempus nec sit nec facilisis velit. Et egestas arcu nibh in pulvinar sit. Ullamcorper turpis laoreet in ultricies at pretium ullamcorper aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut nisl faucibus mattis est et. 
+                <p
+                  class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11"
+                >
+                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis
+                  adipiscing sed mauris sapien. Lacus tempus nec sit nec
+                  facilisis velit. Et egestas arcu nibh in pulvinar sit.
+                  Ullamcorper turpis laoreet in ultricies at pretium ullamcorper
+                  aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut
+                  nisl faucibus mattis est et.
                 </p>
               </div>
 
-              <div class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300">
+              <div
+                class="module-card p-4 w-full rounded-[10px] border border-[#7451FD] bg-[#1A2130] cursor-pointer hover:bg-[#232d42] transition-colors duration-300"
+              >
                 <div class="flex gap-3 mb-2">
                   <div class="bg-[#F68787] p-1 rounded-[5px] shrink-0 h-fit">
-                    <img src="/images/courseModuleElement.png" alt="courseModuleElement" class="w-6 h-6 object-contain" />
+                    <img
+                      src="/images/courseModuleElement.png"
+                      alt="courseModuleElement"
+                      class="w-6 h-6 object-contain"
+                    />
                   </div>
                   <div class="flex items-center justify-between w-full">
-                    <h5 class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2">
+                    <h5
+                      class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leading-[150%] pr-2"
+                    >
                       Module title will be here
                     </h5>
                     <i class="fa-solid fa-angle-down text-[#A9B0B8]"></i>
                   </div>
                 </div>
-                <p class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11">
-                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis adipiscing sed mauris sapien. Lacus tempus nec sit nec facilisis velit. Et egestas arcu nibh in pulvinar sit. Ullamcorper turpis laoreet in ultricies at pretium ullamcorper aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut nisl faucibus mattis est et. 
+                <p
+                  class="module-content hidden font-roboto font-normal text-sm text-[#A9B0B8] leading-[150%] mt-3 pl-11"
+                >
+                  Lorem ipsum dolor sit amet consectetur. Est lectus eu turpis
+                  adipiscing sed mauris sapien. Lacus tempus nec sit nec
+                  facilisis velit. Et egestas arcu nibh in pulvinar sit.
+                  Ullamcorper turpis laoreet in ultricies at pretium ullamcorper
+                  aliquet lobortis. Facilisi felis eget cras in vitae. Semper ut
+                  nisl faucibus mattis est et.
                 </p>
               </div>
             </div>
           </div>
 
           <div class="flex items-center justify-center mt-8">
-            <button class="relative py-3 px-6 rounded-[10px] border border-[#7451FD] overflow-hidden group cursor-pointer">
-              <span class="absolute inset-0 bg-gradientNew opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
-              <div class="relative z-10 font-medium font-roboto text-[16px] md:text-[18px] text-white flex items-center justify-center gap-2">
+            <button
+              class="relative py-3 px-6 rounded-[10px] border border-[#7451FD] overflow-hidden group cursor-pointer"
+            >
+              <span
+                class="absolute inset-0 bg-gradientNew opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+              ></span>
+              <div
+                class="relative z-10 font-medium font-roboto text-[16px] md:text-[18px] text-white flex items-center justify-center gap-2"
+              >
                 <span>Load More</span>
                 <i class="fa-solid fa-angle-down text-white"></i>
               </div>
@@ -567,66 +733,105 @@ <h5 class="font-roboto font-semibold md:text-[18px] text-[16px] text-white leadi
 
     <!-- Bonus Track Part Start Here -->
     <section class="bg-[#050111]">
-      <div class="bg-[url('/images/bonusTrackbg.png')] bg-no-repeat bg-center bg-cover py-12 lg:py-25">
+      <div
+        class="bg-[url('/images/bonusTrackbg.png')] bg-no-repeat bg-center bg-cover py-12 lg:py-25"
+      >
         <div class="max-w-container w-full mx-auto px-4">
-          
           <div class="text-center">
-            <h2 class="font-inter font-extrabold text-[32px] md:text-[45px] lg:text-[56px] text-white leading-[120%] pb-4 capitalize">
+            <h3
+              class="font-inter font-extrabold text-[32px] md:text-[45px] lg:text-[56px] text-white leading-[120%] pb-4 capitalize"
+            >
               Bonus Courses
-              <span class="bg-linear-to-r from-[#7F5CFF] to-[#4E95FF] bg-clip-text text-transparent italic">
+              <span
+                class="bg-linear-to-r from-[#7F5CFF] to-[#4E95FF] bg-clip-text text-transparent italic"
+              >
                 Learn For Free
               </span>
-            </h2>
-            <p class="font-roboto text-sm md:text-base lg:text-[18px] text-[#A9B0B8] leading-[150%] max-w-200 mx-auto">
+            </h3>
+            <p
+              class="font-roboto text-sm md:text-base lg:text-[18px] text-[#A9B0B8] leading-[150%] max-w-200 mx-auto"
+            >
               Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt eu
               est at non suscipit. Felis posuere maecenas interdum sit cras.
               Egestas sed nunc sodales arcu mi ut volutpat lobortis.
             </p>
           </div>
-          <div class="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
-            
-            <div class="py-6 px-4 rounded-[10px] bg-[#050111] border border-b-[#FBFF8D] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(251,255,141,0.4)] cursor-pointer">
-              <img class="mx-auto w-auto h-auto" src="/images/bonusImgOne.png" alt="Bonus One" />
+          <div
+            class="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6"
+          >
+            <div
+              class="py-6 px-4 rounded-[10px] bg-[#050111] border border-b-[#FBFF8D] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(251,255,141,0.4)] cursor-pointer"
+            >
+              <img
+                class="mx-auto w-auto h-auto"
+                src="/images/bonusImgOne.png"
+                alt="Bonus One"
+              />
               <div class="flex items-center gap-2 justify-center pt-4">
-                <p class="font-inter font-medium text-[13px] text-white leading-[150%]">
+                <p
+                  class="font-inter font-medium text-[13px] text-white leading-[150%]"
+                >
                   Journey Title will be here
                 </p>
                 <i class="fa-solid fa-arrow-right-long text-white"></i>
               </div>
             </div>
 
-            <div class="py-6 px-4 rounded-[10px] bg-[#050111] border border-b-[#7DD8FF] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(125,216,255,0.5)] cursor-pointer">
-              <img class="mx-auto w-auto h-auto" src="/images/bonusImgtwo.png" alt="Bonus Two" />
+            <div
+              class="py-6 px-4 rounded-[10px] bg-[#050111] border border-b-[#7DD8FF] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(125,216,255,0.5)] cursor-pointer"
+            >
+              <img
+                class="mx-auto w-auto h-auto"
+                src="/images/bonusImgtwo.png"
+                alt="Bonus Two"
+              />
               <div class="flex items-center gap-2 justify-center pt-4">
-                <p class="font-inter font-medium text-[13px] text-white leading-[150%]">
+                <p
+                  class="font-inter font-medium text-[13px] text-white leading-[150%]"
+                >
                   Journey Title will be here
                 </p>
                 <i class="fa-solid fa-arrow-right-long text-white"></i>
               </div>
             </div>
 
-            <div class="py-6 px-4 rounded-[10px] bg-[#050111] border border-b-[#96FFA2] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(150,255,162,0.5)] cursor-pointer">
-              <img class="mx-auto w-auto h-auto" src="/images/bonusImgthree.png" alt="Bonus Three" />
+            <div
+              class="py-6 px-4 rounded-[10px] bg-[#050111] border border-b-[#96FFA2] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(150,255,162,0.5)] cursor-pointer"
+            >
+              <img
+                class="mx-auto w-auto h-auto"
+                src="/images/bonusImgthree.png"
+                alt="Bonus Three"
+              />
               <div class="flex items-center gap-2 justify-center pt-4">
-                <p class="font-inter font-medium text-[13px] text-white leading-[150%]">
+                <p
+                  class="font-inter font-medium text-[13px] text-white leading-[150%]"
+                >
                   Journey Title will be here
                 </p>
                 <i class="fa-solid fa-arrow-right-long text-white"></i>
               </div>
             </div>
 
-            <div class="py-6 px-4 rounded-[10px] bg-[#050111] border border-b-[#EDB5FF] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(237,181,255,0.5)] cursor-pointer">
-              <img class="mx-auto w-auto h-auto" src="/images/bonusImgFour.png" alt="Bonus Four" />
+            <div
+              class="py-6 px-4 rounded-[10px] bg-[#050111] border border-b-[#EDB5FF] transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_10px_40px_-10px_rgba(237,181,255,0.5)] cursor-pointer"
+            >
+              <img
+                class="mx-auto w-auto h-auto"
+                src="/images/bonusImgFour.png"
+                alt="Bonus Four"
+              />
               <div class="flex items-center gap-2 justify-center pt-4">
-                <p class="font-inter font-medium text-[13px] text-white leading-[150%]">
+                <p
+                  class="font-inter font-medium text-[13px] text-white leading-[150%]"
+                >
                   Journey Title will be here
                 </p>
                 <i class="fa-solid fa-arrow-right-long text-white"></i>
               </div>
             </div>
-
-          </div>
           </div>
+        </div>
       </div>
     </section>
     <!-- Bonus Track Part End Here -->
@@ -635,7 +840,7 @@ <h2 class="font-inter font-extrabold text-[32px] md:text-[45px] lg:text-[56px] t
     <section id="projectsPart">
       <div class="projects">
         <div class="max-w-container mx-auto px-3">
-          <div class="heading projectsHead ">
+          <div class="heading projectsHead">
             <h3>Web Projects <span>will be here</span></h3>
             <p>
               Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt eu
@@ -761,7 +966,8 @@ <h3>An exciting <span>journey roadmap</span></h3>
           <div class="allRoadmaps">
             <div class="allRoadmapsFlex">
               <div
-                class=" bg-linear-to-br from-[#CCA3FF] via-[#050111] via-50% to-[#050111] p-0.5 lg:w-[31%] rounded-[20px]">
+                class="bg-linear-to-br from-[#CCA3FF] via-[#050111] via-50% to-[#050111] p-0.5 lg:w-[31%] rounded-[20px]"
+              >
                 <div class="roadmapContent roadmapContentFirst w-full!">
                   <div class="serial">
                     <div class="serialNum">
@@ -772,13 +978,14 @@ <h3>An exciting <span>journey roadmap</span></h3>
                   <h4>Journey Title will be here</h4>
                   <p>
                     Lorem ipsum dolor sit amet consectetur. Lectus et lobortis
-                    ultricies eget amet faucibus diam. Dictum pharetra nisi donec
-                    neque ut mauris nulla eros.
+                    ultricies eget amet faucibus diam. Dictum pharetra nisi
+                    donec neque ut mauris nulla eros.
                   </p>
                 </div>
               </div>
               <div
-                class=" bg-linear-to-tr from-[#36FF6C] via-[#050111] via-50% to-transparent p-0.5 lg:w-[31%] rounded-[20px]">
+                class="bg-linear-to-tr from-[#36FF6C] via-[#050111] via-50% to-transparent p-0.5 lg:w-[31%] rounded-[20px]"
+              >
                 <div class="roadmapContent roadmapContentFirst w-full!">
                   <div class="serial">
                     <div class="serialNum">
@@ -789,13 +996,14 @@ <h4>Journey Title will be here</h4>
                   <h4>Journey Title will be here</h4>
                   <p>
                     Lorem ipsum dolor sit amet consectetur. Lectus et lobortis
-                    ultricies eget amet faucibus diam. Dictum pharetra nisi donec
-                    neque ut mauris nulla eros.
+                    ultricies eget amet faucibus diam. Dictum pharetra nisi
+                    donec neque ut mauris nulla eros.
                   </p>
                 </div>
               </div>
               <div
-                class=" bg-linear-to-bl from-[#FFB265] via-[#050111] via-50% to-[#050111] p-0.5 lg:w-[31%] rounded-[20px]">
+                class="bg-linear-to-bl from-[#FFB265] via-[#050111] via-50% to-[#050111] p-0.5 lg:w-[31%] rounded-[20px]"
+              >
                 <div class="roadmapContent roadmapContentFirst w-full!">
                   <div class="serial">
                     <div class="serialNum">
@@ -806,13 +1014,14 @@ <h4>Journey Title will be here</h4>
                   <h4>Journey Title will be here</h4>
                   <p>
                     Lorem ipsum dolor sit amet consectetur. Lectus et lobortis
-                    ultricies eget amet faucibus diam. Dictum pharetra nisi donec
-                    neque ut mauris nulla eros.
+                    ultricies eget amet faucibus diam. Dictum pharetra nisi
+                    donec neque ut mauris nulla eros.
                   </p>
                 </div>
               </div>
               <div
-                class=" bg-linear-to-tr from-[#FF6767] via-[#050111] via-50% to-transparent p-0.5 lg:w-[48%] rounded-[20px]">
+                class="bg-linear-to-tr from-[#FF6767] via-[#050111] via-50% to-transparent p-0.5 lg:w-[48%] rounded-[20px]"
+              >
                 <div class="roadmapContent w-full!">
                   <div class="serial">
                     <div class="serialNum">
@@ -823,13 +1032,14 @@ <h4>Journey Title will be here</h4>
                   <h4>Journey Title will be here</h4>
                   <p>
                     Lorem ipsum dolor sit amet consectetur. Lectus et lobortis
-                    ultricies eget amet faucibus diam. Dictum pharetra nisi donec
-                    neque ut mauris nulla eros.
+                    ultricies eget amet faucibus diam. Dictum pharetra nisi
+                    donec neque ut mauris nulla eros.
                   </p>
                 </div>
               </div>
               <div
-                class=" bg-linear-to-tl from-[#5BA7FF] via-[#050111] via-50% to-[#050111] p-0.5 lg:w-[48%] rounded-[20px]">
+                class="bg-linear-to-tl from-[#5BA7FF] via-[#050111] via-50% to-[#050111] p-0.5 lg:w-[48%] rounded-[20px]"
+              >
                 <div class="roadmapContent w-full!">
                   <div class="serial">
                     <div class="serialNum">
@@ -840,12 +1050,11 @@ <h4>Journey Title will be here</h4>
                   <h4>Journey Title will be here</h4>
                   <p>
                     Lorem ipsum dolor sit amet consectetur. Lectus et lobortis
-                    ultricies eget amet faucibus diam. Dictum pharetra nisi donec
-                    neque ut mauris nulla eros.
+                    ultricies eget amet faucibus diam. Dictum pharetra nisi
+                    donec neque ut mauris nulla eros.
                   </p>
                 </div>
               </div>
-
             </div>
           </div>
         </div>
@@ -856,17 +1065,29 @@ <h4>Journey Title will be here</h4>
     <!--Our Students & Stories Part start-->
     <section class="py-10 lg:py-24 bg-[#050111] px-4 sm:px-6 lg:px-10">
       <div class="text-center mb-12 lg:mb-16">
-        <h2 class="text-white text-[35px] lg:text-[56px] font-extrabold font-Inter">
+        <h3
+          class="text-white text-[35px] lg:text-[56px] font-extrabold font-Inter"
+        >
           Our Students
-          <span class="bg-linear-to-r from-[#7F5CFF] to-[#4E95FF] bg-clip-text text-transparent italic">Shared Their Stories</span>
-        </h2>
-        <p class="text-[#A9B0B8] font-Roboto lg:text-[18px] text-sm max-w-2xl mx-auto mt-4">
-          Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt eu est at non suscipit.
+          <span
+            class="bg-linear-to-r from-[#7F5CFF] to-[#4E95FF] bg-clip-text text-transparent italic"
+            >Shared Their Stories</span
+          >
+        </h3>
+        <p
+          class="text-[#A9B0B8] font-Roboto lg:text-[18px] text-sm max-w-2xl mx-auto mt-4"
+        >
+          Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt eu est
+          at non suscipit.
         </p>
       </div>
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto"
+      >
         <!-- Card One -->
-        <div class="bg-[#FDF5E6] flex flex-col sm:flex-row items-stretch rounded-3xl overflow-hidden p-3 min-h-75 sm:min-h-70">
+        <div
+          class="bg-[#FDF5E6] flex flex-col sm:flex-row items-stretch rounded-3xl overflow-hidden p-3 min-h-75 sm:min-h-70"
+        >
           <div class="w-full sm:w-[40%]">
             <img
               src="images/Rafi.png"
@@ -874,23 +1095,33 @@ <h2 class="text-white text-[35px] lg:text-[56px] font-extrabold font-Inter">
               class="w-full h-full object-cover rounded-[18px]"
             />
           </div>
-          <div class="w-full sm:w-[60%] pl-4 flex flex-col justify-center py-4 sm:py-2">
+          <div
+            class="w-full sm:w-[60%] pl-4 flex flex-col justify-center py-4 sm:py-2 font-roboto"
+          >
             <div class="flex items-center gap-1 mb-2">
               <span class="font-bold text-lg">5.0</span>
               <div class="text-[#FF9B03] flex text-xs">
-                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
+                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i
+                ><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i
+                ><i class="fa-solid fa-star"></i>
               </div>
             </div>
             <p class="text-[#38435C] text-[13px] leading-relaxed mb-4">
-              Lorem ipsum dolor sit amet consectetur. Lectus et lobortis ultricies eget amet faucibus diam. Dictum pharetra nisi donec neque ut mauris nulla eros.
+              Lorem ipsum dolor sit amet consectetur. Lectus et lobortis
+              ultricies eget amet faucibus diam. Dictum pharetra nisi donec
+              neque ut mauris nulla eros.
             </p>
             <h5 class="text-[18px] font-bold text-[#050111]">Mesbaul Haque</h5>
-            <p class="text-[12px] text-[#38435C] font-medium">Batch - FDR 2504</p>
+            <p class="text-[12px] text-[#38435C] font-medium">
+              Batch - FDR 2504
+            </p>
           </div>
         </div>
 
         <!-- Card Two -->
-        <div class="bg-[#EFF8F2] flex flex-col sm:flex-row items-stretch rounded-3xl overflow-hidden p-3 min-h-75 sm:min-h-70">
+        <div
+          class="bg-[#EFF8F2] flex flex-col sm:flex-row items-stretch rounded-3xl overflow-hidden p-3 min-h-75 sm:min-h-70"
+        >
           <div class="w-full sm:w-[40%]">
             <img
               src="images/majharul.jpg"
@@ -898,23 +1129,33 @@ <h5 class="text-[18px] font-bold text-[#050111]">Mesbaul Haque</h5>
               class="w-full h-full object-cover rounded-[18px]"
             />
           </div>
-          <div class="w-full sm:w-[60%] pl-4 flex flex-col justify-center py-4 sm:py-2">
+          <div
+            class="w-full sm:w-[60%] pl-4 flex flex-col justify-center py-4 sm:py-2 font-roboto"
+          >
             <div class="flex items-center gap-1 mb-2">
               <span class="font-bold text-lg">5.0</span>
               <div class="text-[#FF9B03] flex text-xs">
-                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
+                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i
+                ><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i
+                ><i class="fa-solid fa-star"></i>
               </div>
             </div>
             <p class="text-[#38435C] text-[13px] leading-relaxed mb-4">
-              Lorem ipsum dolor sit amet consectetur. Lectus et lobortis ultricies eget amet faucibus diam. Dictum pharetra nisi donec neque ut mauris nulla eros.
+              Lorem ipsum dolor sit amet consectetur. Lectus et lobortis
+              ultricies eget amet faucibus diam. Dictum pharetra nisi donec
+              neque ut mauris nulla eros.
             </p>
             <h5 class="text-[18px] font-bold text-[#050111]">Majharul Islam</h5>
-            <p class="text-[12px] text-[#38435C] font-medium">Batch - FDR 2504</p>
+            <p class="text-[12px] text-[#38435C] font-medium">
+              Batch - FDR 2504
+            </p>
           </div>
         </div>
 
         <!-- Card Three -->
-        <div class="bg-white flex flex-col sm:flex-row items-stretch rounded-3xl overflow-hidden p-3 min-h-75 sm:min-h-70">
+        <div
+          class="bg-white flex flex-col sm:flex-row items-stretch rounded-3xl overflow-hidden p-3 min-h-75 sm:min-h-70"
+        >
           <div class="w-full sm:w-[40%]">
             <img
               src="images/Shoumen Biswas.jpg"
@@ -922,18 +1163,26 @@ <h5 class="text-[18px] font-bold text-[#050111]">Majharul Islam</h5>
               class="w-full h-full object-cover rounded-[18px]"
             />
           </div>
-          <div class="w-full sm:w-[60%] pl-4 flex flex-col justify-center py-4 sm:py-2">
+          <div
+            class="w-full sm:w-[60%] pl-4 flex flex-col justify-center py-4 sm:py-2 font-roboto"
+          >
             <div class="flex items-center gap-1 mb-2">
               <span class="font-bold text-lg">5.0</span>
               <div class="text-[#FF9B03] flex text-xs">
-                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
+                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i
+                ><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i
+                ><i class="fa-solid fa-star"></i>
               </div>
             </div>
             <p class="text-[#38435C] text-[13px] leading-relaxed mb-4">
-              Lorem ipsum dolor sit amet consectetur. Lectus et lobortis ultricies eget amet faucibus diam. Dictum pharetra nisi donec neque ut mauris nulla eros.
+              Lorem ipsum dolor sit amet consectetur. Lectus et lobortis
+              ultricies eget amet faucibus diam. Dictum pharetra nisi donec
+              neque ut mauris nulla eros.
             </p>
             <h5 class="text-[18px] font-bold text-[#050111]">Shoumen Biswas</h5>
-            <p class="text-[12px] text-[#38435C] font-medium">Batch - FDR 2504</p>
+            <p class="text-[12px] text-[#38435C] font-medium">
+              Batch - FDR 2504
+            </p>
           </div>
         </div>
       </div>
@@ -952,7 +1201,9 @@ <h5 class="text-[18px] font-bold text-[#050111]">Shoumen Biswas</h5>
           <div
             class="lg:py-17.5 py-10 px-3 lg:px-15.75 bg-[url('/images/careerStart.png')] bg-center bg-cover bg-no-repeat border border-[#7451FD] rounded-[20px] relative z-50"
           >
-            <div class="flex flex-col lg:flex-row gap-y-8 justify-between lg:gap-x-10 xl:gap-x-10">
+            <div
+              class="flex flex-col lg:flex-row gap-y-8 justify-between lg:gap-x-10 xl:gap-x-10"
+            >
               <div class="left">
                 <h3
                   class="lg:text-[56px] text-[35px] lg:text-left text-center font-extrabold font-inter text-white"
@@ -981,7 +1232,7 @@ <h3 class="text-brand">Start Your Career</h3>
                   </p>
                 </div>
                 <div class="pt-6">
-                  <img src="images/icons.png" alt="" class="mx-auto"/>
+                  <img src="images/icons.png" alt="" class="mx-auto" />
                 </div>
               </div>
               <!-- right side -->
@@ -990,9 +1241,7 @@ <h3 class="text-brand">Start Your Career</h3>
                 <div
                   class="relative p-0.75 w-full rounded-[10px] overflow-hidden shadow-newShadow"
                 >
-                  <div
-                    class="absolute inset-0 linearInput"
-                  ></div>
+                  <div class="absolute inset-0 linearInput"></div>
                   <div class="relative bg-[#050111] rounded-[9px] p-6 z-10">
                     <div class="text text-white pb-8">
                       <h3
@@ -1094,7 +1343,9 @@ <h3 class="text-brand">Start Your Career</h3>
                       </p>
                     </button>
                     <div class="pt-4">
-                      <p class="text-[14px] text-[#A9B0B8] text-center">
+                      <p
+                        class="text-[14px] text-[#A9B0B8] text-center font-inter"
+                      >
                         Lorem ipsum dolor sit amet consectetur.
                       </p>
                     </div>
@@ -1127,7 +1378,7 @@ <h3 class="text-brand">Start Your Career</h3>
     <!-- Development Banner Part -->
 
     <!-- Faq part -->
-    <section class="lg:py-[120px] py-[50px] relative bg-[#050111]">
+    <section class="lg:py-30 py-12.5 relative bg-[#050111]">
       <!-- Container -->
       <!-- BG Image -->
       <img
@@ -1144,16 +1395,16 @@ <h3 class="text-brand">Start Your Career</h3>
       <div class="lg:max-w-container w-full mx-auto px-2 lg:px-0">
         <!-- Header -->
         <h3
-          class="lg:text-[56px] text-[35px] font-extrabold text-center text-white"
+          class="lg:text-[56px] text-[35px] font-extrabold text-center text-white font-inter"
         >
           Frequently Asked
           <span
-            class="bg-gradient-to-r from-[#4E95FF] to-[#7F5CFF] bg-clip-text text-transparent italic"
+            class="bg-linear-to-r from-[#4E95FF] to-[#7F5CFF] bg-clip-text text-transparent italic"
             >Questions</span
           >
         </h3>
         <p
-          class="text-[#A9B0B8] lg:text-lg text-sm leading-[150%] text-center lg:w-[809px] mx-auto pt-4 pb-8"
+          class="text-[#A9B0B8] lg:text-lg text-sm leading-[150%] text-center lg:w-202.25 mx-auto pt-4 pb-8 font-roboto"
         >
           Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt eu est
           at non suscipit. Felis posuere maecenas interdum sit cras. Egestas sed
@@ -1162,34 +1413,43 @@ <h3 class="text-brand">Start Your Career</h3>
         <!-- Header -->
         <!-- Content -->
         <div
-          class="lg:w-[872px] w-full mx-auto flex-col lg:gap-y-6 gap-y-4 flex max-width"
+          class="lg:w-218 w-full mx-auto flex-col lg:gap-y-6 gap-y-4 flex max-width"
         >
-        <div class="w-full lg:w-218">
-          <div class="relative rounded-2xl p-[2px]">
-            <div class="rounded-2xl bg-[#100F28] p-6 relative cursor-pointer">
-              <h3 class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full">
-                Title wil be here for the frequently asked question
-              </h3>
-              <p
-              class="leading-[150%] mt-4 lg:w-[760px] w-[320px] lg:text-lg text-[13px] text-[#A9B0B8]"
+          <div class="w-full lg:w-218">
+            <div class="relative rounded-2xl p-0.5">
+              <div
+                class="rounded-2xl bg-[#100F28] p-6 relative cursor-pointer font-roboto"
               >
-              Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt
-              eu est at non suscipit. Felis posuere maecenas interdum sit
-              cras. Egestas sed nunc sodales arcu mi ut volutpat lobortis.
-            </p>
-            <i
-            class="fa-solid fa-minus absolute lg:top-1 top-3 right-4 text-2xl text-transparent bg-clip-text bg-linear-to-r from-[#4E95FF] to-[#7F5CFF]"
-            ></i>
+                <h3
+                  class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full"
+                >
+                  Title wil be here for the frequently asked question
+                </h3>
+                <p
+                  class="leading-[150%] mt-4 lg:w-190 w-[320px] lg:text-lg text-[13px] text-[#A9B0B8]"
+                >
+                  Lorem ipsum dolor sit amet consectetur. Orci est elit
+                  tincidunt eu est at non suscipit. Felis posuere maecenas
+                  interdum sit cras. Egestas sed nunc sodales arcu mi ut
+                  volutpat lobortis.
+                </p>
+                <i
+                  class="fa-solid fa-minus absolute lg:top-1 top-3 right-4 text-2xl text-transparent bg-clip-text bg-linear-to-r from-[#4E95FF] to-[#7F5CFF]"
+                ></i>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-          <div class="relative rounded-2xl p-[2px]">
-            <div class="rounded-2xl bg-[#100F28] p-6 relative cursor-pointer">
-              <h3 class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full">
+          <div class="relative rounded-2xl p-0.5">
+            <div
+              class="rounded-2xl bg-[#100F28] p-6 relative cursor-pointer font-roboto"
+            >
+              <h3
+                class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full"
+              >
                 Title wil be here for the frequently asked question
               </h3>
               <p
-                class="leading-[150%] mt-4 lg:w-[760px] w-[320px] lg:text-lg text-[13px] text-[#A9B0B8]"
+                class="leading-[150%] mt-4 lg:w-190 w-[320px] lg:text-lg text-[13px] text-[#A9B0B8]"
               >
                 Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt
                 eu est at non suscipit. Felis posuere maecenas interdum sit
@@ -1201,13 +1461,17 @@ <h3 class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full">
               ></i>
             </div>
           </div>
-          <div class="relative rounded-2xl p-[2px]">
-            <div class="rounded-2xl bg-[#100F28] p-6 relative cursor-pointer">
-              <h3 class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full">
+          <div class="relative rounded-2xl p-0.5">
+            <div
+              class="rounded-2xl bg-[#100F28] p-6 relative cursor-pointer font-roboto"
+            >
+              <h3
+                class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full"
+              >
                 Title wil be here for the frequently asked question
               </h3>
               <p
-                class="leading-[150%] mt-4 lg:w-[760px] w-[320px] lg:text-lg text-[13px] text-[#A9B0B8]"
+                class="leading-[150%] mt-4 lg:w-190 w-[320px] lg:text-lg text-[13px] text-[#A9B0B8]"
               >
                 Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt
                 eu est at non suscipit. Felis posuere maecenas interdum sit
@@ -1219,13 +1483,17 @@ <h3 class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full">
               ></i>
             </div>
           </div>
-          <div class="relative rounded-2xl p-[2px]">
-            <div class="rounded-2xl bg-[#100F28] p-6 relative cursor-pointer">
-              <h3 class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full">
+          <div class="relative rounded-2xl p-0.5">
+            <div
+              class="rounded-2xl bg-[#100F28] p-6 relative cursor-pointer font-roboto"
+            >
+              <h3
+                class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full"
+              >
                 Title wil be here for the frequently asked question
               </h3>
               <p
-                class="leading-[150%] mt-4 lg:w-[760px] w-[320px] lg:text-lg text-[13px] text-[#A9B0B8]"
+                class="leading-[150%] mt-4 lg:w-190 w-[320px] lg:text-lg text-[13px] text-[#A9B0B8]"
               >
                 Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt
                 eu est at non suscipit. Felis posuere maecenas interdum sit
@@ -1233,17 +1501,21 @@ <h3 class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full">
               </p>
 
               <i
-                class="fa-solid fa-minus absolute lg:top-1 top-3 right-4 text-2xl text-transparent bg-clip-text bg-gradient-to-r from-[#4E95FF] to-[#7F5CFF]"
+                class="fa-solid fa-minus absolute lg:top-1 top-3 right-4 text-2xl text-transparent bg-clip-text bg-linear-to-r from-[#4E95FF] to-[#7F5CFF]"
               ></i>
             </div>
           </div>
-          <div class="relative rounded-2xl p-[2px]">
-            <div class="rounded-2xl bg-[#100F28] p-6 relative cursor-pointer">
-              <h3 class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full">
+          <div class="relative rounded-2xl p-0.5">
+            <div
+              class="rounded-2xl bg-[#100F28] p-6 relative cursor-pointer font-roboto"
+            >
+              <h3
+                class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full"
+              >
                 Title wil be here for the frequently asked question
               </h3>
               <p
-                class="leading-[150%] mt-4 lg:w-[760px] w-[320px] lg:text-lg text-[13px] text-[#A9B0B8]"
+                class="leading-[150%] mt-4 lg:w-190 w-[320px] lg:text-lg text-[13px] text-[#A9B0B8]"
               >
                 Lorem ipsum dolor sit amet consectetur. Orci est elit tincidunt
                 eu est at non suscipit. Felis posuere maecenas interdum sit
@@ -1251,7 +1523,7 @@ <h3 class="text-white font-semibold lg:text-lg text-[12px] lg:w-full w-full">
               </p>
 
               <i
-                class="fa-solid fa-minus absolute lg:top-1 top-3 right-4 text-2xl text-transparent bg-clip-text bg-gradient-to-r from-[#4E95FF] to-[#7F5CFF]"
+                class="fa-solid fa-minus absolute lg:top-1 top-3 right-4 text-2xl text-transparent bg-clip-text bg-linear-to-r from-[#4E95FF] to-[#7F5CFF]"
               ></i>
             </div>
           </div>
@@ -1336,7 +1608,7 @@ <h4 class="text-[#A9B0B8] text-base font-semibold font-roboto">
                   Office - Main Campus
                 </h4>
                 <p
-                  class="text-[#6F7B88] text-[12px] font-medium font-inter w-full max-w-[220px] mx-auto leading-[150%] mt-2"
+                  class="text-[#6F7B88] text-[12px] font-medium font-inter w-full max-w-55 mx-auto leading-[150%] mt-2"
                 >
                   Momtaz Plaza, Dhanmondi, Dhaka +880 1777308777, +880
                   1624666000
@@ -1348,7 +1620,7 @@ <h4 class="text-[#A9B0B8] text-base font-semibold font-roboto">
                   02 - Dhanmondi
                 </h4>
                 <p
-                  class="text-[#6F7B88] text-[12px] font-medium font-inter w-full max-w-[220px] mx-auto leading-[150%] mt-2"
+                  class="text-[#6F7B88] text-[12px] font-medium font-inter w-full max-w-55 mx-auto leading-[150%] mt-2"
                 >
                   Meher Plaza, Dhanmondi, Dhaka +880 1625555444, +880 1990779782
                 </p>
@@ -1361,7 +1633,7 @@ <h4 class="text-[#A9B0B8] text-base font-semibold font-roboto">
                   Branch
                 </h4>
                 <p
-                  class="text-[#6F7B88] text-[12px] font-medium font-inter w-full max-w-[235px] mx-auto leading-[150%] mt-2"
+                  class="text-[#6F7B88] text-[12px] font-medium font-inter w-full max-w-58.75 mx-auto leading-[150%] mt-2"
                 >
                   El Mercado, Dhaka 1216 <br />
                   +88013 100 100 27 , +880 1924 222 999
@@ -1396,7 +1668,8 @@ <h4 class="text-[#A9B0B8] text-base font-semibold font-roboto">
                 <p
                   class="text-[#6F7B88] text-[12px] font-medium font-inter w-full max-w-70 mx-auto leading-[150%] mt-2"
                 >
-                  9 No, Kapasgola Road Chawk Bazar, Chattogram +880 1847422965,+880 1847422968
+                  9 No, Kapasgola Road Chawk Bazar, Chattogram +880
+                  1847422965,+880 1847422968
                 </p>
               </div>
               <!-- panchagarh branch -->
@@ -1408,7 +1681,7 @@ <h4 class="text-[#A9B0B8] text-base font-semibold font-roboto">
                   Panchagarh Branch
                 </h4>
                 <p
-                  class="text-[#6F7B88] text-[12px] font-medium font-inter w-full max-w-[200px] mx-auto leading-[150%] mt-2"
+                  class="text-[#6F7B88] text-[12px] font-medium font-inter w-full max-w-50 mx-auto leading-[150%] mt-2"
                 >
                   Abdul Aziz Super Market, Panchagarh Bazar, 01704048383
                 </p>
@@ -1422,7 +1695,7 @@ <h4 class="text-[#A9B0B8] text-base font-semibold font-roboto">
                   Branch
                 </h4>
                 <p
-                  class="text-[#6F7B88] text-[12px] font-medium font-inter w-full max-w-[265px] mx-auto leading-[150%] mt-2"
+                  class="text-[#6F7B88] text-[12px] font-medium font-inter w-full max-w-66.25 mx-auto leading-[150%] mt-2"
                 >
                   61 Lakewood Ave, Saint John, New Brunswick E2J 3N9, Canada +1
                   672-377-9977
diff --git a/src/input.css b/src/input.css
index 5b88774..3b4bc49 100644
--- a/src/input.css
+++ b/src/input.css
@@ -49,7 +49,6 @@
 }
 /* animation linear bg */
 
-/* Ashfak Maumud */
 /* ============= */
 /* Common Start */
 
@@ -68,9 +67,11 @@
 /* Common End */
 
 /* Projects Part Start */
+
 /* #projectsPart {
   @apply bg-[#050111];
 } */
+
 .projects {
   @apply bg-[url('/images/projectsBG.png')] bg-no-repeat bg-cover bg-center lg:py-28.5 md:py-12 py-10;
 }
@@ -218,4 +219,3 @@
 
 /* Roadmap Part End */
 /* ============= */
-/* Ashfak Maumud */
diff --git a/src/output.css b/src/output.css
index 0733d4a..bbb9f04 100644
--- a/src/output.css
+++ b/src/output.css
@@ -219,9 +219,6 @@
   .end {
     inset-inline-end: var(--spacing);
   }
-  .top-1 {
-    top: calc(var(--spacing) * 1);
-  }
   .top-1\/2 {
     top: calc(1 / 2 * 100%);
   }
@@ -243,9 +240,6 @@
   .bottom-5 {
     bottom: calc(var(--spacing) * 5);
   }
-  .left-1 {
-    left: calc(var(--spacing) * 1);
-  }
   .left-1\/2 {
     left: calc(1 / 2 * 100%);
   }
@@ -264,24 +258,6 @@
   .z-99 {
     z-index: 99;
   }
-  .container {
-    width: 100%;
-    @media (width >= 40rem) {
-      max-width: 40rem;
-    }
-    @media (width >= 48rem) {
-      max-width: 48rem;
-    }
-    @media (width >= 64rem) {
-      max-width: 64rem;
-    }
-    @media (width >= 80rem) {
-      max-width: 80rem;
-    }
-    @media (width >= 96rem) {
-      max-width: 96rem;
-    }
-  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -342,9 +318,6 @@
   .inline-flex {
     display: inline-flex;
   }
-  .table {
-    display: table;
-  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -387,15 +360,15 @@
   .w-\[60\%\] {
     width: 60%;
   }
+  .w-\[80\%\] {
+    width: 80%;
+  }
   .w-\[320px\] {
     width: 320px;
   }
   .w-auto {
     width: auto;
   }
-  .w-fit {
-    width: fit-content;
-  }
   .w-full {
     width: 100%;
   }
@@ -408,57 +381,40 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-50 {
+    max-width: calc(var(--spacing) * 50);
+  }
+  .max-w-55 {
+    max-width: calc(var(--spacing) * 55);
+  }
+  .max-w-58\.75 {
+    max-width: calc(var(--spacing) * 58.75);
+  }
   .max-w-60 {
     max-width: calc(var(--spacing) * 60);
   }
+  .max-w-66\.25 {
+    max-width: calc(var(--spacing) * 66.25);
+  }
   .max-w-70 {
     max-width: calc(var(--spacing) * 70);
   }
   .max-w-200 {
     max-width: calc(var(--spacing) * 200);
   }
-  .max-w-\[200px\] {
-    max-width: 200px;
-  }
-  .max-w-\[220px\] {
-    max-width: 220px;
-  }
-  .max-w-\[235px\] {
-    max-width: 235px;
-  }
-  .max-w-\[265px\] {
-    max-width: 265px;
-  }
   .max-w-container {
     max-width: var(--spacing-container);
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
-  .flex-grow {
-    flex-grow: 1;
-  }
-  .border-collapse {
-    border-collapse: collapse;
-  }
   .origin-top {
     transform-origin: top;
   }
-  .-translate-x-1 {
-    --tw-translate-x: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .-translate-y-1 {
-    --tw-translate-y: calc(var(--spacing) * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -469,18 +425,12 @@
     --tw-scale-z: 95%;
     scale: var(--tw-scale-x) var(--tw-scale-y);
   }
-  .transform {
-    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
-  }
   .animate-ping {
     animation: var(--animate-ping);
   }
   .cursor-pointer {
     cursor: pointer;
   }
-  .resize {
-    resize: both;
-  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -615,9 +565,6 @@
   .border-\[\#FFC081\] {
     border-color: #FFC081;
   }
-  .border-white {
-    border-color: var(--color-white);
-  }
   .border-white\/20 {
     border-color: color-mix(in srgb, #fff 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -762,6 +709,9 @@
   .bg-\[url\(\'\/images\/coursemodulBg\.png\'\)\] {
     background-image: url('/images/coursemodulBg.png');
   }
+  .bg-\[url\(\'\/images\/pVideo2\.png\'\)\] {
+    background-image: url('/images/pVideo2.png');
+  }
   .bg-gradientNew {
     background-image: var(--background-image-gradientNew);
   }
@@ -817,6 +767,9 @@
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
+  .bg-contain {
+    background-size: contain;
+  }
   .bg-cover {
     background-size: cover;
   }
@@ -835,9 +788,6 @@
   .object-cover {
     object-fit: cover;
   }
-  .p-0 {
-    padding: calc(var(--spacing) * 0);
-  }
   .p-0\.5 {
     padding: calc(var(--spacing) * 0.5);
   }
@@ -859,9 +809,6 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
-  .p-\[2px\] {
-    padding: 2px;
-  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -901,12 +848,12 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .py-12\.5 {
+    padding-block: calc(var(--spacing) * 12.5);
+  }
   .py-40 {
     padding-block: calc(var(--spacing) * 40);
   }
-  .py-\[50px\] {
-    padding-block: 50px;
-  }
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
@@ -1105,9 +1052,6 @@
   .overline {
     text-decoration-line: overline;
   }
-  .underline {
-    text-decoration-line: underline;
-  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -1123,19 +1067,11 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
   .backdrop-blur-xl {
     --tw-backdrop-blur: blur(var(--blur-xl));
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
-  .backdrop-filter {
-    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
-  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1314,16 +1250,6 @@
       margin-block: calc(var(--spacing) * 12);
     }
   }
-  .md\:w-79 {
-    @media (width >= 48rem) {
-      width: calc(var(--spacing) * 79);
-    }
-  }
-  .md\:w-80 {
-    @media (width >= 48rem) {
-      width: calc(var(--spacing) * 80);
-    }
-  }
   .md\:w-81 {
     @media (width >= 48rem) {
       width: calc(var(--spacing) * 81);
@@ -1354,11 +1280,6 @@
       gap: calc(var(--spacing) * 8);
     }
   }
-  .md\:px-3 {
-    @media (width >= 48rem) {
-      padding-inline: calc(var(--spacing) * 3);
-    }
-  }
   .md\:px-4 {
     @media (width >= 48rem) {
       padding-inline: calc(var(--spacing) * 4);
@@ -1495,11 +1416,21 @@
       width: calc(var(--spacing) * 151.75);
     }
   }
+  .lg\:w-190 {
+    @media (width >= 64rem) {
+      width: calc(var(--spacing) * 190);
+    }
+  }
   .lg\:w-202\.5 {
     @media (width >= 64rem) {
       width: calc(var(--spacing) * 202.5);
     }
   }
+  .lg\:w-202\.25 {
+    @media (width >= 64rem) {
+      width: calc(var(--spacing) * 202.25);
+    }
+  }
   .lg\:w-218 {
     @media (width >= 64rem) {
       width: calc(var(--spacing) * 218);
@@ -1520,19 +1451,9 @@
       width: 48%;
     }
   }
-  .lg\:w-\[760px\] {
-    @media (width >= 64rem) {
-      width: 760px;
-    }
-  }
-  .lg\:w-\[809px\] {
+  .lg\:w-fit {
     @media (width >= 64rem) {
-      width: 809px;
-    }
-  }
-  .lg\:w-\[872px\] {
-    @media (width >= 64rem) {
-      width: 872px;
+      width: fit-content;
     }
   }
   .lg\:w-full {
@@ -1676,11 +1597,6 @@
       padding-block: calc(var(--spacing) * 30);
     }
   }
-  .lg\:py-\[120px\] {
-    @media (width >= 64rem) {
-      padding-block: 120px;
-    }
-  }
   .lg\:pt-0 {
     @media (width >= 64rem) {
       padding-top: calc(var(--spacing) * 0);
@@ -1784,11 +1700,6 @@
       column-gap: calc(var(--spacing) * 10);
     }
   }
-  .xl\:bg-\[url\(\'\/images\/pVideo\.png\'\)\] {
-    @media (width >= 80rem) {
-      background-image: url('/images/pVideo.png');
-    }
-  }
   .xl\:text-\[56px\] {
     @media (width >= 80rem) {
       font-size: 56px;
@@ -2167,26 +2078,6 @@
   inherits: false;
   initial-value: 1;
 }
-@property --tw-rotate-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-y {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-rotate-z {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-x {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-skew-y {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -2312,11 +2203,6 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
@@ -2376,11 +2262,6 @@
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;
-      --tw-rotate-x: initial;
-      --tw-rotate-y: initial;
-      --tw-rotate-z: initial;
-      --tw-skew-x: initial;
-      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
@@ -2408,7 +2289,6 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;
diff --git a/src/script.js b/src/script.js
index c5d3aed..afddcf1 100644
--- a/src/script.js
+++ b/src/script.js
@@ -21,7 +21,7 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 });
-
+// course module
 // faq
 document.addEventListener("DOMContentLoaded", () => {
   const faqWrappers = document.querySelectorAll(
@@ -50,7 +50,7 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   });
 });
-
+// faq
 // dropdown
 const toggleBtn = document.getElementById("menu-toggle");
 const menu = document.getElementById("mobile-menu");
@@ -67,4 +67,4 @@ document.addEventListener("click", function (e) {
     menu.classList.add("opacity-0", "scale-95", "pointer-events-none");
   }
 });
-
+// dropdown