upcoming events dynamaic

app/(event)/upcoming-event/[slug]/page.jsx

@@ -1,31 +1,60 @@
 import UpcomingEventSinglePage from "@/components/events/UpcomingEventSinglePage";
-import { events } from "@/utility/constant.utils";
 
-const getEvent = (slug) => events.find((event) => event.slug === slug);
+export const dynamic = 'force-dynamic';
+export const revalidate = 0;
 
-export function generateStaticParams() {
+export async function generateStaticParams() {
-    return events
+    try {
-        .filter((event) => event.slug)
+        const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
-        .map((event) => ({
+        const res = await fetch(`${API_BASE_URL}/upcoming-events`);
-            slug: event.slug,
+        const data = await res.json();
-        }));
+        if (data && data.success && data.data && data.data.length > 0) {
+            const paramsList = [];
+            data.data.forEach(event => {
+                if (event.slug && String(event.slug).trim()) {
+                    paramsList.push({ slug: String(event.slug).trim() });
+                }
+                if (event.id) {
+                    paramsList.push({ slug: String(event.id) });
+                }
+                const title = event.title || event.eventtitle || '';
+                if (title) {
+                    const titleSlug = String(title).toLowerCase().trim().replace(/\s+/g, '-').replace(/[^\w\-]+/g, '');
+                    if (titleSlug) {
+                        paramsList.push({ slug: titleSlug });
+                    }
+                }
+            });
+            return paramsList.length > 0 ? paramsList : [{ slug: 'default' }];
+        }
+    } catch (e) {
+        console.error("Error in generateStaticParams:", e);
+    }
+    return [{ slug: 'default' }];
 }
 
 export async function generateMetadata({ params }) {
-    const event = getEvent(params.slug);
+    try {
-
+        const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
-    if (!event) {
+        const res = await fetch(`${API_BASE_URL}/upcoming-events/slug/${params.slug}`);
+        const data = await res.json();
+        if (data && data.success && data.data) {
+            const event = data.data;
             return {
-            title: "Upcoming Event | Tamil Culture Waterloo",
+                title: `${event.title || event.eventtitle} | Tamil Culture Waterloo`,
+                description: event.description || event.eventdescription || `Details for ${event.title || event.eventtitle}.`,
             };
         }
+    } catch (e) {
+        console.error("Error in generateMetadata:", e);
+    }
     
     return {
-        title: `${event.title} | Tamil Culture Waterloo`,
+        title: "Upcoming Event | Tamil Culture Waterloo",
-        description: event.desc || `Details for ${event.title}.`,
     };
 }
 
 export default function Page({ params }) {
     return <UpcomingEventSinglePage slug={params.slug} />;
 }
+

components/events/UpcomingEventData.jsx

@@ -1,11 +1,37 @@
 'use client'
 import Link from 'next/link'
 import moment from "moment";
-import { useState } from "react"
+import { useState, useEffect } from "react"
-import { events } from "@/utility/constant.utils"; // <-- import the events array here
+import axios from "axios";
 
 export default function UpcomingEventData() {
     const [currentMonth, setCurrentMonth] = useState(moment());
+    const [events, setEvents] = useState([]);
+
+    useEffect(() => {
+        const fetchEvents = async () => {
+            try {
+                const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
+                const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
+                if (response.data && response.data.success) {
+                    const normalizedEvents = response.data.data.map(e => ({
+                        ...e,
+                        title: e.title || e.eventtitle,
+                        date: e.date || e.eventdate,
+                        image: e.image || e.eventimageurl,
+                        desc: e.description || e.eventdescription,
+                        btnText: e.btn_text || e.btnText,
+                        link: e.link || (e.slug ? `/upcoming-event/${e.slug}` : `/upcoming-event/${e.id}`),
+                        location: e.location || e.venue,
+                    }));
+                    setEvents(normalizedEvents);
+                }
+            } catch (error) {
+                console.error("Error fetching upcoming events:", error);
+            }
+        };
+        fetchEvents();
+    }, []);
 
     // Get start and end of current month
     const startOfMonth = currentMonth.clone().startOf("month");
@@ -135,11 +161,10 @@ export default function UpcomingEventData() {
                                         return (
                                             <div key={event.id} className="mb-5">
                                                 <div className="row align-items-center">
-                                                    <div className="col-lg-1" />
+                                                    <div className="col-lg-12">
-                                                    <div className="col-lg-10 m-auto">
+                                                        <div className="event2-boxarea box1">
-                                                        <div className="event2-boxarea box1 d-flex flex-wrap align-items-center">
+                                                            <h1 className="active">{String(idx + 1).padStart(2, "0")}</h1>
-                                                            <h1 className="active me-3">{String(idx + 1).padStart(2, "0")}</h1>
+                                                            <div className="row align-items-center">
-
                                                                 {!isEven ? (
                                                                     <>
                                                                         <div className="col-lg-5">
@@ -148,9 +173,9 @@ export default function UpcomingEventData() {
                                                                             </div>
                                                                         </div>
 
-                                                                    <div className="col-lg-1" />
+                                                                        <div className="col-lg-2" />
 
-                                                                    <div className="col-lg-6">
+                                                                        <div className="col-lg-5">
                                                                             <div className="content-area">
                                                                                 <ul>
                                                                                     <li>
@@ -199,7 +224,7 @@ export default function UpcomingEventData() {
                                                                     </>
                                                                 ) : (
                                                                     <>
-                                                                    <div className="col-lg-6">
+                                                                        <div className="col-lg-5">
                                                                             <div className="content-area">
                                                                                 <ul>
                                                                                     <li>
@@ -245,7 +270,7 @@ export default function UpcomingEventData() {
                                                                             </div>
                                                                         </div>
 
-                                                                    <div className="col-lg-1" />
+                                                                        <div className="col-lg-2" />
 
                                                                         <div className="col-lg-5">
                                                                             <div className="img1">
@@ -258,6 +283,7 @@ export default function UpcomingEventData() {
                                                         </div>
                                                     </div>
                                                 </div>
+                                            </div>
                                         );
                                     })}
                                 </div>

components/events/UpcomingEventSinglePage.jsx

@@ -1,7 +1,9 @@
+'use client'
 import Layout from "@/components/layout/Layout";
 import Link from "next/link";
 import moment from "moment";
-import { events } from "@/utility/constant.utils";
+import { useState, useEffect } from "react";
+import axios from "axios";
 
 const formatEventDate = (dateStr) => {
     if (!dateStr) return "Details will be announced";
@@ -12,11 +14,79 @@ const formatEventDate = (dateStr) => {
     });
 };
 
-export default function UpcomingEventSinglePage({ slug }) {
+import { useSearchParams } from "next/navigation";
-    const event = events.find((item) => item.slug === slug);
+
+export default function UpcomingEventSinglePage({ slug: propSlug }) {
+    const searchParams = useSearchParams();
+    const [event, setEvent] = useState(null);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        let activeSlug = propSlug;
+        if (!activeSlug && searchParams) {
+            activeSlug = searchParams.get('slug') || searchParams.get('id');
+        }
+        if (!activeSlug && typeof window !== 'undefined') {
+            const parts = window.location.pathname.split('/').filter(Boolean);
+            if (parts.length > 0) {
+                activeSlug = parts[parts.length - 1];
+            }
+        }
+
+        const fetchEvent = async () => {
+            try {
+                const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
+                const response = await axios.get(`${API_BASE_URL}/upcoming-events/slug/${activeSlug}`);
+                if (response.data && response.data.success) {
+                    const e = response.data.data;
+                    setEvent({
+                        ...e,
+                        title: e.title || e.eventtitle,
+                        date: e.date || e.eventdate,
+                        image: e.image || e.eventimageurl,
+                        desc: e.description || e.eventdescription,
+                        btnText: e.btn_text || e.btnText,
+                        link: e.link || `/upcoming-event/${e.slug}`,
+                        location: e.location || e.venue,
+                    });
+                }
+            } catch (error) {
+                console.error("Error fetching event details:", error);
+            } finally {
+                setLoading(false);
+            }
+        };
+        if (activeSlug) {
+            fetchEvent();
+        } else {
+            setLoading(false);
+        }
+    }, [propSlug, searchParams]);
+
+    if (loading) {
+        return (
+            <Layout headerStyle={1} footerStyle={1}>
+                <div style={{ padding: '150px 0', textAlign: 'center' }}>
+                    <div className="spinner-border" role="status">
+                        <span className="visually-hidden">Loading...</span>
+                    </div>
+                </div>
+            </Layout>
+        );
+    }
 
     if (!event) {
-        return null;
+        return (
+            <Layout headerStyle={1} footerStyle={1}>
+                <div style={{ padding: '150px 0', textAlign: 'center' }}>
+                    <h2>Event not found</h2>
+                    <div className="space20" />
+                    <Link href="/upcoming-event" className="vl-btn3">
+                        <span className="demo">Back to Events</span>
+                    </Link>
+                </div>
+            </Layout>
+        );
     }
 
     const eventDate = formatEventDate(event.date);

components/home/HomeUpcomingEvent.tsx

@@ -1,16 +1,40 @@
 'use client'
 import Link from 'next/link'
-import { useState } from "react"
+import { useState, useEffect } from "react"
-import { events } from "@/utility/constant.utils" // import your events array
+import axios from "axios"
+import { events as staticEvents } from "@/utility/constant.utils"
 
 export default function HomeUpcomingEvent() {
     const [isTab, setIsTab] = useState(1)
-    const handleTab = (i: number) => {
+    const [liveEvents, setLiveEvents] = useState<any[]>([])
-        setIsTab(i)
-    }
 
-    // Take only the first 3 events
+    useEffect(() => {
-    const displayEvents = events.slice(0, 3) as any[];
+        const fetchEvents = async () => {
+            try {
+                const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
+                const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
+                if (response.data && response.data.success && response.data.data.length > 0) {
+                    const normalizedEvents = response.data.data.map((e: any) => ({
+                        ...e,
+                        title: e.title || e.eventtitle,
+                        date: e.date || e.eventdate,
+                        image: e.image || e.eventimageurl,
+                        desc: e.description || e.desc || e.eventdescription,
+                        btnText: e.btn_text || e.btnText,
+                        link: e.link || `/upcoming-event/${e.slug || e.id}`,
+                        location: e.location || e.venue,
+                    }));
+                    setLiveEvents(normalizedEvents);
+                }
+            } catch (error) {
+                console.error("Error fetching homepage upcoming events:", error);
+            }
+        };
+        fetchEvents();
+    }, []);
+
+    // Take only the first 3 events from API or fallback
+    const displayEvents = (liveEvents.length > 0 ? liveEvents : staticEvents).slice(0, 3) as any[];
 
     return (
         <>
@@ -50,8 +74,8 @@ export default function HomeUpcomingEvent() {
                                                                                     <img src={event.image} alt={event.title} />
                                                                                 </div>
                                                                             </div>
-                                                                        <div className="col-lg-1" />
+                                                                            <div className="col-lg-2" />
-                                                                        <div className="col-lg-6">
+                                                                            <div className="col-lg-5">
                                                                                 <div className="content-area">
                                                                                     <ul>
                                                                                         <li>
@@ -100,7 +124,7 @@ export default function HomeUpcomingEvent() {
                                                                         </>
                                                                     ) : (
                                                                         <>
-                                                                        <div className="col-lg-6 order-2 order-lg-1">
+                                                                            <div className="col-lg-5 order-2 order-lg-1">
                                                                                 <div className="content-area">
                                                                                     <ul>
                                                                                         <li>
@@ -147,7 +171,8 @@ export default function HomeUpcomingEvent() {
                                                                                 </div>
                                                                                 <div className="space30 d-lg-none d-block" />
                                                                             </div>
-                                                                        <div className="col-lg-5 order-1 order-lg-2">
+                                                                            <div className="col-lg-2 order-1 order-lg-2" />
+                                                                            <div className="col-lg-5 order-1 order-lg-3">
                                                                                 <div className="img1">
                                                                                     <img src={event.image} alt={event.title} />
                                                                                 </div>

components/layout/MobileMenu.tsx

@@ -1,11 +1,31 @@
 'use client'
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Link from 'next/link'
-import { events } from "@/utility/constant.utils";
+import axios from "axios";
 
 export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
 	const [isAccordion, setIsAccordion] = useState<number | null>(null);
-	const upcomingEvents = events.filter((event: any) => event.link);
+	const [upcomingEvents, setUpcomingEvents] = useState<any[]>([]);
+
+	useEffect(() => {
+		const fetchEvents = async () => {
+			try {
+				const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
+				const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
+				if (response.data && response.data.success) {
+					const evts = response.data.data.map((e: any) => ({
+						id: e.id,
+						title: e.title || e.eventtitle,
+						link: e.link || (e.slug ? `/upcoming-event/${e.slug}` : `/upcoming-event/${e.id}`)
+					}));
+					setUpcomingEvents(evts);
+				}
+			} catch (error) {
+				console.error("Error fetching upcoming events for mobile menu:", error);
+			}
+		};
+		fetchEvents();
+	}, []);
 
 	const handleAccordion = (key: any) => {
 		setIsAccordion(prevState => prevState === key ? null : key)
@@ -105,13 +125,8 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
 							</ul>
 						</li>
 						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 5 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(5)}><em /></span>
-							<Link href="#" className="hash-nav">Events</Link>
+							<Link href="/upcoming-event" className="hash-nav">Upcoming Event</Link>
 							<ul className={`sub-menu ${isAccordion === 5 ? "open-sub" : ""}`} style={{ display: `${isAccordion === 5 ? "block" : "none"}` }}>
-								<li className={`hash-has-sub ${subAccordion === 1 ? "open-sub" : ""}`}>
-									<Link href="/upcoming-event" className="hash-nav" onClick={() => setSubAccordion(subAccordion === 1 ? 0 : 1)}>
-										Upcoming Event
-									</Link>
-									<ul className={`sub-menu ${subAccordion === 1 ? "open-sub" : ""}`} style={{ display: subAccordion === 1 ? "block" : "none" }}>
 								{upcomingEvents.map((event: any) => (
 									<li key={event.id}>
 										<Link href={event.link} className="hash-nav">
@@ -121,11 +136,6 @@ export default function MobileMenu({ isMobileMenu, handleMobileMenu }: any) {
 								))}
 							</ul>
 						</li>
-								<li>
-									<Link href="/photo-gallery" className="hash-nav">Photos Gallery</Link>
-								</li>
-							</ul>
-						</li>
 						<li className="has-sub hash-has-sub"><span className={`submenu-button ${isAccordion == 2 ? "submenu-opened" : ""}`} onClick={() => handleAccordion(2)}><em /></span>
 							<Link href="#" className="hash-nav">Registration	</Link>
 							<ul className={`sub-menu ${isAccordion == 2 ? "open-sub" : ""}`} style={{ display: `${isAccordion == 2 ? "block" : "none"}` }}>

components/layout/header/Header1.tsx

@@ -1,17 +1,37 @@
 "use client";
 
 import Link from "next/link";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Autoplay, Pagination } from "swiper/modules";
-import { events } from "@/utility/constant.utils";
+import axios from "axios";
 import "swiper/css";
 import "swiper/css/pagination";
 
 export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSearch, handleSearch }: any) {
 
 	const [mobileMenu, setMobileMenu] = useState(false);
-	const upcomingEvents = events.filter((event: any) => event.link);
+	const [upcomingEvents, setUpcomingEvents] = useState<any[]>([]);
+
+	useEffect(() => {
+		const fetchEvents = async () => {
+			try {
+				const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3006/api';
+				const response = await axios.get(`${API_BASE_URL}/upcoming-events`);
+				if (response.data && response.data.success) {
+					const evts = response.data.data.map((e: any) => ({
+						id: e.id,
+						title: e.title || e.eventtitle,
+						link: e.link || (e.slug ? `/upcoming-event/${e.slug}` : `/upcoming-event/${e.id}`)
+					}));
+					setUpcomingEvents(evts);
+				}
+			} catch (error) {
+				console.error("Error fetching upcoming events for header:", error);
+			}
+		};
+		fetchEvents();
+	}, []);
 
 	return (
 		<>
@@ -55,7 +75,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 					style={{ background: "#000000ff", borderTop: "1px solid #cbc5c557" }}
 				>
 
-					<div className="container">
+					<div className="container-fluid px-3 px-xl-5">
 						<div className="row">
 							<div className="col-lg-12">
 								<div className="header-elements">
@@ -63,7 +83,7 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 										<Link href="/"><img src="/assets/img/logo-tca.png" alt="logo" /></Link>
 									</div>
 									<div className="main-menu">
-										<ul>
+										<ul style={{ display: 'flex', alignItems: 'center', flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
 											<li>
 												<Link href="/#">Home</Link>
 												{/* <div className="tp-submenu">
@@ -235,13 +255,8 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 												</ul>
 											</li>
 											<li>
-												<Link href="#">Events <i className="fa-solid fa-angle-down" /></Link>
+												<Link href="/upcoming-event">Upcoming Event <i className="fa-solid fa-angle-down" /></Link>
 												<ul className="dropdown-padding">
-													<li className="dropdown-submenu">
-														<Link href="/upcoming-event">
-															Upcoming Event <i className="fa-solid fa-angle-down" />
-														</Link>
-														<ul className="submenu">
 													{upcomingEvents.map((event: any) => (
 														<li key={event.id}>
 															<Link href={event.link}>
@@ -251,9 +266,6 @@ export default function Header1({ scroll, isMobileMenu, handleMobileMenu, isSear
 													))}
 												</ul>
 											</li>
-													{/* <li><Link href="/photo-gallery">Photos Gallery</Link></li> */}
-												</ul>
-											</li>
 											<li>
 												<Link href="/photo-gallery">Photos Gallery</Link>
 											</li>

next.config.mjs

@@ -1,8 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: "export",
   reactStrictMode: false,
-  trailingSlash: true, // if needed for static export
+  trailingSlash: true,
 };
 
 export default nextConfig;

public/assets/css/main.css

@@ -9762,7 +9762,7 @@ html {
 	color: #000000cf;
 	display: inline-block;
 	transition: all 0.4s;
-	padding: 0 20px;
+	padding: 0 12px;
 }
 
 .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li:hover>a {
@@ -9795,7 +9795,9 @@ html {
 	position: absolute;
 	background: var(--ztc-text-text-1);
 	top: 100px;
-	width: 225px;
+	min-width: 360px;
+	width: max-content;
+	max-width: 440px;
 	z-index: 1;
 	transition: all 0.4s;
 	border-radius: 5px;
@@ -9875,11 +9877,13 @@ html {
 	font-weight: var(--ztc-weight-medium);
 	transition: all 0.4s;
 	padding: 8px;
-	display: inline-block;
+	display: block;
 	position: relative;
 	z-index: 1;
 	border-radius: 4px;
 	color: var(--ztc-text-text-2);
+	white-space: normal;
+	word-break: break-word;
 }
 
 .homepage1-body .header-area.homepage1 .header-elements .main-menu ul li ul.dropdown-padding li a::after {
@@ -10252,7 +10256,9 @@ html {
 	background: var(--ztc-text-text-1);
 	top: 201.3%;
 	transform: scale(1, 0);
-	width: 225px;
+	min-width: 360px;
+	width: max-content;
+	max-width: 440px;
 	z-index: 0;
 	transition: all 0.4s;
 	border-radius: 5px;
@@ -18048,7 +18054,8 @@ html {
 	content: "";
 	height: 93%;
 	width: 1px;
-	left: 45.7%;
+	left: 50%;
+	transform: translateX(-50%);
 	top: 0;
 	transition: all 0.4s;
 	background: #E6E7E8;
@@ -18082,7 +18089,8 @@ html {
 	background: #FFBA00;
 	border-radius: 50%;
 	position: absolute;
-	left: 43%;
+	left: 50%;
+	transform: translateX(-50%);
 	top: 88px;
 	z-index: 1;
 }
@@ -24348,7 +24356,8 @@ html {
 	content: "";
 	height: 93%;
 	width: 1px;
-	left: 45.7%;
+	left: 50%;
+	transform: translateX(-50%);
 	top: 0;
 	transition: all 0.4s;
 	background: #E6E7E8;
@@ -24382,7 +24391,8 @@ html {
 	background: var(--ztc-text-text-15);
 	border-radius: 50%;
 	position: absolute;
-	left: 43%;
+	left: 50%;
+	transform: translateX(-50%);
 	top: 88px;
 	z-index: 1;
 }
@@ -25296,7 +25306,8 @@ html {
 	content: "";
 	height: 93%;
 	width: 1px;
-	left: 45.7%;
+	left: 50%;
+	transform: translateX(-50%);
 	top: 0;
 	transition: all 0.4s;
 	background: #E6E7E8;
@@ -25330,7 +25341,8 @@ html {
 	background: #FFBA00;
 	border-radius: 50%;
 	position: absolute;
-	left: 43%;
+	left: 50%;
+	transform: translateX(-50%);
 	top: 88px;
 	z-index: 1;
 }
@@ -25610,7 +25622,8 @@ html {
 	content: "";
 	height: 93%;
 	width: 1px;
-	left: 45.7%;
+	left: 50%;
+	transform: translateX(-50%);
 	top: 0;
 	transition: all 0.4s;
 	background: #5D9BFA;
@@ -25644,7 +25657,8 @@ html {
 	background: linear-gradient(135deg, #FF7A00 0%, #F00 100%);
 	border-radius: 50%;
 	position: absolute;
-	left: 43%;
+	left: 50%;
+	transform: translateX(-50%);
 	top: 88px;
 	z-index: 1;
 }
@@ -26989,7 +27003,8 @@ html {
 	content: "";
 	height: 93%;
 	width: 1px;
-	left: 45.7%;
+	left: 50%;
+	transform: translateX(-50%);
 	top: 0;
 	transition: all 0.4s;
 	background: #E6E7E8;
@@ -27023,7 +27038,8 @@ html {
 	background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
 	border-radius: 50%;
 	position: absolute;
-	left: 43%;
+	left: 50%;
+	transform: translateX(-50%);
 	top: 88px;
 	z-index: 1;
 }

public/assets/scss/layout/header/_header-1.scss

@@ -158,7 +158,7 @@ html {
 							color: var(--ztc-text-text-2);
 							display: inline-block;
 							transition: all .4s;
-							padding: 0 20px;
+							padding: 0 12px;
 						}
 
 						&:hover>a {
@@ -192,7 +192,9 @@ html {
 							position: absolute;
 							background: var(--ztc-text-text-1);
 							top: 100px;
-							width: 225px;
+							min-width: 360px;
+							width: max-content;
+							max-width: 440px;
 							z-index: 1;
 							transition: all .4s;
 							border-radius: 5px;

public/assets/scss/layout/pages/_event.scss

@@ -597,7 +597,8 @@
 						content: "";
 						height: 93%;
 						width: 1px;
-						left: 45.7%;
+						left: 50%;
+						transform: translateX(-50%);
 						top: 0;
 						transition: all 0.4s;
 						background: #E6E7E8;
@@ -627,7 +628,8 @@
 						background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
 						border-radius: 50%;
 						position: absolute;
-						left: 43%;
+						left: 50%;
+						transform: translateX(-50%);
 						top: 88px;
 						z-index: 1;
 
@@ -1558,7 +1560,8 @@
 						content: "";
 						height: 93%;
 						width: 1px;
-						left: 45.7%;
+						left: 50%;
+						transform: translateX(-50%);
 						top: 0;
 						transition: all 0.4s;
 						background: #E6E7E8;
@@ -1588,7 +1591,8 @@
 						background: #FFBA00;
 						border-radius: 50%;
 						position: absolute;
-						left: 43%;
+						left: 50%;
+						transform: translateX(-50%);
 						top: 88px;
 						z-index: 1;
 
@@ -1871,7 +1875,8 @@
 				content: "";
 				height: 93%;
 				width: 1px;
-				left: 45.7%;
+				left: 50%;
+				transform: translateX(-50%);
 				top: 0;
 				transition: all 0.4s;
 				background: #5D9BFA;
@@ -1901,7 +1906,8 @@
 				background: linear-gradient(135deg, #FF7A00 0%, #F00 100%);
 				border-radius: 50%;
 				position: absolute;
-				left: 43%;
+				left: 50%;
+				transform: translateX(-50%);
 				top: 88px;
 				z-index: 1;
 
@@ -2967,7 +2973,8 @@
 						content: "";
 						height: 93%;
 						width: 1px;
-						left: 45.7%;
+						left: 50%;
+						transform: translateX(-50%);
 						top: 0;
 						transition: all 0.4s;
 						background: #E6E7E8;
@@ -2997,7 +3004,8 @@
 						background: var(--LLL, linear-gradient(135deg, #FF5000 0%, #FF00B8 100%));
 						border-radius: 50%;
 						position: absolute;
-						left: 43%;
+						left: 50%;
+						transform: translateX(-50%);
 						top: 88px;
 						z-index: 1;