diff --git a/frontend/components/home/Hero.vue b/frontend/components/home/Hero.vue
index 7628c02..078f021 100644
--- a/frontend/components/home/Hero.vue
+++ b/frontend/components/home/Hero.vue
@@ -122,7 +122,7 @@ onMounted(() => {
         end: "bottom top"
     });
 
-    setTimeout(() => {
+    const calculateOnResize = () => {
         if (window.innerWidth > 768) {
             gsap.to("#header-navbar", {
                 background: "transparent",
@@ -133,19 +133,18 @@ onMounted(() => {
             resetTimelineForMobile();
             scrollTrigger.disable();
         }
+    }
+
+    setTimeout(() => {
+        calculateOnResize()
     }, 100);
 
+    setTimeout(() => {
+        calculateOnResize()
+    }, 200);
+
     window.addEventListener("resize", () => {
-        if (window.innerWidth > 768) {
-            gsap.to("#header-navbar", {
-                background: "transparent",
-                filter: "invert(100%)"
-            });
-            scrollTrigger.enable();
-        } else {
-            resetTimelineForMobile();
-            scrollTrigger.disable();
-        }
+        calculateOnResize()
     });
 
 });
@@ -170,7 +169,7 @@ onUnmounted(() => {
                 :centered-slides="true"
                 :breakpoints="{
                     768: {
-                        spaceBetween : 40
+                        spaceBetween : 40,
                     }
                 }"
                 @swiper="onSwiper"
@@ -178,96 +177,97 @@ onUnmounted(() => {
                 <SwiperSlide
                     v-for="(slide, index) in homeData!.sliders"
                     :key="slide.id"
-                    class="max-md:container"
                 >
-                    <div
-                        class="header-slider-item relative w-full overflow-hidden max-md:rounded-[20px]"
-                    >
-                        <template v-if="!!slide.video">
-                            <video
-                                :id="`slide-video-${index}`"
-                                :muted="swiper_instance?.realIndex !== index ? true : isMuted"
-                                loop
-                                class="slide-video absolute inset-0 size-full object-cover brightness-90"
-                                :src="slide.video"
-                            />
-                        </template>
-
-                        <img
-                            v-else
-                            class="absolute inset-0 size-full object-cover"
-                            :src="slide.image!"
-                            :alt="slide.title"
-                        />
-
-                        <div class="size-full absolute z-10 bg-linear-to-t from-black/50 to-transparent" />
-
+                    <div class="max-md:container">
                         <div
-                            :class="swiper_instance?.realIndex !== index ? 'opacity-0' : ''"
-                            class="w-full transition-opacity pb-6 xs:pb-10 lg:pb-16 px-6 xs:px-10 lg:px-16 gap-6 xs:gap-10 lg:gap-12 container flex flex-col h-full justify-end relative z-10"
+                            class="header-slider-item relative w-full overflow-hidden max-md:rounded-[20px]"
                         >
+                            <template v-if="!!slide.video">
+                                <video
+                                    :id="`slide-video-${index}`"
+                                    :muted="swiper_instance?.realIndex !== index ? true : isMuted"
+                                    loop
+                                    class="slide-video absolute inset-0 size-full object-cover brightness-90"
+                                    :src="slide.video"
+                                />
+                            </template>
 
-                            <div class="header-slider-item-child w-full">
-                                <div class="border-b border-white/10 pb-6 flex flex-col gap-2 md:gap-4">
-                                    <div class="flex items-center gap-4 lg:gap-8">
-                                        <div
-                                            class="hover:scale-110 size-[36px] md:size-[42px] lg:size-[50px] relative flex items-center justify-center">
-                                            <div class="size-full scale-75 bg-white absolute rounded-full animate-ping" />
-                                            <button
-                                                @click="isMuted = !isMuted"
-                                                class="transition-all cursor-pointer flex-center bg-white z-10 size-full rounded-full"
-                                            >
-                                                <Icon
-                                                    :name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
-                                                    class="text-black size-4 md:size-[18px] lg:size-[24px]"
-                                                />
-                                            </button>
+                            <img
+                                v-else
+                                class="absolute inset-0 size-full object-cover"
+                                :src="slide.image!"
+                                :alt="slide.title"
+                            />
+
+                            <div class="size-full absolute z-10 bg-linear-to-t from-black/50 to-transparent" />
+
+                            <div
+                                :class="swiper_instance?.realIndex !== index ? 'opacity-0' : ''"
+                                class="w-full transition-opacity pb-6 xs:pb-10 lg:pb-16 px-6 xs:px-10 lg:px-16 gap-6 xs:gap-10 lg:gap-12 container flex flex-col h-full justify-end relative z-10"
+                            >
+
+                                <div class="header-slider-item-child w-full">
+                                    <div class="border-b border-white/10 pb-6 flex flex-col gap-2 md:gap-4">
+                                        <div class="flex items-center gap-4 lg:gap-8">
+                                            <div
+                                                class="hover:scale-110 size-[36px] md:size-[42px] lg:size-[50px] relative flex items-center justify-center">
+                                                <div class="size-full scale-75 bg-white absolute rounded-full animate-ping" />
+                                                <button
+                                                    @click="isMuted = !isMuted"
+                                                    class="transition-all cursor-pointer flex-center bg-white z-10 size-full rounded-full"
+                                                >
+                                                    <Icon
+                                                        :name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
+                                                        class="text-black size-4 md:size-[18px] lg:size-[24px]"
+                                                    />
+                                                </button>
+                                            </div>
+                                            <h3 class="typo-h-6 md:typo-h-4 lg:typo-h-1 tracking-[-2px] text-white">
+                                                {{ slide.title }}
+                                            </h3>
                                         </div>
-                                        <h3 class="typo-h-6 md:typo-h-4 lg:typo-h-1 tracking-[-2px] text-white">
-                                            {{ slide.title }}
-                                        </h3>
-                                    </div>
-                                    <div class="flex justify-between items-center">
+                                        <div class="flex justify-between items-center">
                                         <span class="truncate typo-p-xs md:typo-p-sm lg:typo-p-lg text-white">
                                             {{ slide.description }}
                                         </span>
-                                        <Button
-                                            class="max-sm:hidden max-lg:typo-label-xs invert rounded-full hover:bg-transparent">
-                                            مشاهده
-                                        </Button>
+                                            <Button
+                                                class="max-sm:hidden max-lg:typo-label-xs invert rounded-full hover:bg-transparent">
+                                                مشاهده
+                                            </Button>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
 
-                            <div
-                                id="header-slider-pagination-child"
-                                class="flex items-center justify-between"
-                            >
-                                <button @click="swiper_instance?.slidePrev()">
-                                    <Icon
-                                        class="**:stroke-white cursor-pointer size-5 md:size-6"
-                                        name="ci:arrow-right"
-                                    />
-                                </button>
-                                <div class="flex items-center justify-center gap-3 text-white">
-                                    <div
-                                        v-for="(_slide, index) in homeData!.sliders"
-                                        :class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
-                                        class="border border-white size-2 md:size-3 rounded-full transition-all duration-200"
-                                    >
+                                <div
+                                    id="header-slider-pagination-child"
+                                    class="flex items-center justify-between"
+                                >
+                                    <button @click="swiper_instance?.slidePrev()">
+                                        <Icon
+                                            class="**:stroke-white cursor-pointer size-5 md:size-6"
+                                            name="ci:arrow-right"
+                                        />
+                                    </button>
+                                    <div class="flex items-center justify-center gap-3 text-white">
+                                        <div
+                                            v-for="(_slide, index) in homeData!.sliders"
+                                            :class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
+                                            class="border border-white size-2 md:size-3 rounded-full transition-all duration-200"
+                                        >
+                                        </div>
                                     </div>
+                                    <button>
+                                        <Icon
+                                            @click="swiper_instance?.slideNext()"
+                                            class="**:stroke-white cursor-pointer size-5 md:size-6"
+                                            name="ci:arrow-left"
+                                        />
+                                    </button>
                                 </div>
-                                <button>
-                                    <Icon
-                                        @click="swiper_instance?.slideNext()"
-                                        class="**:stroke-white cursor-pointer size-5 md:size-6"
-                                        name="ci:arrow-left"
-                                    />
-                                </button>
+
                             </div>
 
                         </div>
-
                     </div>
                 </SwiperSlide>
             </Swiper>